From cfb9a4ce26462d6a1f7b21d185eaf1475642c712 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 10:34:54 +0800
Subject: [PATCH] refactor: remove local SCSS variables from 9 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace with global uni.scss tokens:
$font → $font-family-body
$primary → $uv-primary
$text-* → $uv-main-color/$uv-content-color/$uv-tips-color/$uv-placeholder-color
$divider → $uv-border-color
$card-radius → $radius-lg
$accent → $uv-primary

Kept $bar-height: 120rpx as component-specific local var.
Removed dead $primary-dark: #e89a2a from card-bind.vue (never used).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/card-bind/card-bind.vue     |  90 +++++++++----------
 src/pages/card-buy/card-buy.vue       |  23 ++---
 src/pages/faq/faq.vue                 |  31 +++----
 src/pages/order/order-detail.vue      |  75 +++++++---------
 src/pages/order/order-list.vue        |  77 +++++++---------
 src/pages/qrcode/index.vue            |  16 ++--
 src/pages/reserve/reserve-index.vue   | 125 ++++++++++++--------------
 src/pages/reserve/reserve-list.vue    |  97 +++++++++-----------
 src/pages/reserve/reserve-success.vue |  71 +++++++--------
 9 files changed, 268 insertions(+), 337 deletions(-)

diff --git a/src/pages/card-bind/card-bind.vue b/src/pages/card-bind/card-bind.vue
index 1c543f5..5ffc0b7 100644
--- a/src/pages/card-bind/card-bind.vue
+++ b/src/pages/card-bind/card-bind.vue
@@ -267,23 +267,13 @@ function handleCancel() {
 
 <style lang="scss" scoped>
 /* ===== Design Tokens ===== */
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$primary-dark: #e89a2a;
-$accent: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
 
 /* ===== Page ===== */
 .page {
   height: 100vh;
   overflow: hidden;
   background: #ffffff;
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 1. Header ===== */
@@ -301,25 +291,25 @@ $divider: #eeeeee;
 }
 
 .header-title__bind {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
 }
 
 .header-title__card {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: $accent;
+  color: $uv-primary;
 }
 
 .header-desc {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 400;
-  color: $text-hint;
+  color: $uv-tips-color;
   line-height: 36rpx;
   margin-top: 12rpx;
   text-align: center;
@@ -348,9 +338,9 @@ $divider: #eeeeee;
 }
 
 .form-label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-label;
+  color: $uv-main-color;
   font-weight: 400;
   line-height: 40rpx;
   flex-shrink: 0;
@@ -364,42 +354,42 @@ $divider: #eeeeee;
 .form-input {
   flex: 1;
   height: 88rpx;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $text-body;
+  color: $uv-content-color;
   line-height: 40rpx;
   text-align: right;
 }
 
 .placeholder {
-  font-family: $font;
-  color: $text-weak;
+  font-family: $font-family-body;
+  color: $uv-placeholder-color;
   font-size: 26rpx;
   font-weight: 400;
 }
 
 .divider {
   height: 1rpx;
-  background: $divider;
+  background: $uv-border-color;
   margin: 0 32rpx;
 }
 
 /* ===== Form Value + Chevron ===== */
 .form-value {
   flex: 1;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $text-body;
+  color: $uv-content-color;
   text-align: right;
 }
 
 .chevron-right {
   width: 12rpx;
   height: 12rpx;
-  border-top: 2rpx solid $text-weak;
-  border-right: 2rpx solid $text-weak;
+  border-top: 2rpx solid $uv-placeholder-color;
+  border-right: 2rpx solid $uv-placeholder-color;
   transform: rotate(45deg);
   flex-shrink: 0;
   margin-left: 12rpx;
@@ -442,9 +432,9 @@ $divider: #eeeeee;
 }
 
 .upload-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $accent;
+  color: $uv-primary;
   font-weight: 400;
 }
 
@@ -514,8 +504,8 @@ $divider: #eeeeee;
 }
 
 .checkbox--checked {
-  background: $accent;
-  border-color: $accent;
+  background: $uv-primary;
+  border-color: $uv-primary;
 }
 
 .checkbox__check {
@@ -535,17 +525,17 @@ $divider: #eeeeee;
 }
 
 .agreement__label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 400;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .agreement__link {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 400;
-  color: $accent;
+  color: $uv-primary;
 
   &:active {
     opacity: 0.7;
@@ -590,7 +580,7 @@ $divider: #eeeeee;
 }
 
 .btn-confirm__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 500;
   color: #ffffff;
@@ -598,7 +588,7 @@ $divider: #eeeeee;
 }
 
 .btn-confirm--disabled .btn-confirm__text {
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 
 .btn-cancel {
@@ -625,10 +615,10 @@ $divider: #eeeeee;
 }
 
 .btn-cancel__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 400;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 /* ===== Popup Sheet ===== */
@@ -638,7 +628,7 @@ $divider: #eeeeee;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 .popup-header {
@@ -646,14 +636,14 @@ $divider: #eeeeee;
   align-items: center;
   justify-content: space-between;
   padding: 32rpx;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
 }
 
 .popup-title {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   line-height: 48rpx;
 }
 
