1

src/assets/styles/custom-sidebar.scss

@@ -0,0 +1,87 @@
+// 自定义侧边栏样式 - 适配蓝色渐变背景
+.sidebar-container {
+  // 覆盖Element UI菜单的默认样式
+  .el-menu {
+    background: transparent !important;
+    border: none !important;
+    
+    .el-menu-item, .el-submenu__title {
+      color: #ffffff !important;
+      background: transparent !important;
+      
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        color: #ffffff !important;
+      }
+      
+      &.is-active {
+        background-color: rgba(255, 255, 255, 0.2) !important;
+        color: #ffffff !important;
+        border-right: 3px solid #ffffff !important;
+      }
+    }
+    
+    .el-submenu {
+      .el-menu {
+        background-color: rgba(255, 255, 255, 0.05) !important;
+        
+        .el-menu-item {
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.1) !important;
+          }
+          
+          &.is-active {
+            background-color: rgba(255, 255, 255, 0.15) !important;
+            color: #ffffff !important;
+          }
+        }
+      }
+    }
+  }
+  
+  // 图标颜色
+  .svg-icon {
+    color: #ffffff !important;
+  }
+  
+  // 文字颜色
+  span {
+    color: #ffffff !important;
+  }
+  
+  // 激活状态的子菜单标题
+  .is-active > .el-submenu__title {
+    color: #ffffff !important;
+  }
+  
+  // 子菜单展开时的样式
+  .el-submenu.is-opened > .el-submenu__title {
+    color: #ffffff !important;
+  }
+}
+
+// 弹出菜单样式
+.el-menu--popup {
+  background: linear-gradient(135deg, #3aa4ef 0%, #0067e2 100%) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  
+  .el-menu-item {
+    color: #ffffff !important;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+    }
+    
+    &.is-active {
+      background-color: rgba(255, 255, 255, 0.2) !important;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .sidebar-container {
+    border-radius: 0 !important;
+  }
+}

src/assets/styles/index.scss

@@ -3,6 +3,7 @@
 @import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
+@import './custom-sidebar.scss';
 @import './btn.scss';
 
 body {

src/assets/styles/sidebar.scss

@@ -15,8 +15,8 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
-    height: 100%;
+    background: $base-menu-background;
+    height: 100vh;
     position: fixed;
     font-size: 0px;
     top: 0;
@@ -24,6 +24,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    border-radius: 0 24px 0 0;
     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -46,7 +47,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 60px);
       }
     }
 
@@ -64,23 +65,25 @@
       margin-right: 16px;
     }
 
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
+         .el-menu {
+       border: none;
+       height: 100%;
+       width: 100% !important;
+       font-size: 15px; // 增加菜单字体大小
+     }
 
-    .el-menu-item, .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
+         .el-menu-item, .el-submenu__title {
+       overflow: hidden !important;
+       text-overflow: ellipsis !important;
+       white-space: nowrap !important;
+       font-size: 15px; // 确保菜单项字体大小一致
+     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important;
       }
     }
 
@@ -93,7 +96,7 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important;
       }
     }
 
@@ -202,7 +205,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: rgba(58, 164, 239, 0.1) !important;
     }
   }
 

src/assets/styles/variables.scss

@@ -8,18 +8,18 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-// 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+// 默认菜单主题风格 - 蓝色渐变主题
+$base-menu-color:#ffffff;
+$base-menu-color-active:#ffffff;
+$base-menu-background:linear-gradient(0deg, #3aa4ef 0%, #0067e2 100%);
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background:rgba(255,255,255,0.1);
+$base-sub-menu-hover:rgba(255,255,255,0.2);
 
 // 自定义暗色菜单风格
 /**