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 
- 添加 !important 确保媒体查询覆盖桌面端样式
- 使用正确的选择器优先级 (.banner .banner-s .banner-list)
- 重置 flex 相关属性（flex: none）
- 重置宽度属性（min-width/max-width/width）
- 现在移动端正确显示为 2列×2行 四宫格
- 767px、480px、360px 三个断点均已修复
This commit is contained in:
yiqiu
2025-12-15 21:17:42 +08:00
parent d5d4e8c8be
commit 9eb15bed01
1 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
css/index.css
View File

@@ -2552,31 +2552,35 @@ html {
width: 45px !important; width: 45px !important;
} }
/* ===== Banner 快速入口 - 四宫格布局 ===== */ /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
.banner .banner-s { .banner .banner-s {
margin-top: -50px; margin-top: -50px;
padding: 16px 12px; padding: 16px 12px;
background: transparent; background: transparent;
} }
.banner-s .banner-list { .banner .banner-s .banner-list {
gap: 10px; gap: 10px !important;
display: grid; display: grid !important;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr) !important;
width: 100%; width: 100% !important;
padding: 0 !important;
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 16px 12px !important; padding: 16px 12px !important;
gap: 10px; gap: 0 !important;
flex: unset; flex: none !important;
display: flex; display: flex !important;
flex-direction: column; flex-direction: column !important;
align-items: center; align-items: center !important;
text-align: center; text-align: center !important;
min-height: 140px; min-height: 140px !important;
justify-content: center; justify-content: center !important;
border-radius: 8px; border-radius: 8px !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
} }
.banner-s .banner-list .banner-item .banner-item-icon { .banner-s .banner-list .banner-item .banner-item-icon {
@@ -3270,22 +3274,27 @@ html {
padding: 14px 10px; padding: 14px 10px;
} }
.banner-s .banner-list { .banner .banner-s .banner-list {
gap: 9px; gap: 9px !important;
display: grid; display: grid !important;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr) !important;
width: 100% !important;
padding: 0 !important;
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 14px 10px !important; padding: 14px 10px !important;
flex: unset; flex: none !important;
display: flex; display: flex !important;
flex-direction: column; flex-direction: column !important;
align-items: center; align-items: center !important;
text-align: center; text-align: center !important;
min-height: 130px; min-height: 130px !important;
justify-content: center; justify-content: center !important;
border-radius: 7px; border-radius: 7px !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
} }
.banner-s .banner-list .banner-item .banner-item-icon { .banner-s .banner-list .banner-item .banner-item-icon {
@@ -3398,29 +3407,34 @@ html {
bottom: 60px !important; bottom: 60px !important;
} }
.banner .banner-s { /* ===== 快速入口 - 四宫格极简版 ===== */
.banner . banner-s {
margin-top: -20px; margin-top: -20px;
padding: 12px 8px; padding: 12px 8px;
} }
.banner-s .banner-list { .banner .banner-s .banner-list {
gap: 8px; gap: 8px !important;
padding: 0; padding: 0 !important;
display: grid; display: grid !important;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr) !important;
width: 100% !important;
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 12px 8px !important; padding: 12px 8px !important;
gap: 6px; gap: 6px !important;
flex: unset; flex: none !important;
display: flex; display: flex !important;
flex-direction: column; flex-direction: column !important;
align-items: center; align-items: center !important;
text-align: center; text-align: center !important;
min-height: 120px; min-height: 120px !important;
justify-content: center; justify-content: center !important;
border-radius: 6px; border-radius: 6px !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
} }
.banner-s .banner-list .banner-item .banner-item-icon { .banner-s .banner-list .banner-item .banner-item-icon {