From b289f60aebd90c3d2cccec83d36d06017e04029e Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期五, 24 二月 2023 09:36:14 +0800
Subject: [PATCH] 2023/2/24 肖辉 修改文字颜色

---
 src/views/layout/components/Menu/index.vue |   92 ++++++++++++++++++++++++++++++++--------------
 1 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 5c71c7f..fed08ae 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -5,9 +5,12 @@
       <h2 class="siderbar-title" @click="toHome()">閬傛槍鎵ф硶骞冲彴</h2>
       <el-scrollbar>
         <!-- 璺敱 -->
-        <el-menu router class="el-menu-vertical" :default-active="$route.path">
+        <el-menu router
+                 class="el-menu-vertical"
+                 :default-active="$route.path.name"
+                 @select="handleSelect">
           <el-submenu
-            :index="menu.url ? menu.url : menu.id.toString()"
+            :index="String(menu.id)"
             v-for="menu in menuList"
             :key="menu.id"
             class="firstMenu"
@@ -23,10 +26,9 @@
                 <el-submenu
                   :key="secondMenu.id"
                   v-if="secondMenu.menuVoArrayList.length > 0"
-                  :index="
-                    secondMenu.url ? secondMenu.url : secondMenu.id.toString()
-                  "
+                  :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
                   class="secondMenu"
+                  :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
                 >
                   <template slot="title">
                     <span class="secondSpan">{{ secondMenu.title }}</span>
@@ -39,16 +41,13 @@
                     >{{ thirdMenu.title }}</el-menu-item
                   >
                 </el-submenu>
-
                 <el-menu-item
                   v-else
                   :index="`${secondMenu.id}`"
                   :route="{ name: secondMenu.url }"
-                  >{{ secondMenu.title }}</el-menu-item
-                >
+                  >{{ secondMenu.title }}</el-menu-item>
               </template>
             </template>
-
             <el-menu-item
               v-else
               :key="menu.id"
@@ -71,16 +70,28 @@
   data() {
     return {
       menuList: [],
+      isActive:''
     };
   },
   created() {
     this.loadMenu();
   },
+  watch: {
+    $route(){
+      this.handleSelect(this.$route.fullPath)
+      console.log(this.$route)
+    }
+  },
   methods: {
+    handleSelect(path){
+      this.isActive = path
+    },
     loadMenu() {
       const userName = sessionStorage.getItem('name');
       users.getMenu({ name: userName })
           .then(res => {
+            // console.log(res)
+            // debugger
             this.menuList = res.menus;
             sessionStorage.setItem('user', JSON.stringify(res));
           })
@@ -101,14 +112,12 @@
     height: 36px;
   }
 }
-
 .el-aside {
   background: #313350;
   color: #e9eef3;
   text-align: center;
   box-sizing: border-box;
   position: relative;
-
   //    鍥哄畾鏍囬
   .siderbar-title {
     position: fixed;
@@ -122,59 +131,87 @@
     z-index: 999;
     cursor: pointer;
   }
-
   .el-scrollbar {
     height: calc(100vh - 66px);
     margin-top: 66px;
     box-sizing: border-box;
-
     .el-menu {
       background: linear-gradient(#313350, #0f2b56);
       border: 0;
-
+      font-size: 16px;
+      .is-opened{
+        .fisrtSpan{
+          color: #22d3eb;
+        }
+      }
       .firstMenu {
         background: #313350;
         text-align: left;
-
+        //border-bottom:1px solid #ccc ;
         &:hover > .el-submenu__title {
           background-color: #092c4a;
         }
-
         &:hover .fisrtSpan {
           color: #22d3eb;
         }
-
         span,
         span {
           color: #e9eef3;
+          font-size: 16px;
         }
-
+        .el-menu{
+          .is-active {
+            background-color: #409EFF;
+            color: #fff;
+          }
+          .is-Active{
+            background-color: #092c4a;
+            color: #fff;
+          }
+        }
         .el-menu-item {
           color: #e9eef3;
           background-color: #313350;
+          font-size: 16px;
+          // border-bottom: 0.5px solid #7c7979;
         }
-
         .el-menu-item:hover {
-          background-color: #092c4a;
+          background-color: #409EFF;
           color: #22d3eb;
         }
-
-        .is-active {
-          background-color: #313350;
-          color: #22d3eb;
+        .is-opened{
+          .secondSpan{
+            color: #22d3eb;
+          }
+        }
+        .secondMenu{
+          //border-bottom:1px solid #ccc ;
+          .is-active {
+            background-color: #409EFF;
+            color: #22d3eb;
+          }
         }
       }
-
       .secondMenu {
+
         &:hover > .el-submenu__title {
           background-color: #092c4a;
         }
-
+          .secondSpan{
+          }
         &:hover .secondSpan {
           color: #22d3eb;
         }
+        .is-opened{
+          .el-submenu__title{
+            background-color: #fff;
+          }
+        }
+        .is-active {
+          background-color: #409EFF;
+          color: #fff;
+        }
       }
-
       .thirdMenu {
         &:hover > .el-submenu__title {
           background-color: #092c4a;
@@ -189,7 +226,6 @@
         background-color: #092c4a;
       }
     }
-
     .el-scrollbar__wrap {
       overflow-x: hidden;
     }

--
Gitblit v1.8.0