gxwebsoft/mp-10550
Template
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构 CouponCard 组件样式

Browse Source 
- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画
- 添加了响应式样式，提高了移动端体验
- 新增了 CouponList组件样式，用于展示优惠券列表
This commit is contained in:
赵忠林
2025-08-22 17:27:45 +08:00
parent 41702c295a
commit 1e51a137ee
20 changed files with 1321 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
src/components/CouponCard.scss
View File

@@ -2,115 +2,177 @@
position: relative;
display: flex;
width: 100%;
height: 120px;
margin-bottom: 16px;
border-radius: 12px;
height: 140px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background: #fff;
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// 更精美的阴影效果
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.1);
// 边框光晕效果
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
&:active {
transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transform: scale(0.98) translateY(1px);
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.15);
}
&.disabled {
opacity: 0.6;
filter: grayscale(0.3);
}
.coupon-left {
flex-shrink: 0;
width: 110px;
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
overflow: hidden;
// 添加光泽效果
&::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
&.theme-red {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
&.theme-orange {
background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
&.theme-blue {
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
&.theme-purple {
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
&.theme-green {
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.amount-wrapper {
display: flex;
align-items: baseline;
margin-bottom: 8px;
margin-bottom: 10px;
position: relative;
z-index: 2;
.currency {
font-size: 28px;
font-weight: 600;
margin-right: 2px;
font-size: 30px;
font-weight: 700;
margin-right: 3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.amount {
font-size: 36px;
font-weight: bold;
font-size: 42px;
font-weight: 800;
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: -1px;
}
}
.condition {
font-size: 22px;
opacity: 0.9;
font-size: 24px;
opacity: 0.95;
text-align: center;
line-height: 1.2;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
}
.coupon-divider {
flex-shrink: 0;
width: 2px;
width: 3px;
position: relative;
background: #f5f5f5;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
.divider-line {
width: 100%;
height: 100%;
position: absolute;
top: 24px;
bottom: 24px;
left: 50%;
width: 1px;
transform: translateX(-50%);
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 4px,
#ddd 4px,
#ddd 8px
#cbd5e1 0px,
#cbd5e1 6px,
transparent 6px,
transparent 12px
);
}
.divider-circle-top {
position: absolute;
width: 16px;
height: 16px;
background: #f5f5f5;
width: 20px;
height: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 50%;
top: -8px;
left: -7px;
top: -10px;
left: -8.5px;
border: 2px solid #e2e8f0;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.divider-circle-bottom {
position: absolute;
width: 16px;
height: 16px;
background: #f5f5f5;
width: 20px;
height: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 50%;
bottom: -8px;
left: -7px;
bottom: -10px;
left: -8.5px;
border: 2px solid #e2e8f0;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
}
@@ -120,7 +182,8 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 16px;
padding: 20px 18px;
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
.coupon-info {
flex: 1;
@@ -129,17 +192,32 @@
justify-content: center;
.coupon-title {
font-size: 32px;
font-weight: 600;
color: #1f2937;
margin-bottom: 6px;
font-size: 34px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
line-height: 1.3;
letter-spacing: -0.5px;
// 添加文字渐变效果
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.coupon-validity {
font-size: 26px;
color: #6b7280;
color: #718096;
line-height: 1.2;
font-weight: 500;
// 添加图标前缀
&::before {
content: '⏰';
margin-right: 6px;
font-size: 24px;
}
}
}
@@ -150,45 +228,71 @@
flex-shrink: 0;
.coupon-btn {
min-width: 120px;
height: 60px;
border-radius: 30px;
font-size: 26px;
min-width: 130px;
height: 68px;
border-radius: 34px;
font-size: 28px;
border: none;
color: #fff;
font-weight: 600;
transition: all 0.2s ease;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
// 添加按钮光泽效果
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
&:hover::before {
left: 100%;
}
&:active {
transform: scale(0.95);
transform: scale(0.96) translateY(1px);
}
&.theme-red {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}
&.theme-orange {
background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
}
&.theme-blue {
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
}
&.theme-purple {
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
box-shadow: 0 4px 12px rgba(171, 71, 188, 0.3);
}
&.theme-green {
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
}
}
.status-text {
font-size: 26px;
color: #9ca3af;
padding: 8px 12px;
font-weight: 500;
font-size: 28px;
color: #a0aec0;
padding: 12px 16px;
font-weight: 600;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border-radius: 20px;
border: 1px solid #e2e8f0;
}
}
}
@@ -199,19 +303,84 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
backdrop-filter: blur(2px);
.status-badge {
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 28px;
font-weight: 500;
padding: 8px 16px;
border-radius: 16px;
font-size: 30px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
}
}
// 动画效果
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
// 响应式优化
@media (max-width: 768px) {
.coupon-card {
height: 130px;
.coupon-left {
width: 110px;
.amount-wrapper {
.currency {
font-size: 26px;
}
.amount {
font-size: 38px;
}
}
.condition {
font-size: 22px;
}
}
.coupon-right {
padding: 16px 14px;
.coupon-info {
.coupon-title {
font-size: 30px;
}
.coupon-validity {
font-size: 24px;
}
}
.coupon-actions {
.coupon-btn {
min-width: 120px;
height: 60px;
font-size: 26px;
}
.status-text {
font-size: 26px;
}
}
}
}
}