优化移动端押金 ui
This commit is contained in:
yml2213
@@ -99,24 +99,6 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.deposit-label {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.deposit-label em {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
background: #fff3f4;
|
||||
color: #f04452;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.hint-label::before,
|
||||
.backend-hint-target.has-hint::before,
|
||||
.upload-title.has-hint::before,
|
||||
@@ -564,18 +546,6 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.deposit-recommend-btn {
|
||||
min-height: 32px;
|
||||
margin: -2px 0 10px 88px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #ffba86;
|
||||
border-radius: 16px;
|
||||
background: #fff7f0;
|
||||
color: #e65f00;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ratio-reference {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -668,6 +638,105 @@
|
||||
margin: -2px 0 0;
|
||||
}
|
||||
|
||||
.deposit-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.deposit-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: #30343a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.deposit-heading span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.deposit-heading b {
|
||||
color: #f04452;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.deposit-heading em {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff3f4;
|
||||
color: #f04452;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.deposit-input-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #e5eaf1;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.deposit-input-wrap input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #20242a;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.deposit-input-wrap input::placeholder {
|
||||
color: #b3bbc6;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.deposit-input-wrap span {
|
||||
color: #858c96;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.deposit-help {
|
||||
margin: -2px 0 0;
|
||||
color: #858c96;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.deposit-recommend-btn {
|
||||
justify-self: start;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 17px;
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.total-price-field :deep(.van-field__control) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -532,28 +532,27 @@ function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
|
||||
|
||||
<div class="form-section">
|
||||
<h2 class="section-title">押金与价格</h2>
|
||||
<van-field
|
||||
v-model="form.depositAmountYuan"
|
||||
label="押金"
|
||||
type="number"
|
||||
required
|
||||
:placeholder="priceConfig.deposit_placeholder"
|
||||
suffix="元"
|
||||
class="publish-field"
|
||||
>
|
||||
<template #label>
|
||||
<span
|
||||
class="hint-label deposit-label"
|
||||
:data-hint="priceConfig.deposit_placeholder"
|
||||
tabindex="0"
|
||||
>
|
||||
押金<em v-if="priceConfig.deposit_hint">{{ priceConfig.deposit_hint }}</em>
|
||||
</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<button class="deposit-recommend-btn" type="button" @click="useRecommendedDeposit">
|
||||
推荐押金 ¥{{ formatMoney(recommendedDepositAmount) }}
|
||||
</button>
|
||||
<div class="deposit-card">
|
||||
<label class="deposit-heading">
|
||||
<span>押金<b>*</b></span>
|
||||
<em v-if="priceConfig.deposit_hint">{{ priceConfig.deposit_hint }}</em>
|
||||
</label>
|
||||
<div class="deposit-input-wrap">
|
||||
<input
|
||||
v-model="form.depositAmountYuan"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="priceConfig.deposit_placeholder"
|
||||
/>
|
||||
<span>元</span>
|
||||
</div>
|
||||
<p v-if="priceConfig.deposit_placeholder" class="deposit-help">
|
||||
{{ priceConfig.deposit_placeholder }}
|
||||
</p>
|
||||
<button class="deposit-recommend-btn" type="button" @click="useRecommendedDeposit">
|
||||
推荐押金 ¥{{ formatMoney(recommendedDepositAmount) }}
|
||||
</button>
|
||||
</div>
|
||||
<van-field label="每日损耗" required class="publish-field">
|
||||
<template #input>
|
||||
<div class="radio-group">
|
||||
|
||||
Reference in New Issue
Block a user