@@ -682,7 +672,7 @@ $divider: #eeeeee;
     left: 50%;
     width: 20rpx;
     height: 3rpx;
-    background: $text-hint;
+    background: $uv-tips-color;
     border-radius: 2rpx;
   }
 
@@ -701,10 +691,10 @@ $divider: #eeeeee;
 }
 
 .popup-content {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $text-body;
+  color: $uv-content-color;
   line-height: 1.8;
 }
 
@@ -731,15 +721,15 @@ $divider: #eeeeee;
 }
 
 .id-type-item__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $text-body;
+  color: $uv-content-color;
   line-height: 40rpx;
 }
 
 .id-type-item--active .id-type-item__text {
-  color: $accent;
+  color: $uv-primary;
   font-weight: 400;
 }
 
diff --git a/src/pages/card-buy/card-buy.vue b/src/pages/card-buy/card-buy.vue
index 09f856c..3c2aec2 100644
--- a/src/pages/card-buy/card-buy.vue
+++ b/src/pages/card-buy/card-buy.vue
@@ -82,18 +82,13 @@ async function handleBuy() {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-hint: #666666;
-$text-weak: #999999;
 $bar-height: 120rpx;
 
 .page {
   min-height: 100vh;
   background: #ffffff;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 图片区域 ===== */
@@ -129,9 +124,9 @@ $bar-height: 120rpx;
 }
 
 .price-label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .price-row {
@@ -140,14 +135,14 @@ $bar-height: 120rpx;
 }
 
 .price-symbol {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
   color: #e53935;
 }
 
 .price-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
   color: #e53935;
@@ -155,9 +150,9 @@ $bar-height: 120rpx;
 }
 
 .price-original {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
   text-decoration: line-through;
   margin-left: 12rpx;
 }
@@ -168,7 +163,7 @@ $bar-height: 120rpx;
   height: 80rpx;
   padding: 0 56rpx;
   border-radius: 40rpx;
-  background: $primary;
+  background: $uv-primary;
   border: none;
   display: flex;
   align-items: center;
@@ -190,7 +185,7 @@ $bar-height: 120rpx;
 }
 
 .btn-buy__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
   color: #ffffff;
diff --git a/src/pages/faq/faq.vue b/src/pages/faq/faq.vue
index a13514b..168f51a 100644
--- a/src/pages/faq/faq.vue
+++ b/src/pages/faq/faq.vue
@@ -240,19 +240,12 @@ function getBindList(): FaqItem[] {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$divider: #eeeeee;
 
 .page {
   min-height: 100vh;
   background: #f7f8fa;
   padding: 48rpx 24rpx 0;
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 分类区块 ===== */
@@ -261,17 +254,17 @@ $divider: #eeeeee;
 }
 
 .category-title {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   display: block;
   margin-bottom: 16rpx;
 }
 
 .category-divider {
   height: 1rpx;
-  background: $divider;
+  background: $uv-border-color;
   margin-bottom: 24rpx;
 }
 
@@ -306,18 +299,18 @@ $divider: #eeeeee;
   flex-shrink: 0;
   margin-right: 16rpx;
   margin-top: 4rpx;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 700;
-  color: $primary;
+  color: $uv-primary;
 }
 
 .faq-question {
   flex: 1;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 500;
-  color: $text-label;
+  color: $uv-main-color;
   line-height: 1.5;
 }
 
@@ -351,18 +344,18 @@ $divider: #eeeeee;
 }
 
 .faq-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $text-body;
+  color: $uv-content-color;
   line-height: 1.7;
 }
 
 .faq-highlight {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 400;
-  color: $primary;
+  color: $uv-primary;
   line-height: 1.7;
 }
 
diff --git a/src/pages/order/order-detail.vue b/src/pages/order/order-detail.vue
index 8a12646..f9725ff 100644
--- a/src/pages/order/order-detail.vue
+++ b/src/pages/order/order-detail.vue
@@ -222,15 +222,6 @@ function goHome() {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
-$card-radius: 24rpx;
 $bar-height: 120rpx;
 
 .page {
@@ -238,13 +229,13 @@ $bar-height: 120rpx;
   background: #f7f8fa;
   padding: 24rpx;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx);
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 模块1：状态卡片 ===== */
 .status-card {
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 48rpx 32rpx;
   display: flex;
   flex-direction: column;
@@ -345,24 +336,24 @@ $bar-height: 120rpx;
 }
 
 .status-title {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 12rpx;
 }
 
 .status-desc {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   text-align: center;
 }
 
 /* ===== 模块2：商品信息卡片 ===== */
 .info-card {
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
   margin-top: 24rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
@@ -370,10 +361,10 @@ $bar-height: 120rpx;
 
 .product-name {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 12rpx;
 }
 
@@ -390,14 +381,14 @@ $bar-height: 120rpx;
 }
 
 .price-symbol {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 700;
   color: #e53935;
 }
 
 .price-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
   color: #e53935;
@@ -405,9 +396,9 @@ $bar-height: 120rpx;
 }
 
 .product-desc {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   line-height: 1.6;
 }
 
