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

refactor: remove local SCSS variables from 9 pages

Browse Source 
Replace with global uni.scss tokens:
$font → $font-family-body
$primary → $uv-primary
$text-* → $uv-main-color/$uv-content-color/$uv-tips-color/$uv-placeholder-color
$divider → $uv-border-color
$card-radius → $radius-lg
$accent → $uv-primary

Kept $bar-height: 120rpx as component-specific local var.
Removed dead $primary-dark: #e89a2a from card-bind.vue (never used).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-06-26 10:34:54 +08:00
co-authored by Claude
parent 25a1cc4eb3
commit cfb9a4ce26
9 changed files with 268 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/card-bind/card-bind.vue
+40 -50
View File
@@ -267,23 +267,13 @@ function handleCancel() {
<style lang="scss" scoped> <style lang="scss" scoped>
/* ===== Design Tokens ===== */ /* ===== Design Tokens ===== */
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$primary-dark: #e89a2a;
$accent: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
/* ===== Page ===== */ /* ===== Page ===== */
.page { .page {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: #ffffff; background: #ffffff;
font-family: $font; font-family: $font-family-body;
} }
/* ===== 1. Header ===== */ /* ===== 1. Header ===== */
@@ -301,25 +291,25 @@ $divider: #eeeeee;
} }
.header-title__bind { .header-title__bind {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
} }
.header-title__card { .header-title__card {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: $accent; color: $uv-primary;
} }
.header-desc { .header-desc {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: $text-hint; color: $uv-tips-color;
line-height: 36rpx; line-height: 36rpx;
margin-top: 12rpx; margin-top: 12rpx;
text-align: center; text-align: center;
@@ -348,9 +338,9 @@ $divider: #eeeeee;
} }
.form-label { .form-label {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-label; color: $uv-main-color;
font-weight: 400; font-weight: 400;
line-height: 40rpx; line-height: 40rpx;
flex-shrink: 0; flex-shrink: 0;
@@ -364,42 +354,42 @@ $divider: #eeeeee;
.form-input { .form-input {
flex: 1; flex: 1;
height: 88rpx; height: 88rpx;
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $text-body; color: $uv-content-color;
line-height: 40rpx; line-height: 40rpx;
text-align: right; text-align: right;
} }
.placeholder { .placeholder {
font-family: $font; font-family: $font-family-body;
color: $text-weak; color: $uv-placeholder-color;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
} }
.divider { .divider {
height: 1rpx; height: 1rpx;
background: $divider; background: $uv-border-color;
margin: 0 32rpx; margin: 0 32rpx;
} }
/* ===== Form Value + Chevron ===== */ /* ===== Form Value + Chevron ===== */
.form-value { .form-value {
flex: 1; flex: 1;
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $text-body; color: $uv-content-color;
text-align: right; text-align: right;
} }
.chevron-right { .chevron-right {
width: 12rpx; width: 12rpx;
height: 12rpx; height: 12rpx;
border-top: 2rpx solid $text-weak; border-top: 2rpx solid $uv-placeholder-color;
border-right: 2rpx solid $text-weak; border-right: 2rpx solid $uv-placeholder-color;
transform: rotate(45deg); transform: rotate(45deg);
flex-shrink: 0; flex-shrink: 0;
margin-left: 12rpx; margin-left: 12rpx;
@@ -442,9 +432,9 @@ $divider: #eeeeee;
} }
.upload-text { .upload-text {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $accent; color: $uv-primary;
font-weight: 400; font-weight: 400;
} }
@@ -514,8 +504,8 @@ $divider: #eeeeee;
} }
.checkbox--checked { .checkbox--checked {
background: $accent; background: $uv-primary;
border-color: $accent; border-color: $uv-primary;
} }
.checkbox__check { .checkbox__check {
@@ -535,17 +525,17 @@ $divider: #eeeeee;
} }
.agreement__label { .agreement__label {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: $text-hint; color: $uv-tips-color;
} }
.agreement__link { .agreement__link {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: $accent; color: $uv-primary;
&:active { &:active {
opacity: 0.7; opacity: 0.7;
@@ -590,7 +580,7 @@ $divider: #eeeeee;
} }
.btn-confirm__text { .btn-confirm__text {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
@@ -598,7 +588,7 @@ $divider: #eeeeee;
} }
.btn-confirm--disabled .btn-confirm__text { .btn-confirm--disabled .btn-confirm__text {
color: $text-weak; color: $uv-placeholder-color;
} }
.btn-cancel { .btn-cancel {
@@ -625,10 +615,10 @@ $divider: #eeeeee;
} }
.btn-cancel__text { .btn-cancel__text {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 400; font-weight: 400;
color: $text-hint; color: $uv-tips-color;
} }
/* ===== Popup Sheet ===== */ /* ===== Popup Sheet ===== */
@@ -638,7 +628,7 @@ $divider: #eeeeee;
max-height: 70vh; max-height: 70vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: $font; font-family: $font-family-body;
} }
.popup-header { .popup-header {
@@ -646,14 +636,14 @@ $divider: #eeeeee;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 32rpx; padding: 32rpx;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
} }
.popup-title { .popup-title {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
line-height: 48rpx; line-height: 48rpx;
} }
@@ -682,7 +672,7 @@ $divider: #eeeeee;
left: 50%; left: 50%;
width: 20rpx; width: 20rpx;
height: 3rpx; height: 3rpx;
background: $text-hint; background: $uv-tips-color;
border-radius: 2rpx; border-radius: 2rpx;
} }
@@ -701,10 +691,10 @@ $divider: #eeeeee;
} }
.popup-content { .popup-content {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $text-body; color: $uv-content-color;
line-height: 1.8; line-height: 1.8;
} }
@@ -731,15 +721,15 @@ $divider: #eeeeee;
} }
.id-type-item__text { .id-type-item__text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $text-body; color: $uv-content-color;
line-height: 40rpx; line-height: 40rpx;
} }
.id-type-item--active .id-type-item__text { .id-type-item--active .id-type-item__text {
color: $accent; color: $uv-primary;
font-weight: 400; font-weight: 400;
} }
src/pages/card-buy/card-buy.vue
+9 -14
View File
@@ -82,18 +82,13 @@ async function handleBuy() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-hint: #666666;
$text-weak: #999999;
$bar-height: 120rpx; $bar-height: 120rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #ffffff; background: #ffffff;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom)); padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
font-family: $font; font-family: $font-family-body;
} }
/* ===== 图片区域 ===== */ /* ===== 图片区域 ===== */
@@ -129,9 +124,9 @@ $bar-height: 120rpx;
} }
.price-label { .price-label {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
} }
.price-row { .price-row {
@@ -140,14 +135,14 @@ $bar-height: 120rpx;
} }
.price-symbol { .price-symbol {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
} }
.price-value { .price-value {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
@@ -155,9 +150,9 @@ $bar-height: 120rpx;
} }
.price-original { .price-original {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $text-weak; color: $uv-placeholder-color;
text-decoration: line-through; text-decoration: line-through;
margin-left: 12rpx; margin-left: 12rpx;
} }
@@ -168,7 +163,7 @@ $bar-height: 120rpx;
height: 80rpx; height: 80rpx;
padding: 0 56rpx; padding: 0 56rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: $primary; background: $uv-primary;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -190,7 +185,7 @@ $bar-height: 120rpx;
} }
.btn-buy__text { .btn-buy__text {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
src/pages/faq/faq.vue
+12 -19
View File
@@ -240,19 +240,12 @@ function getBindList(): FaqItem[] {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$divider: #eeeeee;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: #f7f8fa;
padding: 48rpx 24rpx 0; padding: 48rpx 24rpx 0;
font-family: $font; font-family: $font-family-body;
} }
/* ===== 分类区块 ===== */ /* ===== 分类区块 ===== */
@@ -261,17 +254,17 @@ $divider: #eeeeee;
} }
.category-title { .category-title {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
display: block; display: block;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.category-divider { .category-divider {
height: 1rpx; height: 1rpx;
background: $divider; background: $uv-border-color;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
@@ -306,18 +299,18 @@ $divider: #eeeeee;
flex-shrink: 0; flex-shrink: 0;
margin-right: 16rpx; margin-right: 16rpx;
margin-top: 4rpx; margin-top: 4rpx;
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
color: $primary; color: $uv-primary;
} }
.faq-question { .faq-question {
flex: 1; flex: 1;
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: $text-label; color: $uv-main-color;
line-height: 1.5; line-height: 1.5;
} }
@@ -351,18 +344,18 @@ $divider: #eeeeee;
} }
.faq-text { .faq-text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $text-body; color: $uv-content-color;
line-height: 1.7; line-height: 1.7;
} }
.faq-highlight { .faq-highlight {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: $primary; color: $uv-primary;
line-height: 1.7; line-height: 1.7;
} }
src/pages/order/order-detail.vue
+33 -42
View File
@@ -222,15 +222,6 @@ function goHome() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
$card-radius: 24rpx;
$bar-height: 120rpx; $bar-height: 120rpx;
.page { .page {
@@ -238,13 +229,13 @@ $bar-height: 120rpx;
background: #f7f8fa; background: #f7f8fa;
padding: 24rpx; padding: 24rpx;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx); padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx);
font-family: $font; font-family: $font-family-body;
} }
/* ===== 模块1：状态卡片 ===== */ /* ===== 模块1：状态卡片 ===== */
.status-card { .status-card {
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 48rpx 32rpx; padding: 48rpx 32rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -345,24 +336,24 @@ $bar-height: 120rpx;
} }
.status-title { .status-title {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.status-desc { .status-desc {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
text-align: center; text-align: center;
} }
/* ===== 模块2：商品信息卡片 ===== */ /* ===== 模块2：商品信息卡片 ===== */
.info-card { .info-card {
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
margin-top: 24rpx; margin-top: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
@@ -370,10 +361,10 @@ $bar-height: 120rpx;
.product-name { .product-name {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
@@ -390,14 +381,14 @@ $bar-height: 120rpx;
} }
.price-symbol { .price-symbol {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
} }
.price-value { .price-value {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
@@ -405,9 +396,9 @@ $bar-height: 120rpx;
} }
.product-desc { .product-desc {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -417,7 +408,7 @@ $bar-height: 120rpx;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20rpx 0; padding: 20rpx 0;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
&--last { &--last {
border-bottom: none; border-bottom: none;
@@ -425,16 +416,16 @@ $bar-height: 120rpx;
} }
.detail-label { .detail-label {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-label; color: $uv-main-color;
flex-shrink: 0; flex-shrink: 0;
} }
.detail-value { .detail-value {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-body; color: $uv-content-color;
text-align: right; text-align: right;
&--code { &--code {
@@ -465,26 +456,26 @@ $bar-height: 120rpx;
} }
.copy-btn__text { .copy-btn__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $primary; color: $uv-primary;
font-weight: 500; font-weight: 500;
} }
/* ===== 模块4：使用提示 ===== */ /* ===== 模块4：使用提示 ===== */
.tips-card { .tips-card {
background: rgba(60, 156, 255, 0.04); background: rgba(60, 156, 255, 0.04);
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
.tips-title { .tips-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
@@ -502,16 +493,16 @@ $bar-height: 120rpx;
width: 8rpx; width: 8rpx;
height: 8rpx; height: 8rpx;
border-radius: 50%; border-radius: 50%;
background: $primary; background: $uv-primary;
flex-shrink: 0; flex-shrink: 0;
margin-top: 14rpx; margin-top: 14rpx;
margin-right: 12rpx; margin-right: 12rpx;
} }
.tips-text { .tips-text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-hint; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -522,9 +513,9 @@ $bar-height: 120rpx;
} }
.tips-link__text { .tips-link__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $primary; color: $uv-primary;
font-weight: 500; font-weight: 500;
} }
@@ -567,7 +558,7 @@ $bar-height: 120rpx;
transition: all 0.15s ease; transition: all 0.15s ease;
&--primary { &--primary {
background: $primary; background: $uv-primary;
&:active { &:active {
transform: scale(0.97); transform: scale(0.97);
@@ -575,7 +566,7 @@ $bar-height: 120rpx;
} }
&--outline { &--outline {
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
&:active { &:active {
transform: scale(0.97); transform: scale(0.97);
@@ -585,16 +576,16 @@ $bar-height: 120rpx;
} }
.btn-action__text { .btn-action__text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
} }
.btn-action__text--outline { .btn-action__text--outline {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
</style> </style>
src/pages/order/order-list.vue
+34 -43
View File
@@ -229,20 +229,11 @@ function goBuy() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
$card-radius: 24rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: #f7f8fa;
font-family: $font; font-family: $font-family-body;
} }
/* ===== Tab Bar ===== */ /* ===== Tab Bar ===== */
@@ -266,14 +257,14 @@ $card-radius: 24rpx;
} }
.tab-text { .tab-text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
.tab-item--active .tab-text { .tab-item--active .tab-text {
color: $primary; color: $uv-primary;
font-weight: 700; font-weight: 700;
} }
@@ -281,7 +272,7 @@ $card-radius: 24rpx;
width: 40rpx; width: 40rpx;
height: 4rpx; height: 4rpx;
border-radius: 2rpx; border-radius: 2rpx;
background: $primary; background: $uv-primary;
margin-top: 8rpx; margin-top: 8rpx;
} }
@@ -297,7 +288,7 @@ $card-radius: 24rpx;
/* ===== Order Card ===== */ /* ===== Order Card ===== */
.order-card { .order-card {
background: #ffffff; background: #ffffff;
border-radius: $card-radius; 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: 32rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
@@ -315,9 +306,9 @@ $card-radius: 24rpx;
} }
.order-no { .order-no {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $text-weak; color: $uv-placeholder-color;
} }
/* Status Tags */ /* Status Tags */
@@ -343,7 +334,7 @@ $card-radius: 24rpx;
} }
.status-tag__text { .status-tag__text {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
} }
@@ -365,10 +356,10 @@ $card-radius: 24rpx;
} }
.product-name { .product-name {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: $text-main; color: $uv-main-color;
} }
.price-current { .price-current {
@@ -377,14 +368,14 @@ $card-radius: 24rpx;
} }
.price-symbol { .price-symbol {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
} }
.price-value { .price-value {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: #e53935; color: #e53935;
@@ -396,20 +387,20 @@ $card-radius: 24rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.info-time { .info-time {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-hint; color: $uv-tips-color;
} }
.info-pay { .info-pay {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-hint; color: $uv-tips-color;
} }
/* Action Buttons */ /* Action Buttons */
@@ -423,7 +414,7 @@ $card-radius: 24rpx;
height: 64rpx; height: 64rpx;
padding: 0 36rpx; padding: 0 36rpx;
border-radius: 32rpx; border-radius: 32rpx;
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -436,17 +427,17 @@ $card-radius: 24rpx;
} }
.btn-outline__text { .btn-outline__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
.btn-primary { .btn-primary {
height: 64rpx; height: 64rpx;
padding: 0 36rpx; padding: 0 36rpx;
border-radius: 32rpx; border-radius: 32rpx;
background: $primary; background: $uv-primary;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -458,7 +449,7 @@ $card-radius: 24rpx;
} }
.btn-primary__text { .btn-primary__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
@@ -504,9 +495,9 @@ $card-radius: 24rpx;
} }
.empty-text { .empty-text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-weak; color: $uv-placeholder-color;
text-align: center; text-align: center;
line-height: 1.6; line-height: 1.6;
margin-bottom: 32rpx; margin-bottom: 32rpx;
@@ -516,7 +507,7 @@ $card-radius: 24rpx;
height: 72rpx; height: 72rpx;
padding: 0 56rpx; padding: 0 56rpx;
border-radius: 36rpx; border-radius: 36rpx;
background: $primary; background: $uv-primary;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -527,7 +518,7 @@ $card-radius: 24rpx;
} }
.empty-btn__text { .empty-btn__text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
@@ -540,25 +531,25 @@ $card-radius: 24rpx;
} }
.load-more__text { .load-more__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-weak; color: $uv-placeholder-color;
} }
/* ===== Refund Modal ===== */ /* ===== Refund Modal ===== */
.refund-modal { .refund-modal {
width: 600rpx; width: 600rpx;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 40rpx; padding: 40rpx;
} }
.refund-title { .refund-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
text-align: center; text-align: center;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
@@ -569,9 +560,9 @@ $card-radius: 24rpx;
.refund-text { .refund-text {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-body; color: $uv-content-color;
line-height: 1.7; line-height: 1.7;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
src/pages/qrcode/index.vue
+7 -9
View File
@@ -246,10 +246,8 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif;
$primary: #3c9cff;
.page { min-height: 100vh; background: #f7f8fa; font-family: $font; } .page { min-height: 100vh; background: #f7f8fa; font-family: $font-family-body; }
.scroll-content { height: 100vh; } .scroll-content { height: 100vh; }
/* === 空状态 === */ /* === 空状态 === */
@@ -259,7 +257,7 @@ $primary: #3c9cff;
} }
.empty-icon-card { .empty-icon-card {
width: 120rpx; height: 80rpx; border-radius: 24rpx; width: 120rpx; height: 80rpx; border-radius: 24rpx;
background: linear-gradient(135deg, $primary, #398ade); background: linear-gradient(135deg, $uv-primary, #398ade);
display: flex; flex-direction: column; justify-content: center; display: flex; flex-direction: column; justify-content: center;
padding: 16rpx; gap: 8rpx; margin-bottom: 32rpx; padding: 16rpx; gap: 8rpx; margin-bottom: 32rpx;
} }
@@ -268,7 +266,7 @@ $primary: #3c9cff;
.empty-text { font-size: 32rpx; font-weight: 700; color: #111111; margin-bottom: 12rpx; } .empty-text { font-size: 32rpx; font-weight: 700; color: #111111; margin-bottom: 12rpx; }
.empty-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; } .empty-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; }
.empty-btn { .empty-btn {
background: $primary; border-radius: 44rpx; padding: 20rpx 80rpx; background: $uv-primary; border-radius: 44rpx; padding: 20rpx 80rpx;
min-height: 88rpx; display: flex; align-items: center; justify-content: center; min-height: 88rpx; display: flex; align-items: center; justify-content: center;
margin-bottom: 20rpx; transition: opacity 150ms; margin-bottom: 20rpx; transition: opacity 150ms;
} }
@@ -331,12 +329,12 @@ $primary: #3c9cff;
} }
.zoom-icon { .zoom-icon {
width: 24rpx; height: 24rpx; width: 24rpx; height: 24rpx;
border: 3rpx solid $primary; border-radius: 50%; border: 3rpx solid $uv-primary; border-radius: 50%;
position: relative; position: relative;
} }
.zoom-icon::after { .zoom-icon::after {
content: ''; width: 8rpx; height: 3rpx; content: ''; width: 8rpx; height: 3rpx;
background: $primary; position: absolute; background: $uv-primary; position: absolute;
bottom: -4rpx; right: -4rpx; bottom: -4rpx; right: -4rpx;
transform: rotate(45deg); border-radius: 2rpx; transform: rotate(45deg); border-radius: 2rpx;
} }
@@ -352,8 +350,8 @@ $primary: #3c9cff;
.detail-value-wrap { display: flex; align-items: center; gap: 12rpx; } .detail-value-wrap { display: flex; align-items: center; gap: 12rpx; }
.detail-value { font-size: 26rpx; color: #333333; } .detail-value { font-size: 26rpx; color: #333333; }
.copy-btn { .copy-btn {
font-size: 22rpx; color: $primary; font-size: 22rpx; color: $uv-primary;
padding: 4rpx 16rpx; border: 1rpx solid $primary; padding: 4rpx 16rpx; border: 1rpx solid $uv-primary;
border-radius: 8rpx; transition: opacity 150ms; border-radius: 8rpx; transition: opacity 150ms;
} }
.copy-btn:active { opacity: 0.6; } .copy-btn:active { opacity: 0.6; }
src/pages/reserve/reserve-index.vue
+58 -67
View File
@@ -226,29 +226,20 @@ function goFaq() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
$card-radius: 24rpx;
$bar-height: 120rpx; $bar-height: 120rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: #f7f8fa;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom)); padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
font-family: $font; font-family: $font-family-body;
} }
/* ===== 景区信息卡片 ===== */ /* ===== 景区信息卡片 ===== */
.scenic-card { .scenic-card {
margin: 24rpx 24rpx 0; margin: 24rpx 24rpx 0;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
overflow: hidden; overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
} }
@@ -264,10 +255,10 @@ $bar-height: 120rpx;
.scenic-name { .scenic-name {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
@@ -284,7 +275,7 @@ $bar-height: 120rpx;
flex-shrink: 0; flex-shrink: 0;
&--pin { &--pin {
border: 3rpx solid $text-hint; border: 3rpx solid $uv-tips-color;
border-radius: 50% 50% 50% 0; border-radius: 50% 50% 50% 0;
transform: rotate(-45deg); transform: rotate(-45deg);
position: relative; position: relative;
@@ -293,7 +284,7 @@ $bar-height: 120rpx;
width: 10rpx; width: 10rpx;
height: 10rpx; height: 10rpx;
border-radius: 50%; border-radius: 50%;
border: 2rpx solid $text-hint; border: 2rpx solid $uv-tips-color;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -302,14 +293,14 @@ $bar-height: 120rpx;
} }
&--clock { &--clock {
border: 3rpx solid $text-hint; border: 3rpx solid $uv-tips-color;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
width: 2rpx; width: 2rpx;
height: 10rpx; height: 10rpx;
background: $text-hint; background: $uv-tips-color;
position: absolute; position: absolute;
top: 4rpx; top: 4rpx;
left: 50%; left: 50%;
@@ -319,7 +310,7 @@ $bar-height: 120rpx;
content: ''; content: '';
width: 8rpx; width: 8rpx;
height: 2rpx; height: 2rpx;
background: $text-hint; background: $uv-tips-color;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -328,16 +319,16 @@ $bar-height: 120rpx;
} }
.scenic-text { .scenic-text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-hint; color: $uv-tips-color;
} }
.scenic-tip { .scenic-tip {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $text-weak; color: $uv-placeholder-color;
margin-top: 16rpx; margin-top: 16rpx;
line-height: 1.6; line-height: 1.6;
} }
@@ -346,17 +337,17 @@ $bar-height: 120rpx;
.date-card { .date-card {
margin: 24rpx 32rpx 0; margin: 24rpx 32rpx 0;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
} }
.section-title { .section-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $text-label; color: $uv-main-color;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
@@ -376,19 +367,19 @@ $bar-height: 120rpx;
align-items: center; align-items: center;
padding: 16rpx 12rpx; padding: 16rpx 12rpx;
border-radius: 16rpx; border-radius: 16rpx;
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
transition: all 0.15s ease; transition: all 0.15s ease;
&--active { &--active {
background: $primary; background: $uv-primary;
border-color: $primary; border-color: $uv-primary;
} }
} }
.date-week { .date-week {
font-family: $font; font-family: $font-family-body;
font-size: 18rpx; font-size: 18rpx;
color: $text-hint; color: $uv-tips-color;
margin-bottom: 4rpx; margin-bottom: 4rpx;
} }
@@ -397,10 +388,10 @@ $bar-height: 120rpx;
} }
.date-day { .date-day {
font-family: $font; font-family: $font-family-body;
font-size: 20rpx; font-size: 20rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 4rpx; margin-bottom: 4rpx;
} }
@@ -409,9 +400,9 @@ $bar-height: 120rpx;
} }
.date-stock { .date-stock {
font-family: $font; font-family: $font-family-body;
font-size: 18rpx; font-size: 18rpx;
color: $text-weak; color: $uv-placeholder-color;
&--empty { &--empty {
color: #f53f3f; color: #f53f3f;
@@ -427,7 +418,7 @@ $bar-height: 120rpx;
.date-week, .date-week,
.date-day { .date-day {
color: $text-weak; color: $uv-placeholder-color;
} }
} }
@@ -435,15 +426,15 @@ $bar-height: 120rpx;
.session-section { .session-section {
margin-top: 24rpx; margin-top: 24rpx;
padding-top: 24rpx; padding-top: 24rpx;
border-top: 1rpx solid $divider; border-top: 1rpx solid $uv-border-color;
} }
.session-title { .session-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: $text-label; color: $uv-main-color;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
@@ -459,12 +450,12 @@ $bar-height: 120rpx;
align-items: center; align-items: center;
padding: 16rpx 28rpx; padding: 16rpx 28rpx;
border-radius: 12rpx; border-radius: 12rpx;
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
transition: all 0.15s ease; transition: all 0.15s ease;
&--active { &--active {
background: rgba(60, 156, 255, 0.08); background: rgba(60, 156, 255, 0.08);
border-color: $primary; border-color: $uv-primary;
} }
&--disabled { &--disabled {
@@ -473,21 +464,21 @@ $bar-height: 120rpx;
} }
.session-time { .session-time {
font-family: $font; font-family: $font-family-body;
font-size: 20rpx; font-size: 20rpx;
font-weight: 500; font-weight: 500;
color: $text-main; color: $uv-main-color;
margin-bottom: 4rpx; margin-bottom: 4rpx;
} }
.session-item--active .session-time { .session-item--active .session-time {
color: $primary; color: $uv-primary;
} }
.session-stock { .session-stock {
font-family: $font; font-family: $font-family-body;
font-size: 18rpx; font-size: 18rpx;
color: $text-weak; color: $uv-placeholder-color;
&--empty { &--empty {
color: #f53f3f; color: #f53f3f;
@@ -497,20 +488,20 @@ $bar-height: 120rpx;
.no-session-tip { .no-session-tip {
margin-top: 24rpx; margin-top: 24rpx;
padding-top: 24rpx; padding-top: 24rpx;
border-top: 1rpx solid $divider; border-top: 1rpx solid $uv-border-color;
} }
.no-session-tip__text { .no-session-tip__text {
font-family: $font; font-family: $font-family-body;
font-size: 18rpx; font-size: 18rpx;
color: $text-weak; color: $uv-placeholder-color;
} }
.date-tip { .date-tip {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 18rpx; font-size: 18rpx;
color: $text-weak; color: $uv-placeholder-color;
margin-top: 16rpx; margin-top: 16rpx;
} }
@@ -518,7 +509,7 @@ $bar-height: 120rpx;
.user-card { .user-card {
margin: 24rpx 32rpx 0; margin: 24rpx 32rpx 0;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
} }
@@ -531,20 +522,20 @@ $bar-height: 120rpx;
} }
.user-label { .user-label {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-label; color: $uv-main-color;
} }
.user-value { .user-value {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-body; color: $uv-content-color;
} }
.user-warn { .user-warn {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: #e53935; color: #e53935;
margin-top: 12rpx; margin-top: 12rpx;
@@ -554,16 +545,16 @@ $bar-height: 120rpx;
.notice-card { .notice-card {
margin: 24rpx 32rpx 0; margin: 24rpx 32rpx 0;
background: #eef4ff; background: #eef4ff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
} }
.notice-title { .notice-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 30rpx; font-size: 30rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
@@ -581,16 +572,16 @@ $bar-height: 120rpx;
width: 8rpx; width: 8rpx;
height: 8rpx; height: 8rpx;
border-radius: 50%; border-radius: 50%;
background: $primary; background: $uv-primary;
flex-shrink: 0; flex-shrink: 0;
margin-top: 14rpx; margin-top: 14rpx;
margin-right: 12rpx; margin-right: 12rpx;
} }
.notice-text { .notice-text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -599,9 +590,9 @@ $bar-height: 120rpx;
} }
.notice-link__text { .notice-link__text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $primary; color: $uv-primary;
font-weight: 500; font-weight: 500;
} }
@@ -632,7 +623,7 @@ $bar-height: 120rpx;
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: $primary; background: $uv-primary;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -651,13 +642,13 @@ $bar-height: 120rpx;
} }
.btn-submit__text { .btn-submit__text {
font-family: $font; font-family: $font-family-body;
font-size: 30rpx; font-size: 30rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
} }
.btn-submit--disabled .btn-submit__text { .btn-submit--disabled .btn-submit__text {
color: $text-weak; color: $uv-placeholder-color;
} }
</style> </style>
src/pages/reserve/reserve-list.vue
+44 -53
View File
@@ -302,20 +302,11 @@ function previewPhoto(url: string) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
$card-radius: 24rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: #f7f8fa;
font-family: $font; font-family: $font-family-body;
} }
/* ===== Tab ===== */ /* ===== Tab ===== */
@@ -340,14 +331,14 @@ $card-radius: 24rpx;
} }
.tab-text { .tab-text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
.tab-item--active .tab-text { .tab-item--active .tab-text {
color: $primary; color: $uv-primary;
font-weight: 700; font-weight: 700;
} }
@@ -355,7 +346,7 @@ $card-radius: 24rpx;
width: 32rpx; width: 32rpx;
height: 4rpx; height: 4rpx;
border-radius: 2rpx; border-radius: 2rpx;
background: $primary; background: $uv-primary;
margin-top: 6rpx; margin-top: 6rpx;
} }
@@ -371,7 +362,7 @@ $card-radius: 24rpx;
/* ===== Record Card ===== */ /* ===== Record Card ===== */
.record-card { .record-card {
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 28rpx; padding: 28rpx;
margin-top: 20rpx; margin-top: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
@@ -385,10 +376,10 @@ $card-radius: 24rpx;
} }
.record-name { .record-name {
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: $text-main; color: $uv-main-color;
} }
.status-tag { .status-tag {
@@ -402,12 +393,12 @@ $card-radius: 24rpx;
} }
.status-tag__text { .status-tag__text {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
} }
.status-tag--pending .status-tag__text { color: $primary; } .status-tag--pending .status-tag__text { color: $uv-primary; }
.status-tag--used .status-tag__text { color: #00b42a; } .status-tag--used .status-tag__text { color: #00b42a; }
.status-tag--cancelled .status-tag__text { color: #86909c; } .status-tag--cancelled .status-tag__text { color: #86909c; }
.status-tag--auto_used .status-tag__text { color: #ff9500; } .status-tag--auto_used .status-tag__text { color: #ff9500; }
@@ -420,30 +411,30 @@ $card-radius: 24rpx;
} }
.record-card-type { .record-card-type {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $primary; color: $uv-primary;
background: rgba(60, 156, 255, 0.06); background: rgba(60, 156, 255, 0.06);
padding: 2rpx 12rpx; padding: 2rpx 12rpx;
border-radius: 6rpx; border-radius: 6rpx;
} }
.record-card-no { .record-card-no {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
color: $text-weak; color: $uv-placeholder-color;
} }
.record-info { .record-info {
padding-bottom: 12rpx; padding-bottom: 12rpx;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.record-date { .record-date {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $text-hint; color: $uv-tips-color;
} }
.record-actions { .record-actions {
@@ -461,16 +452,16 @@ $card-radius: 24rpx;
justify-content: center; justify-content: center;
&--outline { &--outline {
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
&:active { transform: scale(0.97); background: #f5f5f5; } &:active { transform: scale(0.97); background: #f5f5f5; }
} }
} }
.btn-sm__text--outline { .btn-sm__text--outline {
font-family: $font; font-family: $font-family-body;
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
/* ===== Empty ===== */ /* ===== Empty ===== */
@@ -485,27 +476,27 @@ $card-radius: 24rpx;
.empty-cal { width: 80rpx; height: 72rpx; border: 4rpx solid #cccccc; border-radius: 8rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .empty-cal { width: 80rpx; height: 72rpx; border: 4rpx solid #cccccc; border-radius: 8rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.empty-cal__line { width: 80rpx; height: 4rpx; background: #cccccc; position: absolute; bottom: 48rpx; left: 50%; transform: translateX(-50%); } .empty-cal__line { width: 80rpx; height: 4rpx; background: #cccccc; position: absolute; bottom: 48rpx; left: 50%; transform: translateX(-50%); }
.empty-text { font-family: $font; font-size: 26rpx; color: $text-weak; margin-bottom: 32rpx; } .empty-text { font-family: $font-family-body; font-size: 26rpx; color: $uv-placeholder-color; margin-bottom: 32rpx; }
.empty-btn { .empty-btn {
height: 72rpx; padding: 0 56rpx; border-radius: 36rpx; background: $primary; height: 72rpx; padding: 0 56rpx; border-radius: 36rpx; background: $uv-primary;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
&:active { transform: scale(0.97); } &:active { transform: scale(0.97); }
} }
.empty-btn__text { font-family: $font; font-size: 26rpx; font-weight: 700; color: #ffffff; } .empty-btn__text { font-family: $font-family-body; font-size: 26rpx; font-weight: 700; color: #ffffff; }
/* ===== Load More ===== */ /* ===== Load More ===== */
.load-more { text-align: center; padding: 16rpx 0 120rpx; } .load-more { text-align: center; padding: 16rpx 0 120rpx; }
.load-more__text { font-family: $font; font-size: 22rpx; color: $text-weak; } .load-more__text { font-family: $font-family-body; font-size: 22rpx; color: $uv-placeholder-color; }
/* ===== Code Modal ===== */ /* ===== Code Modal ===== */
.code-modal { .code-modal {
width: 560rpx; background: #ffffff; border-radius: $card-radius; padding: 40rpx; width: 560rpx; background: #ffffff; border-radius: $radius-lg; padding: 40rpx;
display: flex; flex-direction: column; align-items: center; display: flex; flex-direction: column; align-items: center;
} }
.code-modal__title { font-family: $font; font-size: 32rpx; font-weight: 700; color: $text-main; margin-bottom: 32rpx; } .code-modal__title { font-family: $font-family-body; font-size: 32rpx; font-weight: 700; color: $uv-main-color; margin-bottom: 32rpx; }
.qr-box { .qr-box {
width: 360rpx; height: 360rpx; background: #F8FAFC; width: 360rpx; height: 360rpx; background: #F8FAFC;
@@ -515,22 +506,22 @@ $card-radius: 24rpx;
.qr-img { width: 300rpx; height: 300rpx; } .qr-img { width: 300rpx; height: 300rpx; }
.code-modal__desc { font-family: $font; font-size: 26rpx; color: $text-hint; margin-top: 24rpx; } .code-modal__desc { font-family: $font-family-body; font-size: 26rpx; color: $uv-tips-color; margin-top: 24rpx; }
/* ===== Cancel Modal ===== */ /* ===== Cancel Modal ===== */
.cancel-modal { .cancel-modal {
width: 600rpx; background: #ffffff; border-radius: $card-radius; padding: 40rpx; width: 600rpx; background: #ffffff; border-radius: $radius-lg; padding: 40rpx;
} }
.cancel-modal__title { .cancel-modal__title {
display: block; font-family: $font; font-size: 32rpx; font-weight: 700; display: block; font-family: $font-family-body; font-size: 32rpx; font-weight: 700;
color: $text-main; text-align: center; margin-bottom: 24rpx; color: $uv-main-color; text-align: center; margin-bottom: 24rpx;
} }
.cancel-modal__body { margin-bottom: 32rpx; } .cancel-modal__body { margin-bottom: 32rpx; }
.cancel-modal__text { .cancel-modal__text {
font-family: $font; font-size: 26rpx; color: $text-body; line-height: 1.7; font-family: $font-family-body; font-size: 26rpx; color: $uv-content-color; line-height: 1.7;
} }
.cancel-modal__actions { display: flex; gap: 24rpx; } .cancel-modal__actions { display: flex; gap: 24rpx; }
@@ -540,30 +531,30 @@ $card-radius: 24rpx;
align-items: center; justify-content: center; transition: all 0.15s ease; align-items: center; justify-content: center; transition: all 0.15s ease;
&--outline { &--outline {
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
&:active { transform: scale(0.97); background: #f5f5f5; } &:active { transform: scale(0.97); background: #f5f5f5; }
} }
&--primary { &--primary {
background: $primary; background: $uv-primary;
&:active { transform: scale(0.97); } &:active { transform: scale(0.97); }
} }
} }
.btn-modal__text--outline { font-family: $font; font-size: 26rpx; font-weight: 500; color: $text-hint; } .btn-modal__text--outline { font-family: $font-family-body; font-size: 26rpx; font-weight: 500; color: $uv-tips-color; }
.btn-modal__text--primary { font-family: $font; font-size: 26rpx; font-weight: 700; color: #ffffff; } .btn-modal__text--primary { font-family: $font-family-body; font-size: 26rpx; font-weight: 700; color: #ffffff; }
/* ===== Detail Sheet ===== */ /* ===== Detail Sheet ===== */
.detail-sheet { .detail-sheet {
background: #ffffff; border-radius: $card-radius $card-radius 0 0; max-height: 75vh; background: #ffffff; border-radius: $radius-lg $radius-lg 0 0; max-height: 75vh;
display: flex; flex-direction: column; display: flex; flex-direction: column;
} }
.sheet-header { .sheet-header {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
padding: 32rpx; border-bottom: 1rpx solid $divider; flex-shrink: 0; padding: 32rpx; border-bottom: 1rpx solid $uv-border-color; flex-shrink: 0;
} }
.sheet-title { font-family: $font; font-size: 30rpx; font-weight: 700; color: $text-main; } .sheet-title { font-family: $font-family-body; font-size: 30rpx; font-weight: 700; color: $uv-main-color; }
.sheet-close { .sheet-close {
width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center;
@@ -574,7 +565,7 @@ $card-radius: 24rpx;
width: 20rpx; height: 20rpx; position: relative; width: 20rpx; height: 20rpx; position: relative;
&::before, &::after { &::before, &::after {
content: ''; position: absolute; top: 50%; left: 50%; content: ''; position: absolute; top: 50%; left: 50%;
width: 20rpx; height: 3rpx; background: $text-hint; border-radius: 2rpx; width: 20rpx; height: 3rpx; background: $uv-tips-color; border-radius: 2rpx;
} }
&::before { transform: translate(-50%, -50%) rotate(45deg); } &::before { transform: translate(-50%, -50%) rotate(45deg); }
&::after { transform: translate(-50%, -50%) rotate(-45deg); } &::after { transform: translate(-50%, -50%) rotate(-45deg); }
@@ -584,18 +575,18 @@ $card-radius: 24rpx;
.sheet-row { .sheet-row {
display: flex; justify-content: space-between; align-items: center; display: flex; justify-content: space-between; align-items: center;
padding: 14rpx 0; border-bottom: 1rpx solid $divider; padding: 14rpx 0; border-bottom: 1rpx solid $uv-border-color;
} }
.sheet-label { font-family: $font; font-size: 26rpx; color: $text-label; } .sheet-label { font-family: $font-family-body; font-size: 26rpx; color: $uv-main-color; }
.sheet-value { font-family: $font; font-size: 26rpx; color: $text-body; text-align: right; } .sheet-value { font-family: $font-family-body; font-size: 26rpx; color: $uv-content-color; text-align: right; }
.sheet-photo { .sheet-photo {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 14rpx 0; padding: 14rpx 0;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
} }
.sheet-photo-avatar { .sheet-photo-avatar {
@@ -608,5 +599,5 @@ $card-radius: 24rpx;
margin-top: 24rpx; padding: 20rpx; background: #fff2f2; border-radius: 12rpx; margin-top: 24rpx; padding: 20rpx; background: #fff2f2; border-radius: 12rpx;
} }
.sheet-tip__text { font-family: $font; font-size: 24rpx; color: #f53f3f; line-height: 1.5; } .sheet-tip__text { font-family: $font-family-body; font-size: 24rpx; color: #f53f3f; line-height: 1.5; }
</style> </style>
src/pages/reserve/reserve-success.vue
+31 -40
View File
@@ -119,15 +119,6 @@ function goHome() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$primary: #3c9cff;
$text-main: #111111;
$text-label: #222222;
$text-body: #333333;
$text-hint: #666666;
$text-weak: #999999;
$divider: #eeeeee;
$card-radius: 24rpx;
.page { .page {
min-height: 100vh; min-height: 100vh;
@@ -135,7 +126,7 @@ $card-radius: 24rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
font-family: $font; font-family: $font-family-body;
} }
/* ===== 成功图标 ===== */ /* ===== 成功图标 ===== */
@@ -162,8 +153,8 @@ $card-radius: 24rpx;
.success-check { .success-check {
width: 48rpx; width: 48rpx;
height: 24rpx; height: 24rpx;
border-left: 6rpx solid $primary; border-left: 6rpx solid $uv-primary;
border-bottom: 6rpx solid $primary; border-bottom: 6rpx solid $uv-primary;
transform: rotate(-45deg); transform: rotate(-45deg);
position: absolute; position: absolute;
top: 40rpx; top: 40rpx;
@@ -171,17 +162,17 @@ $card-radius: 24rpx;
} }
.success-title { .success-title {
font-family: $font; font-family: $font-family-body;
font-size: 38rpx; font-size: 38rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-top: 32rpx; margin-top: 32rpx;
} }
.success-desc { .success-desc {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
margin-top: 16rpx; margin-top: 16rpx;
} }
@@ -189,7 +180,7 @@ $card-radius: 24rpx;
.info-card { .info-card {
margin: 48rpx 32rpx 0; margin: 48rpx 32rpx 0;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
} }
@@ -199,7 +190,7 @@ $card-radius: 24rpx;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16rpx 0; padding: 16rpx 0;
border-bottom: 1rpx solid $divider; border-bottom: 1rpx solid $uv-border-color;
&--last { &--last {
border-bottom: none; border-bottom: none;
@@ -207,15 +198,15 @@ $card-radius: 24rpx;
} }
.info-label { .info-label {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-label; color: $uv-main-color;
} }
.info-value { .info-value {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-body; color: $uv-content-color;
text-align: right; text-align: right;
} }
@@ -228,9 +219,9 @@ $card-radius: 24rpx;
} }
.code-btn__text { .code-btn__text {
font-family: $font; font-family: $font-family-body;
font-size: 24rpx; font-size: 24rpx;
color: $primary; color: $uv-primary;
font-weight: 500; font-weight: 500;
} }
@@ -238,13 +229,13 @@ $card-radius: 24rpx;
.warn-card { .warn-card {
margin: 24rpx 32rpx 0; margin: 24rpx 32rpx 0;
background: #fff2f2; background: #fff2f2;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 32rpx; padding: 32rpx;
} }
.warn-title { .warn-title {
display: block; display: block;
font-family: $font; font-family: $font-family-body;
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: #f53f3f; color: #f53f3f;
@@ -273,9 +264,9 @@ $card-radius: 24rpx;
} }
.warn-text { .warn-text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
line-height: 1.6; line-height: 1.6;
} }
@@ -297,25 +288,25 @@ $card-radius: 24rpx;
transition: all 0.15s ease; transition: all 0.15s ease;
&--outline { &--outline {
border: 2rpx solid $divider; border: 2rpx solid $uv-border-color;
&:active { transform: scale(0.97); background: #f5f5f5; } &:active { transform: scale(0.97); background: #f5f5f5; }
} }
&--primary { &--primary {
background: $primary; background: $uv-primary;
&:active { transform: scale(0.97); } &:active { transform: scale(0.97); }
} }
} }
.btn-half__text--outline { .btn-half__text--outline {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: $text-hint; color: $uv-tips-color;
} }
.btn-half__text--primary { .btn-half__text--primary {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
@@ -325,7 +316,7 @@ $card-radius: 24rpx;
.code-modal { .code-modal {
width: 560rpx; width: 560rpx;
background: #ffffff; background: #ffffff;
border-radius: $card-radius; border-radius: $radius-lg;
padding: 40rpx; padding: 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -333,17 +324,17 @@ $card-radius: 24rpx;
} }
.code-modal__title { .code-modal__title {
font-family: $font; font-family: $font-family-body;
font-size: 32rpx; font-size: 32rpx;
font-weight: 700; font-weight: 700;
color: $text-main; color: $uv-main-color;
margin-bottom: 32rpx; margin-bottom: 32rpx;
} }
.code-modal__desc { .code-modal__desc {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $text-hint; color: $uv-tips-color;
margin-top: 8rpx; margin-top: 8rpx;
} }
@@ -373,9 +364,9 @@ $card-radius: 24rpx;
} }
.copy-btn__text { .copy-btn__text {
font-family: $font; font-family: $font-family-body;
font-size: 26rpx; font-size: 26rpx;
color: $primary; color: $uv-primary;
font-weight: 500; font-weight: 500;
} }
</style> </style>