diff --git a/package.json b/package.json
index cd449de339fb76a2dd80ed81548d06e741a9c936..5b73ba5cab04d7e192e0b1cdbf12682a1e0e3d8c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
+    "less-loader": "5.0.0",
     "vue": "^2.6.14",
     "vue-router": "3"
   },
diff --git a/src/components/ganttchart/index.vue b/src/components/ganttchart/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cdeb3b5058bf9f158df3b0bffe22afb01dd00a4
--- /dev/null
+++ b/src/components/ganttchart/index.vue
@@ -0,0 +1,53 @@
+<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>
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index eec74ce282fc58256c4cc007de2ffae016684e3d..38ae65291f82bd16f46227d291a3e8ef539b5246 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -27,7 +27,7 @@ export default [
                 path:'gantt',
                 name:'Gantt',
                 meta:{title:'甘特图'},
-                component:() => import('@/views/Echarts/GanttChart.vue')
+                component:() => import('@/views/Echarts/GanttChartDemo.vue')
             }
         ]
     }
diff --git a/src/views/Echarts/GanttChart.vue b/src/views/Echarts/GanttChartDemo.vue
similarity index 57%
rename from src/views/Echarts/GanttChart.vue
rename to src/views/Echarts/GanttChartDemo.vue
index f7799d4c1e3b6f0c683a78f6a7bc04be4549caa9..e0aecac60a415d7975ccbc1ff43b40725f19753a 100644
--- a/src/views/Echarts/GanttChart.vue
+++ b/src/views/Echarts/GanttChartDemo.vue
@@ -1,11 +1,14 @@
 <template>
     <div>
-        gantt
+        <h3>甘特图测试</h3>
+        <GanttChart/>
     </div>
 </template>
 <script>
+    import GanttChart from '@/components/ganttchart'
     export default{
-        name:'gantt',
+        name:'GanttChartDemo',
+        components:{GanttChart},
         data(){
             return {
 
diff --git a/vue.config.js b/vue.config.js
index 9ac713aecfe74c3872ffecaa3af3cd0c97929304..285bbb0e1e2d2e2f5447822a9c7b86674337859a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,5 +7,15 @@ module.exports = defineConfig({
     // port: 8089,
     historyApiFallback: true,
     allowedHosts: "all"
+  },
+  css:{
+    // 配置less 预处理样式
+    loaderOptions:{
+      less:{
+        lessOptions:{
+          javascriptEnabled:true
+        }
+      }
+    }
   }
 })
diff --git a/yarn.lock b/yarn.lock
index c32e8cbebf8eac8d56c5516c551c8ed6d29cc302..e9528d9c30155269f5aae4c8a618be403ee30a26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2383,6 +2383,11 @@ clone@^1.0.2:
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4076,6 +4081,15 @@ launch-editor@^2.2.1, launch-editor@^2.6.0, launch-editor@^2.6.1:
     picocolors "^1.0.0"
     shell-quote "^1.8.1"
 
+less-loader@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/less-loader/-/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466"
+  integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^4.0.1"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -4736,6 +4750,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"