<template>
    <div class="chart-outer">
        <div ref="chartRef" class="real-chart"></div>
    </div>
</template>
<script>
export default {
    name: 'ganttChart',
    data() {
        return {

        }
    },

    mounted() {

    },

    methods: {

    },

}
</script>
<style lang="less"  scoped>
.chart-outer {
    width: 100%;
    height: 116px;
    overflow: hidden;
    position: relative;

    /* overflow-y: auto;
        overflow-x: hidden; */
    .real-chart {
        z-index: 1;
        width: 100%;
        margin-top: 6px;
        height: calc(100% - 6px);
    }

    &::after {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 24px;
        background: #2cd0ff;
        opacity: 0.3;
        bottom: 1px;
        z-index: 0;
    }
}
</style>