diff --git a/src/modules/cross-border/components/BusinessOrdersView.vue b/src/modules/cross-border/components/BusinessOrdersView.vue index a622b9f..17419d3 100644 --- a/src/modules/cross-border/components/BusinessOrdersView.vue +++ b/src/modules/cross-border/components/BusinessOrdersView.vue @@ -68,7 +68,9 @@ function transportColumns(looseboard: boolean): ColumnDefinition[] { ]), { key: 'status', label: '状态', width: 130 }, ...(!looseboard ? [{ key: 'failureReason', label: '失败 / 拒绝原因', width: 240 }] : []), - { key: 'fleetArrangement', label: '承运安排', width: 190 }, + ...(looseboard + ? [{ key: 'fleetArrangement', label: '承运安排', width: 190 }] + : [{ key: 'createdAt', label: '创建时间', width: 180 }]), ] } @@ -99,7 +101,7 @@ const queryModel = computed({ const queryFields = computed(() => [ { key: 'orderNo', label: '订单号', type: 'input', placeholder: '请输入订单号' }, - { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: props.kind === 'trucking' ? '请输入 B 点或 C 点' : '请输入起运地或目的地' }, + { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: props.kind === 'trucking' ? '请输入取货地或目的地' : '请输入起运地或目的地' }, { key: 'status', label: '状态', @@ -312,9 +314,8 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
← 返回列表

{{ detail?.summary.orderNo || '订单详情' }}

- {{ detailStatus }} +
{{ detailStatus }}刷新
- 刷新
@@ -363,6 +364,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat .business-detail-heading { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--border); } .business-detail-heading-main { display: flex; min-width: 0; align-items: center; gap: 12px; } .business-detail-heading-main > div { min-width: 0; } +.business-detail-heading-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .business-detail-heading h2 { margin: 0; overflow: hidden; color: var(--navy); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; } .business-detail-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; } .business-detail-section { margin-top: 10px; } @@ -382,6 +384,21 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat .business-orders--create .page-head :deep(.el-button) { height: auto; min-height: 44px; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; } .business-orders--create .form-card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } +/* The detail page is intentionally calmer than the list: the order identity is + separated from the data grid, while values remain easy to scan at desktop size. */ +.business-detail-page { padding: 18px 20px 24px; border-color: #dbe4ef; border-radius: 10px; box-shadow: 0 2px 8px rgb(15 42 74 / 4%); } +.business-detail-heading { min-height: 58px; padding: 0 0 14px; border-bottom-color: #e5ebf3; } +.business-detail-heading-main { gap: 18px; } +.business-detail-heading-main :deep(.el-button) { padding: 0; font-size: 14px; } +.business-detail-heading h2 { font-size: 22px; letter-spacing: .01em; } +.business-detail-section { margin-top: 20px; } +.business-detail-section h3 { padding: 0 0 10px; border-bottom: 0; font-size: 15px; } +.detail-grid { border-color: #e2e8f0; } +.detail-grid div { min-height: 46px; gap: 12px; padding: 8px 14px; background: #fff; border-color: #e2e8f0; } +.detail-grid dt { color: #718096; font-size: 12px; } +.detail-grid dd { color: #1f3552; font-size: 14px; font-weight: 600; } +.arrangement-grid { background: #f8fafc; } + @media (max-width: 767px) { .business-orders { gap: 14px; } .page-head { align-items: flex-start; gap: 12px; } @@ -392,6 +409,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat .detail-grid div, .detail-grid div.is-wide { grid-column: auto; } .detail-grid dd { overflow-wrap: break-word; word-break: normal; } .business-detail-heading { align-items: flex-start; flex-direction: column; } + .business-detail-heading-actions { width: 100%; justify-content: space-between; } .form-card :deep(.el-form-item) { display: block; } .form-card :deep(.el-form-item__label) {