From d93a68d47c96624c5d5b0cdf7cf4cb80444b3b3e Mon Sep 17 00:00:00 2001
From: xcbyy <2578898740@qq.com>
Date: Tue, 13 Oct 2026 09:49:12 +0800
Subject: [PATCH] fix(withdraw): optimize header title centering and fix
currency symbol overlap in amount input
---
pwuniapp/pages/user/withdraw.vue | 176 +++++++++++++++++++++----------
1 file changed, 119 insertions(+), 57 deletions(-)
diff --git a/pwuniapp/pages/user/withdraw.vue b/pwuniapp/pages/user/withdraw.vue
index 716cedd..950f462 100644
--- a/pwuniapp/pages/user/withdraw.vue
+++ b/pwuniapp/pages/user/withdraw.vue
@@ -6,10 +6,11 @@
- 佣金收益提现
-
- 提现记录
+
+ 佣金收益提现
+
+
@@ -24,7 +25,11 @@
可提现佣金收益 (元)
- 资金安全托管
+
+
+ 提现记录
+
+
@@ -114,19 +119,21 @@
-
+
提现金额
最低满 ¥{{ minWithdrawAmount }} 起提
- ¥
+
+ ¥
+
@@ -142,7 +149,7 @@
提现金额须满 ¥{{ minWithdrawAmount }} 元起提
- 单笔最高可提 ¥20,000 · 预计到账 ¥{{ displayExpectedAmount }} (平台服务费 0 元)
+ 可提余额 ¥{{ userCommission }} · 单笔最高 ¥20,000 · 免收手续费
@@ -581,11 +588,11 @@ onShow(() => {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
.nav-content {
+ position: relative;
height: var(--capsule-height, 44px);
display: flex;
align-items: center;
- justify-content: space-between;
- padding: 0 calc(var(--capsule-right-space, 10px) + 8rpx) 0 24rpx;
+ padding: 0 24rpx;
.btn-nav-back {
width: 64rpx;
@@ -595,6 +602,8 @@ onShow(() => {
display: flex;
align-items: center;
justify-content: center;
+ z-index: 10;
+ flex-shrink: 0;
.nav-back-icon {
width: 36rpx;
@@ -602,24 +611,29 @@ onShow(() => {
}
}
- .nav-title {
- font-size: 32rpx;
- font-weight: 700;
- color: #F8FAFC;
- letter-spacing: 1rpx;
+ .nav-title-wrap {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+
+ .nav-title {
+ font-size: 32rpx;
+ font-weight: 700;
+ color: #F8FAFC;
+ letter-spacing: 1rpx;
+ }
}
- .nav-right-action {
- padding: 10rpx 16rpx;
- background: rgba(99, 102, 241, 0.12);
- border: 1px solid rgba(99, 102, 241, 0.3);
- border-radius: 24rpx;
-
- .records-link-text {
- font-size: 22rpx;
- font-weight: 600;
- color: #818CF8;
- }
+ .nav-capsule-placeholder {
+ margin-left: auto;
+ width: var(--capsule-right-space, 96px);
+ height: 100%;
}
}
}
@@ -679,14 +693,33 @@ onShow(() => {
}
}
- .safe-badge {
- font-size: 20rpx;
- font-weight: 600;
- color: #34D399;
- background: rgba(16, 185, 129, 0.15);
- border: 1px solid rgba(16, 185, 129, 0.3);
- padding: 4rpx 14rpx;
- border-radius: 20rpx;
+ .records-btn-pill {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ padding: 8rpx 18rpx;
+ background: rgba(16, 185, 129, 0.12);
+ border: 1px solid rgba(16, 185, 129, 0.35);
+ border-radius: 28rpx;
+ transition: all 0.2s ease;
+
+ .rec-icon {
+ width: 24rpx;
+ height: 24rpx;
+ }
+
+ .rec-text {
+ font-size: 22rpx;
+ font-weight: 600;
+ color: #10B981;
+ letter-spacing: 0.5rpx;
+ }
+
+ .rec-arrow {
+ width: 18rpx;
+ height: 18rpx;
+ opacity: 0.7;
+ }
}
}
@@ -878,31 +911,49 @@ onShow(() => {
display: flex;
align-items: center;
background: #0F172A;
- border: 1px solid rgba(255, 255, 255, 0.1);
+ border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
padding: 0 24rpx;
- height: 104rpx;
+ height: 116rpx;
margin-bottom: 14rpx;
+ transition: all 0.25s ease;
- .input-currency-symbol {
- font-size: 44rpx;
- font-weight: 800;
- color: #10B981;
- margin-right: 16rpx;
+ &:focus-within {
+ border-color: #10B981;
+ box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.2);
+ }
+
+ .currency-prefix-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-right: 12rpx;
+ flex-shrink: 0;
+
+ .input-currency-symbol {
+ font-size: 50rpx;
+ font-weight: 800;
+ color: #10B981;
+ line-height: 1;
+ }
}
.amount-field-input {
flex: 1;
- font-size: 40rpx;
+ height: 100%;
+ font-size: 50rpx;
font-weight: 800;
color: #FFFFFF;
+ font-family: -apple-system, BlinkMacSystemFont, 'DIN Alternate', Roboto, sans-serif;
font-variant-numeric: tabular-nums;
+ padding: 0 10rpx;
+ line-height: 116rpx;
}
.amount-input-ph {
- font-size: 26rpx;
- font-weight: 400;
- color: #64748B;
+ font-size: 38rpx;
+ font-weight: 500;
+ color: #475569;
}
.btn-all-in {
@@ -911,10 +962,12 @@ onShow(() => {
color: #10B981;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.35);
- padding: 8rpx 20rpx;
+ padding: 10rpx 22rpx;
border-radius: 14rpx;
margin: 0;
line-height: 1.4;
+ white-space: nowrap;
+ flex-shrink: 0;
}
}
@@ -1262,16 +1315,9 @@ onShow(() => {
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
- .nav-title {
+ .nav-title-wrap .nav-title {
color: #1C1917;
}
- .nav-right-action {
- background: #FFF7ED;
- border-color: rgba(234, 88, 12, 0.3);
- .records-link-text {
- color: #EA580C;
- }
- }
}
}
@@ -1281,8 +1327,18 @@ onShow(() => {
box-shadow: 0 8rpx 30rpx rgba(234, 88, 12, 0.12);
.balance-inner {
- .balance-title-row .title-left .balance-title {
- color: #78716C;
+ .balance-title-row {
+ .title-left .balance-title {
+ color: #78716C;
+ }
+ .records-btn-pill {
+ background: rgba(234, 88, 12, 0.08);
+ border-color: rgba(234, 88, 12, 0.3);
+ .rec-text { color: #EA580C; }
+ .rec-icon, .rec-arrow {
+ filter: brightness(0) saturate(100%) invert(44%) sepia(76%) saturate(2227%) hue-rotate(357deg) brightness(97%) contrast(93%);
+ }
+ }
}
.amount-number-row {
.amount-integer { color: #1C1917; }
@@ -1324,8 +1380,14 @@ onShow(() => {
background: #FAFAF9;
border-color: #E7E5E4;
- .input-currency-symbol { color: #EA580C; }
+ &:focus-within {
+ border-color: #EA580C;
+ box-shadow: 0 0 16rpx rgba(234, 88, 12, 0.15);
+ }
+
+ .currency-prefix-box .input-currency-symbol { color: #EA580C; }
.amount-field-input { color: #1C1917; }
+ .amount-input-ph { color: #A8A29E; }
.btn-all-in {
background: rgba(234, 88, 12, 0.12);
border-color: rgba(234, 88, 12, 0.35);