From 0388e56c673b4c3efcd33115c930d9af9d87b911 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Thu, 25 Dec 2025 23:50:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=9B=E6=B6=9B=E6=B6=9B=E6=B6=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css | 55 ++++++++++++++++++++++++++++++++++++++
 index.html    | 74 +++++++++++++++++++++++----------------------------
 2 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/css/index.css b/css/index.css
index e3b0b7f..0837780 100644
--- a/css/index.css
+++ b/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;
diff --git a/index.html b/index.html
index 2cc3dfe..0eec0de 100644
--- a/index.html
+++ b/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>
 
   <!-- 解决方案 -->