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