赵忠林
25abd81d9f
- 重新设计首页背景色与容器安全区适配 - 优化Hero Banner区域增加圆角遮罩效果 - 调整Hero Grid菜单区样式，去除背景色实现透明效果 - 新增公告条样式，自定义样式替代NutUI NoticeBar - 优化底部购买按钮样式，调整高度及阴影 - 统一首页通用section的左右边距，融合TrustSection和ContactSection样式
147 lines
2.4 KiB
SCSS
147 lines
2.4 KiB
SCSS
.bestsellers-list {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.bestsellers-item {
|
|
display: flex;
|
|
background: #ffffff;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
margin-bottom: 12px;
|
|
transition: transform 0.15s;
|
|
|
|
&:active {
|
|
transform: scale(0.985);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ═══ 左侧图片 ═══ */
|
|
&__img-wrap {
|
|
width: 140px;
|
|
min-height: 140px;
|
|
flex-shrink: 0;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
&__img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* ═══ 右侧信息 ═══ */
|
|
&__info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 12px 12px 10px 14px;
|
|
min-height: 140px;
|
|
}
|
|
|
|
&__name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
&__tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
&__comment {
|
|
font-size: 14px;
|
|
color: #f59e0b;
|
|
background: rgba(245, 158, 11, 0.08);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&__sales {
|
|
font-size: 14px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* ═══ 底部操作栏 ═══ */
|
|
&__bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-top: auto;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
&__price-wrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
&__price-symbol {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #ef4444;
|
|
}
|
|
|
|
&__price-num {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: #ef4444;
|
|
line-height: 1;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
&__share-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
background: #f3f4f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__buy-btn {
|
|
height: 38px;
|
|
padding: 0 20px;
|
|
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
|
border-radius: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
|
|
|
Text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ═══ 空状态 ═══ */
|
|
.bestsellers-empty {
|
|
padding: 40px 0;
|
|
text-align: center;
|
|
|
|
&__text {
|
|
font-size: 15px;
|
|
color: #9ca3af;
|
|
}
|
|
}
|