xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(order): migrate hardcoded colors, spacing, and mock data to design tokens

Browse Source
This commit is contained in:
jacobxu666
2026-06-26 11:00:46 +08:00
parent 72f435f7b3
commit 824bb3b808
2 changed files with 140 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/order-detail.vue
+72 -72
View File
@@ -226,26 +226,26 @@ $bar-height: 120rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: $color-background;
padding: 24rpx; padding: $spacing-3;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx); padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + #{$spacing-3});
font-family: $font-family-body; font-family: $font-family-body;
} }
/* ===== 模块1：状态卡片 ===== */ /* ===== 模块1：状态卡片 ===== */
.status-card { .status-card {
background: #ffffff; background: $color-card;
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 48rpx 32rpx; padding: $spacing-6 $spacing-4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
&--pending { border-top: 6rpx solid #ff9500; } &--pending { border-top: 6rpx solid $color-status-pending; }
&--activated { border-top: 6rpx solid #00b42a; } &--activated { border-top: 6rpx solid $color-status-success; }
&--refunded { border-top: 6rpx solid #86909c; } &--refunded { border-top: 6rpx solid $color-status-cancel; }
&--expired { border-top: 6rpx solid #f53f3f; } &--expired { border-top: 6rpx solid $uv-error; }
} }
.status-icon-wrap { .status-icon-wrap {
@@ -255,7 +255,7 @@ $bar-height: 120rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 20rpx; margin-bottom: $spacing-3;
} }
.status-card--pending .status-icon-wrap { background: rgba(255, 149, 0, 0.1); } .status-card--pending .status-icon-wrap { background: rgba(255, 149, 0, 0.1); }
@@ -268,7 +268,7 @@ $bar-height: 120rpx;
height: 36rpx; height: 36rpx;
&--pending { &--pending {
border: 4rpx solid #ff9500; border: 4rpx solid $color-status-pending;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
&::after { &::after {
@@ -278,13 +278,13 @@ $bar-height: 120rpx;
left: 50%; left: 50%;
width: 4rpx; width: 4rpx;
height: 16rpx; height: 16rpx;
background: #ff9500; background: $color-status-pending;
transform: translate(-50%, -70%); transform: translate(-50%, -70%);
} }
} }
&--activated { &--activated {
border: 4rpx solid #00b42a; border: 4rpx solid $color-status-success;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
&::after { &::after {
@@ -294,8 +294,8 @@ $bar-height: 120rpx;
left: 50%; left: 50%;
width: 16rpx; width: 16rpx;
height: 8rpx; height: 8rpx;
border-left: 4rpx solid #00b42a; border-left: 4rpx solid $color-status-success;
border-bottom: 4rpx solid #00b42a; border-bottom: 4rpx solid $color-status-success;
transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
} }
} }
@@ -309,7 +309,7 @@ $bar-height: 120rpx;
left: 50%; left: 50%;
width: 28rpx; width: 28rpx;
height: 4rpx; height: 4rpx;
background: #86909c; background: $color-status-cancel;
border-radius: 2rpx; border-radius: 2rpx;
} }
&::before { transform: translate(-50%, -50%) rotate(45deg); } &::before { transform: translate(-50%, -50%) rotate(45deg); }
@@ -317,7 +317,7 @@ $bar-height: 120rpx;
} }
&--expired { &--expired {
border: 4rpx solid #f53f3f; border: 4rpx solid $uv-error;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
&::before, &::after { &::before, &::after {
@@ -327,7 +327,7 @@ $bar-height: 120rpx;
left: 50%; left: 50%;
width: 20rpx; width: 20rpx;
height: 4rpx; height: 4rpx;
background: #f53f3f; background: $uv-error;
border-radius: 2rpx; border-radius: 2rpx;
} }
&::before { transform: translate(-50%, -50%) rotate(45deg); } &::before { transform: translate(-50%, -50%) rotate(45deg); }
@@ -337,67 +337,67 @@ $bar-height: 120rpx;
.status-title { .status-title {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 38rpx; font-size: $font-size-title;
font-weight: 700; font-weight: $font-weight-bold;
color: $uv-main-color; color: $uv-main-color;
margin-bottom: 12rpx; margin-bottom: $spacing-2;
} }
.status-desc { .status-desc {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-tips-color; color: $uv-tips-color;
text-align: center; text-align: center;
} }
/* ===== 模块2：商品信息卡片 ===== */ /* ===== 模块2：商品信息卡片 ===== */
.info-card { .info-card {
background: #ffffff; background: $color-card;
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 32rpx; padding: $spacing-4;
margin-top: 24rpx; margin-top: $spacing-3;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
} }
.product-name { .product-name {
display: block; display: block;
font-family: $font-family-body; font-family: $font-family-body;
font-size: 28rpx; font-size: $font-size-base;
font-weight: 700; font-weight: $font-weight-bold;
color: $uv-main-color; color: $uv-main-color;
margin-bottom: 12rpx; margin-bottom: $spacing-2;
} }
.price-row { .price-row {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-bottom: 16rpx; margin-bottom: $spacing-2;
} }
.price-current { .price-current {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-right: 16rpx; margin-right: $spacing-2;
} }
.price-symbol { .price-symbol {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: #e53935; color: $color-price;
} }
.price-value { .price-value {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 38rpx; font-size: $font-size-title;
font-weight: 700; font-weight: $font-weight-bold;
color: #e53935; color: $color-price;
line-height: 1; line-height: 1;
} }
.product-desc { .product-desc {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-tips-color; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -407,8 +407,8 @@ $bar-height: 120rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20rpx 0; padding: $spacing-3 0;
border-bottom: 1rpx solid $uv-border-color; border-bottom: $border-width solid $uv-border-color;
&--last { &--last {
border-bottom: none; border-bottom: none;
@@ -417,37 +417,37 @@ $bar-height: 120rpx;
.detail-label { .detail-label {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-main-color; color: $uv-main-color;
flex-shrink: 0; flex-shrink: 0;
} }
.detail-value { .detail-value {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-content-color; color: $uv-content-color;
text-align: right; text-align: right;
&--code { &--code {
font-weight: 700; font-weight: $font-weight-bold;
letter-spacing: 4rpx; letter-spacing: 4rpx;
} }
&--price { &--price {
font-weight: 700; font-weight: $font-weight-bold;
color: #e53935; color: $color-price;
} }
} }
.detail-value-row { .detail-value-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16rpx; gap: $spacing-2;
} }
.copy-btn { .copy-btn {
padding: 4rpx 16rpx; padding: 4rpx $spacing-2;
border-radius: 8rpx; border-radius: $radius-sm;
background: rgba(60, 156, 255, 0.08); background: rgba(60, 156, 255, 0.08);
&:active { &:active {
@@ -457,36 +457,36 @@ $bar-height: 120rpx;
.copy-btn__text { .copy-btn__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-primary; color: $uv-primary;
font-weight: 500; font-weight: $font-weight-medium;
} }
/* ===== 模块4：使用提示 ===== */ /* ===== 模块4：使用提示 ===== */
.tips-card { .tips-card {
background: rgba(60, 156, 255, 0.04); background: rgba(60, 156, 255, 0.04);
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 32rpx; padding: $spacing-4;
margin-top: 24rpx; margin-top: $spacing-3;
} }
.tips-title { .tips-title {
display: block; display: block;
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: $uv-main-color; color: $uv-main-color;
margin-bottom: 16rpx; margin-bottom: $spacing-2;
} }
.tips-list { .tips-list {
margin-bottom: 20rpx; margin-bottom: $spacing-3;
} }
.tips-item { .tips-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 12rpx; margin-bottom: $spacing-2;
} }
.tips-dot { .tips-dot {
@@ -496,12 +496,12 @@ $bar-height: 120rpx;
background: $uv-primary; background: $uv-primary;
flex-shrink: 0; flex-shrink: 0;
margin-top: 14rpx; margin-top: 14rpx;
margin-right: 12rpx; margin-right: $spacing-2;
} }
.tips-text { .tips-text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-tips-color; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -514,14 +514,14 @@ $bar-height: 120rpx;
.tips-link__text { .tips-link__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-primary; color: $uv-primary;
font-weight: 500; font-weight: $font-weight-medium;
} }
/* ===== 底部安全区 ===== */ /* ===== 底部安全区 ===== */
.safe-bottom { .safe-bottom {
height: 24rpx; height: $spacing-3;
} }
/* ===== 模块5：底部操作栏 ===== */ /* ===== 模块5：底部操作栏 ===== */
@@ -533,19 +533,19 @@ $bar-height: 120rpx;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: $bar-height; height: $bar-height;
background: #ffffff; background: $color-card;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 0 48rpx; padding: 0 $spacing-6;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06); box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
z-index: 100; z-index: $z-sticky;
} }
.bottom-bar__right { .bottom-bar__right {
display: flex; display: flex;
gap: 24rpx; gap: $spacing-3;
} }
.btn-action { .btn-action {
@@ -555,7 +555,7 @@ $bar-height: 120rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.15s ease; transition: all $transition-fast;
&--primary { &--primary {
background: $uv-primary; background: $uv-primary;
@@ -570,22 +570,22 @@ $bar-height: 120rpx;
&:active { &:active {
transform: scale(0.97); transform: scale(0.97);
background: #f5f5f5; background: $uv-bg-color;
} }
} }
} }
.btn-action__text { .btn-action__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: #ffffff; color: #fff;
} }
.btn-action__text--outline { .btn-action__text--outline {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
font-weight: 500; font-weight: $font-weight-medium;
color: $uv-tips-color; color: $uv-tips-color;
} }
</style> </style>
src/pages/order/order-list.vue
+68 -87
View File
@@ -117,22 +117,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { mockOrders, type OrderItem } from '@/mock/order'
type OrderStatus = 'pending' | 'activated' | 'refunded' | 'expired' type OrderStatus = 'pending' | 'activated' | 'refunded' | 'expired'
interface OrderItem {
id: string
status: OrderStatus
createTime: string
payAmount: number
originalPrice: number
cardType: string
redeemCode: string
payChannel: string
activatedTime?: string
refundedTime?: string
}
const tabs = [ const tabs = [
{ label: '全部', value: '' }, { label: '全部', value: '' },
{ label: '待绑定', value: 'pending' }, { label: '待绑定', value: 'pending' },
@@ -148,14 +136,7 @@ const currentPage = ref(1)
const refundPopup = ref<any>(null) const refundPopup = ref<any>(null)
const refundOrderId = ref('') const refundOrderId = ref('')
const orders = ref<OrderItem[]>([ const orders = ref<OrderItem[]>(mockOrders)
{ id: 'ORD20260625001', status: 'pending', createTime: '2026-06-25 10:32', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012398', payChannel: '微信支付' },
{ id: 'ORD20260624002', status: 'activated', createTime: '2026-06-24 14:18', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012399', payChannel: '微信支付', activatedTime: '2026-06-24 15:00' },
{ id: 'ORD20260623003', status: 'pending', createTime: '2026-06-23 09:45', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012400', payChannel: '微信支付' },
{ id: 'ORD20260620004', status: 'refunded', createTime: '2026-06-20 16:22', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012401', payChannel: '微信支付', refundedTime: '2026-06-21 10:15' },
{ id: 'ORD20260618005', status: 'activated', createTime: '2026-06-18 11:08', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012402', payChannel: '微信支付', activatedTime: '2026-06-18 12:30' },
{ id: 'ORD20260510007', status: 'activated', createTime: '2026-05-10 13:40', payAmount: 198, originalPrice: 3800, cardType: '超级玩家卡', redeemCode: 'CJ0000012403', payChannel: '微信支付', activatedTime: '2026-05-10 14:20' },
])
const filteredOrders = computed(() => { const filteredOrders = computed(() => {
if (!activeTab.value) return orders.value if (!activeTab.value) return orders.value
@@ -232,14 +213,14 @@ function goBuy() {
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: $color-background;
font-family: $font-family-body; font-family: $font-family-body;
} }
/* ===== Tab Bar ===== */ /* ===== Tab Bar ===== */
.tab-bar { .tab-bar {
white-space: nowrap; white-space: nowrap;
background: #ffffff; background: $color-card;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
} }
@@ -252,20 +233,20 @@ function goBuy() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 24rpx 0; padding: $spacing-3 0;
position: relative; position: relative;
} }
.tab-text { .tab-text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
font-weight: 500; font-weight: $font-weight-medium;
color: $uv-tips-color; color: $uv-tips-color;
} }
.tab-item--active .tab-text { .tab-item--active .tab-text {
color: $uv-primary; color: $uv-primary;
font-weight: 700; font-weight: $font-weight-bold;
} }
.tab-underline { .tab-underline {
@@ -273,7 +254,7 @@ function goBuy() {
height: 4rpx; height: 4rpx;
border-radius: 2rpx; border-radius: 2rpx;
background: $uv-primary; background: $uv-primary;
margin-top: 8rpx; margin-top: $spacing-1;
} }
/* ===== Order List ===== */ /* ===== Order List ===== */
@@ -282,16 +263,16 @@ function goBuy() {
} }
.order-cards { .order-cards {
padding: 24rpx; padding: $spacing-3;
} }
/* ===== Order Card ===== */ /* ===== Order Card ===== */
.order-card { .order-card {
background: #ffffff; background: $color-card;
border-radius: $radius-lg; border-radius: $radius-lg;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
padding: 32rpx; padding: $spacing-4;
margin-bottom: 24rpx; margin-bottom: $spacing-3;
&:active { &:active {
transform: scale(0.99); transform: scale(0.99);
@@ -302,19 +283,19 @@ function goBuy() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: $spacing-3;
} }
.order-no { .order-no {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 22rpx; font-size: $font-size-xs;
color: $uv-placeholder-color; color: $uv-placeholder-color;
} }
/* Status Tags */ /* Status Tags */
.status-tag { .status-tag {
padding: 4rpx 16rpx; padding: 4rpx $spacing-2;
border-radius: 8rpx; border-radius: $radius-sm;
&--pending { &--pending {
background: rgba(255, 149, 0, 0.1); background: rgba(255, 149, 0, 0.1);
@@ -335,18 +316,18 @@ function goBuy() {
.status-tag__text { .status-tag__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 22rpx; font-size: $font-size-xs;
font-weight: 500; font-weight: $font-weight-medium;
} }
.status-tag--pending .status-tag__text { color: #ff9500; } .status-tag--pending .status-tag__text { color: $color-status-pending; }
.status-tag--activated .status-tag__text { color: #00b42a; } .status-tag--activated .status-tag__text { color: $color-status-success; }
.status-tag--refunded .status-tag__text { color: #86909c; } .status-tag--refunded .status-tag__text { color: $color-status-cancel; }
.status-tag--expired .status-tag__text { color: #f53f3f; } .status-tag--expired .status-tag__text { color: $uv-error; }
/* Product Info */ /* Product Info */
.card-product { .card-product {
margin-bottom: 20rpx; margin-bottom: $spacing-3;
} }
.product-name-row { .product-name-row {
@@ -357,8 +338,8 @@ function goBuy() {
.product-name { .product-name {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 28rpx; font-size: $font-size-base;
font-weight: 500; font-weight: $font-weight-medium;
color: $uv-main-color; color: $uv-main-color;
} }
@@ -369,16 +350,16 @@ function goBuy() {
.price-symbol { .price-symbol {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: #e53935; color: $color-price;
} }
.price-value { .price-value {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 38rpx; font-size: $font-size-title;
font-weight: 700; font-weight: $font-weight-bold;
color: #e53935; color: $color-price;
line-height: 1; line-height: 1;
} }
@@ -386,20 +367,20 @@ function goBuy() {
.card-info { .card-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 20rpx; padding-bottom: $spacing-3;
border-bottom: 1rpx solid $uv-border-color; border-bottom: $border-width solid $uv-border-color;
margin-bottom: 20rpx; margin-bottom: $spacing-3;
} }
.info-time { .info-time {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-tips-color; color: $uv-tips-color;
} }
.info-pay { .info-pay {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-tips-color; color: $uv-tips-color;
} }
@@ -407,7 +388,7 @@ function goBuy() {
.card-actions { .card-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 20rpx; gap: $spacing-3;
} }
.btn-outline { .btn-outline {
@@ -418,18 +399,18 @@ function goBuy() {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.15s ease; transition: all $transition-fast;
&:active { &:active {
transform: scale(0.97); transform: scale(0.97);
background: #f5f5f5; background: $uv-bg-color;
} }
} }
.btn-outline__text { .btn-outline__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
font-weight: 500; font-weight: $font-weight-medium;
color: $uv-tips-color; color: $uv-tips-color;
} }
@@ -441,7 +422,7 @@ function goBuy() {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.15s ease; transition: all $transition-fast;
&:active { &:active {
transform: scale(0.97); transform: scale(0.97);
@@ -450,9 +431,9 @@ function goBuy() {
.btn-primary__text { .btn-primary__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: #ffffff; color: #fff;
} }
/* ===== Empty State ===== */ /* ===== Empty State ===== */
@@ -461,21 +442,21 @@ function goBuy() {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 160rpx 48rpx 0; padding: 160rpx $spacing-6 0;
} }
.empty-icon { .empty-icon {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
position: relative; position: relative;
margin-bottom: 32rpx; margin-bottom: $spacing-4;
} }
.empty-bag { .empty-bag {
width: 80rpx; width: 80rpx;
height: 64rpx; height: 64rpx;
border: 4rpx solid #cccccc; border: 4rpx solid $uv-disabled-color;
border-radius: 8rpx; border-radius: $radius-sm;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@@ -485,22 +466,22 @@ function goBuy() {
.empty-bag__handle { .empty-bag__handle {
width: 40rpx; width: 40rpx;
height: 24rpx; height: 24rpx;
border: 4rpx solid #cccccc; border: 4rpx solid $uv-disabled-color;
border-bottom: none; border-bottom: none;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
position: absolute; position: absolute;
top: 16rpx; top: $spacing-2;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.empty-text { .empty-text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-placeholder-color; color: $uv-placeholder-color;
text-align: center; text-align: center;
line-height: 1.6; line-height: 1.6;
margin-bottom: 32rpx; margin-bottom: $spacing-4;
} }
.empty-btn { .empty-btn {
@@ -519,57 +500,57 @@ function goBuy() {
.empty-btn__text { .empty-btn__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
font-weight: 700; font-weight: $font-weight-bold;
color: #ffffff; color: #fff;
} }
/* ===== Load More ===== */ /* ===== Load More ===== */
.load-more { .load-more {
text-align: center; text-align: center;
padding: 16rpx 0 120rpx; padding: $spacing-2 0 120rpx;
} }
.load-more__text { .load-more__text {
font-family: $font-family-body; font-family: $font-family-body;
font-size: 24rpx; font-size: $font-size-sm;
color: $uv-placeholder-color; color: $uv-placeholder-color;
} }
/* ===== Refund Modal ===== */ /* ===== Refund Modal ===== */
.refund-modal { .refund-modal {
width: 600rpx; width: 600rpx;
background: #ffffff; background: $color-card;
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 40rpx; padding: $spacing-5;
} }
.refund-title { .refund-title {
display: block; display: block;
font-family: $font-family-body; font-family: $font-family-body;
font-size: 28rpx; font-size: $font-size-base;
font-weight: 700; font-weight: $font-weight-bold;
color: $uv-main-color; color: $uv-main-color;
text-align: center; text-align: center;
margin-bottom: 24rpx; margin-bottom: $spacing-3;
} }
.refund-body { .refund-body {
margin-bottom: 32rpx; margin-bottom: $spacing-4;
} }
.refund-text { .refund-text {
display: block; display: block;
font-family: $font-family-body; font-family: $font-family-body;
font-size: 26rpx; font-size: $font-size-sm;
color: $uv-content-color; color: $uv-content-color;
line-height: 1.7; line-height: 1.7;
margin-bottom: 12rpx; margin-bottom: $spacing-2;
} }
.refund-actions { .refund-actions {
display: flex; display: flex;
gap: 24rpx; gap: $spacing-3;
.btn-outline, .btn-outline,
.btn-primary { .btn-primary {