feat(礼品卡): 优化颜色主题并添加核销功能

- 修改礼品卡颜色主题,使用渐变色提升视觉效果
- 添加礼品卡核销功能,包括生成和验证核销码
-优化礼品卡组件,增加状态显示和使用说明
- 新增礼品卡颜色测试页面,用于验证颜色
This commit is contained in:
2025-08-17 10:01:56 +08:00
parent ecb5d9059a
commit ecfbdc0286
22 changed files with 2821 additions and 116 deletions

View File

@@ -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;
}
}