hy

dsk-operate-ui/src/assets/styles/sidebar.scss

@@ -42,8 +42,10 @@
 
     .el-scrollbar {
       height: 100%;
+	 
     }
 	
+
     &.has-logo {
       .el-scrollbar {
         height: calc(100% - 50px);
@@ -61,55 +63,82 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 6px;
+    }
+	.el-submenu__icon-arrow{
+		   top: 54%;
+		    right: 5px;
+		    color: #d8d8d8;
 	}
 
     .el-menu {
       border: none;
       height: 100%;
-      width: 100% !important;
+      width: calc(100% - 16px) !important;
+	  margin: 0 8px;
+    }
+	.el-menu--inline{
+		 margin: 0;
+		 width: 100%!important;
+	}
+	.el-menu--inline .nest-menu .el-menu-item{
+		 width: 100%!important;
+		 min-width: 128px;
+		 color: #fff!important;
 	}
 
     .el-menu-item, .el-submenu__title {
+	 height: 40px;
+	 line-height: 40px;
+	 border: 1px solid #141b2f;
+	 color: #fff;
+	 margin-bottom: 6px;
+	 padding: 0 6px!important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
     }
 
     // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
+		.el-menu-item.is-active {
+		      // 点击菜单的颜色
+			  background-color: #1e2c4c!important;
+			  color: #fff!important;
+			  border-radius: 10px;
+			  border: 1px solid #2b3f69;
 		      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+		       background-color: #1e2c4c!important;
+		       border-radius: 10px;
+			   color: #fff!important;
+		       border: 1px solid #2b3f69;
 		      }
 		    }
 		 
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
 		 
+		// menu hover
+		.submenu-title-noDropdown, .el-submenu__title {
+			 color: #fff!important;
 		      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+				background-color: #1e2c4c!important;
+				color: #fff!important;
+				border-radius: 10px;
+				border: 1px solid #2b3f69;
 		      }
 		}
 		
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
 
-      &:hover {
-        background-color: $base-sub-menu-hover !important;
-      }
+    
   }
+  .sidebar-container .el-submenu .el-menu-item:hover,.sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover {
+      background-color: #1e2c4c!important;
+      color: #fff!important;
+      border-radius: 10px;
+      border: 1px solid #2b3f69;
   }
 
   .hideSidebar {
     .sidebar-container {
-      width: 54px !important;
+      width: 48px !important;
     }
 
     .main-container {
@@ -117,14 +146,25 @@
     }
 
     .submenu-title-noDropdown {
-      padding: 0 !important;
+      margin-bottom: 6px;
+      padding: 0 6px!important;
+      text-align: center;
+      cursor: pointer;
       position: relative;
 
       .el-tooltip {
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 20px;
+			margin: 0px!important;
+			width: 1em;
+			    height: 1em;
+			    font-size: 16px;
+			    margin-bottom: -2px;
+			    vertical-align: -0.15em;
+			    fill: currentColor;
+			    overflow: hidden;
+          
         }
       }
     }
@@ -133,10 +173,21 @@
       overflow: hidden;
 
       &>.el-submenu__title {
-        padding: 0 !important;
+		margin-bottom: 6px;
+		padding: 0 6px!important;
+	    text-align: center;
+		cursor: pointer;
 
         .svg-icon {
-          margin-left: 20px;
+			margin: 0px!important;
+		      width: 1em;
+		      height: 1em;
+		      font-size: 16px;
+		      margin-bottom: -2px;
+		      vertical-align: -0.15em;
+		      fill: currentColor;
+		      overflow: hidden;
+              margin-left: 0px;
         }
 
       }

dsk-operate-ui/src/assets/styles/variables.scss

@@ -36,7 +36,13 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+// 央企颜色设置自定义
+$base-menu-background:#141b2f;
+$base-menu-light-background: #fff; // 选中菜单的字体颜色
+$base-logo-light-title-color: #fff; // 对应base-logo-title-color
+
+
+$base-sidebar-width: 144px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

dsk-operate-ui/src/layout/components/Sidebar/Logo.vue

@@ -55,9 +55,10 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 55px;
+  line-height: 55px;
+  background: #141b2f;
+  border-bottom: 1px solid #1a2743;
   text-align: center;
   overflow: hidden;
 
@@ -66,8 +67,8 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 16px;
+      height: 23px;
       vertical-align: middle;
       margin-right: 12px;
     }