重构样式

css/index.css

@@ -266,6 +266,7 @@
 /* banner 轮播容器 */
 .banner-cont .swiper-slide {
   position: relative;
+  /* 桌面端高度 */
   height: 650px;
   width: 100%;
   /* 深色科技渐变背景 */
@@ -3480,7 +3481,7 @@ html {
   }
 
   /* ===== 快速入口 - 四宫格中等版 ===== */
-  .banner . banner-s {
+  .banner .banner-s {
     margin-top: 16px;
     padding: 8px 8px;
   }
@@ -3717,7 +3718,7 @@ html {
   }
 
   /* ===== 快速入口 - 四宫格极简版 ===== */
-  .banner . banner-s {
+  .banner .banner-s {
     margin-top: 12px;
     padding: 8px 6px;
   }
@@ -4525,3 +4526,123 @@ html {
   background: rgba(56, 189, 248, 0.3);
   box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
 }
+/* Mobile Overrides for Index Page */
+
+@media (max-width: 768px) {
+
+    /* Banner Adjustment */
+    .banner-cont .swiper-slide {
+        height: auto !important;
+        min-height: 400px;
+        padding-bottom: 60px;
+        /* Space for pagination */
+    }
+
+    .banner-cont .swiper-slide .section-content {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+        padding: 80px 20px 40px;
+        text-align: center;
+    }
+
+    .banner-cont .swiper-slide .section-content .title-wrapper {
+        max-width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .banner-cont .swiper-slide h1 {
+        font-size: 32px;
+        line-height: 1.3;
+    }
+
+    .banner-tags {
+        justify-content: center;
+        margin-bottom: 12px;
+    }
+
+    .banner-cont .banner-desc {
+        font-size: 15px;
+        margin: 0 auto 30px;
+        line-height: 1.6;
+    }
+
+    /* Feature Cards (Banner-S) */
+    .banner .banner-s {
+        margin-top: 0;
+        padding-top: 0;
+        padding-bottom: 40px;
+    }
+
+    .banner .banner-s .banner-list {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 15px;
+        padding: 0 15px;
+    }
+
+    .banner-s .banner-list .banner-item {
+        max-width: 100%;
+        min-width: 0;
+        flex: auto;
+    }
+
+    /* Hot Products - Card View */
+    .products-table thead {
+        display: none;
+    }
+
+    .products-table,
+    .products-table tbody,
+    .products-table tr,
+    .products-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .products-table tr {
+        margin-bottom: 15px;
+        background: rgba(30, 41, 59, 0.4);
+        border: 1px solid rgba(148, 163, 184, 0.1);
+        border-radius: 12px;
+        padding: 15px;
+    }
+
+    .products-table td {
+        text-align: right;
+        padding: 8px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+    }
+
+    .products-table td:last-child {
+        border-bottom: none;
+    }
+
+    .products-table td::before {
+        content: attr(data-label);
+        float: left;
+        font-weight: 600;
+        color: rgba(148, 163, 184, 0.8);
+    }
+
+    /* Solution Wrapper - Stacked */
+    .solution-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .solution-tabs {
+        display: none;
+        /* Hide desktop tabs */
+    }
+
+    /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
+     For now, let's assume we stack them or show a simple list. 
+     Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
+     Let's style the active one well first, or maybe show all?
+  */
+}