首页样式和高亮

src/assets/styles/sidebar.scss

@@ -76,18 +76,26 @@
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
+      height: 45px;
+      line-height: 45px;
     }
 
     // menu hover
+    .is-active{
+      background-color: #2B62F1!important;
+    }
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #2B62F1 !important;
+        color: white !important;
       }
     }
 
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
+    & .is-active > .el-submenu__title {
+      background-color: #2B62F1 !important;
+      color: white !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -95,16 +103,18 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #2B62F1 !important;
+        color: white;
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      color: white;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: #2B62F1 !important;
+        color: white !important;
       }
     }
   }
@@ -204,7 +214,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: #2B62F1 !important;
     }
   }
 

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 $base-header-height: 60px; // 头部高度
-$base-sidebar-width: 200px;
+$base-sidebar-width: 280px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/TopNav/index.vue

@@ -178,7 +178,7 @@ export default {
 
 .topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
   border-bottom: 2px solid #{'var(--theme)'} !important;
-  color: #303133;
+  color: white;
 }
 
 /* submenu item */

src/layout/components/Sidebar/index.vue

@@ -1,13 +1,13 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }" style="padding: 0 1rem ;">
         <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+        <el-scrollbar  wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+                text-color="#3D424D"
                 :unique-opened="true"
-                :active-text-color="settings.theme"
+                active-text-color="white"
                 :collapse-transition="false"
                 mode="vertical"
             >