style(withdraw): optimize amount input card layout with horizontal flex and sleek pill button
这个提交包含在：
xcbyy
@@ -92,10 +92,8 @@
|
||||
<text class="section-rule-hint">最低满 ¥{{ minWithdrawAmount }} 起提</text>
|
||||
</view>
|
||||
|
||||
<view class="amount-input-box">
|
||||
<view class="currency-prefix-box">
|
||||
<text class="input-currency-symbol">¥</text>
|
||||
</view>
|
||||
<view class="amount-input-box" :class="{ 'is-focused': isInputFocused }">
|
||||
<text class="input-currency-symbol">¥</text>
|
||||
<input
|
||||
class="amount-field-input"
|
||||
type="digit"
|
||||
@@ -103,20 +101,31 @@
|
||||
placeholder="0.00"
|
||||
placeholder-class="amount-input-ph"
|
||||
maxlength="10"
|
||||
@focus="isInputFocused = true"
|
||||
@blur="isInputFocused = false"
|
||||
/>
|
||||
<button class="btn-all-in btn-active" @click="handleFillAllCommission">全部提现</button>
|
||||
<view class="btn-all-in btn-active" @click="handleFillAllCommission">
|
||||
<text class="btn-all-in-text">全部提现</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 实时校验提示 -->
|
||||
<view class="amount-tips-row">
|
||||
<view v-if="isAmountExceeded" class="tip-msg error">
|
||||
输入金额已超出当前可提现佣金余额 (¥{{ userCommission }})
|
||||
<text class="tip-badge">!</text>
|
||||
<text class="tip-text">输入金额已超出当前可提现佣金余额 (¥{{ userCommission }})</text>
|
||||
</view>
|
||||
<view v-else-if="isAmountBelowMin" class="tip-msg warning">
|
||||
提现金额须满 ¥{{ minWithdrawAmount }} 元起提
|
||||
<text class="tip-badge">!</text>
|
||||
<text class="tip-text">提现金额须满 ¥{{ minWithdrawAmount }} 元起提</text>
|
||||
</view>
|
||||
<view v-else class="tip-msg normal">
|
||||
可提余额 ¥{{ userCommission }} · 单笔最高 ¥20,000 · 免收手续费
|
||||
<text class="balance-label">可提余额</text>
|
||||
<text class="balance-num">¥{{ userCommission }}</text>
|
||||
<text class="dot-divider">·</text>
|
||||
<text class="limit-text">单笔最高 ¥20,000</text>
|
||||
<text class="dot-divider">·</text>
|
||||
<text class="free-fee-badge">免收手续费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -187,6 +196,7 @@ const navInfo = ref(getNavBarInfo());
|
||||
const userCommission = ref('0.00');
|
||||
const currentChannel = ref('WECHAT');
|
||||
const withdrawAmount = ref('');
|
||||
const isInputFocused = ref(false);
|
||||
const isSubmitting = ref(false);
|
||||
const showRecordsDrawer = ref(false);
|
||||
const withdrawalsList = ref([]);
|
||||
@@ -748,6 +758,181 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 提现金额卡片专属样式 */
|
||||
.amount-card {
|
||||
.card-section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.section-rule-hint {
|
||||
font-size: 22rpx;
|
||||
color: #F59E0B;
|
||||
font-weight: 600;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid rgba(245, 158, 11, 0.28);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-input-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 112rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
&.is-focused {
|
||||
border-color: #10B981;
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
box-shadow: 0 0 0 6rpx rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.input-currency-symbol {
|
||||
font-size: 52rpx;
|
||||
font-weight: 800;
|
||||
color: #10B981;
|
||||
margin-right: 16rpx;
|
||||
line-height: 1;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.amount-field-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: 800;
|
||||
color: #F8FAFC;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "DIN Alternate", "Helvetica Neue", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.amount-input-ph {
|
||||
color: #64748B;
|
||||
font-size: 48rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-all-in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 22rpx;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||||
border-radius: 28rpx;
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.btn-all-in-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #10B981;
|
||||
letter-spacing: 0.5rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amount-tips-row {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.tip-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.4;
|
||||
|
||||
&.error {
|
||||
color: #EF4444;
|
||||
.tip-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: #EF4444;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #F59E0B;
|
||||
.tip-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: #F59E0B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.normal {
|
||||
color: #94A3B8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
|
||||
.balance-label {
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.balance-num {
|
||||
font-weight: 700;
|
||||
color: #10B981;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.dot-divider {
|
||||
color: #64748B;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.limit-text {
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.free-fee-badge {
|
||||
color: #10B981;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 规范说明卡片 (高对比度深色模式) */
|
||||
.rules-card {
|
||||
background: rgba(30, 41, 59, 0.65);
|
||||
@@ -1099,22 +1284,88 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.amount-input-box {
|
||||
background: #FAFAF9;
|
||||
border-color: #E7E5E4;
|
||||
.amount-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #F0ECE4;
|
||||
box-shadow: 0 4rpx 20rpx rgba(28, 25, 23, 0.04);
|
||||
|
||||
&:focus-within {
|
||||
border-color: #EA580C;
|
||||
box-shadow: 0 0 16rpx rgba(234, 88, 12, 0.15);
|
||||
.card-section-head {
|
||||
.section-title {
|
||||
color: #1C1917;
|
||||
}
|
||||
.section-rule-hint {
|
||||
color: #EA580C;
|
||||
background: #FFF7ED;
|
||||
border: 1px solid #FFEDD5;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
color: #EA580C;
|
||||
.amount-input-box {
|
||||
background: #FAFAF9;
|
||||
border: 2rpx solid #E7E5E4;
|
||||
|
||||
&.is-focused {
|
||||
border-color: #EA580C;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 0 6rpx rgba(234, 88, 12, 0.12);
|
||||
}
|
||||
|
||||
.input-currency-symbol {
|
||||
color: #EA580C;
|
||||
}
|
||||
|
||||
.amount-field-input {
|
||||
color: #1C1917;
|
||||
}
|
||||
|
||||
.amount-input-ph {
|
||||
color: #A8A29E;
|
||||
}
|
||||
|
||||
.btn-all-in {
|
||||
background: #FFF7ED;
|
||||
border: 1px solid #FDBA74;
|
||||
|
||||
.btn-all-in-text {
|
||||
color: #EA580C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amount-tips-row {
|
||||
.tip-msg {
|
||||
&.error {
|
||||
color: #DC2626;
|
||||
.tip-badge {
|
||||
background: #DC2626;
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
color: #D97706;
|
||||
.tip-badge {
|
||||
background: #D97706;
|
||||
}
|
||||
}
|
||||
&.normal {
|
||||
color: #78716C;
|
||||
.balance-label {
|
||||
color: #78716C;
|
||||
}
|
||||
.balance-num {
|
||||
color: #EA580C;
|
||||
}
|
||||
.dot-divider {
|
||||
color: #D6D3D1;
|
||||
}
|
||||
.limit-text {
|
||||
color: #78716C;
|
||||
}
|
||||
.free-fee-badge {
|
||||
color: #EA580C;
|
||||
background: #FFF7ED;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
在新工单中引用
屏蔽一个用户