后台管理系统优化

web-admin/src/layouts/Layout.vue

@@ -115,10 +115,14 @@ onMounted(() => {
 <style scoped lang="scss">
 .layout-container {
   height: 100vh;
+  background: transparent;
 }
 
 .sidebar {
-  background-color: #304156;
+  background: var(--ls-glass-bg);
+  border-right: 1px solid var(--ls-glass-border);
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
   transition: width 0.3s;
   
   .logo {
@@ -127,25 +131,30 @@ onMounted(() => {
     text-align: center;
     font-size: 20px;
     font-weight: bold;
-    color: #fff;
-    background-color: #2b3a4b;
+    color: var(--ls-text);
+    background: rgba(255, 255, 255, 0.02);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
   
   :deep(.el-menu) {
     border-right: none;
-    background-color: #304156;
+    background: transparent;
     
     .el-menu-item,
     .el-sub-menu__title {
-      color: #bfcbd9;
+      color: rgba(226, 232, 240, 0.75);
+      border-radius: 14px;
+      margin: 6px 10px;
+      height: 44px;
       
       &:hover {
-        background-color: #263445;
+        background: rgba(255, 255, 255, 0.06);
       }
       
       &.is-active {
-        background-color: #409eff;
-        color: #fff;
+        background: rgba(255, 171, 145, 0.08);
+        border: 1px solid rgba(255, 171, 145, 0.20);
+        color: var(--ls-accent-orange) !important;
       }
     }
   }
@@ -155,17 +164,21 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  background: var(--ls-glass-bg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: none;
   padding: 0 20px;
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
   
   .header-left {
     .collapse-icon {
       font-size: 20px;
       cursor: pointer;
+      color: rgba(226, 232, 240, 0.85);
       
       &:hover {
-        color: #409eff;
+        color: var(--ls-accent-orange);
       }
     }
   }
@@ -176,6 +189,7 @@ onMounted(() => {
       align-items: center;
       gap: 10px;
       cursor: pointer;
+      color: rgba(226, 232, 240, 0.9);
       
       .username {
         font-size: 14px;
@@ -185,7 +199,7 @@ onMounted(() => {
 }
 
 .main-content {
-  background-color: #f0f2f5;
+  background: transparent;
   padding: 20px;
 }
 </style>