From f7f2c0a71612059748196c2d77367a53ad99c6c9 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Mon, 15 Dec 2025 21:39:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=20banner-list=EF=BC=9A=E5=88=86=E7=A6=BB=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E3=80=81=E8=B0=83=E6=95=B4=E6=96=B9=E5=90=91=E3=80=81=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E5=9C=86=E8=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit layout 优化： - margin-top：从负值改为正值，确保不重叠幻灯片区域 * 767px：-50px → 20px * 480px：-40px → 16px * 360px：-20px → 12px 卡片方向改变： - flex-direction：column → row（图标改为左边排列） - text-align：center → left（文字左对齐） - align-items：center → flex-start（文字顶对齐） 尺寸优化： - 移除 min-height 限制，改为 max-height 控制 - 767px：110px → auto, max-height: 60px - 480px：115px → auto, max-height: 60px - 360px：105px → auto, max-height: 55px 图标调整： - margin-bottom → margin-right: 8px（改为右边间距） - 图标尺寸缩小 - flex-shrink: 0（防止挤压） 圆角移除： - border-radius：8px/7px/6px → 0（所有断点） 其他改进： - 添加背景和边框提升视觉层次 - 字体、颜色调整保持一致性 - 内容区域自适应宽度 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/index.css | 115 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 70 insertions(+), 45 deletions(-) diff --git a/css/index.css b/css/index.css index adc37f3..edf3165 100644 --- a/css/index.css +++ b/css/index.css @@ -2554,13 +2554,13 @@ html { /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */ .banner .banner-s { - margin-top: -50px; - padding: 12px 10px; + margin-top: 20px; + padding: 8px 8px; background: transparent; } .banner .banner-s .banner-list { - gap: 8px !important; + gap: 6px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; @@ -2568,44 +2568,53 @@ html { } .banner-s .banner-list .banner-item { - padding: 12px 10px !important; - gap: 0 !important; + padding: 8px 10px !important; + gap: 6px !important; flex: none !important; display: flex !important; - flex-direction: column !important; + flex-direction: row !important; align-items: center !important; - text-align: center !important; - min-height: 110px !important; - justify-content: center !important; - border-radius: 8px !important; + text-align: left !important; + min-height: auto !important; + max-height: 60px !important; + justify-content: flex-start !important; + border-radius: 0 !important; width: auto !important; min-width: auto !important; max-width: none !important; + background: rgba(15, 23, 42, 0.6) !important; + border: 1px solid rgba(148, 163, 184, 0.15) !important; } .banner-s .banner-list .banner-item .banner-item-icon { - width: 32px; - height: 32px; - margin-bottom: 6px; + width: 28px; + height: 28px; + margin-bottom: 0; + margin-right: 8px; + flex-shrink: 0; } .banner-s .banner-list .banner-item .banner-item-content { display: flex; flex-direction: column; - align-items: center; - gap: 3px; + align-items: flex-start; + gap: 2px; + flex: 1; + min-width: 0; } .banner-s .banner-list .banner-item h5 { - font-size: 12px !important; + font-size: 11px !important; margin-bottom: 0 !important; line-height: 1.2; + color: #E5E7EB; } .banner-s .banner-list .banner-item .title-desc { - font-size: 9px !important; + font-size: 8px !important; line-height: 1.2; margin: 0 !important; + color: rgba(203, 213, 225, 0.8); } /* ===== 热销产品 - 精简卡片 ===== */ @@ -3270,12 +3279,12 @@ html { /* ===== 快速入口 - 四宫格中等版 ===== */ .banner . banner-s { - margin-top: -40px; - padding: 12px 10px; + margin-top: 16px; + padding: 8px 8px; } .banner .banner-s .banner-list { - gap: 8px !important; + gap: 6px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; @@ -3283,43 +3292,51 @@ html { } .banner-s .banner-list .banner-item { - padding: 12px 10px !important; + padding: 8px 10px !important; flex: none !important; display: flex !important; - flex-direction: column !important; + flex-direction: row !important; align-items: center !important; - text-align: center !important; - min-height: 115px !important; - justify-content: center !important; - border-radius: 7px !important; + text-align: left !important; + max-height: 60px !important; + justify-content: flex-start !important; + border-radius: 0 !important; width: auto !important; min-width: auto !important; max-width: none !important; + background: rgba(15, 23, 42, 0.6) !important; + border: 1px solid rgba(148, 163, 184, 0.15) !important; } .banner-s .banner-list .banner-item .banner-item-icon { - width: 32px; - height: 32px; - margin-bottom: 6px; + width: 28px; + height: 28px; + margin-bottom: 0; + margin-right: 8px; + flex-shrink: 0; } .banner-s .banner-list .banner-item .banner-item-content { display: flex; flex-direction: column; - align-items: center; - gap: 3px; + align-items: flex-start; + gap: 2px; + flex: 1; + min-width: 0; } .banner-s .banner-list .banner-item h5 { - font-size: 12px !important; + font-size: 11px !important; margin-bottom: 0 !important; line-height: 1.2; + color: #E5E7EB; } .banner-s .banner-list .banner-item .title-desc { - font-size: 9px !important; + font-size: 8px !important; line-height: 1.2; margin: 0 !important; + color: rgba(203, 213, 225, 0.8); } /* ===== 解决方案 ===== */ @@ -3409,12 +3426,12 @@ html { /* ===== 快速入口 - 四宫格极简版 ===== */ .banner . banner-s { - margin-top: -20px; - padding: 12px 8px; + margin-top: 12px; + padding: 8px 6px; } .banner .banner-s .banner-list { - gap: 8px !important; + gap: 6px !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; @@ -3422,44 +3439,52 @@ html { } .banner-s .banner-list .banner-item { - padding: 10px 8px !important; + padding: 8px 10px !important; gap: 6px !important; flex: none !important; display: flex !important; - flex-direction: column !important; + flex-direction: row !important; align-items: center !important; - text-align: center !important; - min-height: 105px !important; - justify-content: center !important; - border-radius: 6px !important; + text-align: left !important; + max-height: 55px !important; + justify-content: flex-start !important; + border-radius: 0 !important; width: auto !important; min-width: auto !important; max-width: none !important; + background: rgba(15, 23, 42, 0.6) !important; + border: 1px solid rgba(148, 163, 184, 0.15) !important; } .banner-s .banner-list .banner-item .banner-item-icon { width: 26px; height: 26px; - margin-bottom: 4px; + margin-bottom: 0; + margin-right: 8px; + flex-shrink: 0; } .banner-s .banner-list .banner-item .banner-item-content { display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; gap: 2px; + flex: 1; + min-width: 0; } .banner-s .banner-list .banner-item h5 { - font-size: 11px !important; + font-size: 10px !important; margin-bottom: 0 !important; line-height: 1.2; + color: #E5E7EB; } .banner-s .banner-list .banner-item .title-desc { font-size: 8px !important; line-height: 1.2; margin: 0 !important; + color: rgba(203, 213, 225, 0.8); } /* ===== 热销产品 - 紧凑 ===== */