fix(withdraw): optimize header title centering and fix currency symbol overlap in amount input
这个提交包含在：
xcbyy
@@ -6,10 +6,11 @@
|
||||
<view class="btn-nav-back btn-active" @click="handleBack">
|
||||
<image class="nav-back-icon" :src="ICONS.chevronLeft" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="nav-title">佣金收益提现</text>
|
||||
<view class="nav-right-action btn-active" @click="openRecordsDrawer">
|
||||
<text class="records-link-text">提现记录</text>
|
||||
<view class="nav-title-wrap">
|
||||
<text class="nav-title">佣金收益提现</text>
|
||||
</view>
|
||||
<!-- 胶囊右侧对称避让占位 -->
|
||||
<view class="nav-capsule-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -24,7 +25,11 @@
|
||||
<image class="wallet-icon-svg" :src="ICONS.wallet" mode="aspectFit" />
|
||||
<text class="balance-title">可提现佣金收益 (元)</text>
|
||||
</view>
|
||||
<view class="safe-badge">资金安全托管</view>
|
||||
<view class="records-btn-pill btn-active" @click="openRecordsDrawer">
|
||||
<image class="rec-icon" :src="ICONS.orderList" mode="aspectFit" />
|
||||
<text class="rec-text">提现记录</text>
|
||||
<image class="rec-arrow" :src="ICONS.chevronRight" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="amount-number-row">
|
||||
@@ -114,19 +119,21 @@
|
||||
</view>
|
||||
|
||||
<!-- 卡片 3: 提现金额输入区 -->
|
||||
<view class="content-card">
|
||||
<view class="content-card amount-card">
|
||||
<view class="card-section-head">
|
||||
<text class="section-title">提现金额</text>
|
||||
<text class="section-rule-hint">最低满 ¥{{ minWithdrawAmount }} 起提</text>
|
||||
</view>
|
||||
|
||||
<view class="amount-input-box">
|
||||
<text class="input-currency-symbol">¥</text>
|
||||
<view class="currency-prefix-box">
|
||||
<text class="input-currency-symbol">¥</text>
|
||||
</view>
|
||||
<input
|
||||
class="amount-field-input"
|
||||
type="digit"
|
||||
v-model="withdrawAmount"
|
||||
:placeholder="`请输入提现金额 (最低¥${minWithdrawAmount})`"
|
||||
placeholder="0.00"
|
||||
placeholder-class="amount-input-ph"
|
||||
maxlength="10"
|
||||
/>
|
||||
@@ -142,7 +149,7 @@
|
||||
提现金额须满 ¥{{ minWithdrawAmount }} 元起提
|
||||
</view>
|
||||
<view v-else class="tip-msg normal">
|
||||
单笔最高可提 ¥20,000 · 预计到账 ¥{{ displayExpectedAmount }} (平台服务费 0 元)
|
||||
可提余额 ¥{{ userCommission }} · 单笔最高 ¥20,000 · 免收手续费
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -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);
|
||||
|
||||
在新工单中引用
屏蔽一个用户