feat(礼品卡): 优化颜色主题并添加核销功能
- 修改礼品卡颜色主题,使用渐变色提升视觉效果 - 添加礼品卡核销功能,包括生成和验证核销码 -优化礼品卡组件,增加状态显示和使用说明 - 新增礼品卡颜色测试页面,用于验证颜色
This commit is contained in:
@@ -20,21 +20,22 @@
|
||||
// 主题色彩
|
||||
&.gift-card-gold {
|
||||
.gift-card-header {
|
||||
background: #ffd700;
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #ffd700;
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
||||
border: none;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.gift-card-silver {
|
||||
.gift-card-header {
|
||||
background: #c0c0c0;
|
||||
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #c0c0c0;
|
||||
background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
|
||||
border: none;
|
||||
color: #333;
|
||||
}
|
||||
@@ -42,45 +43,49 @@
|
||||
|
||||
&.gift-card-bronze {
|
||||
.gift-card-header {
|
||||
background: #cd7f32;
|
||||
background: linear-gradient(135deg, #cd7f32 0%, #b8722c 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #cd7f32;
|
||||
background: linear-gradient(135deg, #cd7f32 0%, #b8722c 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.gift-card-blue {
|
||||
.gift-card-header {
|
||||
background: #4a90e2;
|
||||
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #4a90e2;
|
||||
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.gift-card-green {
|
||||
.gift-card-header {
|
||||
background: #5cb85c;
|
||||
background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #5cb85c;
|
||||
background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.gift-card-purple {
|
||||
.gift-card-header {
|
||||
background: #9b59b6;
|
||||
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
|
||||
}
|
||||
.use-btn {
|
||||
background: #9b59b6;
|
||||
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -519,7 +524,6 @@
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user