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

refactor(pages): migrate remaining pages to design tokens

Browse Source
This commit is contained in:
jacobxu666
2026-06-26 11:07:22 +08:00
parent c78f97301d
commit e4ce6b4703
10 changed files with 91 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/card-bind/card-bind.vue
+26 -26
View File
@@ -272,7 +272,7 @@ function handleCancel() {
.page {
height: 100vh;
overflow: hidden;
background: #ffffff;
background: $color-card;
font-family: $font-family-body;
}
@@ -292,22 +292,22 @@ function handleCancel() {
.header-title__bind {
font-family: $font-family-body;
font-size: 38rpx;
font-weight: 700;
font-size: $font-size-title;
font-weight: $font-weight-bold;
color: $uv-main-color;
}
.header-title__card {
font-family: $font-family-body;
font-size: 38rpx;
font-weight: 700;
font-size: $font-size-title;
font-weight: $font-weight-bold;
color: $uv-primary;
}
.header-desc {
display: block;
font-family: $font-family-body;
font-size: 24rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-tips-color;
line-height: 36rpx;
@@ -318,7 +318,7 @@ function handleCancel() {
/* ===== 2. Form Card ===== */
.form-card {
margin: 24rpx 24rpx 0;
background: #ffffff;
background: $color-card;
border-radius: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
overflow: hidden;
@@ -339,7 +339,7 @@ function handleCancel() {
.form-label {
font-family: $font-family-body;
font-size: 24rpx;
font-size: $font-size-sm;
color: $uv-main-color;
font-weight: 400;
line-height: 40rpx;
@@ -355,7 +355,7 @@ function handleCancel() {
flex: 1;
height: 88rpx;
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-content-color;
line-height: 40rpx;
@@ -365,7 +365,7 @@ function handleCancel() {
.placeholder {
font-family: $font-family-body;
color: $uv-placeholder-color;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
}
@@ -379,7 +379,7 @@ function handleCancel() {
.form-value {
flex: 1;
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-content-color;
text-align: right;
@@ -469,7 +469,7 @@ function handleCancel() {
left: 50%;
width: 16rpx;
height: 2rpx;
background: #ffffff;
background: $color-card;
border-radius: 1rpx;
}
@@ -526,14 +526,14 @@ function handleCancel() {
.agreement__label {
font-family: $font-family-body;
font-size: 24rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-tips-color;
}
.agreement__link {
font-family: $font-family-body;
font-size: 24rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-primary;
@@ -575,14 +575,14 @@ function handleCancel() {
}
.btn-confirm--disabled {
background: #e5e7eb;
background: $uv-bg-color;
box-shadow: none;
}
.btn-confirm__text {
font-family: $font-family-body;
font-size: 28rpx;
font-weight: 500;
font-size: $font-size-base;
font-weight: $font-weight-medium;
color: #ffffff;
letter-spacing: 2rpx;
}
@@ -595,7 +595,7 @@ function handleCancel() {
flex: 1;
height: 96rpx;
border-radius: 48rpx;
background: #ffffff;
background: $color-card;
border: 2rpx solid #dadbde;
padding: 0;
margin: 0;
@@ -610,20 +610,20 @@ function handleCancel() {
&:active {
transform: scale(0.98);
background: #f5f5f5;
background: $uv-bg-color;
}
}
.btn-cancel__text {
font-family: $font-family-body;
font-size: 28rpx;
font-size: $font-size-base;
font-weight: 400;
color: $uv-tips-color;
}
/* ===== Popup Sheet ===== */
.popup-sheet {
background: #ffffff;
background: $color-card;
border-radius: 24rpx 24rpx 0 0;
max-height: 70vh;
display: flex;
@@ -641,8 +641,8 @@ function handleCancel() {
.popup-title {
font-family: $font-family-body;
font-size: 28rpx;
font-weight: 700;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: $uv-main-color;
line-height: 48rpx;
}
@@ -692,7 +692,7 @@ function handleCancel() {
.popup-content {
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-content-color;
line-height: 1.8;
@@ -712,7 +712,7 @@ function handleCancel() {
transition: background 0.15s ease;
&:active {
background: #f5f5f5;
background: $uv-bg-color;
}
&--active {
@@ -722,7 +722,7 @@ function handleCancel() {
.id-type-item__text {
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-content-color;
line-height: 40rpx;
src/pages/faq/faq.vue
+10 -10
View File
@@ -243,7 +243,7 @@ function getBindList(): FaqItem[] {
.page {
min-height: 100vh;
background: #f7f8fa;
background: $color-background;
padding: 48rpx 24rpx 0;
font-family: $font-family-body;
}
@@ -255,8 +255,8 @@ function getBindList(): FaqItem[] {
.category-title {
font-family: $font-family-body;
font-size: 28rpx;
font-weight: 700;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: $uv-main-color;
display: block;
margin-bottom: 16rpx;
@@ -270,7 +270,7 @@ function getBindList(): FaqItem[] {
/* ===== 问答卡片 ===== */
.faq-card {
background: #ffffff;
background: $color-card;
border-radius: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
margin-bottom: 20rpx;
@@ -300,16 +300,16 @@ function getBindList(): FaqItem[] {
margin-right: 16rpx;
margin-top: 4rpx;
font-family: $font-family-body;
font-size: 24rpx;
font-weight: 700;
font-size: $font-size-sm;
font-weight: $font-weight-bold;
color: $uv-primary;
}
.faq-question {
flex: 1;
font-family: $font-family-body;
font-size: 28rpx;
font-weight: 500;
font-size: $font-size-base;
font-weight: $font-weight-medium;
color: $uv-main-color;
line-height: 1.5;
}
@@ -345,7 +345,7 @@ function getBindList(): FaqItem[] {
.faq-text {
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-content-color;
line-height: 1.7;
@@ -353,7 +353,7 @@ function getBindList(): FaqItem[] {
.faq-highlight {
font-family: $font-family-body;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: 400;
color: $uv-primary;
line-height: 1.7;
src/pages/login/login.vue
+1 -1
View File
@@ -173,7 +173,7 @@ $icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
.brand-name {
font-family: $font-family-display;
font-size: 38rpx;
font-size: $font-size-title;
font-weight: $font-weight-bold;
color: $uv-main-color;
line-height: $line-height-tight;
src/pages/notice-list/notice-list.vue
+3 -3
View File
@@ -151,8 +151,8 @@ function openDetail(item: NoticeItem) {
/* 标题 */
.card-title {
display: block;
font-size: 28rpx;
font-weight: 700;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: #111111;
line-height: 1.3;
letter-spacing: -0.3rpx;
@@ -168,7 +168,7 @@ function openDetail(item: NoticeItem) {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 26rpx;
font-size: $font-size-sm;
font-weight: $font-weight-normal;
color: #666666;
line-height: 1.6;
src/pages/profile/index.vue
+2 -2
View File
@@ -306,7 +306,7 @@ function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
left: 50%;
transform: translate(-50%, -50%);
font-size: 16rpx;
font-weight: 700;
font-weight: $font-weight-bold;
color: $uv-success;
line-height: 1;
}
@@ -370,7 +370,7 @@ function callService() { uni.makePhoneCall({ phoneNumber: '400-123-0101' }) }
text {
font-size: $font-size-base;
color: #e53935;
color: $uv-error;
font-weight: $font-weight-medium;
}
}
src/pages/qrcode/index.vue
+17 -17
View File
@@ -247,7 +247,7 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
<style lang="scss" scoped>
.page { min-height: 100vh; background: #f7f8fa; font-family: $font-family-body; }
.page { min-height: 100vh; background: $color-background; font-family: $font-family-body; }
.scroll-content { height: 100vh; }
/* === 空状态 === */
@@ -263,22 +263,22 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
}
.empty-icon-stripe { height: 8rpx; background: rgba(255,255,255,0.6); border-radius: 4rpx; width: 100%; }
.empty-icon-stripe.short { width: 60%; }
.empty-text { font-size: 32rpx; font-weight: 700; color: #111111; margin-bottom: 12rpx; }
.empty-desc { font-size: 26rpx; color: #666666; margin-bottom: 40rpx; }
.empty-text { font-size: $font-size-lg; font-weight: $font-weight-bold; color: #111111; margin-bottom: 12rpx; }
.empty-desc { font-size: $font-size-sm; color: #666666; margin-bottom: 40rpx; }
.empty-btn {
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;
}
.empty-btn:active { opacity: 0.7; }
.empty-btn-text { font-size: 30rpx; color: #fff; font-weight: 500; }
.empty-btn-text { font-size: $font-size-lg; color: #fff; font-weight: $font-weight-medium; }
.empty-btn-secondary {
padding: 20rpx 60rpx; border-radius: 44rpx;
border: 2rpx solid #eeeeee; background: #fff;
border: 2rpx solid #eeeeee; background: $color-card;
transition: opacity 150ms;
}
.empty-btn-secondary:active { opacity: 0.7; }
.empty-btn-secondary-text { font-size: 28rpx; color: #333333; }
.empty-btn-secondary-text { font-size: $font-size-base; color: #333333; }
/* === 卡面展示区域 === */
.card-swiper-wrap { margin: 20rpx 20rpx 20rpx; overflow: visible; }
@@ -303,11 +303,11 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
width: 10rpx; height: 10rpx; border-radius: 50%;
background: rgba(255,255,255,0.4); transition: all 300ms;
}
.card-dot.active { background: #fff; width: 22rpx; border-radius: 5rpx; }
.card-dot.active { background: $color-card; width: 22rpx; border-radius: 5rpx; }
/* === 持卡人信息 === */
.holder-panel {
margin: 0 20rpx; background: #fff;
margin: 0 20rpx; background: $color-card;
border-radius: 24rpx; padding: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
}
@@ -323,7 +323,7 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
}
.avatar-zoom {
position: absolute; bottom: -2rpx; right: -2rpx;
width: 34rpx; height: 34rpx; background: #fff;
width: 34rpx; height: 34rpx; background: $color-card;
border-radius: 50%; display: flex; align-items: center;
justify-content: center; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
@@ -339,16 +339,16 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
transform: rotate(45deg); border-radius: 2rpx;
}
.holder-main { flex: 1; }
.holder-name { font-size: 32rpx; font-weight: 500; color: #111111; display: block; }
.holder-name { font-size: $font-size-lg; font-weight: $font-weight-medium; color: #111111; display: block; }
.holder-tag {
display: inline-block; font-size: 22rpx; color: #00b42a;
background: #f0fff4; padding: 2rpx 12rpx; border-radius: 6rpx; margin-top: 6rpx;
}
.holder-details { display: flex; flex-direction: column; gap: 14rpx; }
.detail-row { display: flex; justify-content: space-between; align-items: center; }
.detail-label { font-size: 26rpx; color: #666666; }
.detail-label { font-size: $font-size-sm; color: #666666; }
.detail-value-wrap { display: flex; align-items: center; gap: 12rpx; }
.detail-value { font-size: 26rpx; color: #333333; }
.detail-value { font-size: $font-size-sm; color: #333333; }
.copy-btn {
font-size: 22rpx; color: $uv-primary;
padding: 4rpx 16rpx; border: 1rpx solid $uv-primary;
@@ -359,12 +359,12 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
/* === 二维码区域 === */
.qrcode-section {
display: flex; flex-direction: column; align-items: center;
margin: 0 20rpx 20rpx; background: #fff;
margin: 0 20rpx 20rpx; background: $color-card;
border-radius: 24rpx; padding: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
}
.qrcode-title {
font-size: 30rpx; font-weight: 500; color: #111111;
font-size: $font-size-lg; font-weight: $font-weight-medium; color: #111111;
display: block; margin-bottom: 20rpx; align-self: flex-start;
}
.qrcode-box {
@@ -386,11 +386,11 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
top: 2rpx; left: 50%; transform: translateX(-50%);
border-radius: 1rpx;
}
.countdown-text { font-size: 24rpx; color: #666666; }
.countdown-text { font-size: $font-size-sm; color: #666666; }
/* === 功能入口 === */
.feature-panel {
margin: 0 20rpx 20rpx; background: #fff;
margin: 0 20rpx 20rpx; background: $color-card;
border-radius: 24rpx; padding: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.06);
}
@@ -406,5 +406,5 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
width: 88rpx; height: 88rpx;
margin-bottom: 10rpx;
}
.feature-label { font-size: 24rpx; color: #333333; }
.feature-label { font-size: $font-size-sm; color: #333333; }
</style>
src/pages/scenic-detail/scenic-detail.vue
+19 -19
View File
@@ -246,18 +246,18 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
/* ====== 字体层级 ====== */
.text-title {
font-size: 38rpx;
font-size: $font-size-title;
font-weight: $font-weight-bold;
color: #111111;
line-height: 48rpx;
}
.text-body {
font-size: 28rpx;
font-size: $font-size-base;
color: #333333;
line-height: 40rpx;
}
.text-assist {
font-size: 24rpx;
font-size: $font-size-sm;
color: #666666;
line-height: 32rpx;
}
@@ -329,7 +329,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.notice-text {
font-size: 24rpx;
font-size: $font-size-sm;
color: #ff7d00;
font-weight: $font-weight-medium;
}
@@ -347,7 +347,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
border-radius: $radius-sm;
text {
font-size: 24rpx;
font-size: $font-size-sm;
color: $uv-primary;
}
}
@@ -391,7 +391,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
flex-shrink: 0;
text {
font-size: 24rpx;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
}
@@ -415,7 +415,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
flex-shrink: 0;
text {
font-size: 24rpx;
font-size: $font-size-sm;
color: $uv-primary;
font-weight: $font-weight-medium;
}
@@ -446,7 +446,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
text {
font-size: 22rpx;
color: #fff;
font-weight: 500;
font-weight: $font-weight-medium;
}
&.super {
@@ -459,7 +459,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.ticket-price {
font-size: 28rpx;
font-size: $font-size-base;
color: #999999;
text-decoration: line-through;
}
@@ -472,7 +472,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.ticket-label {
font-size: 28rpx;
font-size: $font-size-base;
color: #333333;
font-weight: $font-weight-medium;
}
@@ -484,9 +484,9 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.member-text {
font-size: 24rpx;
font-size: $font-size-sm;
color: #f9ae3d;
font-weight: 500;
font-weight: $font-weight-medium;
}
.remaining-text {
@@ -507,9 +507,9 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
transition: transform $transition-fast;
text {
font-size: 28rpx;
font-size: $font-size-base;
color: #fff;
font-weight: 500;
font-weight: $font-weight-medium;
}
&:active {
@@ -537,14 +537,14 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
position: relative;
text {
font-size: 28rpx;
font-size: $font-size-base;
color: #999999;
font-weight: $font-weight-normal;
}
&.active text {
color: $uv-primary;
font-weight: 500;
font-weight: $font-weight-medium;
}
&:active {
@@ -584,7 +584,7 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.block-title {
font-size: 28rpx;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: #333333;
display: block;
@@ -598,14 +598,14 @@ $icon-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
}
.block-text {
font-size: 26rpx;
font-size: $font-size-sm;
color: #666666;
line-height: 1.8;
display: block;
}
.intro-text {
font-size: 26rpx;
font-size: $font-size-sm;
color: #666666;
line-height: 2;
display: block;
src/pages/scenic-list/scenic-list.vue
+11 -11
View File
@@ -459,7 +459,7 @@ function onCardClick(scenic: ScenicItem) {
flex: 1;
text-align: center;
font-size: $font-size-lg;
font-weight: 500;
font-weight: $font-weight-medium;
color: $color-foreground;
}
@@ -706,7 +706,7 @@ function onCardClick(scenic: ScenicItem) {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #fff;
background: $color-card;
}
/* 等级标签 — 图片右上角 */
@@ -724,7 +724,7 @@ function onCardClick(scenic: ScenicItem) {
text {
font-size: $font-size-xs;
color: #fff;
font-weight: 500;
font-weight: $font-weight-medium;
}
&.level-5A { background: #e53935; }
@@ -748,7 +748,7 @@ function onCardClick(scenic: ScenicItem) {
.scenic-name {
font-size: $font-size-lg;
font-weight: 500;
font-weight: $font-weight-medium;
color: $color-foreground;
flex: 1;
margin-right: $spacing-2;
@@ -765,20 +765,20 @@ function onCardClick(scenic: ScenicItem) {
.price-symbol {
font-size: $font-size-sm;
color: #e53935;
font-weight: 500;
color: $uv-error;
font-weight: $font-weight-medium;
}
.price-value {
font-size: $font-size-xl;
color: #e53935;
color: $uv-error;
font-weight: $font-weight-bold;
}
.price-free {
font-size: $font-size-base;
color: $uv-success;
font-weight: 500;
font-weight: $font-weight-medium;
}
/* 营业时间 + 营业状态 同行 */
@@ -949,7 +949,7 @@ function onCardClick(scenic: ScenicItem) {
.popup-title {
font-size: $font-size-lg;
font-weight: 500;
font-weight: $font-weight-medium;
color: $color-foreground;
}
@@ -996,7 +996,7 @@ function onCardClick(scenic: ScenicItem) {
&.active text {
color: $uv-primary;
font-weight: 500;
font-weight: $font-weight-medium;
}
}
@@ -1020,7 +1020,7 @@ function onCardClick(scenic: ScenicItem) {
text {
font-size: $font-size-lg;
font-weight: 500;
font-weight: $font-weight-medium;
color: #fff;
letter-spacing: 2rpx;
}
src/pages/union-buy/union-buy.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #ffffff;
background: $color-card;
}
.guide-image {
src/pages/usage-guide/usage-guide.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #ffffff;
background: $color-card;
}
.guide-image {