优化移动端押金 ui

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

@@ -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;
 }

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
+        <div class="deposit-card">
-          v-model="form.depositAmountYuan"
+          <label class="deposit-heading">
-          label="押金"
+            <span>押金<b>*</b></span>
-          type="number"
+            <em v-if="priceConfig.deposit_hint">{{ priceConfig.deposit_hint }}</em>
-          required
+          </label>
-          :placeholder="priceConfig.deposit_placeholder"
+          <div class="deposit-input-wrap">
-          suffix="元"
+            <input
-          class="publish-field"
+              v-model="form.depositAmountYuan"
-        >
+              type="number"
-          <template #label>
+              inputmode="decimal"
-            <span
+              :placeholder="priceConfig.deposit_placeholder"
-              class="hint-label deposit-label"
+            />
-              :data-hint="priceConfig.deposit_placeholder"
+            <span>元</span>
-              tabindex="0"
+          </div>
-            >
+          <p v-if="priceConfig.deposit_placeholder" class="deposit-help">
-              押金<em v-if="priceConfig.deposit_hint">{{ priceConfig.deposit_hint }}</em>
+            {{ priceConfig.deposit_placeholder }}
-            </span>
+          </p>
-          </template>
+          <button class="deposit-recommend-btn" type="button" @click="useRecommendedDeposit">
-        </van-field>
+            推荐押金 ¥{{ formatMoney(recommendedDepositAmount) }}
-        <button class="deposit-recommend-btn" type="button" @click="useRecommendedDeposit">
+          </button>
-          推荐押金 ¥{{ formatMoney(recommendedDepositAmount) }}
+        </div>
-        </button>
         <van-field label="每日损耗" required class="publish-field">
           <template #input>
             <div class="radio-group">