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/reserve/reserve-index.vue
+58 -67
View File
@@ -226,29 +226,20 @@ function goFaq() {
</script>
<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;
.page {
min-height: 100vh;
background: #f7f8fa;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
font-family: $font;
font-family: $font-family-body;
}
/* ===== 景区信息卡片 ===== */
.scenic-card {
margin: 24rpx 24rpx 0;
background: #ffffff;
border-radius: $card-radius;
border-radius: $radius-lg;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
@@ -264,10 +255,10 @@ $bar-height: 120rpx;
.scenic-name {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 28rpx;
font-weight: 700;
color: $text-main;
color: $uv-main-color;
margin-bottom: 12rpx;
}
@@ -284,7 +275,7 @@ $bar-height: 120rpx;
flex-shrink: 0;
&--pin {
border: 3rpx solid $text-hint;
border: 3rpx solid $uv-tips-color;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
position: relative;
@@ -293,7 +284,7 @@ $bar-height: 120rpx;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
border: 2rpx solid $text-hint;
border: 2rpx solid $uv-tips-color;
position: absolute;
top: 50%;
left: 50%;
@@ -302,14 +293,14 @@ $bar-height: 120rpx;
}
&--clock {
border: 3rpx solid $text-hint;
border: 3rpx solid $uv-tips-color;
border-radius: 50%;
position: relative;
&::before {
content: '';
width: 2rpx;
height: 10rpx;
background: $text-hint;
background: $uv-tips-color;
position: absolute;
top: 4rpx;
left: 50%;
@@ -319,7 +310,7 @@ $bar-height: 120rpx;
content: '';
width: 8rpx;
height: 2rpx;
background: $text-hint;
background: $uv-tips-color;
position: absolute;
top: 50%;
left: 50%;
@@ -328,16 +319,16 @@ $bar-height: 120rpx;
}
.scenic-text {
font-family: $font;
font-family: $font-family-body;
font-size: 24rpx;
color: $text-hint;
color: $uv-tips-color;
}
.scenic-tip {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 22rpx;
color: $text-weak;
color: $uv-placeholder-color;
margin-top: 16rpx;
line-height: 1.6;
}
@@ -346,17 +337,17 @@ $bar-height: 120rpx;
.date-card {
margin: 24rpx 32rpx 0;
background: #ffffff;
border-radius: $card-radius;
border-radius: $radius-lg;
padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.section-title {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 30rpx;
font-weight: 500;
color: $text-label;
color: $uv-main-color;
margin-bottom: 24rpx;
}
@@ -376,19 +367,19 @@ $bar-height: 120rpx;
align-items: center;
padding: 16rpx 12rpx;
border-radius: 16rpx;
border: 2rpx solid $divider;
border: 2rpx solid $uv-border-color;
transition: all 0.15s ease;
&--active {
background: $primary;
border-color: $primary;
background: $uv-primary;
border-color: $uv-primary;
}
}
.date-week {
font-family: $font;
font-family: $font-family-body;
font-size: 18rpx;
color: $text-hint;
color: $uv-tips-color;
margin-bottom: 4rpx;
}
@@ -397,10 +388,10 @@ $bar-height: 120rpx;
}
.date-day {
font-family: $font;
font-family: $font-family-body;
font-size: 20rpx;
font-weight: 700;
color: $text-main;
color: $uv-main-color;
margin-bottom: 4rpx;
}
@@ -409,9 +400,9 @@ $bar-height: 120rpx;
}
.date-stock {
font-family: $font;
font-family: $font-family-body;
font-size: 18rpx;
color: $text-weak;
color: $uv-placeholder-color;
&--empty {
color: #f53f3f;
@@ -427,7 +418,7 @@ $bar-height: 120rpx;
.date-week,
.date-day {
color: $text-weak;
color: $uv-placeholder-color;
}
}
@@ -435,15 +426,15 @@ $bar-height: 120rpx;
.session-section {
margin-top: 24rpx;
padding-top: 24rpx;
border-top: 1rpx solid $divider;
border-top: 1rpx solid $uv-border-color;
}
.session-title {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 26rpx;
font-weight: 500;
color: $text-label;
color: $uv-main-color;
margin-bottom: 16rpx;
}
@@ -459,12 +450,12 @@ $bar-height: 120rpx;
align-items: center;
padding: 16rpx 28rpx;
border-radius: 12rpx;
border: 2rpx solid $divider;
border: 2rpx solid $uv-border-color;
transition: all 0.15s ease;
&--active {
background: rgba(60, 156, 255, 0.08);
border-color: $primary;
border-color: $uv-primary;
}
&--disabled {
@@ -473,21 +464,21 @@ $bar-height: 120rpx;
}
.session-time {
font-family: $font;
font-family: $font-family-body;
font-size: 20rpx;
font-weight: 500;
color: $text-main;
color: $uv-main-color;
margin-bottom: 4rpx;
}
.session-item--active .session-time {
color: $primary;
color: $uv-primary;
}
.session-stock {
font-family: $font;
font-family: $font-family-body;
font-size: 18rpx;
color: $text-weak;
color: $uv-placeholder-color;
&--empty {
color: #f53f3f;
@@ -497,20 +488,20 @@ $bar-height: 120rpx;
.no-session-tip {
margin-top: 24rpx;
padding-top: 24rpx;
border-top: 1rpx solid $divider;
border-top: 1rpx solid $uv-border-color;
}
.no-session-tip__text {
font-family: $font;
font-family: $font-family-body;
font-size: 18rpx;
color: $text-weak;
color: $uv-placeholder-color;
}
.date-tip {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 18rpx;
color: $text-weak;
color: $uv-placeholder-color;
margin-top: 16rpx;
}
@@ -518,7 +509,7 @@ $bar-height: 120rpx;
.user-card {
margin: 24rpx 32rpx 0;
background: #ffffff;
border-radius: $card-radius;
border-radius: $radius-lg;
padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
@@ -531,20 +522,20 @@ $bar-height: 120rpx;
}
.user-label {
font-family: $font;
font-family: $font-family-body;
font-size: 26rpx;
color: $text-label;
color: $uv-main-color;
}
.user-value {
font-family: $font;
font-family: $font-family-body;
font-size: 26rpx;
color: $text-body;
color: $uv-content-color;
}
.user-warn {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 24rpx;
color: #e53935;
margin-top: 12rpx;
@@ -554,16 +545,16 @@ $bar-height: 120rpx;
.notice-card {
margin: 24rpx 32rpx 0;
background: #eef4ff;
border-radius: $card-radius;
border-radius: $radius-lg;
padding: 32rpx;
}
.notice-title {
display: block;
font-family: $font;
font-family: $font-family-body;
font-size: 30rpx;
font-weight: 700;
color: $text-main;
color: $uv-main-color;
margin-bottom: 20rpx;
}
@@ -581,16 +572,16 @@ $bar-height: 120rpx;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: $primary;
background: $uv-primary;
flex-shrink: 0;
margin-top: 14rpx;
margin-right: 12rpx;
}
.notice-text {
font-family: $font;
font-family: $font-family-body;
font-size: 26rpx;
color: $text-hint;
color: $uv-tips-color;
line-height: 1.6;
}
@@ -599,9 +590,9 @@ $bar-height: 120rpx;
}
.notice-link__text {
font-family: $font;
font-family: $font-family-body;
font-size: 26rpx;
color: $primary;
color: $uv-primary;
font-weight: 500;
}
@@ -632,7 +623,7 @@ $bar-height: 120rpx;
width: 100%;
height: 80rpx;
border-radius: 40rpx;
background: $primary;
background: $uv-primary;
border: none;
display: flex;
align-items: center;
@@ -651,13 +642,13 @@ $bar-height: 120rpx;
}
.btn-submit__text {
font-family: $font;
font-family: $font-family-body;
font-size: 30rpx;
font-weight: 700;
color: #ffffff;
}
.btn-submit--disabled .btn-submit__text {
color: $text-weak;
color: $uv-placeholder-color;
}
</style>