美化移动端CSS

css/index.css

@@ -210,17 +210,58 @@
   opacity: 1;
 }
 
-/* 响应式 */
+/* ============================================
+   移动端导航优化
+   ============================================ */
+
+/* 移动端响应式优化 */
 @media (max-width: 768px) {
+
+  /* 调整导航栏高度 */
   #index .nav-header {
-    height: 60px;
+    height: 56px;
+    padding: 0 16px;
   }
 
-  #index .no-login .btn.btn-normal-light.mr-10#loginBtn,
+  /* 隐藏桌面端导航菜单 */
+  #index .nav-menu {
+    display: none !important;
+  }
+
+  /* 隐藏桌面端的文档、控制台链接 */
+  #index .nav-desktop-link {
+    display: none !important;
+  }
+
+  /* Logo 缩小 */
+  #index .nav-icon img {
+    max-height: 32px;
+  }
+
+  /* 调整移动端注册按钮样式 */
   #index .no-login .btn.btn-normal#registBtn {
     padding: 0 20px !important;
-    font-size: 13px !important;
+    font-size: 14px !important;
-    min-width: 80px !important;
+    min-width: auto !important;
+    border-radius: 20px !important;
+    border-left: none !important;
+    height: 40px !important;
+  }
+
+  /* 移动端注册按钮图标隐藏 */
+  #index .no-login .btn.btn-normal#registBtn::before {
+    display: none;
+  }
+
+  /* 移动端登录按钮（如果需要显示） */
+  #index .no-login .nav-text-link#loginBtn {
+    padding: 0 12px !important;
+    font-size: 14px !important;
+  }
+
+  /* 确保汉堡菜单按钮显示 */
+  #index .mobile-menu-toggle {
+    display: flex !important;
   }
 }
 
@@ -620,6 +661,81 @@
   }
 }
 
+/* ============================================
+   移动端 Banner 优化
+   ============================================ */
+
+@media (max-width: 768px) {
+
+  /* 调整 banner 高度 */
+  .banner-cont .swiper-slide {
+    height: 480px;
+    /* 移动端使用更清爽的渐变背景 */
+    background:
+      linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%),
+      linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%);
+  }
+
+  /* 移动端遮罩层更轻 */
+  .banner-cont .swiper-slide::before {
+    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(224, 242, 254, 0.9) 100%);
+  }
+
+  /* 移动端文字内容居中对齐 */
+  .banner-cont .swiper-slide .section-content {
+    text-align: center;
+    padding: 0 20px;
+  }
+
+  /* 移动端标题样式 */
+  .banner-cont .swiper-slide h1 {
+    font-size: 28px;
+    line-height: 1.3;
+    /* 移动端使用深色文字 */
+    background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: none;
+  }
+
+  /* 移动端标签居中 */
+  .banner-tags {
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  .banner-tag-pill {
+    font-size: 11px;
+    padding: 4px 12px;
+  }
+
+  /* 移动端描述文字 */
+  .banner-cont .banner-desc {
+    font-size: 14px;
+    line-height: 1.6;
+    color: #475569;
+    margin-top: 16px;
+    margin-bottom: 24px;
+  }
+
+  /* 移动端按钮样式 */
+  .banner-cont .btn2 {
+    font-size: 14px;
+    padding: 12px 32px;
+  }
+
+  /* 移动端分页器位置调整 */
+  .banner-cont .swiper-pagination {
+    bottom: 24px !important;
+  }
+
+  .banner-cont .swiper-pagination-bullet {
+    width: 40px !important;
+    height: 3px !important;
+  }
+}
+
 /* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
 .banner .banner-s {
   margin-top: -80px;
@@ -732,6 +848,95 @@
   display: none;
 }
 
+/* ============================================
+   移动端 Banner-List 卡片优化
+   ============================================ */
+
+@media (max-width: 768px) {
+
+  /* 调整 banner-s 区域 */
+  .banner .banner-s {
+    margin-top: -60px;
+    padding: 16px 0 24px;
+  }
+
+  .banner .banner-s .banner-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    padding: 0 16px;
+  }
+
+  /* 移动端卡片样式 - 轻量白色主题 */
+  .banner-s .banner-list .banner-item {
+    flex: none;
+    min-width: auto;
+    max-width: none;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    /* 轻量背景 */
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+
+    /* 轻量边框和圆角 */
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    border-radius: 12px;
+
+    /* 轻量阴影 */
+    box-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  /* 移动端卡片图标 */
+  .banner-s .banner-list .banner-item .banner-item-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  /* 移动端卡片悬停效果 */
+  .banner-s .banner-list .banner-item:hover {
+    transform: translateY(-3px);
+    border-color: rgba(56, 189, 248, 0.3);
+    background: rgba(255, 255, 255, 1);
+    box-shadow:
+      0 4px 16px rgba(15, 23, 42, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 1);
+  }
+
+  /* 移动端标题文字 - 深色 */
+  .banner .banner-s .banner-list .banner-item h5 {
+    color: #0f172a;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .banner .banner-s .banner-list .banner-item h5 .highlight {
+    color: #0ea5e9;
+  }
+
+  .banner .banner-s .banner-list .banner-item:hover h5 {
+    color: #0ea5e9;
+  }
+
+  /* 移动端描述文字 - 深色 */
+  .banner .banner-s .banner-list .banner-item .title-desc {
+    color: #64748b;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  /* 移动端光晕效果调整 */
+  .banner-s .banner-list .banner-item::before {
+    display: none;
+  }
+}
+
 /* ============================================
    热销产品展示区域 - 卡片式布局
    ============================================ */