@@ -417,7 +408,7 @@ $bar-height: 120rpx;
   justify-content: space-between;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
 
   &--last {
     border-bottom: none;
@@ -425,16 +416,16 @@ $bar-height: 120rpx;
 }
 
 .detail-label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-label;
+  color: $uv-main-color;
   flex-shrink: 0;
 }
 
 .detail-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-body;
+  color: $uv-content-color;
   text-align: right;
 
   &--code {
@@ -465,26 +456,26 @@ $bar-height: 120rpx;
 }
 
 .copy-btn__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $primary;
+  color: $uv-primary;
   font-weight: 500;
 }
 
 /* ===== 模块4：使用提示 ===== */
 .tips-card {
   background: rgba(60, 156, 255, 0.04);
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
   margin-top: 24rpx;
 }
 
 .tips-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 16rpx;
 }
 
@@ -502,16 +493,16 @@ $bar-height: 120rpx;
   width: 8rpx;
   height: 8rpx;
   border-radius: 50%;
-  background: $primary;
+  background: $uv-primary;
   flex-shrink: 0;
   margin-top: 14rpx;
   margin-right: 12rpx;
 }
 
 .tips-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   line-height: 1.6;
 }
 
@@ -522,9 +513,9 @@ $bar-height: 120rpx;
 }
 
 .tips-link__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $primary;
+  color: $uv-primary;
   font-weight: 500;
 }
 
@@ -567,7 +558,7 @@ $bar-height: 120rpx;
   transition: all 0.15s ease;
 
   &--primary {
-    background: $primary;
+    background: $uv-primary;
 
     &:active {
       transform: scale(0.97);
@@ -575,7 +566,7 @@ $bar-height: 120rpx;
   }
 
   &--outline {
-    border: 2rpx solid $divider;
+    border: 2rpx solid $uv-border-color;
 
     &:active {
       transform: scale(0.97);
@@ -585,16 +576,16 @@ $bar-height: 120rpx;
 }
 
 .btn-action__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 700;
   color: #ffffff;
 }
 
 .btn-action__text--outline {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 </style>
diff --git a/src/pages/order/order-list.vue b/src/pages/order/order-list.vue
index 19e2f97..fde32e1 100644
--- a/src/pages/order/order-list.vue
+++ b/src/pages/order/order-list.vue
@@ -229,20 +229,11 @@ function goBuy() {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
-$card-radius: 24rpx;
 
 .page {
   min-height: 100vh;
   background: #f7f8fa;
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== Tab Bar ===== */
@@ -266,14 +257,14 @@ $card-radius: 24rpx;
 }
 
 .tab-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .tab-item--active .tab-text {
-  color: $primary;
+  color: $uv-primary;
   font-weight: 700;
 }
 
@@ -281,7 +272,7 @@ $card-radius: 24rpx;
   width: 40rpx;
   height: 4rpx;
   border-radius: 2rpx;
-  background: $primary;
+  background: $uv-primary;
   margin-top: 8rpx;
 }
 
@@ -297,7 +288,7 @@ $card-radius: 24rpx;
 /* ===== Order Card ===== */
 .order-card {
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
   padding: 32rpx;
   margin-bottom: 24rpx;
@@ -315,9 +306,9 @@ $card-radius: 24rpx;
 }
 
 .order-no {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 
 /* Status Tags */
@@ -343,7 +334,7 @@ $card-radius: 24rpx;
 }
 
 .status-tag__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
   font-weight: 500;
 }
@@ -365,10 +356,10 @@ $card-radius: 24rpx;
 }
 
 .product-name {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 500;
-  color: $text-main;
+  color: $uv-main-color;
 }
 
 .price-current {
@@ -377,14 +368,14 @@ $card-radius: 24rpx;
 }
 
 .price-symbol {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 700;
   color: #e53935;
 }
 
 .price-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
   color: #e53935;
@@ -396,20 +387,20 @@ $card-radius: 24rpx;
   display: flex;
   justify-content: space-between;
   padding-bottom: 20rpx;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
   margin-bottom: 20rpx;
 }
 
 .info-time {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .info-pay {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 /* Action Buttons */
@@ -423,7 +414,7 @@ $card-radius: 24rpx;
   height: 64rpx;
   padding: 0 36rpx;
   border-radius: 32rpx;
-  border: 2rpx solid $divider;
+  border: 2rpx solid $uv-border-color;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -436,17 +427,17 @@ $card-radius: 24rpx;
 }
 
 .btn-outline__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .btn-primary {
   height: 64rpx;
   padding: 0 36rpx;
   border-radius: 32rpx;
-  background: $primary;
+  background: $uv-primary;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -458,7 +449,7 @@ $card-radius: 24rpx;
 }
 
 .btn-primary__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 700;
   color: #ffffff;
@@ -504,9 +495,9 @@ $card-radius: 24rpx;
 }
 
 .empty-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
   text-align: center;
   line-height: 1.6;
   margin-bottom: 32rpx;
