首页准确率滚动，子目录点击后有渐变背景

cpp-ui/src/assets/styles/sidebar.scss

@@ -74,7 +74,9 @@
       height: 100%;
       width: 100% !important;
     }
-
+    .el-menu-item.is-active {
+      background:linear-gradient(90deg, rgba(182, 182, 182, 0.47), rgb(10, 53, 87))!important;
+    }
     .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;

cpp-ui/src/views/largeScreen/components/right-top.vue

@@ -10,51 +10,51 @@
            @click="changeAccuracy('accuracy-month')">月
       </div>
     </div>
-    <!--    <el-table-->
-    <!--      :data="tableData"-->
-    <!--      size="mini" height="24vh" :show-header="false"-->
-    <!--      style="width: 100%;"-->
-    <!--      ref="accuracyTable"-->
-    <!--      @cell-mouse-enter="tableScroll(true)"-->
-    <!--      @cell-mouse-leave="tableScroll(false)"-->
-    <!--    >-->
-    <!--      <el-table-column prop="sort" align="center" label="" fixed width="50px">-->
-    <!--        <template slot-scope="scope">-->
-    <!--          <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1"><span-->
-    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
-    <!--          <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span-->
-    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
-    <!--          <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span-->
-    <!--            class="sort-num-style">{{ scope.row.sort }}</span></div>-->
-    <!--          <span v-else>{{ scope.row.sort }}</span>-->
-    <!--        </template>-->
-    <!--      </el-table-column>-->
-    <!--      <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>-->
-    <!--      <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>-->
-    <!--    </el-table>-->
-
-    <div class="TItemUl" :class="{'animate-up': animateUp}" @mouseenter="scrollAnimate(true)" @mouseleave="scrollAnimate(false)">
-      <div v-for="(item,index) in tableData" :key="index">
-        <div class="TItemRow flex items-center justify-between" :class="index === 0?'highlight':''">
-          <div class="TItemCell flex justify-center" style="width: 50px">
-            <div class="sortStyle flex justify-center sort1" v-if="Number(item.sort) === 1"><span
-              class="sort-num-style">{{ item.sort }}</span></div>
-            <div class="sortStyle flex justify-center sort2" v-else-if="Number(item.sort) === 2"><span
-              class="sort-num-style">{{ item.sort }}</span></div>
-            <div class="sortStyle flex justify-center sort3" v-else-if="Number(item.sort) === 3"><span
-              class="sort-num-style">{{ item.sort }}</span></div>
-            <span v-else>{{ item.sort }}</span>
-          </div>
-          <div class="TItemCell">{{ item.name }}</div>
-          <div class="TItemCell">{{ item.accuracy }}</div>
-        </div>
-        <div class="divider"/>
-      </div>
-      <div class="TItemRow" v-if="tableData.length==0">
-        <div class="TI_default" style="width:100%">暂无数据</div>
-      </div>
-
-    </div>
+        <el-table
+          :data="tableData"
+          size="mini" height="24vh" :show-header="false"
+          style="width: 100%;"
+          ref="accuracyTable"
+          @cell-mouse-enter="tableScroll(true)"
+          @cell-mouse-leave="tableScroll(false)"
+        >
+          <el-table-column prop="sort" align="center" label="" fixed width="50px">
+            <template slot-scope="scope">
+              <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1"><span
+                class="sort-num-style">{{ scope.row.sort }}</span></div>
+              <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span
+                class="sort-num-style">{{ scope.row.sort }}</span></div>
+              <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span
+                class="sort-num-style">{{ scope.row.sort }}</span></div>
+              <span v-else>{{ scope.row.sort }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>
+          <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>
+        </el-table>
+
+<!--    <div class="TItemUl" :class="{'animate-up': animateUp}" @mouseenter="scrollAnimate(true)" @mouseleave="scrollAnimate(false)">-->
+<!--      <div v-for="(item,index) in tableData" :key="index">-->
+<!--        <div class="TItemRow flex items-center justify-between" :class="index === 0?'highlight':''">-->
+<!--          <div class="TItemCell flex justify-center" style="width: 50px">-->
+<!--            <div class="sortStyle flex justify-center sort1" v-if="Number(item.sort) === 1"><span-->
+<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+<!--            <div class="sortStyle flex justify-center sort2" v-else-if="Number(item.sort) === 2"><span-->
+<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+<!--            <div class="sortStyle flex justify-center sort3" v-else-if="Number(item.sort) === 3"><span-->
+<!--              class="sort-num-style">{{ item.sort }}</span></div>-->
+<!--            <span v-else>{{ item.sort }}</span>-->
+<!--          </div>-->
+<!--          <div class="TItemCell">{{ item.name }}</div>-->
+<!--          <div class="TItemCell">{{ item.accuracy }}</div>-->
+<!--        </div>-->
+<!--        <div class="divider"/>-->
+<!--      </div>-->
+<!--      <div class="TItemRow" v-if="tableData.length==0">-->
+<!--        <div class="TI_default" style="width:100%">暂无数据</div>-->
+<!--      </div>-->
+
+<!--    </div>-->
 
   </div>
 </template>
@@ -99,8 +99,8 @@ export default {
     } else {
       this.type = 'day'
     }
-    // this.tableScroll(false)
-    this.scrollAnimate(false)
+    this.tableScroll(false)
+    // this.scrollAnimate(false)
   },
   methods: {
     /**