From de16dc47bd5b97e311813b1aeeff4f6d16dd8fd9 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Mon, 15 Dec 2025 21:28:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=A9=E5=B0=8F=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=20banner-list=20=E5=8D=A1=E7=89=87=E5=B0=BA=E5=AF=B8=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BF=9B=E5=BA=A6=E6=9D=A1=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移动端优化：
- 767px（主要移动端）：
  * 卡片高度 140px → 110px，内边距 16px 12px → 12px 10px
  * 图标尺寸 40px → 32px，字体 14px → 12px
  * 卡片间距 10px → 8px
  * 进度条位置 bottom: 40px → 150px 避免与按钮重合

- 480px（中等手机）：
  * 卡片高度 130px → 115px，内边距 14px 10px → 12px 10px
  * 图标尺寸 36px → 32px，字体 13px → 12px
  * 卡片间距 9px → 8px
  * 行高从 1.3 → 1.2 提升紧凑度

- 360px（超小屏手机）：
  * 卡片高度 120px → 105px，内边距 12px 8px → 10px 8px
  * 图标尺寸 28px → 26px
  * 进度条位置 bottom: 60px → 130px 避免重合

四宫格布局保持 2 列 × 2 行不变，整体更加紧凑美观

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 css/index.css | 54 +++++++++++++++++++++++++--------------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/css/index.css b/css/index.css
index 775704d..adc37f3 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2545,7 +2545,7 @@ html {
 
   /* 调整进度条位置，避免和按钮重合 */
   .banner-cont .swiper-pagination {
-    bottom: 40px !important;
+    bottom: 150px !important;
   }
 
   .banner-cont .swiper-pagination-bullet {
@@ -2555,12 +2555,12 @@ html {
   /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
   .banner .banner-s {
     margin-top: -50px;
-    padding: 16px 12px;
+    padding: 12px 10px;
     background: transparent;
   }
 
   .banner .banner-s .banner-list {
-    gap: 10px !important;
+    gap: 8px !important;
     display: grid !important;
     grid-template-columns: repeat(2, 1fr) !important;
     width: 100% !important;
@@ -2568,14 +2568,14 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 16px 12px !important;
+    padding: 12px 10px !important;
     gap: 0 !important;
     flex: none !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     text-align: center !important;
-    min-height: 140px !important;
+    min-height: 110px !important;
     justify-content: center !important;
     border-radius: 8px !important;
     width: auto !important;
@@ -2584,27 +2584,27 @@ html {
   }
 
   .banner-s .banner-list .banner-item .banner-item-icon {
-    width: 40px;
-    height: 40px;
-    margin-bottom: 8px;
+    width: 32px;
+    height: 32px;
+    margin-bottom: 6px;
   }
 
   .banner-s .banner-list .banner-item .banner-item-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
   }
 
   .banner-s .banner-list .banner-item h5 {
-    font-size: 14px !important;
+    font-size: 12px !important;
     margin-bottom: 0 !important;
-    line-height: 1.3;
+    line-height: 1.2;
   }
 
   .banner-s .banner-list .banner-item .title-desc {
-    font-size: 10px !important;
-    line-height: 1.3;
+    font-size: 9px !important;
+    line-height: 1.2;
     margin: 0 !important;
   }
 
@@ -3271,11 +3271,11 @@ html {
   /* ===== 快速入口 - 四宫格中等版 ===== */
   .banner . banner-s {
     margin-top: -40px;
-    padding: 14px 10px;
+    padding: 12px 10px;
   }
 
   .banner .banner-s .banner-list {
-    gap: 9px !important;
+    gap: 8px !important;
     display: grid !important;
     grid-template-columns: repeat(2, 1fr) !important;
     width: 100% !important;
@@ -3283,13 +3283,13 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 14px 10px !important;
+    padding: 12px 10px !important;
     flex: none !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     text-align: center !important;
-    min-height: 130px !important;
+    min-height: 115px !important;
     justify-content: center !important;
     border-radius: 7px !important;
     width: auto !important;
@@ -3298,8 +3298,8 @@ html {
   }
 
   .banner-s .banner-list .banner-item .banner-item-icon {
-    width: 36px;
-    height: 36px;
+    width: 32px;
+    height: 32px;
     margin-bottom: 6px;
   }
 
@@ -3311,14 +3311,14 @@ html {
   }
 
   .banner-s .banner-list .banner-item h5 {
-    font-size: 13px !important;
+    font-size: 12px !important;
     margin-bottom: 0 !important;
-    line-height: 1.3;
+    line-height: 1.2;
   }
 
   .banner-s .banner-list .banner-item .title-desc {
     font-size: 9px !important;
-    line-height: 1.3;
+    line-height: 1.2;
     margin: 0 !important;
   }
 
@@ -3404,7 +3404,7 @@ html {
   }
 
   .banner-cont .swiper-pagination {
-    bottom: 60px !important;
+    bottom: 130px !important;
   }
 
   /* ===== 快速入口 - 四宫格极简版 ===== */
@@ -3422,14 +3422,14 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 12px 8px !important;
+    padding: 10px 8px !important;
     gap: 6px !important;
     flex: none !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     text-align: center !important;
-    min-height: 120px !important;
+    min-height: 105px !important;
     justify-content: center !important;
     border-radius: 6px !important;
     width: auto !important;
@@ -3438,8 +3438,8 @@ html {
   }
 
   .banner-s .banner-list .banner-item .banner-item-icon {
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
     margin-bottom: 4px;
   }