@@ -516,7 +507,7 @@ $card-radius: 24rpx;
   height: 72rpx;
   padding: 0 56rpx;
   border-radius: 36rpx;
-  background: $primary;
+  background: $uv-primary;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -527,7 +518,7 @@ $card-radius: 24rpx;
 }
 
 .empty-btn__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 700;
   color: #ffffff;
@@ -540,25 +531,25 @@ $card-radius: 24rpx;
 }
 
 .load-more__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 
 /* ===== Refund Modal ===== */
 .refund-modal {
   width: 600rpx;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 40rpx;
 }
 
 .refund-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   text-align: center;
   margin-bottom: 24rpx;
 }
@@ -569,9 +560,9 @@ $card-radius: 24rpx;
 
 .refund-text {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-body;
+  color: $uv-content-color;
   line-height: 1.7;
   margin-bottom: 12rpx;
 }
diff --git a/src/pages/qrcode/index.vue b/src/pages/qrcode/index.vue
index 50a7ba8..e7e781f 100644
--- a/src/pages/qrcode/index.vue
+++ b/src/pages/qrcode/index.vue
@@ -246,10 +246,8 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif;
-$primary: #3c9cff;
 
-.page { min-height: 100vh; background: #f7f8fa; font-family: $font; }
+.page { min-height: 100vh; background: #f7f8fa; font-family: $font-family-body; }
 .scroll-content { height: 100vh; }
 
 /* === 空状态 === */
@@ -259,7 +257,7 @@ $primary: #3c9cff;
 }
 .empty-icon-card {
   width: 120rpx; height: 80rpx; border-radius: 24rpx;
-  background: linear-gradient(135deg, $primary, #398ade);
+  background: linear-gradient(135deg, $uv-primary, #398ade);
   display: flex; flex-direction: column; justify-content: center;
   padding: 16rpx; gap: 8rpx; margin-bottom: 32rpx;
 }
@@ -268,7 +266,7 @@ $primary: #3c9cff;
 .empty-text { font-size: 32rpx; font-weight: 700; color: #111111; margin-bottom: 12rpx; }
 .empty-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; }
 .empty-btn {
-  background: $primary; border-radius: 44rpx; padding: 20rpx 80rpx;
+  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;
 }
@@ -331,12 +329,12 @@ $primary: #3c9cff;
 }
 .zoom-icon {
   width: 24rpx; height: 24rpx;
-  border: 3rpx solid $primary; border-radius: 50%;
+  border: 3rpx solid $uv-primary; border-radius: 50%;
   position: relative;
 }
 .zoom-icon::after {
   content: ''; width: 8rpx; height: 3rpx;
-  background: $primary; position: absolute;
+  background: $uv-primary; position: absolute;
   bottom: -4rpx; right: -4rpx;
   transform: rotate(45deg); border-radius: 2rpx;
 }
@@ -352,8 +350,8 @@ $primary: #3c9cff;
 .detail-value-wrap { display: flex; align-items: center; gap: 12rpx; }
 .detail-value { font-size: 26rpx; color: #333333; }
 .copy-btn {
-  font-size: 22rpx; color: $primary;
-  padding: 4rpx 16rpx; border: 1rpx solid $primary;
+  font-size: 22rpx; color: $uv-primary;
+  padding: 4rpx 16rpx; border: 1rpx solid $uv-primary;
   border-radius: 8rpx; transition: opacity 150ms;
 }
 .copy-btn:active { opacity: 0.6; }
diff --git a/src/pages/reserve/reserve-index.vue b/src/pages/reserve/reserve-index.vue
index 04e85a5..d370fd0 100644
--- a/src/pages/reserve/reserve-index.vue
+++ b/src/pages/reserve/reserve-index.vue
@@ -226,29 +226,20 @@ function goFaq() {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
-$card-radius: 24rpx;
 $bar-height: 120rpx;
 
 .page {
   min-height: 100vh;
   background: #f7f8fa;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 景区信息卡片 ===== */
 .scenic-card {
   margin: 24rpx 24rpx 0;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   overflow: hidden;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
@@ -264,10 +255,10 @@ $bar-height: 120rpx;
 
 .scenic-name {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 12rpx;
 }
 
@@ -284,7 +275,7 @@ $bar-height: 120rpx;
   flex-shrink: 0;
 
   &--pin {
-    border: 3rpx solid $text-hint;
+    border: 3rpx solid $uv-tips-color;
     border-radius: 50% 50% 50% 0;
     transform: rotate(-45deg);
     position: relative;
@@ -293,7 +284,7 @@ $bar-height: 120rpx;
       width: 10rpx;
       height: 10rpx;
       border-radius: 50%;
-      border: 2rpx solid $text-hint;
+      border: 2rpx solid $uv-tips-color;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -302,14 +293,14 @@ $bar-height: 120rpx;
   }
 
   &--clock {
-    border: 3rpx solid $text-hint;
+    border: 3rpx solid $uv-tips-color;
     border-radius: 50%;
     position: relative;
     &::before {
       content: '';
       width: 2rpx;
       height: 10rpx;
-      background: $text-hint;
+      background: $uv-tips-color;
       position: absolute;
       top: 4rpx;
       left: 50%;
@@ -319,7 +310,7 @@ $bar-height: 120rpx;
       content: '';
       width: 8rpx;
       height: 2rpx;
-      background: $text-hint;
+      background: $uv-tips-color;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -328,16 +319,16 @@ $bar-height: 120rpx;
 }
 
 .scenic-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .scenic-tip {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
   margin-top: 16rpx;
   line-height: 1.6;
 }
@@ -346,17 +337,17 @@ $bar-height: 120rpx;
 .date-card {
   margin: 24rpx 32rpx 0;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
 
 .section-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 30rpx;
   font-weight: 500;
-  color: $text-label;
+  color: $uv-main-color;
   margin-bottom: 24rpx;
 }
 
@@ -376,19 +367,19 @@ $bar-height: 120rpx;
   align-items: center;
   padding: 16rpx 12rpx;
   border-radius: 16rpx;
-  border: 2rpx solid $divider;
+  border: 2rpx solid $uv-border-color;
   transition: all 0.15s ease;
 
   &--active {
-    background: $primary;
-    border-color: $primary;
+    background: $uv-primary;
+    border-color: $uv-primary;
   }
 }
 
 .date-week {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 18rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   margin-bottom: 4rpx;
 }
 
@@ -397,10 +388,10 @@ $bar-height: 120rpx;
 }
 
 .date-day {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 20rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 4rpx;
 }
 
@@ -409,9 +400,9 @@ $bar-height: 120rpx;
 }
 
 .date-stock {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 18rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 
   &--empty {
     color: #f53f3f;
@@ -427,7 +418,7 @@ $bar-height: 120rpx;
 
   .date-week,
   .date-day {
-    color: $text-weak;
+    color: $uv-placeholder-color;
   }
 }
 
@@ -435,15 +426,15 @@ $bar-height: 120rpx;
 .session-section {
   margin-top: 24rpx;
   padding-top: 24rpx;
-  border-top: 1rpx solid $divider;
+  border-top: 1rpx solid $uv-border-color;
 }
 
 .session-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 500;
-  color: $text-label;
+  color: $uv-main-color;
   margin-bottom: 16rpx;
 }
 
@@ -459,12 +450,12 @@ $bar-height: 120rpx;
   align-items: center;
   padding: 16rpx 28rpx;
   border-radius: 12rpx;
-  border: 2rpx solid $divider;
+  border: 2rpx solid $uv-border-color;
   transition: all 0.15s ease;
 
   &--active {
     background: rgba(60, 156, 255, 0.08);
-    border-color: $primary;
+    border-color: $uv-primary;
   }
 
   &--disabled {
@@ -473,21 +464,21 @@ $bar-height: 120rpx;
 }
 
 .session-time {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 20rpx;
   font-weight: 500;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 4rpx;
 }
 
 .session-item--active .session-time {
-  color: $primary;
+  color: $uv-primary;
 }
 
 .session-stock {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 18rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 
   &--empty {
     color: #f53f3f;
@@ -497,20 +488,20 @@ $bar-height: 120rpx;
 .no-session-tip {
   margin-top: 24rpx;
   padding-top: 24rpx;
-  border-top: 1rpx solid $divider;
+  border-top: 1rpx solid $uv-border-color;
 }
 
 .no-session-tip__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 18rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 
 .date-tip {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 18rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
   margin-top: 16rpx;
 }
 
@@ -518,7 +509,7 @@ $bar-height: 120rpx;
 .user-card {
   margin: 24rpx 32rpx 0;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
@@ -531,20 +522,20 @@ $bar-height: 120rpx;
 }
 
 .user-label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-label;
+  color: $uv-main-color;
 }
 
 .user-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-body;
+  color: $uv-content-color;
 }
 
 .user-warn {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   color: #e53935;
   margin-top: 12rpx;
@@ -554,16 +545,16 @@ $bar-height: 120rpx;
 .notice-card {
   margin: 24rpx 32rpx 0;
   background: #eef4ff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
 }
 
 .notice-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 30rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 20rpx;
 }
 
@@ -581,16 +572,16 @@ $bar-height: 120rpx;
   width: 8rpx;
   height: 8rpx;
   border-radius: 50%;
-  background: $primary;
+  background: $uv-primary;
   flex-shrink: 0;
   margin-top: 14rpx;
   margin-right: 12rpx;
 }
 
 .notice-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   line-height: 1.6;
 }
 
@@ -599,9 +590,9 @@ $bar-height: 120rpx;
 }
 
 .notice-link__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $primary;
+  color: $uv-primary;
   font-weight: 500;
 }
 
