涛涛涛涛

css/index.css

@@ -1107,6 +1107,11 @@
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
+/* 隐藏移动端的查看更多按钮 */
+.products-more-btn-wrapper {
+  display: none;
+}
+
 .product-card:hover {
   transform: translateY(-4px);
   border-color: rgba(56, 189, 248, 0.4);
@@ -5047,6 +5052,56 @@ html {
     border-radius: 4px;
   }
 
+  /* Hot Products - Mobile Fold & Expand */
+  .products-grid .product-card:nth-child(n+5) {
+    display: none;
+  }
+
+  .products-grid.expanded .product-card:nth-child(n+5) {
+    display: block;
+    animation: fadeIn 0.5s ease;
+  }
+
+  .products-more-btn-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .products-more-btn {
+    background: rgba(30, 41, 59, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: #cbd5e1;
+    padding: 10px 24px;
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .products-more-btn:hover {
+    background: rgba(56, 189, 248, 0.2);
+    border-color: rgba(56, 189, 248, 0.4);
+    color: #fff;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   /* Hot Products - Card View Override */
   .products-table thead {
     display: none;

index.html

@@ -139,13 +139,11 @@
         <div class="hot-products-title">
           <h3>热销产品推荐</h3>
           <p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
-        </div>
 
-        <!-- Swiper Container -->
+          <!-- Products Grid -->
-        <div class="swiper hot-products-swiper">
+          <div class="products-grid hot-products-list">
-          <div class="swiper-wrapper products-grid">
             <!-- 产品卡片 1 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">香港弹性云</h4>
                 <div class="product-badges">
@@ -175,7 +173,7 @@
             </div>
 
             <!-- 产品卡片 2 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">美国高防云</h4>
                 <div class="product-badges">
@@ -204,7 +202,7 @@
             </div>
 
             <!-- 产品卡片 3 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">新加坡CN2云</h4>
                 <div class="product-badges">
@@ -234,7 +232,7 @@
             </div>
 
             <!-- 产品卡片 4 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">日本BGP云</h4>
                 <div class="product-badges">
@@ -263,7 +261,7 @@
             </div>
 
             <!-- 产品卡片 5 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">韩国CN2云</h4>
                 <div class="product-badges">
@@ -292,7 +290,7 @@
             </div>
 
             <!-- 产品卡片 6 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">国内BGP云</h4>
                 <div class="product-badges">
@@ -321,7 +319,7 @@
             </div>
 
             <!-- 产品卡片 7 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">镇江高防云</h4>
                 <div class="product-badges">
@@ -350,7 +348,7 @@
             </div>
 
             <!-- 产品卡片 8 -->
-            <div class="swiper-slide product-card">
+            <div class="product-card">
               <div class="product-card-header">
                 <h4 class="product-name">宿迁BGP云</h4>
                 <div class="product-badges">
@@ -379,42 +377,36 @@
             </div>
 
           </div>
-          <!-- Pagination -->
-          <div class="swiper-pagination hot-products-pagination"></div>
-        </div>
 
-        <script>
+          <!-- Show More Button (Mobile Only) -->
-          document.addEventListener('DOMContentLoaded', function () {
+          <div class="products-more-btn-wrapper">
-            var hotProductsSwiper;
+            <button id="toggleProductsBtn" class="products-more-btn" onclick="toggleHotProducts()">
-            function initHotProductsSwiper() {
+              查看更多产品 <i class="iconfont icon-arrow-down"></i>
-              if (window.innerWidth < 768) {
+            </button>
-                if (!hotProductsSwiper) {
+          </div>
-                  hotProductsSwiper = new Swiper('.hot-products-swiper', {
+
-                    slidesPerView: 1.2,
+          <script>
-                    spaceBetween: 16,
+            // Hot Products Collapse/Expand Logic
-                    centeredSlides: true,
+            function toggleHotProducts() {
-                    loop: false,
+              var list = document.querySelector('.hot-products-list');
-                    pagination: {
+              var btn = document.getElementById('toggleProductsBtn');
-                      el: '.hot-products-pagination',
+              var btnIcon = btn.querySelector('i');
-                      clickable: true,
+
-                    },
+              if (list.classList.contains('expanded')) {
-                  });
+                list.classList.remove('expanded');
-                }
+                btn.innerHTML = '查看更多产品 <i class="iconfont icon-arrow-down"></i>';
+                // Scroll back to top of list if needed, or just let it collapse
               } else {
-                if (hotProductsSwiper) {
+                list.classList.add('expanded');
-                  hotProductsSwiper.destroy(true, true);
+                btn.innerHTML = '收起产品 <i class="iconfont icon-arrow-up"></i>';
-                  hotProductsSwiper = undefined;
-                }
               }
             }
-
+          </script>
-            initHotProductsSwiper();
+        </div>
-            window.addEventListener('resize', initHotProductsSwiper);
-          });
-        </script>
       </div>
     </div>
     </div>
+    </div>
   </section>
 
   <!-- 解决方案 -->