优化移动端押金 ui

frontend/src/features/seller/views/MobileSellerListingCreateView.vue

@@ -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">