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 
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 <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-12-15 21:39:17 +08:00
parent de16dc47bd
commit f7f2c0a716
1 changed files with 70 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
css/index.css
View File

@@ -2554,13 +2554,13 @@ html {
/* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */ /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
.banner .banner-s { .banner .banner-s {
margin-top: -50px; margin-top: 20px;
padding: 12px 10px; padding: 8px 8px;
background: transparent; background: transparent;
} }
.banner .banner-s .banner-list { .banner .banner-s .banner-list {
gap: 8px !important; gap: 6px !important;
display: grid !important; display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
width: 100% !important; width: 100% !important;
@@ -2568,44 +2568,53 @@ html {
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 12px 10px !important; padding: 8px 10px !important;
gap: 0 !important; gap: 6px !important;
flex: none !important; flex: none !important;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: row !important;
align-items: center !important; align-items: center !important;
text-align: center !important; text-align: left !important;
min-height: 110px !important; min-height: auto !important;
justify-content: center !important; max-height: 60px !important;
border-radius: 8px !important; justify-content: flex-start !important;
border-radius: 0 !important;
width: auto !important; width: auto !important;
min-width: auto !important; min-width: auto !important;
max-width: none !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 { .banner-s .banner-list .banner-item .banner-item-icon {
width: 32px; width: 28px;
height: 32px; height: 28px;
margin-bottom: 6px; margin-bottom: 0;
margin-right: 8px;
flex-shrink: 0;
} }
.banner-s .banner-list .banner-item .banner-item-content { .banner-s .banner-list .banner-item .banner-item-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
gap: 3px; gap: 2px;
flex: 1;
min-width: 0;
} }
.banner-s .banner-list .banner-item h5 { .banner-s .banner-list .banner-item h5 {
font-size: 12px !important; font-size: 11px !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 1.2; line-height: 1.2;
color: #E5E7EB;
} }
.banner-s .banner-list .banner-item .title-desc { .banner-s .banner-list .banner-item .title-desc {
font-size: 9px !important; font-size: 8px !important;
line-height: 1.2; line-height: 1.2;
margin: 0 !important; margin: 0 !important;
color: rgba(203, 213, 225, 0.8);
} }
/* ===== 热销产品 - 精简卡片 ===== */ /* ===== 热销产品 - 精简卡片 ===== */
@@ -3270,12 +3279,12 @@ html {
/* ===== 快速入口 - 四宫格中等版 ===== */ /* ===== 快速入口 - 四宫格中等版 ===== */
.banner . banner-s { .banner . banner-s {
margin-top: -40px; margin-top: 16px;
padding: 12px 10px; padding: 8px 8px;
} }
.banner .banner-s .banner-list { .banner .banner-s .banner-list {
gap: 8px !important; gap: 6px !important;
display: grid !important; display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
width: 100% !important; width: 100% !important;
@@ -3283,43 +3292,51 @@ html {
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 12px 10px !important; padding: 8px 10px !important;
flex: none !important; flex: none !important;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: row !important;
align-items: center !important; align-items: center !important;
text-align: center !important; text-align: left !important;
min-height: 115px !important; max-height: 60px !important;
justify-content: center !important; justify-content: flex-start !important;
border-radius: 7px !important; border-radius: 0 !important;
width: auto !important; width: auto !important;
min-width: auto !important; min-width: auto !important;
max-width: none !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 { .banner-s .banner-list .banner-item .banner-item-icon {
width: 32px; width: 28px;
height: 32px; height: 28px;
margin-bottom: 6px; margin-bottom: 0;
margin-right: 8px;
flex-shrink: 0;
} }
.banner-s .banner-list .banner-item .banner-item-content { .banner-s .banner-list .banner-item .banner-item-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
gap: 3px; gap: 2px;
flex: 1;
min-width: 0;
} }
.banner-s .banner-list .banner-item h5 { .banner-s .banner-list .banner-item h5 {
font-size: 12px !important; font-size: 11px !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 1.2; line-height: 1.2;
color: #E5E7EB;
} }
.banner-s .banner-list .banner-item .title-desc { .banner-s .banner-list .banner-item .title-desc {
font-size: 9px !important; font-size: 8px !important;
line-height: 1.2; line-height: 1.2;
margin: 0 !important; margin: 0 !important;
color: rgba(203, 213, 225, 0.8);
} }
/* ===== 解决方案 ===== */ /* ===== 解决方案 ===== */
@@ -3409,12 +3426,12 @@ html {
/* ===== 快速入口 - 四宫格极简版 ===== */ /* ===== 快速入口 - 四宫格极简版 ===== */
.banner . banner-s { .banner . banner-s {
margin-top: -20px; margin-top: 12px;
padding: 12px 8px; padding: 8px 6px;
} }
.banner .banner-s .banner-list { .banner .banner-s .banner-list {
gap: 8px !important; gap: 6px !important;
padding: 0 !important; padding: 0 !important;
display: grid !important; display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
@@ -3422,44 +3439,52 @@ html {
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 10px 8px !important; padding: 8px 10px !important;
gap: 6px !important; gap: 6px !important;
flex: none !important; flex: none !important;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: row !important;
align-items: center !important; align-items: center !important;
text-align: center !important; text-align: left !important;
min-height: 105px !important; max-height: 55px !important;
justify-content: center !important; justify-content: flex-start !important;
border-radius: 6px !important; border-radius: 0 !important;
width: auto !important; width: auto !important;
min-width: auto !important; min-width: auto !important;
max-width: none !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 { .banner-s .banner-list .banner-item .banner-item-icon {
width: 26px; width: 26px;
height: 26px; height: 26px;
margin-bottom: 4px; margin-bottom: 0;
margin-right: 8px;
flex-shrink: 0;
} }
.banner-s .banner-list .banner-item .banner-item-content { .banner-s .banner-list .banner-item .banner-item-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
gap: 2px; gap: 2px;
flex: 1;
min-width: 0;
} }
.banner-s .banner-list .banner-item h5 { .banner-s .banner-list .banner-item h5 {
font-size: 11px !important; font-size: 10px !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 1.2; line-height: 1.2;
color: #E5E7EB;
} }
.banner-s .banner-list .banner-item .title-desc { .banner-s .banner-list .banner-item .title-desc {
font-size: 8px !important; font-size: 8px !important;
line-height: 1.2; line-height: 1.2;
margin: 0 !important; margin: 0 !important;
color: rgba(203, 213, 225, 0.8);
} }
/* ===== 热销产品 - 紧凑 ===== */ /* ===== 热销产品 - 紧凑 ===== */