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

refactor: 全项目 UI/UX 标准化修复

Browse Source 
- P0: uni.scss 全局 Token 修正（字体SourceHanSerifCN、色彩#111/#333/#666/#999/#eeeeee、删除600字重）
- P0: 分包6页面色彩迁移（#4A90D9→#3c9cff、#E74C3C→#e53935、圆角统一24rpx）
- P1: qrcode页面全量SCSS迁移（12个硬编码色值替换、emoji图标替换、圆角统一）
- P1: index页面价格色修正（#f9ae3d→#e53935、按钮主色统一、硬编码字号对齐）
- P2: 10个页面字号/圆角/字体统一（notice-list/scenic/login/profile/faq/card-bind等）
- P3: 全局 font-weight:600 替换为500/700（5处），删除semibold变量和工具类
- 新增 -size-title: 38rpx Token
- 构建验证通过

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-06-26 02:50:21 +08:00
co-authored by Claude
parent f67dd63972
commit 4ad874adf9
25 changed files with 167 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/user/pages/card/activate.vue
+7 -7
View File
@@ -89,17 +89,17 @@ async function handleActivate() {
}
</script>
<style scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; }
.card-info { background: #4A90D9; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
.card-info { background: #3c9cff; border-radius: 24rpx; padding: 30rpx; margin-bottom: 20rpx; }
.card-name { font-size: 34rpx; font-weight: bold; color: #fff; display: block; margin-bottom: 8rpx; }
.card-tip { font-size: 24rpx; color: rgba(255,255,255,0.8); }
.form-card { background: #fff; border-radius: 16rpx; padding: 10rpx 30rpx; }
.form-item { padding: 24rpx 0; border-bottom: 1rpx solid #f0f0f0; }
.form-card { background: #fff; border-radius: 24rpx; padding: 10rpx 30rpx; }
.form-item { padding: 24rpx 0; border-bottom: 1rpx solid #eeeeee; }
.form-item:last-child { border-bottom: none; }
.label { display: block; font-size: 26rpx; color: #666; margin-bottom: 12rpx; }
.input { width: 100%; height: 80rpx; font-size: 30rpx; color: #333; box-sizing: border-box; }
.btn-area { padding: 40rpx 20rpx; }
.btn-activate { width: 100%; height: 96rpx; line-height: 96rpx; background: #4A90D9; color: #fff; border-radius: 48rpx; font-size: 32rpx; border: none; }
.btn-activate[disabled] { background: #A5C8E8; }
.btn-activate { width: 100%; height: 96rpx; line-height: 96rpx; background: #3c9cff; color: #fff; border-radius: 48rpx; font-size: 32rpx; border: none; }
.btn-activate[disabled] { background: #e5e7eb; }
</style>
src/packages/user/pages/card/bind.vue
+5 -5
View File
@@ -50,16 +50,16 @@ async function handleBind() {
}
</script>
<style scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; }
<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
.header { padding: 20rpx 10rpx 30rpx; }
.title { font-size: 36rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
.desc { font-size: 26rpx; color: #999; }
.form-card { background: #fff; border-radius: 16rpx; padding: 10rpx 30rpx; }
.form-card { background: #fff; border-radius: 24rpx; padding: 10rpx 30rpx; }
.form-item { padding: 24rpx 0; }
.label { display: block; font-size: 26rpx; color: #666; margin-bottom: 12rpx; }
.input { width: 100%; height: 80rpx; font-size: 30rpx; color: #333; box-sizing: border-box; }
.btn-area { padding: 40rpx 20rpx; }
.btn-bind { width: 100%; height: 96rpx; line-height: 96rpx; background: #4A90D9; color: #fff; border-radius: 48rpx; font-size: 32rpx; border: none; }
.btn-bind[disabled] { background: #A5C8E8; }
.btn-bind { width: 100%; height: 96rpx; line-height: 96rpx; background: #3c9cff; color: #fff; border-radius: 48rpx; font-size: 32rpx; border: none; }
.btn-bind[disabled] { background: #e5e7eb; }
</style>
src/packages/user/pages/card/buy.vue
+10 -10
View File
@@ -84,23 +84,23 @@ async function handlePay() {
}
</script>
<style scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; padding-bottom: 140rpx; box-sizing: border-box; }
.order-card, .pay-card { background: #fff; border-radius: 16rpx; padding: 24rpx 30rpx; margin-bottom: 20rpx; }
.card-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 20rpx; padding-bottom: 16rpx; border-bottom: 1rpx solid #f0f0f0; }
<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; padding-bottom: 140rpx; box-sizing: border-box; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
.order-card, .pay-card { background: #fff; border-radius: 24rpx; padding: 24rpx 30rpx; margin-bottom: 20rpx; }
.card-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; margin-bottom: 20rpx; padding-bottom: 16rpx; border-bottom: 1rpx solid #eeeeee; }
.order-row { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; }
.label { font-size: 28rpx; color: #666; }
.value { font-size: 28rpx; color: #333; }
.value.price { color: #E74C3C; font-weight: bold; font-size: 36rpx; }
.value.price { color: #e53935; font-weight: bold; font-size: 36rpx; }
.pay-option { display: flex; align-items: center; padding: 20rpx 0; }
.pay-option.active { color: #4A90D9; }
.pay-option.active { color: #3c9cff; }
.pay-icon { font-size: 36rpx; margin-right: 16rpx; }
.pay-name { flex: 1; font-size: 28rpx; }
.pay-check { font-size: 32rpx; color: #4A90D9; font-weight: bold; }
.pay-check { font-size: 32rpx; color: #3c9cff; font-weight: bold; }
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; align-items: center; padding: 16rpx 30rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #eee; }
.bottom-price { flex: 1; display: flex; flex-direction: column; }
.bottom-price .label { font-size: 22rpx; color: #999; }
.bottom-price .value { font-size: 40rpx; color: #E74C3C; font-weight: bold; }
.btn-pay { background: #E74C3C; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 44rpx; border: none; }
.btn-pay[disabled] { background: #F5A8A3; }
.bottom-price .value { font-size: 40rpx; color: #e53935; font-weight: bold; }
.btn-pay { background: #e53935; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 40rpx; border: none; }
.btn-pay[disabled] { background: #e5e7eb; }
</style>
src/packages/user/pages/card/detail.vue
+5 -5
View File
@@ -108,12 +108,12 @@ function handleBuy() {
</script>
<style lang="scss" scoped>
.page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; }
.page { min-height: 100vh; background: $uv-bg-color; padding-bottom: 120rpx; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
.cover { width: 100%; height: 400rpx; background: #ddd; }
.info-card { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; }
.card-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; }
.price-row { display: flex; align-items: baseline; gap: 12rpx; margin: 12rpx 0; }
.price { font-size: 44rpx; color: #E74C3C; font-weight: bold; }
.price { font-size: 44rpx; color: #e53935; font-weight: bold; }
.original-price { font-size: 26rpx; color: #ccc; text-decoration: line-through; }
.card-desc { font-size: 26rpx; color: #666; }
.section { background: #fff; padding: 24rpx 30rpx; margin-bottom: 16rpx; }
@@ -130,8 +130,8 @@ function handleBuy() {
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; align-items: center; padding: 16rpx 30rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #eee; }
.bottom-price { flex: 1; display: flex; flex-direction: column; }
.bottom-price .label { font-size: 22rpx; color: #999; }
.bottom-price .value { font-size: 36rpx; color: #E74C3C; font-weight: bold; }
.btn-buy { background: #E74C3C; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 44rpx; border: none; }
.bottom-price .value { font-size: 36rpx; color: #e53935; font-weight: bold; }
.btn-buy { background: #e53935; color: #fff; font-size: 30rpx; padding: 20rpx 60rpx; border-radius: 40rpx; border: none; }
.loading-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #999; }
/* Quick actions — 功能入口 */
@@ -141,7 +141,7 @@ function handleBuy() {
margin: 0 $spacing-3 $spacing-3;
padding: $spacing-3 0;
background: $color-card;
border-radius: 16rpx;
border-radius: 24rpx;
box-shadow: $shadow-sm;
}
src/packages/user/pages/card/list.vue
+2 -1
View File
@@ -102,6 +102,7 @@ function goDetail(card: CardInfo) {
.page {
min-height: 100vh;
background: $uv-bg-color;
font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif;
}
/* Hero header */
@@ -178,7 +179,7 @@ function goDetail(card: CardInfo) {
background: $uv-primary;
color: #fff;
border-color: $uv-primary;
font-weight: $font-weight-semibold;
font-weight: $font-weight-medium;
}
&:active {
src/packages/user/pages/card/qrcode.vue
+6 -6
View File
@@ -71,18 +71,18 @@ function showComingSoon() {
}
</script>
<style scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; }
.card-top { background: linear-gradient(135deg, #4A90D9, #357ABD); border-radius: 20rpx; padding: 30rpx; color: #fff; margin-bottom: -20rpx; }
<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; font-family: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif; }
.card-top { background: linear-gradient(135deg, #3c9cff, #398ade); border-radius: 24rpx; padding: 30rpx; color: #fff; margin-bottom: -20rpx; }
.card-label { font-size: 24rpx; opacity: 0.8; display: block; }
.user-name { font-size: 36rpx; font-weight: bold; display: block; margin: 12rpx 0 8rpx; }
.expire-date { font-size: 22rpx; opacity: 0.7; display: block; }
.qr-card { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-top: 30rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08); text-align: center; }
.qr-card { background: #fff; border-radius: 24rpx; padding: 30rpx; margin-top: 30rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08); text-align: center; }
.qr-area { width: 360rpx; height: 360rpx; margin: 20rpx auto; display: flex; align-items: center; justify-content: center; background: #f8f8f8; border-radius: 12rpx; }
.qr-image { width: 320rpx; height: 320rpx; }
.qr-placeholder { color: #999; font-size: 28rpx; }
.qr-tip { font-size: 24rpx; color: #999; display: block; margin-top: 16rpx; }
.actions { display: flex; gap: 20rpx; padding: 40rpx 20rpx; }
.btn-secondary { flex: 1; height: 88rpx; line-height: 88rpx; background: #fff; color: #4A90D9; border: 2rpx solid #4A90D9; border-radius: 44rpx; font-size: 28rpx; }
.btn-primary { flex: 1; height: 88rpx; line-height: 88rpx; background: #4A90D9; color: #fff; border-radius: 44rpx; font-size: 28rpx; border: none; }
.btn-secondary { flex: 1; height: 88rpx; line-height: 88rpx; background: #fff; color: #3c9cff; border: 2rpx solid #3c9cff; border-radius: 40rpx; font-size: 28rpx; }
.btn-primary { flex: 1; height: 88rpx; line-height: 88rpx; background: #3c9cff; color: #fff; border-radius: 40rpx; font-size: 28rpx; border: none; }
</style>