diff --git a/frontend/src/features/seller/views/MobileSellerListingCreateView.css b/frontend/src/features/seller/views/MobileSellerListingCreateView.css index d662cce..bb2af5d 100644 --- a/frontend/src/features/seller/views/MobileSellerListingCreateView.css +++ b/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; } diff --git a/frontend/src/features/seller/views/MobileSellerListingCreateView.vue b/frontend/src/features/seller/views/MobileSellerListingCreateView.vue index 3f3da8b..d1800fc 100644 --- a/frontend/src/features/seller/views/MobileSellerListingCreateView.vue +++ b/frontend/src/features/seller/views/MobileSellerListingCreateView.vue @@ -532,28 +532,27 @@ function selectRadio(value: T, setter: (value: T) => void) {

押金与价格

- - - - +
+ +
+ + +
+

+ {{ priceConfig.deposit_placeholder }} +

+ +