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