侧边栏样式修改

.env.development

@@ -1,11 +1,3 @@
-###
- # @Descripttion: 
- # @version: 
- # @Author: JC9527
- # @Date: 2024-03-12 17:22:56
- # @LastEditors: JC9527
- # @LastEditTime: 2024-09-04 09:18:37
-### 
 # 页面标题
 VUE_APP_TITLE = 数字高新驾驶舱-算法预警服务平台
 

src/assets/styles/sidebar.scss

@@ -82,6 +82,16 @@
 
     .cesileiming {
       background-color: rgba(100,113,129,0.5);
+      margin: 10px 0;
+      li,.el-submenu__title {
+        background-color: transparent !important;
+      }
+      .cesileiming-a {
+        li {
+          background-color: rgba(47,138,229,0.5) !important;
+          color: #fff !important;
+        }
+      }
     }
 
     // menu hover

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,14 +1,15 @@
 <template>
   <div v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)" :class="(onlyOneChild.path == 'index' || onlyOneChild.path == 'warningAppear') ? 'cesileiming' : ''">
+      <!--  :class="(onlyOneChild.path == 'index' || onlyOneChild.path == 'warningAppear') ? 'cesileiming' : ''" -->
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)" :class="hasOneShowingChildTwo(item) ? 'cesileiming-a' : ''">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body class="cesileiming">
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
@@ -52,7 +53,10 @@ export default {
   },
   data() {
     this.onlyOneChild = null
-    return {}
+    return {
+      indexCurrent: false,
+      warningAppearCurrent: false,
+    }
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
@@ -82,6 +86,16 @@ export default {
 
       return false
     },
+    hasOneShowingChildTwo(item){
+      if(item.children) {
+        if ((item.children && item.children[0].path == "index" && this.indexCurrent) || (item.children && item.children[0].path == "warningAppear" && this.warningAppearCurrent)) {
+          console.log("进来了");
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
     resolvePath(routePath, routeQuery) {
       if (isExternal(routePath)) {
         return routePath
@@ -95,6 +109,25 @@ export default {
       }
       return path.resolve(this.basePath, routePath)
     }
-  }
+  },
+  watch:{
+    $route:{
+      handler(route){
+        if(route.path == "/index") {
+          this.indexCurrent = true;
+          this.warningAppearCurrent = false;
+        } else if(route.path == "/warningAppear") {
+          this.warningAppearCurrent = true;
+          this.indexCurrent = false;
+        } else {
+          this.indexCurrent = false;
+          this.warningAppearCurrent = false;
+        }
+        console.log(this.indexCurrent,"indexCurrent");
+        // console.log(this.warningAppearCurrent,"warningAppearCurrent");
+      },
+      immediate:true,
+    }
+  },
 }
 </script>

src/layout/components/Sidebar/index.vue

@@ -13,6 +13,7 @@
                 mode="vertical"
             >
                 <sidebar-item
+                    class="cesileiming"
                     v-for="(route, index) in sidebarRouters"
                     :key="route.path  + index"
                     :item="route"