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;
+  }
+}