style(index): 更新首页样式和快速操作组件

- 更改页面背景渐变颜色
- 调整购买按钮背景渐变颜色
- 修改购物车图标背景渐变颜色
- 重构快速操作组件布局结构
- 更新快速操作图标尺寸和样式
- 移除快速操作标题和描述文字
- 简化快速操作组件渲染逻辑
- 添加图标颜色分类样式类
This commit is contained in:
2026-03-30 20:28:16 +08:00
parent a4ca51a3e9
commit 49e2c567a1
4 changed files with 51 additions and 105 deletions

View File

@@ -1,81 +1,50 @@
.quick-actions {
margin: 16px 16px 0;
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
padding: 24px 16px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
&__header {
margin-bottom: 20px;
}
&__title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
}
&__row {
display: flex;
flex-direction: row;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
&__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 8px 16px;
background: #f6f8fc;
border-radius: 14px;
margin-right: 12px;
&:last-child {
margin-right: 0;
}
&:active {
opacity: 0.8;
opacity: 0.7;
}
}
&__icon-box {
width: 52px;
height: 52px;
border-radius: 16px;
&__icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
margin-bottom: 8px;
&--light {
background: linear-gradient(135deg, #60a5fa, #93c5fd);
&--orange {
background: #ff8c1a;
}
&--deep {
background: linear-gradient(135deg, #1e40af, #2563eb);
&--blue {
background: #3b82f6;
}
&--navy {
background: linear-gradient(135deg, #1e3a5f, #1e5090);
&--cyan {
background: #06b6d4;
}
&--red {
background: #ef4444;
}
}
&__item-title {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
&__item-desc {
font-size: 12px;
color: #999999;
&__label {
font-size: 13px;
color: #333333;
font-weight: 500;
}
}