From 5f6496c661a7d2a12fadbd87fca202b76bd15328 Mon Sep 17 00:00:00 2001
From: zzh <1368735060@qq.com>
Date: Tue, 20 Oct 2026 11:44:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=9B=E5=BB=BA=E8=BF=90=E5=8D=95?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF=E5=8D=A1=E7=89=87=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E4=B8=8B=E5=8D=95=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=B8=8E?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../CreateLogisticsModal.vue                  | 637 +++++++++++++-----
 1 file changed, 461 insertions(+), 176 deletions(-)

diff --git a/src/views/order/platformStoreOrder/CreateLogisticsModal.vue b/src/views/order/platformStoreOrder/CreateLogisticsModal.vue
index 699e6b4..f495c7f 100644
--- a/src/views/order/platformStoreOrder/CreateLogisticsModal.vue
+++ b/src/views/order/platformStoreOrder/CreateLogisticsModal.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import { Modal } from '@arco-design/web-vue'
-import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon'
+import { IconPlus, IconDelete, IconQuestionCircle } from '@arco-design/web-vue/es/icon'
 import {
   batchCreatePlatformStoreFulfill,
   batchCreatePlatformStoreFulfillWms,
@@ -18,6 +19,7 @@ import { getExportQualificationList } from '@/api/customer/exportQualification'
 import { getDictListAll } from '@/api/system/dict'
 import { resolveOmsAssetUrl } from '@/api/oms/common'
 import SlidingTabs from '@/components/SlidingTabs/index.vue'
+import ExportCustoms9610GuideModal from '@/views/order/placeOrder/components/ExportCustoms9610GuideModal.vue'
 import { $baseMessage } from '@/utils'
 import { normalizeCargoAttributeCode } from '@/utils/cargoAttribute'
 import { normalizeListRow, pickField } from '@/utils/warehouseListMapper'
@@ -102,6 +104,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const router = useRouter()
 const loading = ref(false)
 const submitting = ref(false)
 const productCode = ref<string>()
@@ -125,21 +128,22 @@ const batchMatchDeclaration = ref(false)
 const batchQtyPerOrder = ref(1)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
-/** 运单基本信息（对齐下单页） */
+/** 运单基本信息（对齐下单页：字符串输入 + liquid-card 表单交互） */
 const cargoAttribute = ref('general')
-const actualWeight = ref<number | undefined>(undefined)
-const quantity = ref<number>(1)
-const lengthCm = ref<number | undefined>(10)
-const widthCm = ref<number | undefined>(10)
-const heightCm = ref<number | undefined>(10)
+const actualWeight = ref('')
+const quantity = ref('1')
+const lengthCm = ref('10')
+const widthCm = ref('10')
+const heightCm = ref('10')
 const exportCustomsMode = ref(SAMPLE_EXPORT_CUSTOMS_MODE_CODE)
-const exportQualificationId = ref<number | undefined>()
+const exportQualificationId = ref<string>()
 const platformCode = ref<string>()
 const inboundMethod = ref<'selfShip' | 'doorPickup'>('selfShip')
 const senderAddressId = ref<number | undefined>()
 const expectPickupTime = ref<string>()
 const agreementChecked = ref(false)
 const agreementModalVisible = ref(false)
+const exportCustomsGuideVisible = ref(false)
 const dictLoading = ref(false)
 const cargoAttributeOptions = ref<SelectOption[]>([])
 const exportCustomsModeOptions = ref<SelectOption[]>([])
@@ -147,6 +151,10 @@ const ecommercePlatformOptions = ref<SelectOption[]>([])
 const exportQualificationOptions = ref<QualOption[]>([])
 const pickupAddressOptions = ref<Array<{ label: string; value: number }>>([])
 
+function goToExportQualificationManage() {
+  router.push({ path: '/user/exportQualification' })
+}
+
 const modalVisible = computed({
   get: () => props.visible,
   set: (v: boolean) => emit('update:visible', v),
@@ -238,6 +246,11 @@ const basicInfoReady = computed(() => {
   return true
 })
 
+function parsePositiveNumber(raw: unknown) {
+  const n = Number(String(raw ?? '').trim())
+  return Number.isFinite(n) && n > 0 ? n : undefined
+}
+
 const canSubmit = computed(() => {
   if (!basicInfoReady.value) return false
   if (!agreementChecked.value) return false
@@ -325,7 +338,7 @@ async function loadExportQualifications() {
     if (!exportQualificationId.value) {
       const def =
         exportQualificationOptions.value.find((x) => x.isDefault) || exportQualificationOptions.value[0]
-      exportQualificationId.value = def?.id
+      exportQualificationId.value = def ? String(def.id) : undefined
     }
   } catch {
     exportQualificationOptions.value = []
@@ -363,13 +376,15 @@ function openAgreementModal() {
 function buildParcelBasicPayload() {
   return {
     cargoAttribute: normalizeCargoAttributeCode(cargoAttribute.value),
-    actualWeight: Number(actualWeight.value),
-    quantity: Number(quantity.value),
-    length: Number(lengthCm.value),
-    width: Number(widthCm.value),
-    height: Number(heightCm.value),
+    actualWeight: parsePositiveNumber(actualWeight.value),
+    quantity: parsePositiveNumber(quantity.value),
+    length: parsePositiveNumber(lengthCm.value),
+    width: parsePositiveNumber(widthCm.value),
+    height: parsePositiveNumber(heightCm.value),
     exportCustomsMode: String(exportCustomsMode.value || '').trim() || resolveExportCustomsMode9610Simple(),
-    exportQualificationId: needExportQualification.value ? exportQualificationId.value : undefined,
+    exportQualificationId: needExportQualification.value
+      ? parsePositiveNumber(exportQualificationId.value)
+      : undefined,
     platformCode: needExportQualification.value ? platformCode.value : undefined,
     inboundMethod: inboundMethod.value,
     senderAddressId: inboundMethod.value === 'doorPickup' ? senderAddressId.value : undefined,
@@ -848,11 +863,11 @@ watch(
     batchMatchDeclaration.value = false
     batchQtyPerOrder.value = 1
     cargoAttribute.value = 'general'
-    actualWeight.value = undefined
-    quantity.value = 1
-    lengthCm.value = 10
-    widthCm.value = 10
-    heightCm.value = 10
+    actualWeight.value = ''
+    quantity.value = '1'
+    lengthCm.value = '10'
+    widthCm.value = '10'
+    heightCm.value = '10'
     exportCustomsMode.value = SAMPLE_EXPORT_CUSTOMS_MODE_CODE
     exportQualificationId.value = undefined
     platformCode.value = undefined
@@ -866,7 +881,7 @@ watch(
     const first = drafts.value[0]
     if (first && !(Number(actualWeight.value) > 0)) {
       const est = first.lines.reduce((s, x) => s + Math.max(1, Number(x.quantity) || 0) * 0.01, 0)
-      actualWeight.value = Number(est.toFixed(3)) || 0.01
+      actualWeight.value = String(Number(est.toFixed(3)) || 0.01)
     }
     await loadExportQualifications()
     await loadPickupAddresses()
@@ -933,10 +948,11 @@ watch(inboundMethod, (method) => {
         }}
       </p>
 
-      <section class="psc-basic">
-        <header class="psc-basic__head">
-          <strong>{{ t('order.placeOrder.single.stepBasic') }}</strong>
-          <span class="psc-config__meta">
+      <section class="single-info-card liquid-card psc-basic-card">
+        <header class="single-info-card__header">
+          <span class="single-section-index">1</span>
+          <span class="single-section-title">{{ t('order.placeOrder.single.stepBasic') }}</span>
+          <span class="psc-basic-meta">
             {{
               t('order.platformStoreOrder.createLogistics.readyMeta', {
                 total: drafts.length,
@@ -945,134 +961,217 @@ watch(inboundMethod, (method) => {
             }}
           </span>
         </header>
-        <div class="psc-basic__grid">
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">
-              {{
-                isFulfillWms
-                  ? t('order.platformStoreOrder.createFulfillWms.product')
-                  : t('order.platformStoreOrder.createLogistics.product')
-              }}
-              <em>*</em>
-            </span>
+        <a-form layout="vertical" class="single-form-grid single-form-grid--compact">
+          <a-form-item
+            :label="
+              isFulfillWms
+                ? t('order.platformStoreOrder.createFulfillWms.product')
+                : t('order.platformStoreOrder.createLogistics.product')
+            "
+            required
+          >
             <a-select
               v-model="productCode"
               allow-search
-              :options="productOptions"
+              placeholder="请选择"
               :loading="dictLoading"
-              :placeholder="t('order.platformStoreOrder.form.product')"
-            />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">客户单号 <em>*</em></span>
+            >
+              <a-option
+                v-for="opt in productOptions"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="客户单号" required>
             <a-input
               v-if="activeDraft"
               v-model="activeDraft.clientNo"
               :placeholder="activeDraft.platformOrderNo || '客户单号'"
             />
             <a-input v-else disabled placeholder="—" />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">货物属性 <em>*</em></span>
+          </a-form-item>
+          <a-form-item label="货物属性" required>
             <a-select
               v-model="cargoAttribute"
               allow-search
-              :options="cargoAttributeOptions"
-              :loading="dictLoading"
               placeholder="请选择"
-            />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">仓库 <em>*</em></span>
+              :loading="dictLoading"
+            >
+              <a-option
+                v-for="opt in cargoAttributeOptions"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="仓库" required>
             <a-select
               v-model="warehouseId"
               allow-search
-              :options="warehouseOptions"
-              :placeholder="t('warehouse.common.warehouse')"
-            />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">实重(kg) <em>*</em></span>
-            <a-input-number v-model="actualWeight" :min="0.01" :precision="3" hide-button style="width: 100%" />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">包裹数量 <em>*</em></span>
-            <a-input-number v-model="quantity" :min="1" :precision="0" hide-button style="width: 100%" />
-          </div>
-          <div class="psc-basic__item">
-            <span class="psc-basic__label">出口报关方式</span>
+              placeholder="请选择"
+            >
+              <a-option
+                v-for="opt in warehouseOptions"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="实重(kg)" required>
+            <a-input v-model="actualWeight" placeholder="请输入" />
+          </a-form-item>
+          <a-form-item label="包裹数量" required>
+            <a-input v-model="quantity" placeholder="请输入" />
+          </a-form-item>
+          <a-form-item class="export-customs-mode-item">
+            <template #label>
+              <span class="export-customs-mode-label">
+                出口报关方式
+                <IconQuestionCircle
+                  class="export-customs-help-icon"
+                  @click.stop.prevent="exportCustomsGuideVisible = true"
+                />
+              </span>
+            </template>
             <a-select
               v-model="exportCustomsMode"
+              allow-clear
               allow-search
-              :options="exportCustomsModeOptions"
+              :placeholder="t('order.placeOrder.single.exportCustomsPlaceholder')"
               :loading="dictLoading"
-              placeholder="请选择"
-            />
-          </div>
-          <div v-if="needExportQualification" class="psc-basic__item">
-            <span class="psc-basic__label">出口资质备案 <em>*</em></span>
-            <a-select
-              v-model="exportQualificationId"
-              allow-search
-              :options="exportQualificationOptions.map((x) => ({ label: x.label, value: x.id }))"
-              placeholder="请选择"
-            />
-          </div>
-          <div v-if="needExportQualification" class="psc-basic__item">
-            <span class="psc-basic__label">电商平台 <em>*</em></span>
+            >
+              <a-option
+                v-for="opt in exportCustomsModeOptions"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item
+            v-if="needExportQualification"
+            :label="t('order.placeOrder.single.exportQualification')"
+            required
+          >
+            <div class="export-qualification-field">
+              <a-select
+                v-model="exportQualificationId"
+                allow-search
+                :placeholder="t('order.placeOrder.single.exportQualificationPlaceholder')"
+              >
+                <a-option
+                  v-for="opt in exportQualificationOptions"
+                  :key="opt.id"
+                  :value="String(opt.id)"
+                >
+                  {{ opt.label }}
+                </a-option>
+              </a-select>
+              <a-button type="text" size="mini" @click="goToExportQualificationManage">
+                {{ t('order.placeOrder.single.exportQualificationManage') }}
+              </a-button>
+            </div>
+          </a-form-item>
+          <a-form-item
+            v-if="needExportQualification"
+            :label="t('order.placeOrder.single.platformCode')"
+            required
+          >
             <a-select
               v-model="platformCode"
+              allow-clear
               allow-search
-              :options="ecommercePlatformOptions"
-              placeholder="请选择"
-            />
-          </div>
-          <div class="psc-basic__item psc-basic__item--dims">
-            <span class="psc-basic__label">长宽高(cm) <em>*</em></span>
-            <div class="psc-dims">
-              <a-input-number v-model="lengthCm" :min="0.1" :precision="1" hide-button placeholder="长" />
-              <span>×</span>
-              <a-input-number v-model="widthCm" :min="0.1" :precision="1" hide-button placeholder="宽" />
-              <span>×</span>
-              <a-input-number v-model="heightCm" :min="0.1" :precision="1" hide-button placeholder="高" />
+              :placeholder="t('order.placeOrder.single.platformCodePlaceholder')"
+              :loading="dictLoading"
+            >
+              <a-option
+                v-for="opt in ecommercePlatformOptions"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item class="dims-form-item" label="长宽高(cm)" required>
+            <div class="dims-group">
+              <a-input v-model="lengthCm" placeholder="长" />
+              <span class="dims-sep">×</span>
+              <a-input v-model="widthCm" placeholder="宽" />
+              <span class="dims-sep">×</span>
+              <a-input v-model="heightCm" placeholder="高" />
             </div>
-          </div>
-          <div class="psc-basic__item psc-basic__item--inbound">
-            <span class="psc-basic__label">到仓方式 <em>*</em></span>
-            <a-radio-group v-model="inboundMethod" type="button" size="small">
+          </a-form-item>
+          <a-form-item label="到仓方式" required class="inbound-method-item">
+            <a-radio-group
+              v-model="inboundMethod"
+              type="button"
+              size="small"
+              class="inbound-method-radios"
+            >
               <a-radio value="selfShip">自寄到仓</a-radio>
-              <a-radio value="doorPickup">上门揽收</a-radio>
+              <a-radio value="doorPickup">
+                <span class="inbound-method-pickup-label">
+                  上门揽收
+                  <a-tooltip content="上门揽收为付费服务，费用通常低于市场价。" position="top">
+                    <IconQuestionCircle class="inbound-method-help" @click.stop.prevent />
+                  </a-tooltip>
+                </span>
+              </a-radio>
             </a-radio-group>
-          </div>
+          </a-form-item>
           <template v-if="inboundMethod === 'doorPickup'">
-            <div class="psc-basic__item">
-              <span class="psc-basic__label">揽收地址 <em>*</em></span>
+            <a-form-item label="揽收地址" required>
               <a-select
                 v-model="senderAddressId"
                 allow-search
-                :options="pickupAddressOptions"
-                placeholder="请选择揽收地址"
-              />
-            </div>
-            <div class="psc-basic__item">
-              <span class="psc-basic__label">期望揽收时间 <em>*</em></span>
+                allow-clear
+                placeholder="请选择国内揽收地址"
+                @focus="loadPickupAddresses"
+              >
+                <a-option
+                  v-for="opt in pickupAddressOptions"
+                  :key="opt.value"
+                  :value="opt.value"
+                >
+                  {{ opt.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item label="期望揽收时间" required>
               <a-date-picker
                 v-model="expectPickupTime"
                 show-time
-                format="YYYY-MM-DD HH:mm"
+                format="YYYY-MM-DD HH:mm:ss"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 style="width: 100%"
               />
-            </div>
+            </a-form-item>
           </template>
-        </div>
-        <div class="psc-agreement">
+        </a-form>
+      </section>
+
+      <div class="psc-submit-bar liquid-card">
+        <div class="order-agreement-bar">
           <a-checkbox v-model="agreementChecked" />
-          <span class="psc-agreement__link" @click="openAgreementModal">
+          <span class="agreement-link" @click="openAgreementModal">
             {{ t('order.placeOrder.agreement.label') }}
           </span>
         </div>
-      </section>
+        <span class="psc-submit-bar__hint">
+          {{ productLabel }}
+          <template v-if="warehouseId"> · {{ warehouseLabel }}</template>
+          · {{ drafts.length }} {{ t('order.platformStoreOrder.createLogistics.unitOrders') }}
+        </span>
+      </div>
 
       <div v-if="showBatchBar" class="psc-batch-bar">
         <div class="psc-batch-bar__left">
@@ -1404,11 +1503,6 @@ watch(inboundMethod, (method) => {
         </section>
       </div>
 
-      <div class="psc-footer-summary">
-        {{ productLabel }}
-        <template v-if="warehouseId"> · {{ warehouseLabel }}</template>
-        · {{ drafts.length }} {{ t('order.platformStoreOrder.createLogistics.unitOrders') }}
-      </div>
     </div>
   </a-modal>
 
@@ -1421,6 +1515,8 @@ watch(inboundMethod, (method) => {
   >
     <pre class="psc-agreement-body">{{ AGREEMENT_TEXT }}</pre>
   </a-modal>
+
+  <ExportCustoms9610GuideModal v-model:visible="exportCustomsGuideVisible" />
 </template>
 
 <style scoped lang="less">
@@ -1448,79 +1544,276 @@ watch(inboundMethod, (method) => {
   flex-shrink: 0;
 }
 
-.psc-basic {
+.liquid-card {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  isolation: isolate;
+  border: 1px solid var(--app-card-border);
+  border-radius: 16px !important;
+  background: var(--app-card-bg);
+  box-shadow:
+    0 8px 24px rgba(15, 23, 42, 0.05),
+    0 1px 2px rgba(15, 23, 42, 0.03);
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.psc-basic-card {
   margin-bottom: 10px;
-  padding: 12px;
-  background: var(--color-fill-2);
-  border-radius: 4px;
+  padding: 14px 16px 12px;
+  box-sizing: border-box;
   flex-shrink: 0;
 }
 
-.psc-basic__head {
+.single-info-card__header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 10px;
-
-  strong {
-    font-size: 14px;
-    color: var(--color-text-1);
-  }
+  gap: 8px;
+  margin-bottom: 12px;
 }
 
-.psc-basic__grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px 12px;
-}
-
-.psc-basic__item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-.psc-basic__label {
+.single-section-index {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 12px;
+  font-weight: 600;
   color: var(--color-text-2);
+  background: var(--color-fill-2);
+  flex-shrink: 0;
+}
 
-  em {
-    color: #f53f3f;
-    font-style: normal;
-    margin-left: 2px;
+.single-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  line-height: 1.4;
+}
+
+.psc-basic-meta {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--color-text-3);
+}
+
+.single-form-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px 16px;
+
+  &--compact {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :deep(.arco-form-item) {
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :deep(.arco-form-item-label-col) {
+    width: 100%;
+    flex: none;
+    margin-bottom: 6px;
+    text-align: left !important;
+  }
+
+  :deep(.arco-form-item-wrapper-col) {
+    width: 100%;
+    flex: none;
+  }
+
+  :deep(.arco-form-item-label) {
+    line-height: 1.4;
+    color: var(--color-text-2);
+    font-size: 13px;
+    font-weight: 500;
+    justify-content: flex-start !important;
+    text-align: left !important;
+    width: 100%;
+  }
+
+  :deep(.arco-form-item-label-required-symbol) {
+    margin-right: 2px;
+    margin-left: 0;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-select-view-multiple),
+  :deep(.arco-picker) {
+    min-height: 32px;
+    border-radius: 4px;
+    background-color: var(--app-card-bg);
+    border: 1px solid var(--color-border-2);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  :deep(.arco-input-wrapper:hover),
+  :deep(.arco-select-view-single:hover),
+  :deep(.arco-select-view-multiple:hover),
+  :deep(.arco-picker:hover) {
+    border-color: rgba(var(--primary-6), 0.45);
+  }
+
+  :deep(.arco-input-wrapper.arco-input-focus),
+  :deep(.arco-select-view-single.arco-select-view-focus),
+  :deep(.arco-select-view-multiple.arco-select-view-focus),
+  :deep(.arco-picker-focused) {
+    border-color: var(--app-primary-color);
+    box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.12);
+  }
+
+  :deep(.arco-input),
+  :deep(.arco-select-view-value) {
+    font-size: 13px;
+  }
+
+  :deep(.arco-select) {
+    width: 100%;
   }
 }
 
-.psc-basic__item--dims,
-.psc-basic__item--inbound {
-  grid-column: span 1;
-}
-
-.psc-dims {
+.dims-group {
   display: flex;
   align-items: center;
   gap: 6px;
+  width: 100%;
+  min-width: 0;
 
-  .arco-input-number {
+  :deep(.arco-input-wrapper) {
     flex: 1;
     min-width: 0;
   }
 }
 
-.psc-agreement {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding-top: 10px;
-  border-top: 1px solid var(--color-border-2);
+.dims-sep {
+  flex-shrink: 0;
+  color: var(--color-text-3);
+  font-size: 13px;
+  line-height: 1;
 }
 
-.psc-agreement__link {
+.inbound-method-item {
+  grid-column: 1 / -1;
+}
+
+.inbound-method-radios {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+
+  :deep(.arco-radio-group-button) {
+    background: var(--color-fill-2);
+  }
+
+  :deep(.arco-radio-button) {
+    color: var(--color-text-2);
+
+    &:hover {
+      color: var(--app-primary-color, rgb(var(--primary-6)));
+    }
+
+    &.arco-radio-checked {
+      color: #fff;
+      background-color: var(--app-primary-color, rgb(var(--primary-6)));
+      border-color: var(--app-primary-color, rgb(var(--primary-6)));
+
+      &:hover {
+        color: #fff;
+        background-color: var(--app-primary-color-hover, var(--app-primary-color));
+        border-color: var(--app-primary-color-hover, var(--app-primary-color));
+      }
+    }
+  }
+
+  :deep(.arco-radio-checked .arco-radio-button-content) {
+    color: #fff;
+  }
+}
+
+.inbound-method-pickup-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.inbound-method-help {
+  color: inherit;
+  opacity: 0.75;
+  font-size: 13px;
+  cursor: help;
+  vertical-align: middle;
+
+  &:hover {
+    opacity: 1;
+    color: inherit;
+  }
+}
+
+.export-customs-mode-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.export-qualification-field {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+
+  :deep(.arco-select) {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.export-customs-help-icon {
+  color: var(--color-text-3);
+  font-size: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--app-primary-color);
+  }
+}
+
+.psc-submit-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+  padding: 12px 16px;
+  flex-shrink: 0;
+}
+
+.order-agreement-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--color-text-2);
+  flex-shrink: 0;
+}
+
+.agreement-link {
   color: var(--app-primary-color);
   cursor: pointer;
-  font-size: 13px;
   user-select: none;
 
   &:hover {
@@ -1528,6 +1821,12 @@ watch(inboundMethod, (method) => {
   }
 }
 
+.psc-submit-bar__hint {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--color-text-3);
+}
+
 .psc-agreement-body {
   margin: 0;
   white-space: pre-wrap;
@@ -1540,12 +1839,6 @@ watch(inboundMethod, (method) => {
   overflow: auto;
 }
 
-.psc-config__meta {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--color-text-3);
-}
-
 .psc-batch-bar {
   display: flex;
   flex-wrap: wrap;
@@ -2180,12 +2473,4 @@ watch(inboundMethod, (method) => {
   }
 }
 
-.psc-footer-summary {
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid var(--color-border-2);
-  font-size: 13px;
-  color: var(--color-text-2);
-  flex-shrink: 0;
-}
 </style>