From e4ce6b47030f881b071df45cae2a5aae1447dbba Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 11:07:22 +0800
Subject: [PATCH] refactor(pages): migrate remaining pages to design tokens

---
 src/pages/card-bind/card-bind.vue         | 52 +++++++++++------------
 src/pages/faq/faq.vue                     | 20 ++++-----
 src/pages/login/login.vue                 |  2 +-
 src/pages/notice-list/notice-list.vue     |  6 +--
 src/pages/profile/index.vue               |  4 +-
 src/pages/qrcode/index.vue                | 34 +++++++--------
 src/pages/scenic-detail/scenic-detail.vue | 38 ++++++++---------
 src/pages/scenic-list/scenic-list.vue     | 22 +++++-----
 src/pages/union-buy/union-buy.vue         |  2 +-
 src/pages/usage-guide/usage-guide.vue     |  2 +-
 10 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/src/pages/card-bind/card-bind.vue b/src/pages/card-bind/card-bind.vue
index 5ffc0b7..d327371 100644
--- a/src/pages/card-bind/card-bind.vue
+++ b/src/pages/card-bind/card-bind.vue
@@ -272,7 +272,7 @@ function handleCancel() {
 .page {
   height: 100vh;
   overflow: hidden;
-  background: #ffffff;
+  background: $color-card;
   font-family: $font-family-body;
 }
 
@@ -292,22 +292,22 @@ function handleCancel() {
 
 .header-title__bind {
   font-family: $font-family-body;
-  font-size: 38rpx;
-  font-weight: 700;
+  font-size: $font-size-title;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
 }
 
 .header-title__card {
   font-family: $font-family-body;
-  font-size: 38rpx;
-  font-weight: 700;
+  font-size: $font-size-title;
+  font-weight: $font-weight-bold;
   color: $uv-primary;
 }
 
 .header-desc {
   display: block;
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-tips-color;
   line-height: 36rpx;
@@ -318,7 +318,7 @@ function handleCancel() {
 /* ===== 2. Form Card ===== */
 .form-card {
   margin: 24rpx 24rpx 0;
-  background: #ffffff;
+  background: $color-card;
   border-radius: 24rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;
@@ -339,7 +339,7 @@ function handleCancel() {
 
 .form-label {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: $uv-main-color;
   font-weight: 400;
   line-height: 40rpx;
@@ -355,7 +355,7 @@ function handleCancel() {
   flex: 1;
   height: 88rpx;
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-content-color;
   line-height: 40rpx;
@@ -365,7 +365,7 @@ function handleCancel() {
 .placeholder {
   font-family: $font-family-body;
   color: $uv-placeholder-color;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
 }
 
@@ -379,7 +379,7 @@ function handleCancel() {
 .form-value {
   flex: 1;
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-content-color;
   text-align: right;
@@ -469,7 +469,7 @@ function handleCancel() {
     left: 50%;
     width: 16rpx;
     height: 2rpx;
-    background: #ffffff;
+    background: $color-card;
     border-radius: 1rpx;
   }
 
@@ -526,14 +526,14 @@ function handleCancel() {
 
 .agreement__label {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-tips-color;
 }
 
 .agreement__link {
   font-family: $font-family-body;
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-primary;
 
@@ -575,14 +575,14 @@ function handleCancel() {
 }
 
 .btn-confirm--disabled {
-  background: #e5e7eb;
+  background: $uv-bg-color;
   box-shadow: none;
 }
 
 .btn-confirm__text {
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 500;
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
   color: #ffffff;
   letter-spacing: 2rpx;
 }
@@ -595,7 +595,7 @@ function handleCancel() {
   flex: 1;
   height: 96rpx;
   border-radius: 48rpx;
-  background: #ffffff;
+  background: $color-card;
   border: 2rpx solid #dadbde;
   padding: 0;
   margin: 0;
@@ -610,20 +610,20 @@ function handleCancel() {
 
   &:active {
     transform: scale(0.98);
-    background: #f5f5f5;
+    background: $uv-bg-color;
   }
 }
 
 .btn-cancel__text {
   font-family: $font-family-body;
-  font-size: 28rpx;
+  font-size: $font-size-base;
   font-weight: 400;
   color: $uv-tips-color;
 }
 
 /* ===== Popup Sheet ===== */
 .popup-sheet {
-  background: #ffffff;
+  background: $color-card;
   border-radius: 24rpx 24rpx 0 0;
   max-height: 70vh;
   display: flex;
@@ -641,8 +641,8 @@ function handleCancel() {
 
 .popup-title {
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 700;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
   line-height: 48rpx;
 }
@@ -692,7 +692,7 @@ function handleCancel() {
 
 .popup-content {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-content-color;
   line-height: 1.8;
@@ -712,7 +712,7 @@ function handleCancel() {
   transition: background 0.15s ease;
 
   &:active {
-    background: #f5f5f5;
+    background: $uv-bg-color;
   }
 
   &--active {
@@ -722,7 +722,7 @@ function handleCancel() {
 
 .id-type-item__text {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-content-color;
   line-height: 40rpx;
diff --git a/src/pages/faq/faq.vue b/src/pages/faq/faq.vue
index 168f51a..ec5a1f2 100644
--- a/src/pages/faq/faq.vue
+++ b/src/pages/faq/faq.vue
@@ -243,7 +243,7 @@ function getBindList(): FaqItem[] {
 
 .page {
   min-height: 100vh;
-  background: #f7f8fa;
+  background: $color-background;
   padding: 48rpx 24rpx 0;
   font-family: $font-family-body;
 }
@@ -255,8 +255,8 @@ function getBindList(): FaqItem[] {
 
 .category-title {
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 700;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
   color: $uv-main-color;
   display: block;
   margin-bottom: 16rpx;
@@ -270,7 +270,7 @@ function getBindList(): FaqItem[] {
 
 /* ===== 问答卡片 ===== */
 .faq-card {
-  background: #ffffff;
+  background: $color-card;
   border-radius: 24rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
   margin-bottom: 20rpx;
@@ -300,16 +300,16 @@ function getBindList(): FaqItem[] {
   margin-right: 16rpx;
   margin-top: 4rpx;
   font-family: $font-family-body;
-  font-size: 24rpx;
-  font-weight: 700;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
   color: $uv-primary;
 }
 
 .faq-question {
   flex: 1;
   font-family: $font-family-body;
-  font-size: 28rpx;
-  font-weight: 500;
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
   color: $uv-main-color;
   line-height: 1.5;
 }
@@ -345,7 +345,7 @@ function getBindList(): FaqItem[] {
 
 .faq-text {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-content-color;
   line-height: 1.7;
@@ -353,7 +353,7 @@ function getBindList(): FaqItem[] {
 
 .faq-highlight {
   font-family: $font-family-body;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: 400;
   color: $uv-primary;
   line-height: 1.7;
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index f0b9865..3b2b9f9 100644
--- a/src/pages/login/login.vue
+++ b/src/pages/login/login.vue
@@ -173,7 +173,7 @@ $icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 
 .brand-name {
   font-family: $font-family-display;
-  font-size: 38rpx;
+  font-size: $font-size-title;
   font-weight: $font-weight-bold;
   color: $uv-main-color;
   line-height: $line-height-tight;
diff --git a/src/pages/notice-list/notice-list.vue b/src/pages/notice-list/notice-list.vue
index 5950228..00e3fc0 100644
--- a/src/pages/notice-list/notice-list.vue
+++ b/src/pages/notice-list/notice-list.vue
@@ -151,8 +151,8 @@ function openDetail(item: NoticeItem) {
 /* 标题 */
 .card-title {
   display: block;
-  font-size: 28rpx;
-  font-weight: 700;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
   color: #111111;
   line-height: 1.3;
   letter-spacing: -0.3rpx;
@@ -168,7 +168,7 @@ function openDetail(item: NoticeItem) {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   font-weight: $font-weight-normal;
   color: #666666;
   line-height: 1.6;
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index b34d0cb..27c30f3 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -306,7 +306,7 @@ function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 16rpx;
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     color: $uv-success;
     line-height: 1;
   }
@@ -370,7 +370,7 @@ function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
 
   text {
     font-size: $font-size-base;
-    color: #e53935;
+    color: $uv-error;
     font-weight: $font-weight-medium;
   }
 }
diff --git a/src/pages/qrcode/index.vue b/src/pages/qrcode/index.vue
index e7e781f..090e0e9 100644
--- a/src/pages/qrcode/index.vue
+++ b/src/pages/qrcode/index.vue
@@ -247,7 +247,7 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 
 <style lang="scss" scoped>
 
-.page { min-height: 100vh; background: #f7f8fa; font-family: $font-family-body; }
+.page { min-height: 100vh; background: $color-background; font-family: $font-family-body; }
 .scroll-content { height: 100vh; }
 
 /* === 空状态 === */
@@ -263,22 +263,22 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 }
 .empty-icon-stripe { height: 8rpx; background: rgba(255,255,255,0.6); border-radius: 4rpx; width: 100%; }
 .empty-icon-stripe.short { width: 60%; }
-.empty-text { font-size: 32rpx; font-weight: 700; color: #111111; margin-bottom: 12rpx; }
-.empty-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; }
+.empty-text { font-size: $font-size-lg; font-weight: $font-weight-bold; color: #111111; margin-bottom: 12rpx; }
+.empty-desc { font-size: $font-size-sm; color: #666666; margin-bottom: 40rpx; }
 .empty-btn {
   background: $uv-primary; border-radius: 44rpx; padding: 20rpx 80rpx;
   min-height: 88rpx; display: flex; align-items: center; justify-content: center;
   margin-bottom: 20rpx; transition: opacity 150ms;
 }
 .empty-btn:active { opacity: 0.7; }
-.empty-btn-text { font-size: 30rpx; color: #fff; font-weight: 500; }
+.empty-btn-text { font-size: $font-size-lg; color: #fff; font-weight: $font-weight-medium; }
 .empty-btn-secondary {
   padding: 20rpx 60rpx; border-radius: 44rpx;
-  border: 2rpx solid #eeeeee; background: #fff;
+  border: 2rpx solid #eeeeee; background: $color-card;
   transition: opacity 150ms;
 }
 .empty-btn-secondary:active { opacity: 0.7; }
-.empty-btn-secondary-text { font-size: 28rpx; color: #333333; }
+.empty-btn-secondary-text { font-size: $font-size-base; color: #333333; }
 
 /* === 卡面展示区域 === */
 .card-swiper-wrap { margin: 20rpx 20rpx 20rpx; overflow: visible; }
@@ -303,11 +303,11 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
   width: 10rpx; height: 10rpx; border-radius: 50%;
   background: rgba(255,255,255,0.4); transition: all 300ms;
 }
-.card-dot.active { background: #fff; width: 22rpx; border-radius: 5rpx; }
+.card-dot.active { background: $color-card; width: 22rpx; border-radius: 5rpx; }
 
 /* === 持卡人信息 === */
 .holder-panel {
-  margin: 0 20rpx; background: #fff;
+  margin: 0 20rpx; background: $color-card;
   border-radius: 24rpx; padding: 28rpx;
   box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
 }
@@ -323,7 +323,7 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 }
 .avatar-zoom {
   position: absolute; bottom: -2rpx; right: -2rpx;
-  width: 34rpx; height: 34rpx; background: #fff;
+  width: 34rpx; height: 34rpx; background: $color-card;
   border-radius: 50%; display: flex; align-items: center;
   justify-content: center; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
 }
@@ -339,16 +339,16 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
   transform: rotate(45deg); border-radius: 2rpx;
 }
 .holder-main { flex: 1; }
-.holder-name { font-size: 32rpx; font-weight: 500; color: #111111; display: block; }
+.holder-name { font-size: $font-size-lg; font-weight: $font-weight-medium; color: #111111; display: block; }
 .holder-tag {
   display: inline-block; font-size: 22rpx; color: #00b42a;
   background: #f0fff4; padding: 2rpx 12rpx; border-radius: 6rpx; margin-top: 6rpx;
 }
 .holder-details { display: flex; flex-direction: column; gap: 14rpx; }
 .detail-row { display: flex; justify-content: space-between; align-items: center; }
-.detail-label { font-size: 26rpx; color: #666666; }
+.detail-label { font-size: $font-size-sm; color: #666666; }
 .detail-value-wrap { display: flex; align-items: center; gap: 12rpx; }
-.detail-value { font-size: 26rpx; color: #333333; }
+.detail-value { font-size: $font-size-sm; color: #333333; }
 .copy-btn {
   font-size: 22rpx; color: $uv-primary;
   padding: 4rpx 16rpx; border: 1rpx solid $uv-primary;
@@ -359,12 +359,12 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 /* === 二维码区域 === */
 .qrcode-section {
   display: flex; flex-direction: column; align-items: center;
-  margin: 0 20rpx 20rpx; background: #fff;
+  margin: 0 20rpx 20rpx; background: $color-card;
   border-radius: 24rpx; padding: 28rpx;
   box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
 }
 .qrcode-title {
-  font-size: 30rpx; font-weight: 500; color: #111111;
+  font-size: $font-size-lg; font-weight: $font-weight-medium; color: #111111;
   display: block; margin-bottom: 20rpx; align-self: flex-start;
 }
 .qrcode-box {
@@ -386,11 +386,11 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
   top: 2rpx; left: 50%; transform: translateX(-50%);
   border-radius: 1rpx;
 }
-.countdown-text { font-size: 24rpx; color: #666666; }
+.countdown-text { font-size: $font-size-sm; color: #666666; }
 
 /* === 功能入口 === */
 .feature-panel {
-  margin: 0 20rpx 20rpx; background: #fff;
+  margin: 0 20rpx 20rpx; background: $color-card;
   border-radius: 24rpx; padding: 28rpx;
   box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
 }
@@ -406,5 +406,5 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
   width: 88rpx; height: 88rpx;
   margin-bottom: 10rpx;
 }
-.feature-label { font-size: 24rpx; color: #333333; }
+.feature-label { font-size: $font-size-sm; color: #333333; }
 </style>
diff --git a/src/pages/scenic-detail/scenic-detail.vue b/src/pages/scenic-detail/scenic-detail.vue
index 4373d37..ee7a860 100644
--- a/src/pages/scenic-detail/scenic-detail.vue
+++ b/src/pages/scenic-detail/scenic-detail.vue
@@ -246,18 +246,18 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 
 /* ====== 字体层级 ====== */
 .text-title {
-  font-size: 38rpx;
+  font-size: $font-size-title;
   font-weight: $font-weight-bold;
   color: #111111;
   line-height: 48rpx;
 }
 .text-body {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   color: #333333;
   line-height: 40rpx;
 }
 .text-assist {
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: #666666;
   line-height: 32rpx;
 }
@@ -329,7 +329,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .notice-text {
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: #ff7d00;
   font-weight: $font-weight-medium;
 }
@@ -347,7 +347,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   border-radius: $radius-sm;
 
   text {
-    font-size: 24rpx;
+    font-size: $font-size-sm;
     color: $uv-primary;
   }
 }
@@ -391,7 +391,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   flex-shrink: 0;
 
   text {
-    font-size: 24rpx;
+    font-size: $font-size-sm;
     font-weight: $font-weight-medium;
   }
 
@@ -415,7 +415,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   flex-shrink: 0;
 
   text {
-    font-size: 24rpx;
+    font-size: $font-size-sm;
     color: $uv-primary;
     font-weight: $font-weight-medium;
   }
@@ -446,7 +446,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   text {
     font-size: 22rpx;
     color: #fff;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 
   &.super {
@@ -459,7 +459,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .ticket-price {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   color: #999999;
   text-decoration: line-through;
 }
@@ -472,7 +472,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .ticket-label {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   color: #333333;
   font-weight: $font-weight-medium;
 }
@@ -484,9 +484,9 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .member-text {
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: #f9ae3d;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
 }
 
 .remaining-text {
@@ -507,9 +507,9 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   transition: transform $transition-fast;
 
   text {
-    font-size: 28rpx;
+    font-size: $font-size-base;
     color: #fff;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 
   &:active {
@@ -537,14 +537,14 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
   position: relative;
 
   text {
-    font-size: 28rpx;
+    font-size: $font-size-base;
     color: #999999;
     font-weight: $font-weight-normal;
   }
 
   &.active text {
     color: $uv-primary;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 
   &:active {
@@ -584,7 +584,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .block-title {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   font-weight: $font-weight-bold;
   color: #333333;
   display: block;
@@ -598,14 +598,14 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
 }
 
 .block-text {
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: #666666;
   line-height: 1.8;
   display: block;
 }
 
 .intro-text {
-  font-size: 26rpx;
+  font-size: $font-size-sm;
   color: #666666;
   line-height: 2;
   display: block;
diff --git a/src/pages/scenic-list/scenic-list.vue b/src/pages/scenic-list/scenic-list.vue
index be81a8a..ea388d1 100644
--- a/src/pages/scenic-list/scenic-list.vue
+++ b/src/pages/scenic-list/scenic-list.vue
@@ -459,7 +459,7 @@ function onCardClick(scenic: ScenicItem) {
   flex: 1;
   text-align: center;
   font-size: $font-size-lg;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   color: $color-foreground;
 }
 
@@ -706,7 +706,7 @@ function onCardClick(scenic: ScenicItem) {
   width: 8rpx;
   height: 8rpx;
   border-radius: 50%;
-  background: #fff;
+  background: $color-card;
 }
 
 /* 等级标签 — 图片右上角 */
@@ -724,7 +724,7 @@ function onCardClick(scenic: ScenicItem) {
   text {
     font-size: $font-size-xs;
     color: #fff;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 
   &.level-5A { background: #e53935; }
@@ -748,7 +748,7 @@ function onCardClick(scenic: ScenicItem) {
 
 .scenic-name {
   font-size: $font-size-lg;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   color: $color-foreground;
   flex: 1;
   margin-right: $spacing-2;
@@ -765,20 +765,20 @@ function onCardClick(scenic: ScenicItem) {
 
 .price-symbol {
   font-size: $font-size-sm;
-  color: #e53935;
-  font-weight: 500;
+  color: $uv-error;
+  font-weight: $font-weight-medium;
 }
 
 .price-value {
   font-size: $font-size-xl;
-  color: #e53935;
+  color: $uv-error;
   font-weight: $font-weight-bold;
 }
 
 .price-free {
   font-size: $font-size-base;
   color: $uv-success;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
 }
 
 /* 营业时间 + 营业状态 同行 */
@@ -949,7 +949,7 @@ function onCardClick(scenic: ScenicItem) {
 
 .popup-title {
   font-size: $font-size-lg;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   color: $color-foreground;
 }
 
@@ -996,7 +996,7 @@ function onCardClick(scenic: ScenicItem) {
 
   &.active text {
     color: $uv-primary;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 }
 
@@ -1020,7 +1020,7 @@ function onCardClick(scenic: ScenicItem) {
 
   text {
     font-size: $font-size-lg;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
     color: #fff;
     letter-spacing: 2rpx;
   }
diff --git a/src/pages/union-buy/union-buy.vue b/src/pages/union-buy/union-buy.vue
index 692bd7e..269d246 100644
--- a/src/pages/union-buy/union-buy.vue
+++ b/src/pages/union-buy/union-buy.vue
@@ -11,7 +11,7 @@
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #ffffff;
+  background: $color-card;
 }
 
 .guide-image {
diff --git a/src/pages/usage-guide/usage-guide.vue b/src/pages/usage-guide/usage-guide.vue
index 38e3f52..43872ad 100644
--- a/src/pages/usage-guide/usage-guide.vue
+++ b/src/pages/usage-guide/usage-guide.vue
@@ -11,7 +11,7 @@
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #ffffff;
+  background: $color-card;
 }
 
 .guide-image {