From f2b8ad9604fb4a592b01f95d7d8f1343a61a9f0c Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 10:51:54 +0800
Subject: [PATCH] refactor(card/detail): migrate hardcoded colors and spacing
 to design tokens

---
 src/packages/user/pages/card/detail.vue | 44 ++++++++++++-------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/packages/user/pages/card/detail.vue b/src/packages/user/pages/card/detail.vue
index 50fa189..16e2e9d 100644
--- a/src/packages/user/pages/card/detail.vue
+++ b/src/packages/user/pages/card/detail.vue
@@ -108,31 +108,31 @@ function handleBuy() {
 </script>
 
 <style lang="scss" scoped>
-.page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
-.cover { width: 100%; height: 400rpx; background: #ddd; }
-.info-card { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; }
-.card-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; }
-.price-row { display: flex; align-items: baseline; gap: 12rpx; margin: 12rpx 0; }
-.price { font-size: 44rpx; color: #e53935; font-weight: bold; }
-.original-price { font-size: 26rpx; color: #ccc; text-decoration: line-through; }
-.card-desc { font-size: 26rpx; color: #666; }
-.section { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; }
-.section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 16rpx; }
-.benefit-list { display: flex; flex-direction: column; gap: 12rpx; }
-.benefit-item { display: flex; align-items: center; gap: 12rpx; }
-.benefit-icon { font-size: 28rpx; }
-.benefit-text { font-size: 26rpx; color: #666; }
+.page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; font-family: $font-family-display; }
+.cover { width: 100%; height: 400rpx; background: $color-muted; }
+.info-card { background: $color-card; padding: $spacing-3 $spacing-4; margin-bottom: $spacing-2; }
+.card-name { font-size: $font-size-xl; font-weight: $font-weight-bold; color: $uv-content-color; display: block; }
+.price-row { display: flex; align-items: baseline; gap: $spacing-2; margin: $spacing-2 0; }
+.price { font-size: $font-size-2xl; color: $color-price; font-weight: $font-weight-bold; }
+.original-price { font-size: $font-size-sm; color: $uv-disabled-color; text-decoration: line-through; }
+.card-desc { font-size: $font-size-sm; color: $uv-tips-color; }
+.section { background: $color-card; padding: $spacing-3 $spacing-4; margin-bottom: $spacing-2; }
+.section-title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $uv-content-color; display: block; margin-bottom: $spacing-2; }
+.benefit-list { display: flex; flex-direction: column; gap: $spacing-2; }
+.benefit-item { display: flex; align-items: center; gap: $spacing-2; }
+.benefit-icon { font-size: $font-size-base; }
+.benefit-text { font-size: $font-size-sm; color: $uv-tips-color; }
 .scenic-scroll { white-space: nowrap; }
-.scenic-list { display: flex; gap: 16rpx; }
+.scenic-list { display: flex; gap: $spacing-2; }
 .scenic-card { min-width: 200rpx; display: flex; flex-direction: column; }
-.scenic-img { width: 200rpx; height: 140rpx; border-radius: 12rpx; background: #eee; }
-.scenic-name { font-size: 24rpx; color: #333; margin-top: 8rpx; text-align: center; }
-.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; align-items: center; padding: 16rpx 30rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #eee; }
+.scenic-img { width: 200rpx; height: 140rpx; border-radius: $radius-base; background: $uv-border-color; }
+.scenic-name { font-size: $font-size-sm; color: $uv-content-color; margin-top: $spacing-1; text-align: center; }
+.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: $color-card; display: flex; align-items: center; padding: $spacing-2 $spacing-4; padding-bottom: calc(#{$spacing-2} + env(safe-area-inset-bottom)); border-top: $border-width solid $uv-border-color; }
 .bottom-price { flex: 1; display: flex; flex-direction: column; }
-.bottom-price .label { font-size: 22rpx; color: #999; }
-.bottom-price .value { font-size: 36rpx; color: #e53935; font-weight: bold; }
-.btn-buy { background: #e53935; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 40rpx; border: none; }
-.loading-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #999; }
+.bottom-price .label { font-size: $font-size-xs; color: $uv-placeholder-color; }
+.bottom-price .value { font-size: $font-size-xl; color: $color-price; font-weight: $font-weight-bold; }
+.btn-buy { background: $color-price; color: #fff; font-size: $font-size-lg; padding: $spacing-3 $spacing-8; border-radius: $radius-2xl; border: none; }
+.loading-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: $uv-placeholder-color; }
 
 /* Quick actions — 功能入口 */
 .quick-grid {