.container { padding: 30rpx; background-color: #f9fafb; min-height: 100vh; } .header { padding: 20rpx 0; text-align: center; margin-bottom: 20rpx; } .title { font-size: 36rpx; font-weight: bold; color: #1f2937; } .vip-banner { background: linear-gradient(to bottom right, #111827, #1f2937); border-radius: 30rpx; padding: 40rpx; color: white; display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1); } .vip-title { color: #fcd34d; font-weight: bold; font-size: 32rpx; margin-bottom: 10rpx; } .vip-desc { color: #d1d5db; font-size: 24rpx; } .vip-btn { background: linear-gradient(to right, #fcd34d, #fbbf24); color: #111827; font-size: 24rpx; font-weight: bold; padding: 10rpx 30rpx; border-radius: 40rpx; margin: 0; } .section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; color: #1f2937; } .coupon-card { background-color: white; background: linear-gradient(to bottom right, #eff6ff, #ecfeff); border-radius: 30rpx; padding: 30rpx; margin-bottom: 30rpx; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.1); position: relative; overflow: hidden; } .coupon-card.claimed { background: linear-gradient(to bottom right, #f9fafb, #f3f4f6); box-shadow: none; opacity: 0.7; } .coupon-left { display: flex; align-items: center; } .amount { margin-right: 30rpx; color: #2563eb; } .coupon-card.claimed .amount { color: #9ca3af; } .num { font-size: 60rpx; font-weight: bold; } .unit { font-size: 24rpx; } .coupon-name { font-weight: bold; font-size: 30rpx; color: #1f2937; } .coupon-desc { font-size: 22rpx; color: #6b7280; margin-top: 6rpx; } .coupon-right { background-color: white; padding: 10rpx 30rpx; border-radius: 30rpx; font-size: 24rpx; font-weight: bold; color: #2563eb; box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05); } .coupon-card.claimed .coupon-right { background-color: #e5e7eb; color: #9ca3af; }