@@ -632,7 +623,7 @@ $bar-height: 120rpx;
   width: 100%;
   height: 80rpx;
   border-radius: 40rpx;
-  background: $primary;
+  background: $uv-primary;
   border: none;
   display: flex;
   align-items: center;
@@ -651,13 +642,13 @@ $bar-height: 120rpx;
 }
 
 .btn-submit__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 30rpx;
   font-weight: 700;
   color: #ffffff;
 }
 
 .btn-submit--disabled .btn-submit__text {
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 </style>
diff --git a/src/pages/reserve/reserve-list.vue b/src/pages/reserve/reserve-list.vue
index 1e5040e..eadfd66 100644
--- a/src/pages/reserve/reserve-list.vue
+++ b/src/pages/reserve/reserve-list.vue
@@ -302,20 +302,11 @@ function previewPhoto(url: string) {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
-$card-radius: 24rpx;
 
 .page {
   min-height: 100vh;
   background: #f7f8fa;
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== Tab ===== */
@@ -340,14 +331,14 @@ $card-radius: 24rpx;
 }
 
 .tab-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .tab-item--active .tab-text {
-  color: $primary;
+  color: $uv-primary;
   font-weight: 700;
 }
 
@@ -355,7 +346,7 @@ $card-radius: 24rpx;
   width: 32rpx;
   height: 4rpx;
   border-radius: 2rpx;
-  background: $primary;
+  background: $uv-primary;
   margin-top: 6rpx;
 }
 
@@ -371,7 +362,7 @@ $card-radius: 24rpx;
 /* ===== Record Card ===== */
 .record-card {
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 28rpx;
   margin-top: 20rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
@@ -385,10 +376,10 @@ $card-radius: 24rpx;
 }
 
 .record-name {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 500;
-  color: $text-main;
+  color: $uv-main-color;
 }
 
 .status-tag {
@@ -402,12 +393,12 @@ $card-radius: 24rpx;
 }
 
 .status-tag__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
   font-weight: 500;
 }
 
