优化移动端押金 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;
 }