导航菜单主题色

css/nav-mega-menu.css

@@ -1,45 +1,49 @@
 /* 三级导航菜单样式 - 阿里云风格两栏布局 */
 
-/* 导航容器 */
+/* 导航容器 - 深色主题配色 */
 .nav-cont {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
-  background: linear-gradient(to bottom, #f8fbff 0%, #fff 100%);
+  background: rgba(15, 23, 42, 0.98);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border-top: 1px solid rgba(56, 189, 248, 0.15);
   z-index: 1000;
-  overflow: hidden;
+  overflow: visible;
   transition: height 0.3s ease-out;
 }
 
 /* Mega Menu 两栏布局 */
 .nav-cont-menu.mega-menu {
   display: none;
-  min-height: 400px;
+  height: 100%;
 }
 
 .nav-content {
   display: flex;
   max-width: 1400px;
   margin: 0 auto;
+  height: 100%;
   min-height: 400px;
 }
 
-/* 左侧二级菜单栏 */
+/* 左侧二级菜单栏 - 深色背景 */
 .nav-left-sidebar {
   width: 200px;
-  background: #f7f8fa;
+  background: rgba(30, 41, 59, 0.8);
-  border-right: 1px solid #e8e8e8;
+  border-right: 1px solid rgba(56, 189, 248, 0.15);
   flex-shrink: 0;
+  height: 100%;
 }
 
-/* 二级菜单项 */
+/* 二级菜单项 - 深色主题 */
 .nav-category-item {
   position: relative;
   display: block;
   padding: 16px 20px;
-  color: #333;
+  color: #E5E7EB;
   font-size: 14px;
   text-decoration: none;
   border-left: 3px solid transparent;
@@ -49,9 +53,9 @@
 
 .nav-category-item:hover,
 .nav-category-item.active {
-  background: #fff;
+  background: rgba(56, 189, 248, 0.1);
-  border-left-color: #1890ff;
+  border-left-color: #38BDF8;
-  color: #1890ff;
+  color: #38BDF8;
 }
 
 .nav-category-item .category-icon {
@@ -74,18 +78,19 @@
 
 .nav-category-desc {
   font-size: 12px;
-  color: #999;
+  color: #94A3B8;
   margin-top: 2px;
   display: block;
 }
 
-/* 右侧三级菜单区域 */
+/* 右侧三级菜单区域 - 深色背景 */
 .nav-right-content {
   flex: 1;
   padding: 24px 32px;
-  background: linear-gradient(135deg, #fafcff 0%, #ffffff 100%);
+  background: rgba(15, 23, 42, 0.6);
   overflow-y: auto;
-  max-height: 500px;
+  max-height: none;
+  height: 100%;
 }
 
 /* 三级菜单容器 */
@@ -98,14 +103,14 @@
   animation: fadeInRight 0.3s ease;
 }
 
-/* 三级菜单标题 */
+/* 三级菜单标题 - 浅色 */
 .nav-third-title {
   font-size: 16px;
   font-weight: 600;
-  color: #333;
+  color: #E5E7EB;
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 2px solid #1890ff;
+  border-bottom: 2px solid #38BDF8;
   display: inline-block;
 }
 
@@ -130,12 +135,13 @@
   width: 100%;
   padding: 10px 12px 10px 24px;
   border-radius: 4px;
-  color: #333;
+  background: rgba(30, 41, 59, 0.4);
+  color: #E5E7EB;
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.2s ease;
-  border: 1px solid transparent;
+  border: 1px solid rgba(56, 189, 248, 0.15);
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
@@ -150,17 +156,18 @@
   left: 8px;
   top: 50%;
   transform: translateY(-50%);
-  color: #1890ff;
+  color: #38BDF8;
   font-size: 16px;
   font-weight: bold;
 }
 
 .nav-cont-menu .nav-third-grid .nav-third-link:hover,
 .nav-third-panel .nav-third-link:hover {
-  background: #e6f7ff;
+  background: rgba(56, 189, 248, 0.2);
-  border-color: #91d5ff;
+  border-color: #38BDF8;
-  color: #1890ff;
+  color: #38BDF8;
   padding-left: 28px;
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
 }
 
 .nav-cont-menu .nav-third-grid .nav-third-link:hover::before,