-.status-tag--pending .status-tag__text { color: $primary; }
+.status-tag--pending .status-tag__text { color: $uv-primary; }
 .status-tag--used .status-tag__text { color: #00b42a; }
 .status-tag--cancelled .status-tag__text { color: #86909c; }
 .status-tag--auto_used .status-tag__text { color: #ff9500; }
@@ -420,30 +411,30 @@ $card-radius: 24rpx;
 }
 
 .record-card-type {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $primary;
+  color: $uv-primary;
   background: rgba(60, 156, 255, 0.06);
   padding: 2rpx 12rpx;
   border-radius: 6rpx;
 }
 
 .record-card-no {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
-  color: $text-weak;
+  color: $uv-placeholder-color;
 }
 
 .record-info {
   padding-bottom: 12rpx;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
   margin-bottom: 12rpx;
 }
 
 .record-date {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .record-actions {
@@ -461,16 +452,16 @@ $card-radius: 24rpx;
   justify-content: center;
 
   &--outline {
-    border: 2rpx solid $divider;
+    border: 2rpx solid $uv-border-color;
     &:active { transform: scale(0.97); background: #f5f5f5; }
   }
 }
 
 .btn-sm__text--outline {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 22rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 /* ===== Empty ===== */
@@ -485,27 +476,27 @@ $card-radius: 24rpx;
 .empty-cal { width: 80rpx; height: 72rpx; border: 4rpx solid #cccccc; border-radius: 8rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
 .empty-cal__line { width: 80rpx; height: 4rpx; background: #cccccc; position: absolute; bottom: 48rpx; left: 50%; transform: translateX(-50%); }
 
-.empty-text { font-family: $font; font-size: 26rpx; color: $text-weak; margin-bottom: 32rpx; }
+.empty-text { font-family: $font-family-body; font-size: 26rpx; color: $uv-placeholder-color; margin-bottom: 32rpx; }
 
 .empty-btn {
-  height: 72rpx; padding: 0 56rpx; border-radius: 36rpx; background: $primary;
+  height: 72rpx; padding: 0 56rpx; border-radius: 36rpx; background: $uv-primary;
   display: flex; align-items: center; justify-content: center;
   &:active { transform: scale(0.97); }
 }
 
-.empty-btn__text { font-family: $font; font-size: 26rpx; font-weight: 700; color: #ffffff; }
+.empty-btn__text { font-family: $font-family-body; font-size: 26rpx; font-weight: 700; color: #ffffff; }
 
 /* ===== Load More ===== */
 .load-more { text-align: center; padding: 16rpx 0 120rpx; }
-.load-more__text { font-family: $font; font-size: 22rpx; color: $text-weak; }
+.load-more__text { font-family: $font-family-body; font-size: 22rpx; color: $uv-placeholder-color; }
 
 /* ===== Code Modal ===== */
 .code-modal {
-  width: 560rpx; background: #ffffff; border-radius: $card-radius; padding: 40rpx;
+  width: 560rpx; background: #ffffff; border-radius: $radius-lg; padding: 40rpx;
   display: flex; flex-direction: column; align-items: center;
 }
 
-.code-modal__title { font-family: $font; font-size: 32rpx; font-weight: 700; color: $text-main; margin-bottom: 32rpx; }
+.code-modal__title { font-family: $font-family-body; font-size: 32rpx; font-weight: 700; color: $uv-main-color; margin-bottom: 32rpx; }
 
 .qr-box {
   width: 360rpx; height: 360rpx; background: #F8FAFC;
@@ -515,22 +506,22 @@ $card-radius: 24rpx;
 
 .qr-img { width: 300rpx; height: 300rpx; }
 
-.code-modal__desc { font-family: $font; font-size: 26rpx; color: $text-hint; margin-top: 24rpx; }
+.code-modal__desc { font-family: $font-family-body; font-size: 26rpx; color: $uv-tips-color; margin-top: 24rpx; }
 
 /* ===== Cancel Modal ===== */
 .cancel-modal {
-  width: 600rpx; background: #ffffff; border-radius: $card-radius; padding: 40rpx;
+  width: 600rpx; background: #ffffff; border-radius: $radius-lg; padding: 40rpx;
 }
 
 .cancel-modal__title {
-  display: block; font-family: $font; font-size: 32rpx; font-weight: 700;
-  color: $text-main; text-align: center; margin-bottom: 24rpx;
+  display: block; font-family: $font-family-body; font-size: 32rpx; font-weight: 700;
+  color: $uv-main-color; text-align: center; margin-bottom: 24rpx;
 }
 
 .cancel-modal__body { margin-bottom: 32rpx; }
 
 .cancel-modal__text {
-  font-family: $font; font-size: 26rpx; color: $text-body; line-height: 1.7;
+  font-family: $font-family-body; font-size: 26rpx; color: $uv-content-color; line-height: 1.7;
 }
 
 .cancel-modal__actions { display: flex; gap: 24rpx; }
@@ -540,30 +531,30 @@ $card-radius: 24rpx;
   align-items: center; justify-content: center; transition: all 0.15s ease;
 
   &--outline {
-    border: 2rpx solid $divider;
+    border: 2rpx solid $uv-border-color;
     &:active { transform: scale(0.97); background: #f5f5f5; }
   }
   &--primary {
-    background: $primary;
+    background: $uv-primary;
     &:active { transform: scale(0.97); }
   }
 }
 
-.btn-modal__text--outline { font-family: $font; font-size: 26rpx; font-weight: 500; color: $text-hint; }
-.btn-modal__text--primary { font-family: $font; font-size: 26rpx; font-weight: 700; color: #ffffff; }
+.btn-modal__text--outline { font-family: $font-family-body; font-size: 26rpx; font-weight: 500; color: $uv-tips-color; }
+.btn-modal__text--primary { font-family: $font-family-body; font-size: 26rpx; font-weight: 700; color: #ffffff; }
 
 /* ===== Detail Sheet ===== */
 .detail-sheet {
-  background: #ffffff; border-radius: $card-radius $card-radius 0 0; max-height: 75vh;
+  background: #ffffff; border-radius: $radius-lg $radius-lg 0 0; max-height: 75vh;
   display: flex; flex-direction: column;
 }
 
 .sheet-header {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 32rpx; border-bottom: 1rpx solid $divider; flex-shrink: 0;
+  padding: 32rpx; border-bottom: 1rpx solid $uv-border-color; flex-shrink: 0;
 }
 
-.sheet-title { font-family: $font; font-size: 30rpx; font-weight: 700; color: $text-main; }
+.sheet-title { font-family: $font-family-body; font-size: 30rpx; font-weight: 700; color: $uv-main-color; }
 
 .sheet-close {
   width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center;
@@ -574,7 +565,7 @@ $card-radius: 24rpx;
   width: 20rpx; height: 20rpx; position: relative;
   &::before, &::after {
     content: ''; position: absolute; top: 50%; left: 50%;
-    width: 20rpx; height: 3rpx; background: $text-hint; border-radius: 2rpx;
+    width: 20rpx; height: 3rpx; background: $uv-tips-color; border-radius: 2rpx;
   }
   &::before { transform: translate(-50%, -50%) rotate(45deg); }
   &::after { transform: translate(-50%, -50%) rotate(-45deg); }
@@ -584,18 +575,18 @@ $card-radius: 24rpx;
 
 .sheet-row {
   display: flex; justify-content: space-between; align-items: center;
-  padding: 14rpx 0; border-bottom: 1rpx solid $divider;
+  padding: 14rpx 0; border-bottom: 1rpx solid $uv-border-color;
 }
 
-.sheet-label { font-family: $font; font-size: 26rpx; color: $text-label; }
-.sheet-value { font-family: $font; font-size: 26rpx; color: $text-body; text-align: right; }
+.sheet-label { font-family: $font-family-body; font-size: 26rpx; color: $uv-main-color; }
+.sheet-value { font-family: $font-family-body; font-size: 26rpx; color: $uv-content-color; text-align: right; }
 
 .sheet-photo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14rpx 0;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
 }
 
 .sheet-photo-avatar {
@@ -608,5 +599,5 @@ $card-radius: 24rpx;
   margin-top: 24rpx; padding: 20rpx; background: #fff2f2; border-radius: 12rpx;
 }
 
-.sheet-tip__text { font-family: $font; font-size: 24rpx; color: #f53f3f; line-height: 1.5; }
+.sheet-tip__text { font-family: $font-family-body; font-size: 24rpx; color: #f53f3f; line-height: 1.5; }
 </style>
diff --git a/src/pages/reserve/reserve-success.vue b/src/pages/reserve/reserve-success.vue
index 793645f..34bd1d9 100644
--- a/src/pages/reserve/reserve-success.vue
+++ b/src/pages/reserve/reserve-success.vue
@@ -119,15 +119,6 @@ function goHome() {
 </script>
 
 <style lang="scss" scoped>
-$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
-$primary: #3c9cff;
-$text-main: #111111;
-$text-label: #222222;
-$text-body: #333333;
-$text-hint: #666666;
-$text-weak: #999999;
-$divider: #eeeeee;
-$card-radius: 24rpx;
 
 .page {
   min-height: 100vh;
@@ -135,7 +126,7 @@ $card-radius: 24rpx;
   display: flex;
   flex-direction: column;
   padding-bottom: env(safe-area-inset-bottom);
-  font-family: $font;
+  font-family: $font-family-body;
 }
 
 /* ===== 成功图标 ===== */
@@ -162,8 +153,8 @@ $card-radius: 24rpx;
 .success-check {
   width: 48rpx;
   height: 24rpx;
-  border-left: 6rpx solid $primary;
-  border-bottom: 6rpx solid $primary;
+  border-left: 6rpx solid $uv-primary;
+  border-bottom: 6rpx solid $uv-primary;
   transform: rotate(-45deg);
   position: absolute;
   top: 40rpx;
@@ -171,17 +162,17 @@ $card-radius: 24rpx;
 }
 
 .success-title {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-top: 32rpx;
 }
 
 .success-desc {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   margin-top: 16rpx;
 }
 
@@ -189,7 +180,7 @@ $card-radius: 24rpx;
 .info-card {
   margin: 48rpx 32rpx 0;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
 }
@@ -199,7 +190,7 @@ $card-radius: 24rpx;
   justify-content: space-between;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid $divider;
+  border-bottom: 1rpx solid $uv-border-color;
 
   &--last {
     border-bottom: none;
@@ -207,15 +198,15 @@ $card-radius: 24rpx;
 }
 
 .info-label {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-label;
+  color: $uv-main-color;
 }
 
 .info-value {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-body;
+  color: $uv-content-color;
   text-align: right;
 }
 
@@ -228,9 +219,9 @@ $card-radius: 24rpx;
 }
 
 .code-btn__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 24rpx;
-  color: $primary;
+  color: $uv-primary;
   font-weight: 500;
 }
 
@@ -238,13 +229,13 @@ $card-radius: 24rpx;
 .warn-card {
   margin: 24rpx 32rpx 0;
   background: #fff2f2;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 32rpx;
 }
 
 .warn-title {
   display: block;
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
   color: #f53f3f;
@@ -273,9 +264,9 @@ $card-radius: 24rpx;
 }
 
 .warn-text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   line-height: 1.6;
 }
 
@@ -297,25 +288,25 @@ $card-radius: 24rpx;
   transition: all 0.15s ease;
 
   &--outline {
-    border: 2rpx solid $divider;
+    border: 2rpx solid $uv-border-color;
     &:active { transform: scale(0.97); background: #f5f5f5; }
   }
 
   &--primary {
-    background: $primary;
+    background: $uv-primary;
     &:active { transform: scale(0.97); }
   }
 }
 
 .btn-half__text--outline {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 500;
-  color: $text-hint;
+  color: $uv-tips-color;
 }
 
 .btn-half__text--primary {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
   font-weight: 700;
   color: #ffffff;
@@ -325,7 +316,7 @@ $card-radius: 24rpx;
 .code-modal {
   width: 560rpx;
   background: #ffffff;
-  border-radius: $card-radius;
+  border-radius: $radius-lg;
   padding: 40rpx;
   display: flex;
   flex-direction: column;
@@ -333,17 +324,17 @@ $card-radius: 24rpx;
 }
 
 .code-modal__title {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 32rpx;
   font-weight: 700;
-  color: $text-main;
+  color: $uv-main-color;
   margin-bottom: 32rpx;
 }
 
 .code-modal__desc {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $text-hint;
+  color: $uv-tips-color;
   margin-top: 8rpx;
 }
 
@@ -373,9 +364,9 @@ $card-radius: 24rpx;
 }
 
 .copy-btn__text {
-  font-family: $font;
+  font-family: $font-family-body;
   font-size: 26rpx;
-  color: $primary;
+  color: $uv-primary;
   font-weight: 500;
 }
 </style>