refactor: remove local SCSS variables from 9 pages
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
@@ -267,23 +267,13 @@ function handleCancel() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ===== 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 {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== 1. Header ===== */
|
||||
@@ -301,25 +291,25 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.header-title__bind {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
}
|
||||
|
||||
.header-title__card {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: $accent;
|
||||
color: $uv-primary;
|
||||
}
|
||||
|
||||
.header-desc {
|
||||
display: block;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
line-height: 36rpx;
|
||||
margin-top: 12rpx;
|
||||
text-align: center;
|
||||
@@ -348,9 +338,9 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-label;
|
||||
color: $uv-main-color;
|
||||
font-weight: 400;
|
||||
line-height: 40rpx;
|
||||
flex-shrink: 0;
|
||||
@@ -364,42 +354,42 @@ $divider: #eeeeee;
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
line-height: 40rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-family: $font;
|
||||
color: $text-weak;
|
||||
font-family: $font-family-body;
|
||||
color: $uv-placeholder-color;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: $divider;
|
||||
background: $uv-border-color;
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
/* ===== Form Value + Chevron ===== */
|
||||
.form-value {
|
||||
flex: 1;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chevron-right {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-top: 2rpx solid $text-weak;
|
||||
border-right: 2rpx solid $text-weak;
|
||||
border-top: 2rpx solid $uv-placeholder-color;
|
||||
border-right: 2rpx solid $uv-placeholder-color;
|
||||
transform: rotate(45deg);
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
@@ -442,9 +432,9 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
color: $accent;
|
||||
color: $uv-primary;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -514,8 +504,8 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.checkbox--checked {
|
||||
background: $accent;
|
||||
border-color: $accent;
|
||||
background: $uv-primary;
|
||||
border-color: $uv-primary;
|
||||
}
|
||||
|
||||
.checkbox__check {
|
||||
@@ -535,17 +525,17 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.agreement__label {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.agreement__link {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: $accent;
|
||||
color: $uv-primary;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
@@ -590,7 +580,7 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.btn-confirm__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
@@ -598,7 +588,7 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.btn-confirm--disabled .btn-confirm__text {
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
@@ -625,10 +615,10 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.btn-cancel__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
/* ===== Popup Sheet ===== */
|
||||
@@ -638,7 +628,7 @@ $divider: #eeeeee;
|
||||
max-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
@@ -646,14 +636,14 @@ $divider: #eeeeee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
@@ -682,7 +672,7 @@ $divider: #eeeeee;
|
||||
left: 50%;
|
||||
width: 20rpx;
|
||||
height: 3rpx;
|
||||
background: $text-hint;
|
||||
background: $uv-tips-color;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
@@ -701,10 +691,10 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@@ -731,15 +721,15 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.id-type-item__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.id-type-item--active .id-type-item__text {
|
||||
color: $accent;
|
||||
color: $uv-primary;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,18 +82,13 @@ async function handleBuy() {
|
||||
</script>
|
||||
|
||||
<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;
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
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 {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
@@ -140,14 +135,14 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
@@ -155,9 +150,9 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
text-decoration: line-through;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
@@ -168,7 +163,7 @@ $bar-height: 120rpx;
|
||||
height: 80rpx;
|
||||
padding: 0 56rpx;
|
||||
border-radius: 40rpx;
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -190,7 +185,7 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.btn-buy__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
|
||||
+12
-19
@@ -240,19 +240,12 @@ function getBindList(): FaqItem[] {
|
||||
</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;
|
||||
$divider: #eeeeee;
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
padding: 48rpx 24rpx 0;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== 分类区块 ===== */
|
||||
@@ -261,17 +254,17 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.category-divider {
|
||||
height: 1rpx;
|
||||
background: $divider;
|
||||
background: $uv-border-color;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
@@ -306,18 +299,18 @@ $divider: #eeeeee;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 4rpx;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
flex: 1;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $text-label;
|
||||
color: $uv-main-color;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -351,18 +344,18 @@ $divider: #eeeeee;
|
||||
}
|
||||
|
||||
.faq-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.faq-highlight {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
|
||||
@@ -222,15 +222,6 @@ function goHome() {
|
||||
</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 {
|
||||
@@ -238,13 +229,13 @@ $bar-height: 120rpx;
|
||||
background: #f7f8fa;
|
||||
padding: 24rpx;
|
||||
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom) + 24rpx);
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== 模块1：状态卡片 ===== */
|
||||
.status-card {
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 48rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -345,24 +336,24 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== 模块2：商品信息卡片 ===== */
|
||||
.info-card {
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 32rpx;
|
||||
margin-top: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
@@ -370,10 +361,10 @@ $bar-height: 120rpx;
|
||||
|
||||
.product-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;
|
||||
}
|
||||
|
||||
@@ -390,14 +381,14 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
@@ -405,9 +396,9 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -417,7 +408,7 @@ $bar-height: 120rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
|
||||
&--last {
|
||||
border-bottom: none;
|
||||
@@ -425,16 +416,16 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-label;
|
||||
color: $uv-main-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
text-align: right;
|
||||
|
||||
&--code {
|
||||
@@ -465,26 +456,26 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.copy-btn__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== 模块4：使用提示 ===== */
|
||||
.tips-card {
|
||||
background: rgba(60, 156, 255, 0.04);
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 32rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
display: block;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
@@ -502,16 +493,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;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -522,9 +513,9 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.tips-link__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -567,7 +558,7 @@ $bar-height: 120rpx;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&--primary {
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
@@ -575,7 +566,7 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
&--outline {
|
||||
border: 2rpx solid $divider;
|
||||
border: 2rpx solid $uv-border-color;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
@@ -585,16 +576,16 @@ $bar-height: 120rpx;
|
||||
}
|
||||
|
||||
.btn-action__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-action__text--outline {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -229,20 +229,11 @@ function goBuy() {
|
||||
</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;
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== Tab Bar ===== */
|
||||
@@ -266,14 +257,14 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.tab-item--active .tab-text {
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -281,7 +272,7 @@ $card-radius: 24rpx;
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 2rpx;
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
@@ -297,7 +288,7 @@ $card-radius: 24rpx;
|
||||
/* ===== Order Card ===== */
|
||||
.order-card {
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
@@ -315,9 +306,9 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
}
|
||||
|
||||
/* Status Tags */
|
||||
@@ -343,7 +334,7 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.status-tag__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -365,10 +356,10 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
}
|
||||
|
||||
.price-current {
|
||||
@@ -377,14 +368,14 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
@@ -396,20 +387,20 @@ $card-radius: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-time {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.info-pay {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
@@ -423,7 +414,7 @@ $card-radius: 24rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 36rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 2rpx solid $divider;
|
||||
border: 2rpx solid $uv-border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -436,17 +427,17 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.btn-outline__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
height: 64rpx;
|
||||
padding: 0 36rpx;
|
||||
border-radius: 32rpx;
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -458,7 +449,7 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.btn-primary__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
@@ -504,9 +495,9 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 32rpx;
|
||||
@@ -516,7 +507,7 @@ $card-radius: 24rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 56rpx;
|
||||
border-radius: 36rpx;
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -527,7 +518,7 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.empty-btn__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
@@ -540,25 +531,25 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.load-more__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
}
|
||||
|
||||
/* ===== Refund Modal ===== */
|
||||
.refund-modal {
|
||||
width: 600rpx;
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.refund-title {
|
||||
display: block;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
@@ -569,9 +560,9 @@ $card-radius: 24rpx;
|
||||
|
||||
.refund-text {
|
||||
display: block;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
@@ -246,10 +246,8 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
|
||||
</script>
|
||||
|
||||
<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; }
|
||||
|
||||
/* === 空状态 === */
|
||||
@@ -259,7 +257,7 @@ $primary: #3c9cff;
|
||||
}
|
||||
.empty-icon-card {
|
||||
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;
|
||||
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-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; }
|
||||
.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;
|
||||
margin-bottom: 20rpx; transition: opacity 150ms;
|
||||
}
|
||||
@@ -331,12 +329,12 @@ $primary: #3c9cff;
|
||||
}
|
||||
.zoom-icon {
|
||||
width: 24rpx; height: 24rpx;
|
||||
border: 3rpx solid $primary; border-radius: 50%;
|
||||
border: 3rpx solid $uv-primary; border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.zoom-icon::after {
|
||||
content: ''; width: 8rpx; height: 3rpx;
|
||||
background: $primary; position: absolute;
|
||||
background: $uv-primary; position: absolute;
|
||||
bottom: -4rpx; right: -4rpx;
|
||||
transform: rotate(45deg); border-radius: 2rpx;
|
||||
}
|
||||
@@ -352,8 +350,8 @@ $primary: #3c9cff;
|
||||
.detail-value-wrap { display: flex; align-items: center; gap: 12rpx; }
|
||||
.detail-value { font-size: 26rpx; color: #333333; }
|
||||
.copy-btn {
|
||||
font-size: 22rpx; color: $primary;
|
||||
padding: 4rpx 16rpx; border: 1rpx solid $primary;
|
||||
font-size: 22rpx; color: $uv-primary;
|
||||
padding: 4rpx 16rpx; border: 1rpx solid $uv-primary;
|
||||
border-radius: 8rpx; transition: opacity 150ms;
|
||||
}
|
||||
.copy-btn:active { opacity: 0.6; }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -302,20 +302,11 @@ function previewPhoto(url: string) {
|
||||
</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;
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== Tab ===== */
|
||||
@@ -340,14 +331,14 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.tab-item--active .tab-text {
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -355,7 +346,7 @@ $card-radius: 24rpx;
|
||||
width: 32rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 2rpx;
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
@@ -371,7 +362,7 @@ $card-radius: 24rpx;
|
||||
/* ===== Record Card ===== */
|
||||
.record-card {
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
@@ -385,10 +376,10 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.record-name {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
@@ -402,12 +393,12 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.status-tag__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
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--cancelled .status-tag__text { color: #86909c; }
|
||||
.status-tag--auto_used .status-tag__text { color: #ff9500; }
|
||||
@@ -420,30 +411,30 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.record-card-type {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
background: rgba(60, 156, 255, 0.06);
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.record-card-no {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
color: $text-weak;
|
||||
color: $uv-placeholder-color;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
padding-bottom: 12rpx;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.record-date {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
@@ -461,16 +452,16 @@ $card-radius: 24rpx;
|
||||
justify-content: center;
|
||||
|
||||
&--outline {
|
||||
border: 2rpx solid $divider;
|
||||
border: 2rpx solid $uv-border-color;
|
||||
&:active { transform: scale(0.97); background: #f5f5f5; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm__text--outline {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
/* ===== 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__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 {
|
||||
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;
|
||||
&: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 { 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 360rpx; height: 360rpx; background: #F8FAFC;
|
||||
@@ -515,22 +506,22 @@ $card-radius: 24rpx;
|
||||
|
||||
.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 {
|
||||
width: 600rpx; background: #ffffff; border-radius: $card-radius; padding: 40rpx;
|
||||
width: 600rpx; background: #ffffff; border-radius: $radius-lg; padding: 40rpx;
|
||||
}
|
||||
|
||||
.cancel-modal__title {
|
||||
display: block; font-family: $font; font-size: 32rpx; font-weight: 700;
|
||||
color: $text-main; text-align: center; margin-bottom: 24rpx;
|
||||
display: block; font-family: $font-family-body; font-size: 32rpx; font-weight: 700;
|
||||
color: $uv-main-color; text-align: center; margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.cancel-modal__body { margin-bottom: 32rpx; }
|
||||
|
||||
.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; }
|
||||
@@ -540,30 +531,30 @@ $card-radius: 24rpx;
|
||||
align-items: center; justify-content: center; transition: all 0.15s ease;
|
||||
|
||||
&--outline {
|
||||
border: 2rpx solid $divider;
|
||||
border: 2rpx solid $uv-border-color;
|
||||
&:active { transform: scale(0.97); background: #f5f5f5; }
|
||||
}
|
||||
&--primary {
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
&:active { transform: scale(0.97); }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-modal__text--outline { font-family: $font; font-size: 26rpx; font-weight: 500; color: $text-hint; }
|
||||
.btn-modal__text--primary { font-family: $font; font-size: 26rpx; font-weight: 700; color: #ffffff; }
|
||||
.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-family-body; font-size: 26rpx; font-weight: 700; color: #ffffff; }
|
||||
|
||||
/* ===== 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;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
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 {
|
||||
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;
|
||||
&::before, &::after {
|
||||
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); }
|
||||
&::after { transform: translate(-50%, -50%) rotate(-45deg); }
|
||||
@@ -584,18 +575,18 @@ $card-radius: 24rpx;
|
||||
|
||||
.sheet-row {
|
||||
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-value { font-family: $font; font-size: 26rpx; color: $text-body; text-align: right; }
|
||||
.sheet-label { font-family: $font-family-body; font-size: 26rpx; color: $uv-main-color; }
|
||||
.sheet-value { font-family: $font-family-body; font-size: 26rpx; color: $uv-content-color; text-align: right; }
|
||||
|
||||
.sheet-photo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
}
|
||||
|
||||
.sheet-photo-avatar {
|
||||
@@ -608,5 +599,5 @@ $card-radius: 24rpx;
|
||||
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>
|
||||
|
||||
@@ -119,15 +119,6 @@ function goHome() {
|
||||
</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;
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
@@ -135,7 +126,7 @@ $card-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
}
|
||||
|
||||
/* ===== 成功图标 ===== */
|
||||
@@ -162,8 +153,8 @@ $card-radius: 24rpx;
|
||||
.success-check {
|
||||
width: 48rpx;
|
||||
height: 24rpx;
|
||||
border-left: 6rpx solid $primary;
|
||||
border-bottom: 6rpx solid $primary;
|
||||
border-left: 6rpx solid $uv-primary;
|
||||
border-bottom: 6rpx solid $uv-primary;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
@@ -171,17 +162,17 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
@@ -189,7 +180,7 @@ $card-radius: 24rpx;
|
||||
.info-card {
|
||||
margin: 48rpx 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);
|
||||
}
|
||||
@@ -199,7 +190,7 @@ $card-radius: 24rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid $divider;
|
||||
border-bottom: 1rpx solid $uv-border-color;
|
||||
|
||||
&--last {
|
||||
border-bottom: none;
|
||||
@@ -207,15 +198,15 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-label;
|
||||
color: $uv-main-color;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-body;
|
||||
color: $uv-content-color;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -228,9 +219,9 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.code-btn__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 24rpx;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -238,13 +229,13 @@ $card-radius: 24rpx;
|
||||
.warn-card {
|
||||
margin: 24rpx 32rpx 0;
|
||||
background: #fff2f2;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.warn-title {
|
||||
display: block;
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #f53f3f;
|
||||
@@ -273,9 +264,9 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.warn-text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -297,25 +288,25 @@ $card-radius: 24rpx;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&--outline {
|
||||
border: 2rpx solid $divider;
|
||||
border: 2rpx solid $uv-border-color;
|
||||
&:active { transform: scale(0.97); background: #f5f5f5; }
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: $primary;
|
||||
background: $uv-primary;
|
||||
&:active { transform: scale(0.97); }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-half__text--outline {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
.btn-half__text--primary {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
@@ -325,7 +316,7 @@ $card-radius: 24rpx;
|
||||
.code-modal {
|
||||
width: 560rpx;
|
||||
background: #ffffff;
|
||||
border-radius: $card-radius;
|
||||
border-radius: $radius-lg;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -333,17 +324,17 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.code-modal__title {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
color: $uv-main-color;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.code-modal__desc {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
color: $uv-tips-color;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
@@ -373,9 +364,9 @@ $card-radius: 24rpx;
|
||||
}
|
||||
|
||||
.copy-btn__text {
|
||||
font-family: $font;
|
||||
font-family: $font-family-body;
|
||||
font-size: 26rpx;
|
||||
color: $primary;
|
||||
color: $uv-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user