样式尝试优化！

admin/dashboard/templates/base.html

@@ -23,6 +23,7 @@
             margin: 0;
             padding: 0;
             font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+            background-color: #f5f7fa;
         }
         .app-container {
             height: 100vh;
@@ -30,13 +31,14 @@
             flex-direction: column;
         }
         .header {
-            background-color: #006af5;
+            background: linear-gradient(135deg, #1890ff 0%, #006af5 100%);
             color: white;
             padding: 0 20px;
             height: 60px;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
         }
         .header-left {
             display: flex;
@@ -46,6 +48,8 @@
             width: 40px;
             height: 40px;
             margin-right: 10px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         .main-container {
             display: flex;
@@ -53,36 +57,67 @@
             overflow: hidden;
         }
         .sidebar {
-            width: 180px;
-            background-color: #545c64;
+            width: 200px;
+            background-color: #fff;
             height: 100%;
             overflow-y: auto;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
         }
         .content {
             flex: 1;
-            padding: 20px;
+            padding: 24px;
             overflow-y: auto;
-            background-color: #f0f2f5;
+            background-color: #f5f7fa;
             display: flex;
             flex-direction: column;
         }
         .el-menu {
             border-right: none;
         }
+        .el-menu-item {
+            height: 50px;
+            line-height: 50px;
+            margin: 4px 0;
+            border-radius: 4px;
+            margin: 4px 8px;
+        }
+        .el-menu-item:hover {
+            background-color: #f5f7fa !important;
+        }
+        .el-menu-item.is-active {
+            background-color: #e6f7ff !important;
+            color: #1890ff !important;
+        }
         .chart-container {
             background-color: white;
-            padding: 20px;
-            border-radius: 4px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
+            padding: 24px;
+            border-radius: 8px;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+            margin-bottom: 24px;
+            transition: all 0.3s ease;
+        }
+        .chart-container:hover {
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+            transform: translateY(-2px);
         }
         .stats-card {
-            margin-bottom: 20px;
+            margin-bottom: 24px;
+            transition: all 0.3s ease;
+        }
+        .stats-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
         }
         .logout-btn {
             color: white;
             cursor: pointer;
             margin-left: 15px;
+            padding: 8px 16px;
+            border-radius: 4px;
+            transition: all 0.3s ease;
+        }
+        .logout-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
         }
         .header-right {
             display: flex;
@@ -90,6 +125,23 @@
         }
         .user-info {
             margin-right: 10px;
+            font-weight: 500;
+        }
+        /* 自定义滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
         }
     </style>