涛涛涛涛

index.html

@@ -139,13 +139,11 @@
         <div class="hot-products-title">
           <h3>热销产品推荐</h3>
           <p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
-        </div>
 
-        <!-- Swiper Container -->
-        <div class="swiper hot-products-swiper">
-          <div class="swiper-wrapper products-grid">
+          <!-- Products Grid -->
+          <div class="products-grid hot-products-list">
             <!-- 产品卡片 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>
-          document.addEventListener('DOMContentLoaded', function () {
-            var hotProductsSwiper;
-            function initHotProductsSwiper() {
-              if (window.innerWidth < 768) {
-                if (!hotProductsSwiper) {
-                  hotProductsSwiper = new Swiper('.hot-products-swiper', {
-                    slidesPerView: 1.2,
-                    spaceBetween: 16,
-                    centeredSlides: true,
-                    loop: false,
-                    pagination: {
-                      el: '.hot-products-pagination',
-                      clickable: true,
-                    },
-                  });
-                }
+          <!-- Show More Button (Mobile Only) -->
+          <div class="products-more-btn-wrapper">
+            <button id="toggleProductsBtn" class="products-more-btn" onclick="toggleHotProducts()">
+              查看更多产品 <i class="iconfont icon-arrow-down"></i>
+            </button>
+          </div>
+
+          <script>
+            // Hot Products Collapse/Expand Logic
+            function toggleHotProducts() {
+              var list = document.querySelector('.hot-products-list');
+              var btn = document.getElementById('toggleProductsBtn');
+              var btnIcon = btn.querySelector('i');
+
+              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) {
-                  hotProductsSwiper.destroy(true, true);
-                  hotProductsSwiper = undefined;
-                }
+                list.classList.add('expanded');
+                btn.innerHTML = '收起产品 <i class="iconfont icon-arrow-up"></i>';
               }
             }
-
-            initHotProductsSwiper();
-            window.addEventListener('resize', initHotProductsSwiper);
-          });
-        </script>
+          </script>
+        </div>
       </div>
     </div>
     </div>
+    </div>
   </section>
 
   <!-- 解决方案 -->