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>
|
||||
|
||||
Reference in New Issue
Block a user