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

refactor(buy-flow): migrate hardcoded colors and spacing to design tokens

Browse Source
This commit is contained in:
jacobxu666
2026-06-26 10:54:45 +08:00
parent f2b8ad9604
commit 72f435f7b3
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/user/pages/card/buy.vue
+17 -17
View File
@@ -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>
src/pages/card-buy/card-buy.vue
+4 -4
View File
@@ -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;
}