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

refactor(card/detail): migrate hardcoded colors and spacing to design tokens

Browse Source
This commit is contained in:
jacobxu666
2026-06-26 10:51:54 +08:00
parent d9a7aad499
commit f2b8ad9604
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/user/pages/card/detail.vue
+22 -22
View File
@@ -108,31 +108,31 @@ function handleBuy() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; } .page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; font-family: $font-family-display; }
.cover { width: 100%; height: 400rpx; background: #ddd; } .cover { width: 100%; height: 400rpx; background: $color-muted; }
.info-card { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; } .info-card { background: $color-card; padding: $spacing-3 $spacing-4; margin-bottom: $spacing-2; }
.card-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; } .card-name { font-size: $font-size-xl; font-weight: $font-weight-bold; color: $uv-content-color; display: block; }
.price-row { display: flex; align-items: baseline; gap: 12rpx; margin: 12rpx 0; } .price-row { display: flex; align-items: baseline; gap: $spacing-2; margin: $spacing-2 0; }
.price { font-size: 44rpx; color: #e53935; font-weight: bold; } .price { font-size: $font-size-2xl; color: $color-price; font-weight: $font-weight-bold; }
.original-price { font-size: 26rpx; color: #ccc; text-decoration: line-through; } .original-price { font-size: $font-size-sm; color: $uv-disabled-color; text-decoration: line-through; }
.card-desc { font-size: 26rpx; color: #666; } .card-desc { font-size: $font-size-sm; color: $uv-tips-color; }
.section { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; } .section { background: $color-card; padding: $spacing-3 $spacing-4; margin-bottom: $spacing-2; }
.section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 16rpx; } .section-title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $uv-content-color; display: block; margin-bottom: $spacing-2; }
.benefit-list { display: flex; flex-direction: column; gap: 12rpx; } .benefit-list { display: flex; flex-direction: column; gap: $spacing-2; }
.benefit-item { display: flex; align-items: center; gap: 12rpx; } .benefit-item { display: flex; align-items: center; gap: $spacing-2; }
.benefit-icon { font-size: 28rpx; } .benefit-icon { font-size: $font-size-base; }
.benefit-text { font-size: 26rpx; color: #666; } .benefit-text { font-size: $font-size-sm; color: $uv-tips-color; }
.scenic-scroll { white-space: nowrap; } .scenic-scroll { white-space: nowrap; }
.scenic-list { display: flex; gap: 16rpx; } .scenic-list { display: flex; gap: $spacing-2; }
.scenic-card { min-width: 200rpx; display: flex; flex-direction: column; } .scenic-card { min-width: 200rpx; display: flex; flex-direction: column; }
.scenic-img { width: 200rpx; height: 140rpx; border-radius: 12rpx; background: #eee; } .scenic-img { width: 200rpx; height: 140rpx; border-radius: $radius-base; background: $uv-border-color; }
.scenic-name { font-size: 24rpx; color: #333; margin-top: 8rpx; text-align: center; } .scenic-name { font-size: $font-size-sm; color: $uv-content-color; margin-top: $spacing-1; text-align: center; }
.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; } .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 { flex: 1; display: flex; flex-direction: column; }
.bottom-price .label { font-size: 22rpx; color: #999; } .bottom-price .label { font-size: $font-size-xs; color: $uv-placeholder-color; }
.bottom-price .value { font-size: 36rpx; color: #e53935; font-weight: bold; } .bottom-price .value { font-size: $font-size-xl; color: $color-price; font-weight: $font-weight-bold; }
.btn-buy { background: #e53935; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 40rpx; border: none; } .btn-buy { background: $color-price; color: #fff; font-size: $font-size-lg; padding: $spacing-3 $spacing-8; border-radius: $radius-2xl; border: none; }
.loading-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #999; } .loading-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: $uv-placeholder-color; }
/* Quick actions — 功能入口 */ /* Quick actions — 功能入口 */
.quick-grid { .quick-grid {