diff --git a/src/packages/user/pages/card/buy.vue b/src/packages/user/pages/card/buy.vue
index 318cb4f..896e187 100644
--- a/src/packages/user/pages/card/buy.vue
+++ b/src/packages/user/pages/card/buy.vue
@@ -85,22 +85,22 @@ async function handlePay() {
 </script>
 
 <style lang="scss" scoped>
-.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; padding-bottom: 140rpx; box-sizing: border-box; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
-.order-card, .pay-card { background: #fff; border-radius: 24rpx; padding: 24rpx 30rpx; margin-bottom: 20rpx; }
-.card-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 20rpx; padding-bottom: 16rpx; border-bottom: 1rpx solid #eeeeee; }
-.order-row { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; }
-.label { font-size: 28rpx; color: #666; }
-.value { font-size: 28rpx; color: #333; }
-.value.price { color: #e53935; font-weight: bold; font-size: 36rpx; }
-.pay-option { display: flex; align-items: center; padding: 20rpx 0; }
-.pay-option.active { color: #3c9cff; }
-.pay-icon { font-size: 36rpx; margin-right: 16rpx; }
-.pay-name { flex: 1; font-size: 28rpx; }
-.pay-check { font-size: 32rpx; color: #3c9cff; font-weight: bold; }
-.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; }
+.page { min-height: 100vh; background: $color-background; padding: $spacing-3; padding-bottom: 140rpx; box-sizing: border-box; font-family: $font-family-display; }
+.order-card, .pay-card { background: $color-card; border-radius: $radius-lg; padding: $spacing-3 $spacing-4; margin-bottom: $spacing-3; }
+.card-title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $uv-content-color; display: block; margin-bottom: $spacing-3; padding-bottom: $spacing-2; border-bottom: $border-width solid $uv-border-color; }
+.order-row { display: flex; justify-content: space-between; align-items: center; padding: $spacing-2 0; }
+.label { font-size: $font-size-base; color: $uv-tips-color; }
+.value { font-size: $font-size-base; color: $uv-content-color; }
+.value.price { color: $color-price; font-weight: $font-weight-bold; font-size: $font-size-xl; }
+.pay-option { display: flex; align-items: center; padding: $spacing-3 0; }
+.pay-option.active { color: $uv-primary; }
+.pay-icon { font-size: $font-size-xl; margin-right: $spacing-2; }
+.pay-name { flex: 1; font-size: $font-size-base; }
+.pay-check { font-size: $font-size-lg; color: $uv-primary; font-weight: $font-weight-bold; }
+.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: 40rpx; color: #e53935; font-weight: bold; }
-.btn-pay { background: #e53935; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 40rpx; border: none; }
-.btn-pay[disabled] { background: #e5e7eb; }
+.bottom-price .label { font-size: $font-size-xs; color: $uv-placeholder-color; }
+.bottom-price .value { font-size: $font-size-2xl; color: $color-price; font-weight: $font-weight-bold; }
+.btn-pay { background: $color-price; color: #fff; font-size: $font-size-lg; padding: $spacing-3 $spacing-8; border-radius: $radius-2xl; border: none; }
+.btn-pay[disabled] { background: $uv-bg-color; }
 </style>
diff --git a/src/pages/card-buy/card-buy.vue b/src/pages/card-buy/card-buy.vue
index 3c2aec2..195b3ca 100644
--- a/src/pages/card-buy/card-buy.vue
+++ b/src/pages/card-buy/card-buy.vue
@@ -86,7 +86,7 @@ $bar-height: 120rpx;
 
 .page {
   min-height: 100vh;
-  background: #ffffff;
+  background: $color-card;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
   font-family: $font-family-body;
 }
@@ -113,7 +113,7 @@ $bar-height: 120rpx;
   width: 100%;
   box-sizing: border-box;
   height: $bar-height;
-  background: #ffffff;
+  background: $color-card;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -138,14 +138,14 @@ $bar-height: 120rpx;
   font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: #e53935;
+  color: $color-price;
 }
 
 .price-value {
   font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: #e53935;
+  color: $color-price;
   line-height: 1;
 }