左侧菜单栏样式修改

src/assets/styles/sidebar.scss

@@ -28,7 +28,7 @@
     // 使用CSS变量定义边框样式，支持动态修改
     border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
     box-shadow: var(--sidebarBoxShadow);
-    
+
     // 备用方案：如果CSS变量不支持，使用默认样式
     @supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
       border-right: none;
@@ -81,11 +81,15 @@
       width: 100% !important;
     }
 
-    .el-menu-item,
+    .el-sub-menu,
     .menu-title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      color: rgba(255, 255, 255, 0.87);
+      font-family: Microsoft YaHei;
+      font-size: 13px;
+      font-weight: 600;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -100,6 +104,7 @@
         transition: all 0.3s ease;
       }
     }
+
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
@@ -108,7 +113,7 @@
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active>.el-sub-menu__title {
       color: #ffffff !important;
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       border-radius: 4px;
@@ -116,16 +121,17 @@
       box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
         transition: all 0.3s ease;
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
 
@@ -135,7 +141,7 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -143,7 +149,8 @@
         transition: all 0.3s ease;
       }
     }
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -178,7 +185,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -189,15 +196,16 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
+        &>.el-sub-menu__title {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
           }
-          & > i {
+
+          &>i {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -234,6 +242,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -243,7 +252,7 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
@@ -286,7 +295,7 @@
 }
 
 // 子菜单激活状态
-.el-sub-menu.is-active > .el-sub-menu__title {
+.el-sub-menu.is-active>.el-sub-menu__title {
   background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
   color: #ffffff !important;
   border-radius: 4px;
@@ -299,7 +308,7 @@
 .sidebar-container {
   // 确保背景色与图片一致
   background: #2c3e50 !important;
-  
+
   .el-menu-item {
     &.is-active {
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
@@ -310,9 +319,9 @@
       transition: all 0.3s ease;
     }
   }
-  
+
   .el-sub-menu {
-    &.is-active > .el-sub-menu__title {
+    &.is-active>.el-sub-menu__title {
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       color: #ffffff !important;
       border-radius: 4px;
@@ -321,12 +330,12 @@
       transition: all 0.3s ease;
     }
   }
-  
+
   // 子菜单项激活状态（只有文字颜色变化，无背景）
   .el-sub-menu .el-menu-item {
     &.is-active {
       background: transparent !important;
-      color: #409eff !important;
+      color: rgba(1, 159, 228, 1) !important;
       border-radius: 0;
       margin: 0;
       box-shadow: none;
@@ -341,35 +350,35 @@
     box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
     border-right: none !important;
   }
-  
+
   .sidebar-logo-container {
     background: #2c3e50 !important;
   }
-  
+
   .el-menu {
     background: #2c3e50 !important;
   }
-  
+
   // 非激活菜单项样式
   .el-menu-item,
   .el-sub-menu__title {
     color: #bfcbd9 !important;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1) !important;
     }
   }
-  
+
   // 激活的主菜单项（正确的渐变背景）
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;
     margin: 2px 8px;
     box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
   }
-  
+
   // 激活的子菜单项（只有蓝色文字，无背景）
   .el-sub-menu .el-menu-item.is-active {
     background: transparent !important;
@@ -378,17 +387,17 @@
     margin: 0;
     box-shadow: none;
   }
-  
+
   // 子菜单背景色
   .el-sub-menu .el-menu {
-    background: #1f2d3d !important;
+    background: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15), rgba(0, 87, 159, 0) 100%) !important;
   }
-  
+
   // 子菜单项悬停效果
   .el-sub-menu .el-menu-item:hover {
     background-color: rgba(0, 0, 0, 0.1) !important;
   }
-  
+
   // 主菜单项悬停效果
   .el-menu-item:hover,
   .el-sub-menu__title:hover {
@@ -399,28 +408,29 @@
 // 全局菜单样式匹配设计UI
 #app .sidebar-container {
   // 确保背景色一致
-  background: #2c3e50 !important;
-  
+  background: rgba(11, 24, 40, 1) !important;
+  //background: #2c3e50 !important;
+
   // 菜单项基础样式
   .el-menu-item,
   .el-sub-menu__title {
     color: #bfcbd9 !important;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1) !important;
     }
   }
-  
+
   // 激活的主菜单项
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;
     margin: 2px 8px;
     box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
   }
-  
+
   // 激活的子菜单项
   .el-sub-menu .el-menu-item.is-active {
     background: transparent !important;
@@ -429,19 +439,19 @@
     margin: 0;
     box-shadow: none;
   }
-  
+
   // 子菜单背景
   .el-sub-menu .el-menu {
     background: #1f2d3d !important;
   }
-  
+
   // 图标颜色
   .svg-icon {
     color: inherit !important;
   }
-  
+
   // 箭头图标颜色
   .el-sub-menu__icon-arrow {
     color: inherit !important;
   }
-}
+}

src/assets/styles/variables.module.scss

@@ -1,6 +1,6 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #2c3e50; // 精确匹配图片中的深色背景
+  --menuBg: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15),rgba(0, 87, 159, 0) 100%);; // 精确匹配图片中的深色背景
   --menuColor: #bfcbd9; // 非激活菜单项的文字颜色
   --menuActiveText: #ffffff; // 激活菜单项的文字颜色
   --menuHover: #34495e; // 悬停时的背景色
@@ -11,7 +11,7 @@
   --subMenuTitleHover: #293444; // 子菜单标题悬停背景色
 
   // 激活菜单项的渐变颜色 - 根据设计UI调整
-  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
+  --menuActiveGradient:linear-gradient(90.00deg, rgba(0, 128, 234, 1),rgba(0, 15, 39, 0) 100%);
 
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
@@ -130,7 +130,7 @@ $--color-warning: #e6a23c;
 $--color-danger: #f56c6c;
 $--color-info: #909399;
 
-$base-sidebar-width: 280px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass