From 0ad3418239d13b5354ee829d1de01af1bc99ebac Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 7 Nov 2021 16:56:15 +0800
Subject: [PATCH] fix: update vertical style

---
 src/layout/theme/auroraGreen-vars.scss |  3 +-
 src/layout/theme/default-vars.scss     |  7 +--
 src/layout/theme/dusk-vars.scss        |  3 +-
 src/layout/theme/light-vars.scss       |  5 +-
 src/layout/theme/mingQing-vars.scss    |  3 +-
 src/layout/theme/pink-vars.scss        |  3 +-
 src/layout/theme/saucePurple-vars.scss |  3 +-
 src/layout/theme/volcano-vars.scss     |  3 +-
 src/layout/theme/yellow-vars.scss      |  7 +--
 src/style/sidebar.scss                 | 73 ++++++++++++++------------
 10 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/src/layout/theme/auroraGreen-vars.scss b/src/layout/theme/auroraGreen-vars.scss
index 500025595..e6365faf5 100644
--- a/src/layout/theme/auroraGreen-vars.scss
+++ b/src/layout/theme/auroraGreen-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #0b1e15;
 $menuHover: #60ac80;
 $subMenuBg: #000;
-$subMenuHover: #60ac80;
+$subMenuActiveBg: #60ac80;
 $navTextColor: #7a80b4;
 $menuText: #7a80b4;
 $sidebarLogo: #112f21;
 $menuTitleHover: #fff;
+$menuActiveBefore: #60ac80;
diff --git a/src/layout/theme/default-vars.scss b/src/layout/theme/default-vars.scss
index 13bc8806c..b9d8b91fe 100644
--- a/src/layout/theme/default-vars.scss
+++ b/src/layout/theme/default-vars.scss
@@ -6,18 +6,19 @@
 // 暗雅（默认）
 
 // 菜单选中后字体样式
-$subMenuActiveText: #f4f4f5 !default;
+$subMenuActiveText: #fff !default;
 //菜单背景
 $menuBg: #001529 !default;
 // 鼠标覆盖到菜单时的背景
 $menuHover: #4091f7 !default;
 // 子菜单背景
 $subMenuBg: #0f0303 !default;
-// 鼠标覆盖子菜单时的背景
-$subMenuHover: #4091f7 !default;
+// 有无子集的激活菜单背景
+$subMenuActiveBg: #4091f7 !default;
 $navTextColor: #fff !default;
 $menuText: rgba(254, 254, 254, 0.65) !default;
 // logo背景颜色
 $sidebarLogo: #002140 !default;
 // 鼠标覆盖到菜单时的字体颜色
 $menuTitleHover: #fff !default;
+$menuActiveBefore: #4091f7 !default;
diff --git a/src/layout/theme/dusk-vars.scss b/src/layout/theme/dusk-vars.scss
index a3e9a8274..6e38b947b 100644
--- a/src/layout/theme/dusk-vars.scss
+++ b/src/layout/theme/dusk-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #2a0608;
 $menuHover: #e13c39;
 $subMenuBg: #000;
-$subMenuHover: #e13c39;
+$subMenuActiveBg: #e13c39;
 $navTextColor: red;
 $menuText: rgba(254, 254, 254, 0.651);
 $sidebarLogo: #42090c;
 $menuTitleHover: #fff;
+$menuActiveBefore: #e13c39;
diff --git a/src/layout/theme/light-vars.scss b/src/layout/theme/light-vars.scss
index 8defffc68..2e07500a4 100644
--- a/src/layout/theme/light-vars.scss
+++ b/src/layout/theme/light-vars.scss
@@ -3,8 +3,9 @@ $subMenuActiveText: #409eff;
 $menuBg: #fff;
 $menuHover: #e0ebf6;
 $subMenuBg: #fff;
-$subMenuHover: #e0ebf6;
+$subMenuActiveBg: #e0ebf6;
 $navTextColor: #7a80b4;
 $menuText: #7a80b4;
 $sidebarLogo: #fff;
-$menuTitleHover: #7a80b4;
+$menuTitleHover: #000;
+$menuActiveBefore: #4091f7;
diff --git a/src/layout/theme/mingQing-vars.scss b/src/layout/theme/mingQing-vars.scss
index 55a7b13cc..5749c90cf 100644
--- a/src/layout/theme/mingQing-vars.scss
+++ b/src/layout/theme/mingQing-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #032121;
 $menuHover: #59bfc1;
 $subMenuBg: #000;
-$subMenuHover: #59bfc1;
+$subMenuActiveBg: #59bfc1;
 $navTextColor: #7a80b4;
 $menuText: #7a80b4;
 $sidebarLogo: #053434;
 $menuTitleHover: #fff;
+$menuActiveBefore: #59bfc1;
diff --git a/src/layout/theme/pink-vars.scss b/src/layout/theme/pink-vars.scss
index d128f526f..30d4a4243 100644
--- a/src/layout/theme/pink-vars.scss
+++ b/src/layout/theme/pink-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #28081a;
 $menuHover: #d84493;
 $subMenuBg: #000;
-$subMenuHover: #d84493;
+$subMenuActiveBg: #d84493;
 $navTextColor: #7a80b4;
 $menuText: #7a80b4;
 $sidebarLogo: #3f0d29;
 $menuTitleHover: #fff;
+$menuActiveBefore: #d84493;
diff --git a/src/layout/theme/saucePurple-vars.scss b/src/layout/theme/saucePurple-vars.scss
index 79f73342e..6d248a92b 100644
--- a/src/layout/theme/saucePurple-vars.scss
+++ b/src/layout/theme/saucePurple-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #130824;
 $menuHover: #693ac9;
 $subMenuBg: #000;
