缩小移动端 banner-list 卡片尺寸,优化进度条位置
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
移动端优化: - 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>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user