yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化移动端 banner-list 卡片尺寸：增加高度、调整宽度
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 767px 断点：margin-top 改为 12px，卡片 min-height 70px
- 575px 断点：margin-top 改为 10px（改正负边距堆叠），min-height 65px
- 调整 gap、padding 和 icon 尺寸，提升卡片空间感
- 字号优化：h5 改为 11-12px，描述改为 9-10px
- 解决卡片堆叠问题，优化移动端视觉效果

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-12-16 15:13:57 +08:00
parent f7f2c0a716
commit 97d744defb
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
css/index.css
View File

@@ -2554,13 +2554,13 @@ html {
/* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
.banner .banner-s {
margin-top: 20px;
padding: 8px 8px;
margin-top: 12px;
padding: 12px 8px;
background: transparent;
}
.banner .banner-s .banner-list {
gap: 6px !important;
gap: 8px !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
width: 100% !important;
@@ -2568,15 +2568,15 @@ html {
}
.banner-s .banner-list .banner-item {
padding: 8px 10px !important;
gap: 6px !important;
padding: 12px 14px !important;
gap: 8px !important;
flex: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
min-height: auto !important;
max-height: 60px !important;
min-height: 70px !important;
max-height: none !important;
justify-content: flex-start !important;
border-radius: 0 !important;
width: auto !important;
@@ -2587,10 +2587,10 @@ html {
}
.banner-s .banner-list .banner-item .banner-item-icon {
width: 28px;
height: 28px;
width: 32px;
height: 32px;
margin-bottom: 0;
margin-right: 8px;
margin-right: 10px;
flex-shrink: 0;
}
@@ -2598,21 +2598,21 @@ html {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
gap: 3px;
flex: 1;
min-width: 0;
}
.banner-s .banner-list .banner-item h5 {
font-size: 11px !important;
font-size: 12px !important;
margin-bottom: 0 !important;
line-height: 1.2;
line-height: 1.3;
color: #E5E7EB;
}
.banner-s .banner-list .banner-item .title-desc {
font-size: 8px !important;
line-height: 1.2;
font-size: 10px !important;
line-height: 1.3;
margin: 0 !important;
color: rgba(203, 213, 225, 0.8);
}
@@ -3012,24 +3012,26 @@ html {
/* ===== 快速入口 - 精简 ===== */
.banner .banner-s {
margin-top: -30px;
margin-top: 10px;
padding: 10px 6px;
}
.banner-s .banner-list .banner-item {
padding: 10px 12px !important;
min-height: 65px !important;
}
.banner-s .banner-list .banner-item .banner-item-icon {
width: 28px;
height: 28px;
width: 30px;
height: 30px;
}
.banner-s .banner-list .banner-item h5 {
font-size: 14px !important;
font-size: 11px !important;
}
.banner-s .banner-list .banner-item .title-desc {
font-size: 10px !important;
font-size: 9px !important;
}
/* ===== 热销产品 - 紧凑 ===== */
@@ -3439,14 +3441,14 @@ html {
}
.banner-s .banner-list .banner-item {
padding: 8px 10px !important;
padding: 10px 12px !important;
gap: 6px !important;
flex: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
max-height: 55px !important;
min-height: 65px !important;
justify-content: flex-start !important;
border-radius: 0 !important;
width: auto !important;
@@ -3457,8 +3459,8 @@ html {
}
.banner-s .banner-list .banner-item .banner-item-icon {
width: 26px;
height: 26px;
width: 28px;
height: 28px;
margin-bottom: 0;
margin-right: 8px;
flex-shrink: 0;
@@ -3468,20 +3470,20 @@ html {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
gap: 3px;
flex: 1;
min-width: 0;
}
.banner-s .banner-list .banner-item h5 {
font-size: 10px !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: 8px !important;
font-size: 9px !important;
line-height: 1.2;
margin: 0 !important;
color: rgba(203, 213, 225, 0.8);