第一次完成，待优化

src/components/SvgIcon/index.vue

@@ -46,17 +46,17 @@ export default {
 </script>
 
 <style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
 
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover!important;
-  display: inline-block;
-}
+  .svg-external-icon {
+    background-color: currentColor;
+    mask-size: cover!important;
+    display: inline-block;
+  }
 </style>

src/layout/components/Sidebar/Item.vue

@@ -33,9 +33,9 @@ export default {
 </script>
 
 <style scoped>
-.sub-el-icon {
-  color: currentColor;
-  width: 1em;
-  height: 1em;
-}
+  .sub-el-icon {
+    color: currentColor;
+    width: 1em;
+    height: 1em;
+  }
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -7,7 +7,7 @@
 				<h1 v-else class="sidebar-title">{{ title }} </h1>
 			</router-link>
 			<router-link v-else key="expand" class="sidebar-logo-link" to="/">
-				<img src="../../../icons/images/index/title_icon.png" class="logo" alt="">
+				<img src="../../../icons/images/index/title_1.png" class="logo" alt="">
 				<!-- <img v-if="logo" :src="logo" class="sidebar-logo">
 				<h1 class="sidebar-title">{{ title }} </h1> -->
 			</router-link>

src/layout/components/Sidebar/SidebarItem.vue

@@ -95,4 +95,4 @@
 			}
 		}
 	}
-</script>
+</script>

src/styles/sidebar.scss

@@ -51,7 +51,7 @@
       display: inline-block;
       width: 100%;
       overflow: hidden;
-	  margin: 0 auto;
+      margin: 0 auto;
     }
 
     .svg-icon {
@@ -66,38 +66,37 @@
     .el-menu {
       border: none;
       height: 100%;
-      // width: 100% !important;
-	  margin: 0 auto;
-	  
-	  li {
-		  font-size: 20px;
-		  
-		  .el-submenu__title {
-			  font-size: 20px;
-		  }
-	  }
-	  
-	  .nest-menu {
-		  li {
-			font-size: 20px;
-		  }
-	  }
+      width: 100% !important;
+      margin: 0 auto;
+
+      li {
+        font-size: 20px;
+
+        .el-submenu__title {
+          font-size: 20px;
+        }
+      }
+
+      .nest-menu {
+        li {
+        font-size: 20px;
+        }
+      }
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        color: #2B4CFE !important;
         background-color: $menuHover !important;
       }
     }
 
     .is-active>.el-submenu__title {
-      // color: $subMenuActiveText !important;
-	  // 添加
-	  color: #2B4CFE;
-	  // border-radius: 10px !important;
-	  // background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
+      color: $subMenuActiveText !important;
+      border-radius: 10px !important;
+      background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -109,16 +108,16 @@
         background-color: $subMenuHover !important;
       }
     }
-	// 添加
-	.router-link-exact-active.router-link-active {
-		// border-radius: 10px !important;
-		background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
-		
-		.el-menu-item.is-active {
-			// border-radius: 10px !important;
-			background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
-		}
-	}
+    // 添加
+    .router-link-exact-active.router-link-active {
+      // border-radius: 10px !important;
+      background: linear-gradient(0deg, #FFFFFF, #FFFFFF) !important;
+
+      .el-menu-item.is-active {
+        // border-radius: 10px !important;
+        background: linear-gradient(0deg, #FFFFFF, #FFFFFF) !important;
+      }
+    }
   }
 
   .hideSidebar {
@@ -136,7 +135,7 @@
 
       .el-tooltip {
         padding: 0 !important;
-		left: -5px !important;
+        left: -5px !important;
 
         .svg-icon {
           margin-left: 20px;
@@ -242,7 +241,7 @@
     overflow-y: auto;
 
     &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+      background-color: #d3dce6;
     }
 
     &::-webkit-scrollbar {

src/styles/variables.scss

@@ -1,12 +1,12 @@
 // sidebar
-$menuText:#46515E;
-$menuActiveText:#FFFFFF;
-$subMenuActiveText:#FFFFFF; //https://github.com/ElemeFE/element/issues/12951
+$menuText: #FFFFFF;
+$menuActiveText: #296DE4;
+$subMenuActiveText: #296DE4; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#FFFFFF; // 菜单整体背景
+$menuBg: #296DE4; // 菜单整体背景
 $menuHover: #FFFFFF; // 菜单悬浮变色
-$subMenuBg:#FFFFFF; // 子菜单背景
-$subMenuHover:#FFFFFF; // 子菜单悬浮背景
+$subMenuBg: #296DE4; // 子菜单背景
+$subMenuHover: #FFFFFF; // 子菜单悬浮背景
 
 $sideBarWidth: 260px;