diff --git a/css/index.css b/css/index.css index 7958260..5ab4779 100644 --- a/css/index.css +++ b/css/index.css @@ -2552,37 +2552,56 @@ html { width: 45px !important; } - /* ===== Banner 快速入口 - 紧凑布局 ===== */ + /* ===== Banner 快速入口 - 四宫格布局 ===== */ .banner .banner-s { - margin-top: -40px; - padding: 10px 0; + margin-top: -50px; + padding: 16px 12px; + background: transparent; } .banner-s .banner-list { - gap: 8px; + gap: 10px; display: grid; - grid-template-columns: repeat(2, 1fr); /* 一行两个 */ + grid-template-columns: repeat(2, 1fr); + width: 100%; } .banner-s .banner-list .banner-item { - padding: 12px 16px !important; + padding: 16px 12px !important; gap: 10px; - flex: unset; /* 移除 flex 属性,改用 grid */ + flex: unset; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-height: 140px; + justify-content: center; + border-radius: 8px; } .banner-s .banner-list .banner-item .banner-item-icon { - width: 32px; - height: 32px; + width: 40px; + height: 40px; + margin-bottom: 8px; + } + + .banner-s .banner-list .banner-item .banner-item-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; } .banner-s .banner-list .banner-item h5 { - font-size: 15px !important; - margin-bottom: 4px; + font-size: 14px !important; + margin-bottom: 0 !important; + line-height: 1.3; } .banner-s .banner-list .banner-item .title-desc { - font-size: 11px !important; - line-height: 1.4; + font-size: 10px !important; + line-height: 1.3; + margin: 0 !important; } /* ===== 热销产品 - 精简卡片 ===== */ @@ -3245,9 +3264,53 @@ html { -webkit-line-clamp: 1; } - /* ===== 快速入口 ===== */ + /* ===== 快速入口 - 四宫格中等版 ===== */ + .banner . banner-s { + margin-top: -40px; + padding: 14px 10px; + } + + .banner-s .banner-list { + gap: 9px; + display: grid; + grid-template-columns: repeat(2, 1fr); + } + + .banner-s .banner-list .banner-item { + padding: 14px 10px !important; + flex: unset; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-height: 130px; + justify-content: center; + border-radius: 7px; + } + + .banner-s .banner-list .banner-item .banner-item-icon { + width: 36px; + height: 36px; + margin-bottom: 6px; + } + + .banner-s .banner-list .banner-item .banner-item-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; + } + .banner-s .banner-list .banner-item h5 { font-size: 13px !important; + margin-bottom: 0 !important; + line-height: 1.3; + } + + .banner-s .banner-list .banner-item .title-desc { + font-size: 9px !important; + line-height: 1.3; + margin: 0 !important; } /* ===== 解决方案 ===== */ @@ -3335,35 +3398,54 @@ html { bottom: 60px !important; } - /* ===== 快速入口 - 2列 ===== */ .banner .banner-s { margin-top: -20px; - padding: 8px 0; + padding: 12px 8px; } .banner-s .banner-list { - gap: 6px; - padding: 0 8px; + gap: 8px; + padding: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); } .banner-s .banner-list .banner-item { - padding: 8px 10px !important; - gap: 8px; + padding: 12px 8px !important; + gap: 6px; + flex: unset; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-height: 120px; + justify-content: center; + border-radius: 6px; } .banner-s .banner-list .banner-item .banner-item-icon { - width: 24px; - height: 24px; + width: 28px; + height: 28px; + margin-bottom: 4px; + } + + .banner-s .banner-list .banner-item .banner-item-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; } .banner-s .banner-list .banner-item h5 { - font-size: 12px !important; - margin-bottom: 2px; - line-height: 1.3; + font-size: 11px !important; + margin-bottom: 0 !important; + line-height: 1.2; } .banner-s .banner-list .banner-item .title-desc { font-size: 8px !important; + line-height: 1.2; + margin: 0 !important; } /* ===== 热销产品 - 紧凑 ===== */