-$subMenuHover: #693ac9;
+$subMenuActiveBg: #693ac9;
 $navTextColor: #7a80b4;
 $menuText: #7a80b4;
 $sidebarLogo: #1f0c38;
 $menuTitleHover: #fff;
+$menuActiveBefore: #693ac9;
diff --git a/src/layout/theme/volcano-vars.scss b/src/layout/theme/volcano-vars.scss
index 531573c09..5974ee692 100644
--- a/src/layout/theme/volcano-vars.scss
+++ b/src/layout/theme/volcano-vars.scss
@@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
 $menuBg: #2b0e05;
 $menuHover: #e85f33;
 $subMenuBg: #0f0603;
-$subMenuHover: #e85f33;
+$subMenuActiveBg: #e85f33;
 $navTextColor: #fff;
 $menuText: rgba(254, 254, 254, 0.65);
 $sidebarLogo: #441708;
 $menuTitleHover: #fff;
+$menuActiveBefore: #e85f33;
diff --git a/src/layout/theme/yellow-vars.scss b/src/layout/theme/yellow-vars.scss
index ab17a8a1b..1410057a0 100644
--- a/src/layout/theme/yellow-vars.scss
+++ b/src/layout/theme/yellow-vars.scss
@@ -1,11 +1,12 @@
 // 黄色
 
-$subMenuActiveText: #fff;
+$subMenuActiveText: #d25f00;
 $menuBg: #2b2503;
 $menuHover: #f6da4d;
 $subMenuBg: #0f0603;
-$subMenuHover: #f6da4d;
+$subMenuActiveBg: #f6da4d;
 $navTextColor: #fff;
 $menuText: rgba(254, 254, 254, 0.65);
 $sidebarLogo: #443b05;
-$menuTitleHover: #443b05;
+$menuTitleHover: #fff;
+$menuActiveBefore: #f6da4d;
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 8da642404..8b895f254 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -134,7 +134,7 @@
     .submenu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: $menuHover !important;
+        background-color: transparent;
       }
     }
 
@@ -157,10 +157,16 @@
       font-size: 12px;
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
+    }
 
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
+    // 无子集的激活菜单背景
+    .is-active.submenu-title-noDropdown.outer-most {
+      background: $subMenuActiveBg;
+    }
+
+    // 有子集的激活菜单背景
+    .is-active.nest-menu {
+      background: $subMenuActiveBg !important;
     }
   }
 
@@ -182,9 +188,9 @@
       cursor: pointer;
       transition: all 0.2s ease;
 
-      &:hover {
-        background: $menuHover;
-      }
+      // &:hover {
+      //   background: transparent;
+      // }
 
       i {
         font-size: 30px;
@@ -291,7 +297,7 @@
       background: $menuBg;
 
       &:hover {
-        background-color: $menuHover !important;
+        // background-color: transparent !important;
       }
     }
 
@@ -312,6 +318,10 @@
     }
   }
 
+  // .is-active.submenu-title-noDropdown.outer-most {
+  //   background: transparent;
+  // }
+
   // vertical菜单折叠
   .el-menu--vertical {
     .el-menu--popup {
@@ -322,10 +332,6 @@
           font-size: 12px;
           margin-left: 10px;
         }
-
-        &:hover {
-          background-color: $subMenuHover;
-        }
       }
 
       .el-sub-menu__title {
@@ -359,7 +365,7 @@
       background-color: $subMenuBg !important;
 
       &:hover {
-        background-color: $menuHover !important;
+        // background-color: transparent !important;
       }
     }
 
@@ -378,11 +384,8 @@
       color: $subMenuActiveText !important;
     }
 
-    .nest-menu .el-sub-menu > .el-sub-menu__title,
-    .el-menu-item {
-      &:hover {
-        background-color: $menuHover !important;
-      }
+    .el-menu-item.is-active.nest-menu {
+      background: $subMenuActiveBg !important;
     }
 
     .el-menu-item,
@@ -413,10 +416,6 @@
           font-size: 12px;
           margin-left: 10px;
         }
-
-        &:hover {
-          background-color: $subMenuHover;
-        }
       }
 
       .el-sub-menu__title {
@@ -440,9 +439,9 @@
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 
-      &:hover {
-        background-color: $menuHover !important;
-      }
+      // &:hover {
+      //   background-color: transparent !important;
+      // }
     }
 
     & > .el-menu {
@@ -465,12 +464,12 @@
       color: $subMenuActiveText !important;
     }
 
-    .nest-menu .el-sub-menu > .el-sub-menu__title,
-    .el-menu-item {
-      &:hover {
-        background-color: $menuHover !important;
-      }
-    }
+    // .nest-menu .el-sub-menu > .el-sub-menu__title,
+    // .el-menu-item {
+    //   &:hover {
+    //     background-color: transparent !important;
+    //   }
+    // }
   }
 
   .el-scrollbar__wrap {
@@ -491,7 +490,7 @@
     left: 5px;
     width: 3px;
     height: 100%;
-    background-color: #1890ff !important;
+    background-color: $menuActiveBefore;
     content: "";
     clear: both;
     -webkit-transition: all 0.2s ease-in-out;
@@ -507,7 +506,7 @@
     left: 5px;
     width: 3px;
     height: 100%;
-    background-color: #1890ff !important;
+    background-color: $menuActiveBefore;
     content: "";
     clear: both;
     -webkit-transition: all 0.2s ease-in-out;
@@ -602,8 +601,10 @@ body[layout="vertical"] {
       }
     }
 
+    // 菜单折叠
     .el-menu--collapse {
-      margin-left: -5px; //需优化的地方
+      margin-left: -5px;
+
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
@@ -615,6 +616,10 @@ body[layout="vertical"] {
           }
         }
       }
+
+      .submenu-title-noDropdown {
+        background: transparent !important;
+      }
     }
   }
 }