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);