diff --git a/src/views/projectAdmin/jlw/BIM/Model.vue b/src/views/projectAdmin/jlw/BIM/Model.vue
index a5006175..e1929c83 100644
--- a/src/views/projectAdmin/jlw/BIM/Model.vue
+++ b/src/views/projectAdmin/jlw/BIM/Model.vue
@@ -28,13 +28,17 @@ export default {
       series: [
         {
           roseType: 'area',
+          startAngle:90,
           radius: ['58%', '54%'],
           color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
+          data: [30, 40, 30, 40],
+          hoverAnimation:false,
         },
         {
           color: ['#3CABFC', '#FF6C7F', '#6EE4F0', '#557EED'],
-          data
+          startAngle:90,
+          data,
+          hoverAnimation:false,
         }
       ]
     }
diff --git a/src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue b/src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue
index 43e49aec..c3406e18 100644
--- a/src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue
+++ b/src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue
@@ -32,6 +32,16 @@ export default {
   mounted() {
     this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
     this.createChart()
+    this.$nextTick(() => {
+      this.drawChart();
+      this.timer = setInterval(() => {
+        this.doing();
+      }, 200);
+    });
+  },
+  destroyed(){
+    clearInterval(this.timer)
+    this.timer = ''
   },
   data() {
     return {
@@ -97,7 +107,17 @@ export default {
         delete option.legend;
       }
       this.jNestedRingChart.setOption(option)
-    }
+    },
+    drawChart() {
+      this.myChart = echarts.init(this.$refs.jNestedRingChart);
+      this.option = {
+        series: this.series
+      };
+    },
+    doing() {//转动饼图内圈
+      this.series[0].startAngle = this.series[0].startAngle - 5;
+     this.myChart.setOption(this.option);
+    },
   },
   watch: {
     series() {
diff --git a/src/views/projectAdmin/jlw/projectHuli/hiddenDanger.vue b/src/views/projectAdmin/jlw/projectHuli/hiddenDanger.vue
index e8464e05..38f1a0a0 100644
--- a/src/views/projectAdmin/jlw/projectHuli/hiddenDanger.vue
+++ b/src/views/projectAdmin/jlw/projectHuli/hiddenDanger.vue
@@ -19,21 +19,25 @@ export default {
   data() {
     return {
       series: [
+      {
+          roseType: 'area',
+          startAngle:90,
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40],
+          hoverAnimation:false,
+        },
         {
           color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
+          startAngle:90,
           data: [
             { value: 45, name: '文明施工' },
             { value: 5, name: '未分类' },
             { value: 15, name: '安全管理' },
             { value: 10, name: '施工安全' },
             { value: 45, name: '基础工程' },
-          ]
-        },
-        {
-          roseType: 'area',
-          radius: ['58%', '54%'],
-          color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
+          ],
+          hoverAnimation:false,
         }
       ]
     }
diff --git a/src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue b/src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue
index d668f116..8a000919 100644
--- a/src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue
+++ b/src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue
@@ -45,20 +45,24 @@ export default {
         ybUrgentLevelNum: 10
       },
       series: [
-        {
-          color: ['#3aaaff', '#ff6982'],
-          center: ['50%', '50%'],
-          data: [
-            { value: 50, name: '已整改质量问题' },
-            { value: 15, name: '未整改质量问题' }
-          ]
-        },
-        {
+      {
           roseType: 'area',
+          startAngle:90,
           center: ['50%', '50%'],
           radius: ['58%', '54%'],
           color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
+          data: [30, 40, 30, 40],
+          hoverAnimation:false,
+        },
+        {
+          color: ['#3aaaff', '#ff6982'],
+          center: ['50%', '50%'],
+          startAngle:90,
+          data: [
+            { value: 50, name: '已整改质量问题' },
+            { value: 15, name: '未整改质量问题' }
+          ],
+          hoverAnimation:false,
         }
       ]
     }
diff --git a/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue b/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue
index c78cb463..270cb817 100644
--- a/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue
@@ -29,7 +29,22 @@ export default {
         ybUrgentLevelNum: '',
         yzUrgentLevelNum: ''
       },
-      series: []
+      series: [
+        {
+          roseType: 'area',
+          startAngle: 90,
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40],
+          hoverAnimation:false,
+        },
+        {
+          color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
+          startAngle: 90,
+          data: [],
+          hoverAnimation:false,
+        }
+      ]
     }
   },
   created() {
@@ -44,21 +59,10 @@ export default {
       selectQualityStatisticsApi(data).then(res => {
         const data = res.result || {}
         this.total = data.total
-        this.series = [
-          {
-            color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
-            data: [
-              { value: this.total.jyUrgentLevelNum, name: '紧要问题' },
-              { value: this.total.yzUrgentLevelNum, name: '严重问题' },
-              { value: this.total.ybUrgentLevelNum, name: '一般问题' }
-            ]
-          },
-          {
-            roseType: 'area',
-            radius: ['58%', '54%'],
-            color: ['#0B1B35', '#244D8F'],
-            data: [30, 40, 30, 40]
-          }
+        this.series[1].data = [
+          { value: this.total.jyUrgentLevelNum, name: '紧要问题' },
+          { value: this.total.yzUrgentLevelNum, name: '严重问题' },
+          { value: this.total.ybUrgentLevelNum, name: '一般问题' }
         ]
       })
     }
@@ -74,18 +78,22 @@ export default {
   .content {
     height: calc(100% - 30px);
     display: flex;
+
     .chart {
       width: 55%;
       height: 100%;
     }
+
     .count {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+
       .count-item {
         position: relative;
+
         &::before {
           position: absolute;
           left: -16px;
@@ -95,20 +103,25 @@ export default {
           height: 6px;
           border-radius: 50%;
         }
+
         &:first-child {
           margin-bottom: 20px;
         }
+
         &:first-child::before {
           background-color: #557dee;
         }
+
         &:last-child::before {
           background-color: #43d7b5;
         }
+
         .label {
           margin-bottom: 8px;
           font-size: 14px;
           color: rgba(255, 255, 255, 0.7);
         }
+
         .num {
           font-size: 18px;
         }
diff --git a/src/views/projectAdmin/jlw/safeManage/leftCenter.vue b/src/views/projectAdmin/jlw/safeManage/leftCenter.vue
index b02fe0fb..3c8d7750 100644
--- a/src/views/projectAdmin/jlw/safeManage/leftCenter.vue
+++ b/src/views/projectAdmin/jlw/safeManage/leftCenter.vue
@@ -36,29 +36,32 @@ export default {
   mounted() {
     selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {
       const totals = res.result.total
-      this.series = [
-        {
-          color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
-          data: [
+      this.series[1].data = [
             { value: totals.weekInspectNum, name: '周检' },
             { value: totals.monthInspectNum, name: '月检' },
             { value: totals.otherInspectNum, name: '其他' }
           ]
-        },
-        {
-          roseType: 'area',
-          radius: ['58%', '54%'],
-          color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
-        }
-      ]
       this.totalNum = totals.totalNum
     })
   },
   data() {
     return {
       projectSn: this.$store.state.projectSn,
-      series: [],
+      series: [    
+       {
+          roseType: 'area',
+          startAngle:90,
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40],
+          hoverAnimation:false,
+        },{
+          color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
+          startAngle:90,
+          data:[],
+          hoverAnimation:false,
+        }
+        ],
       total: 0
     }
   },
diff --git a/src/views/projectAdmin/zjsj/command/LeftThree/Process.vue b/src/views/projectAdmin/zjsj/command/LeftThree/Process.vue
new file mode 100644
index 00000000..5f648300
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/command/LeftThree/Process.vue
@@ -0,0 +1,99 @@
+<!-- 步骤条 -->
+<template>
+  <!-- <vue-scroll style="height: 100%"> -->
+    <div class="list progress">
+      <div class="list-item progress-item" v-for="(item, index) in list" :key="index">
+        <div :class="['progress-item-dot', { active: item.active }]"></div>
+        <div class="info">
+          <span class="label">{{ item.label }}</span>
+          <span class="value">{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+  <!-- </vue-scroll> -->
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.progress {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  .progress-item {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: center;
+    width: 150px;
+    color: #fff;
+
+    .progress-item-dot {
+      width: 8px;
+      height: 8px;
+      background-color: #fff;
+      border-radius: 50%;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        transform: translateX(-99%);
+        display: block;
+        width: 150px;
+        height: 2px;
+        background: #fff;
+      }
+
+      &.active {
+        &::after {
+          background: #6dc6d8;
+        }
+      }
+
+      &::before {
+        content: '';
+        position: relative;
+        z-index: 9;
+        display: block;
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+      }
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 10px;
+      height: 60px;
+      .label {
+        margin-bottom: 20px;
+      }
+    }
+
+    &:first-child {
+      .progress-item-dot {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue b/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
deleted file mode 100644
index 94340f41..00000000
--- a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<!-- 步骤条 -->
-<template>
-  <vue-scroll style="height: 100px;">
-    <div class="steps">
-      <div class="steps-item" v-for="(item, index) in items" :key="index">
-        <p :class="['steps-item-line', activeIndex === index ? 'active' : '']"></p>
-        <p :class="['steps-item-num', activeIndex === index ? 'active' : '']"></p>
-        <div class="steps-item-text'" :class="['steps-item-text', activeIndex === index ? 'activeText' : '']">
-          <span class="label">{{ item.label }}</span>
-          <span class="value">{{ item.value }}</span>
-        </div>
-      </div>
-    </div>
-  </vue-scroll>
-</template>
-
-<style lang='scss' scoped>
-  .steps {
-    // width: 100%;
-    display: flex;
-    height: 80px;
-    &-item {
-      width: 150px;
-      height: 34px;
-      padding-top: 15px;
-      position: relative;
-      // 分段线
-      &-line {
-        width: 100%;
-        height: 4px;
-        background: #6dc6d8;
-      }
-      // 数字
-      &-num {
-        width: 12px;
-        height: 12px;
-        background: #fff;
-        border-radius: 50%;
-        line-height: 34px;
-        color: #fff;
-        text-align: center;
-        position: absolute;
-        top: 11px;
-        left: calc(50% - 17px);
-      }
-      // 文字
-      &-text {
-        text-align: center;
-        margin-top: 24px;
-      }
-
-      // 当前状态
-      .active {
-        // background: #6dc6d8;
-      }
-
-      .activeText {
-        // color: #0EAEE9;
-      }
-    }
-
-    .steps-item-text {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      transform: translateX(-11px);
-
-      .label {
-        color: #9da9b9;
-        font-size: 12px;
-        margin-bottom: 10px;
-      }
-
-      .value {
-        font-size: 15px;
-      }
-    }
-
-    .steps-item:first-child {
-      width: 80px;
-
-      .steps-item-line {
-        border-radius: 12px 0 0 12px;
-      }
-
-      .steps-item-num {
-        left: 0px;
-      }
-
-      .steps-item-text {
-        align-items: flex-start;
-        transform: translateX(0px);
-      }
-    }
-
-    .steps-item:last-child {
-      .steps-item-num {
-        left: 100%;
-      }
-
-      .steps-item-text {
-        align-items: flex-end;
-        transform: translateX(5px);
-      }
-
-      .steps-item-line {
-        background-color: #fff;
-      }
-    }
-
-    
-  }
-</style>
-
-<script>
-
-export default {
-  props: {
-    // 步骤总数
-    items: {
-      type: Array,
-      required: true
-    },
-    // 当前步骤
-    activeIndex: {
-      type: Number,
-      default: 0,
-      required: true
-    }
-  },
-
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/src/views/projectAdmin/zjsj/command/LeftThree/index.vue b/src/views/projectAdmin/zjsj/command/LeftThree/index.vue
index 0b6f227c..031a6fe1 100644
--- a/src/views/projectAdmin/zjsj/command/LeftThree/index.vue
+++ b/src/views/projectAdmin/zjsj/command/LeftThree/index.vue
@@ -1,45 +1,33 @@
 <template>
   <Card title="进度管理">
-    <div class="container">
-      <Steps :items="items" :activeIndex="index" />
+    <div class="container" ref="Process">
+      <Process style="transform: translateX(0)" :list="list" />
     </div>
   </Card>
 </template>
 
 <script>
-
-import Steps from './Steps'
+import Process from './Process'
 import Card from '../../components/Card'
 
 export default {
-  components: { Card, Steps },
+  components: { Card, Process },
   data() {
     return {
-      items: [
-        {
-          label: '2022-01-01',
-          value: '基础工程'
-        },
-        {
-          label: '2022-02-14',
-          value: '主题结构施工'
-        },
-        {
-          label: '2022-03-25',
-          value: '屋面工程'
-        },
-        {
-          label: '2022-07-31',
-          value: '机械设备安拆工程'
-        },
-        {
-          label: '2022-21-31',
-          value: '室内装饰装修工程'
-        },
+      list: [
+        { label: '2022-01-01', value: '基础工程', active: true },
+        { label: '2022-02-14', value: '主题结构施工', active: true },
+        { label: '2022-03-25', value: '屋面工程', active: true },
+        { label: '2022-07-31', value: '机械设备安拆工程', active: true },
+        { label: '2022-21-31', value: '室内装饰装修工程' }
       ],
       index: 0
     }
-  }
+  },
+  mounted() {
+    const progress = this.$refs.Process;
+    progress.scrollLeft = 30;
+  },
 }
 </script>
 
diff --git a/src/views/projectAdmin/zjsj/command/index.vue b/src/views/projectAdmin/zjsj/command/index.vue
index e406cf7a..7ffe0c19 100644
--- a/src/views/projectAdmin/zjsj/command/index.vue
+++ b/src/views/projectAdmin/zjsj/command/index.vue
@@ -79,11 +79,14 @@ export default {
   .leftBox {
     width: 25%;
     .leftOne {
-      width: 100%;
-      height: 30%;
+      height: 28%;
     }
+
+    .leftThree {
+      height: 22%;
+    }
+
     .leftTwo,
-    .leftThree,
     .leftFour {
       height: 25%;
     }
@@ -104,7 +107,7 @@ export default {
     }
 
     .rightTwo {
-       height: 22%;
+      height: 22%;
     }
 
     .rightThree,
diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue
index 1a3a8ae7..236eef0d 100644
--- a/src/views/projectAdmin/zjsj/command/leftFour.vue
+++ b/src/views/projectAdmin/zjsj/command/leftFour.vue
@@ -342,24 +342,24 @@ export default {
   width: 100%;
   height: 100%;
   white-space: nowrap;
-  transform: translateY(-15px);
+  // transform: translateY(-15px);
 
   .item {
     display: inline-block;
     width: calc(100% / 2);
-    height: 110%;
+    height: 100%;
     color: transparent;
 
     &:nth-child(1) {
-      transform: translate(-22%, -6%);
+      transform: translate(-24%, 0%);
     }
 
     &:nth-child(2) {
-      transform: translate(-48%, -6%);
+      transform: translate(-48%, 0%);
     }
 
     &:nth-child(3) {
-      transform: translate(-75%, -6%);
+      transform: translate(-75%, 0%);
     }
   }
 }
diff --git a/src/views/projectAdmin/zjsj/command/leftOne.vue b/src/views/projectAdmin/zjsj/command/leftOne.vue
index aa2c5e09..3996bc84 100644
--- a/src/views/projectAdmin/zjsj/command/leftOne.vue
+++ b/src/views/projectAdmin/zjsj/command/leftOne.vue
@@ -1,12 +1,14 @@
 <template>
   <Card title="项目信息">
     <div class="container">
-      <div class="list">
-        <div class="list-item" v-for="(item, index) in list" :key="index">
-          <span class="label">{{ item.name }}</span>
-          <span class="value">{{ item.content }}</span>
+      <vue-scroll style="height: 100%;">
+        <div class="list">
+          <div class="list-item" v-for="(item, index) in list" :key="index">
+            <span class="label">{{ item.name }}</span>
+            <span class="value">{{ item.content }}</span>
+          </div>
         </div>
-      </div>
+      </vue-scroll>
     </div>
   </Card>
 </template>
@@ -41,7 +43,7 @@ export default {
     display: flex;
     flex-direction: column;
     color: #fff;
-    overflow-y: scroll;
+    // overflow-y: scroll;
 
     .list-item {
       position: relative;
diff --git a/src/views/projectAdmin/zjsj/command/rightFour.vue b/src/views/projectAdmin/zjsj/command/rightFour.vue
index c6bc0800..2f1daf5f 100644
--- a/src/views/projectAdmin/zjsj/command/rightFour.vue
+++ b/src/views/projectAdmin/zjsj/command/rightFour.vue
@@ -9,12 +9,14 @@
           @click="handelItemClick(index)"
         >{{ item }}</div>
       </div>
-      <div class="bottom list">
-        <div class="list-item" v-for="(item, index) in list" :key="index">
-          <span class="label">{{ item.name }}</span>
-          <span class="value">{{ item.content }}</span>
+      <vue-scroll style="height: calc(100% - 27px);">
+        <div class="bottom list">
+          <div class="list-item" v-for="(item, index) in list" :key="index">
+            <span class="label">{{ item.name }}</span>
+            <span class="value">{{ item.content }}</span>
+          </div>
         </div>
-      </div>
+      </vue-scroll>
     </div>
   </Card>
 </template>
@@ -89,7 +91,7 @@ export default {
     display: flex;
     flex-direction: column;
     color: #fff;
-    overflow-y: scroll;
+    // overflow-y: scroll;
 
     .list-item {
       position: relative;
diff --git a/src/views/projectAdmin/zjsj/command/rightTwo.vue b/src/views/projectAdmin/zjsj/command/rightTwo.vue
index 982fd348..ece1cefb 100644
--- a/src/views/projectAdmin/zjsj/command/rightTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/rightTwo.vue
@@ -13,12 +13,14 @@
             <span class="value">(14)</span>
           </div>
         </div>
-        <div class="list">
-          <div class="list-item" v-for="(item, index) in list" :key="index">
-            <span class="label">{{ item.name }}</span>
-            <span class="value">{{ item.content }}</span>
+        <vue-scroll>
+          <div class="list">
+            <div class="list-item" v-for="(item, index) in list" :key="index">
+              <span class="label">{{ item.name }}</span>
+              <span class="value">{{ item.content }}</span>
+            </div>
           </div>
-        </div>
+        </vue-scroll>
       </div>
     </div>
   </Card>
diff --git a/src/views/projectAdmin/zjsj/index.vue b/src/views/projectAdmin/zjsj/index.vue
index f22cf452..6b11e895 100644
--- a/src/views/projectAdmin/zjsj/index.vue
+++ b/src/views/projectAdmin/zjsj/index.vue
@@ -1,40 +1,42 @@
 <template>
-  <div class="zjsj-large-screen">
-    <div class="header">
-      <div class="info">
-        <div class="between">
-          <div class="project">中建科创大厦项目</div>
-          <div class="time-week">
-            <div class="time">15:32:39</div>
-            <div class="week">星期二</div>
+  <vue-scroll>
+    <div class="zjsj-large-screen">
+      <div class="header">
+        <div class="info">
+          <div class="between">
+            <div class="project">中建科创大厦项目</div>
+            <div class="time-week">
+              <div class="time">15:32:39</div>
+              <div class="week">星期二</div>
+            </div>
+            <div class="weather-date">
+              <div class="weather">多云 32℃</div>
+              <div class="date">2022-09-09</div>
+            </div>
           </div>
-          <div class="weather-date">
-            <div class="weather">多云 32℃</div>
-            <div class="date">2022-09-09</div>
+          <div class="title">中建四局数字建造管控平台</div>
+          <div class="between">
+            <div class="company"></div>
+            <div class="exit" @click="$router.push('/projectIndex')"></div>
           </div>
         </div>
-        <div class="title">中建四局数字建造管控平台</div>
-        <div class="between">
-          <div class="company"></div>
-          <div class="exit" @click="$router.push('/projectIndex')"></div>
+        <div class="tabs">
+          <div
+            class="tab"
+            :class="{ checked: $route.path === menu.modulePath }"
+            v-for="(menu, index) in menus"
+            :key="index"
+            @click="handleMenu(menu.modulePath)"
+          >
+            {{ menu.moduleName }}
+          </div>
         </div>
       </div>
-      <div class="tabs">
-        <div
-          class="tab"
-          :class="{ checked: $route.path === menu.modulePath }"
-          v-for="(menu, index) in menus"
-          :key="index"
-          @click="handleMenu(menu.modulePath)"
-        >
-          {{ menu.moduleName }}
-        </div>
+      <div class="content">
+        <router-view></router-view>
       </div>
     </div>
-    <div class="content">
-      <router-view></router-view>
-    </div>
-  </div>
+  </vue-scroll>
 </template>
 
 <script>
@@ -57,9 +59,10 @@ export default {
 @import url("./style.less");
 .zjsj-large-screen {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   color: #fff;
   background-color: #182337;
+  overflow-y: scroll;
   .header {
     width: 100%;
     height: 110px;
@@ -157,16 +160,29 @@ export default {
     box-sizing: border-box;
     padding: 12px 20px;
     width: 100%;
-    height: calc(100% - 110px);
+    height: calc(1080px - 110px);
   }
 }
 
 /* 全局滚动条样式 */
-::v-deep ::-webkit-scrollbar {
+::v-deep  ::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width: 0 !important;
+  width: 6px !important;
   /*高宽分别对应横竖滚动条的尺寸*/
-  height: 8 !important;
+  height: 6px !important;
   cursor: pointer !important;
 }
+::v-deep  ::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 3px !important;
+  box-shadow: inset 0 0 10px rgba(144, 147, 153, 0.2) !important;
+  background: rgba(144, 147, 153, 0.5) !important;
+  cursor: pointer !important;
+}
+::v-deep  ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(238, 238, 238, 0) !important;
+  border-radius: 10px !important;
+  /* background: #ededed; */
+} 
 </style>