From c3f05a342e678279899ea26203f069a1a60b8a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 26 Aug 2026 15:38:39 +0800 Subject: [PATCH] =?UTF-8?q?style(forms):=20=E5=85=A8=E7=AB=99=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=A1=B9=E9=97=B4=E8=B7=9D=E7=BB=9F=E4=B8=80=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E4=B8=BA14px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统一调整settlement、business、payment模块以及全局样式中.el-form-item的margin-bottom从16/18/20px改为14px - 保留搜索栏相关的.el-form-item间距为8px和特殊分组risk-disposal的28px - 修正多个页面和组件的局部样式覆盖问题，确保填写区表单项间距一致 - 更新element-ui.scss中.dialog-form--carded对应的margin-bottom为14px - 维护部分表单组件原本使用的重要样式不变，保证视觉统一且不影响特殊布局 --- .workbuddy/memory/2026-08-26.md | 27 +++++++++++++++++++ src/components/cron-editor/main.vue | 2 +- src/styles/element-ui.scss | 2 +- .../components/business-crud-page.vue | 4 +-- .../components/master-order-dispatch.vue | 2 +- src/views/business/contract-manage.vue | 2 +- src/views/business/loading-manage.vue | 2 +- src/views/business/project-apply.vue | 2 +- src/views/business/voucher-manage.vue | 2 +- src/views/payment/bill-ledger-form.vue | 2 +- src/views/payment/bill-payment-form.vue | 2 +- src/views/payment/invoice-receipt-form.vue | 2 +- .../payment/payment-application-form.vue | 2 +- .../components/formal-settlement-editor.vue | 2 +- .../components/pre-settlement-editor.vue | 2 +- .../settlement-adjustment-editor.vue | 2 +- .../transport-reconciliation-editor.vue | 2 +- .../settlement/receivable-payable-detail.vue | 2 +- src/views/system/user.vue | 2 +- 19 files changed, 46 insertions(+), 19 deletions(-) diff --git a/.workbuddy/memory/2026-08-26.md b/.workbuddy/memory/2026-08-26.md index 2f22c02..d626039 100644 --- a/.workbuddy/memory/2026-08-26.md +++ b/.workbuddy/memory/2026-08-26.md @@ -68,3 +68,30 @@ customer-archive.vue:4980(按钮 min-width)、cargo-type.vue:604(选择器拼错 line-height: normal; } ``` + +## 全站表单项间距统一 14px + +**诉求**: `settlement/pre-settlement/form?mode=add` 中 `.el-form-item` 间距偏大，要求统一为 14px 且全站一致（用户指"表单项间距"）。 + +**排查**: 全站 `.el-form-item` 的 `margin-bottom` 取值不一致——表单填写区有 16px / 18px / 20px， +搜索栏统一 8px（保留），个别特殊分组 28px（risk-disposal，保留）。全局 `.el-form-item--default` +已是 14px，但各页面 scoped `:deep(.xxx .el-form-item)` 覆盖成了 16/18/20px。 + +**改动（表单填写区统一 14px，16/18/20 → 14）**: +- settlement: `components/pre-settlement-editor.vue:1637`(16→14)、 + `components/formal-settlement-editor.vue:1560`(16→14)、 + `receivable-payable-detail.vue:1860`(16→14)、 + `components/transport-reconciliation-editor.vue:805`(16→14)、 + `components/settlement-adjustment-editor.vue:560`(16→14) +- business: `voucher-manage.vue:1022`(16→14)、`loading-manage.vue:2751`(16→14)、 + `project-apply.vue:2091`(16→14)、`contract-manage.vue:2253`(16→14)、 + `components/business-crud-page.vue:13380/13894`(16→14)、 + `components/master-order-dispatch.vue:700`(16→14) +- payment: `invoice-receipt-form.vue:755`(16→14)、`user.vue:1097`(16→14)、 + `bill-ledger-form.vue:564`(16→14)、`payment-application-form.vue:1324`(16→14)、 + `bill-payment-form.vue:382`(16→14) +- 全局: `components/cron-editor/main.vue:579`(18→14)、 + `styles/element-ui.scss:430`(`.dialog-form--carded` 20→14) + +**保留未动**: 所有 `__search` 搜索栏的 8px、risk-disposal 的 28px 特殊分组、transportCapacity +vehicle/driver/ship 与 customer-archive 等本就是 14px（含 !important）。 diff --git a/src/components/cron-editor/main.vue b/src/components/cron-editor/main.vue index 7d46d6f..a6963c8 100644 --- a/src/components/cron-editor/main.vue +++ b/src/components/cron-editor/main.vue @@ -576,7 +576,7 @@ export default { } .mode-content :deep(.el-form-item) { - margin-bottom: 18px; + margin-bottom: 14px; } .mode-content :deep(.el-form-item:last-child) { diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 9289173..8a477ac 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -427,7 +427,7 @@ .dialog-form--carded { .el-form-item { align-items: center; - margin-bottom: 20px; + margin-bottom: 14px; } .el-form-item__label { diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index 4aeb52f..47d5eaf 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -13377,7 +13377,7 @@ export default { &__dispatch-shipping-form { :deep(.el-form-item) { - margin-bottom: 16px; + margin-bottom: 14px; } } @@ -13891,7 +13891,7 @@ export default { width: 100%; :deep(.el-form-item) { - margin-bottom: 16px; + margin-bottom: 14px; } :deep(.el-select), diff --git a/src/views/business/components/master-order-dispatch.vue b/src/views/business/components/master-order-dispatch.vue index a27800a..1a6ae21 100644 --- a/src/views/business/components/master-order-dispatch.vue +++ b/src/views/business/components/master-order-dispatch.vue @@ -697,7 +697,7 @@ export default { .route-overview__line { flex: 0 1 56px; min-width: 24px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; } .segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } } .segment-content { padding: 16px 24px; } -.dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } :deep(.el-input-group__append .el-select) { width: auto; } } +.dispatch-form { :deep(.el-form-item) { margin-bottom: 14px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } :deep(.el-input-group__append .el-select) { width: auto; } } .transport-type-field :deep(.el-input) { width: 240px; } .goods-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 12px; padding: 14px 24px; border-top: 1px solid #eff1f7; border-bottom: 1px solid #eff1f7; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } span { color: #909399; font-size: 13px; } } .freight-heading { margin: 16px 0 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } } diff --git a/src/views/business/contract-manage.vue b/src/views/business/contract-manage.vue index f54b935..77f0e57 100644 --- a/src/views/business/contract-manage.vue +++ b/src/views/business/contract-manage.vue @@ -2250,7 +2250,7 @@ export default { :deep(.el-form-item) { align-items: center; - margin-bottom: 16px; + margin-bottom: 14px; } :deep(.el-form-item__label) { diff --git a/src/views/business/loading-manage.vue b/src/views/business/loading-manage.vue index a85e52b..5552a60 100644 --- a/src/views/business/loading-manage.vue +++ b/src/views/business/loading-manage.vue @@ -2748,7 +2748,7 @@ export default { } :deep(.el-form-item) { - margin-bottom: 16px; + margin-bottom: 14px; } :deep(.el-form-item__label) { diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue index 75703cb..d49a735 100644 --- a/src/views/business/project-apply.vue +++ b/src/views/business/project-apply.vue @@ -2088,7 +2088,7 @@ export default { } :deep(.el-form-item) { - margin-bottom: 16px; + margin-bottom: 14px; } :deep(.el-form-item__label) { diff --git a/src/views/business/voucher-manage.vue b/src/views/business/voucher-manage.vue index c540333..14506ce 100644 --- a/src/views/business/voucher-manage.vue +++ b/src/views/business/voucher-manage.vue @@ -1019,7 +1019,7 @@ load(); display: none; } &__upload-form :deep(.el-form-item) { - margin-bottom: 16px; + margin-bottom: 14px; } &__upload-tip { margin-left: 16px; diff --git a/src/views/payment/bill-ledger-form.vue b/src/views/payment/bill-ledger-form.vue index 6e42578..3ed6ac0 100644 --- a/src/views/payment/bill-ledger-form.vue +++ b/src/views/payment/bill-ledger-form.vue @@ -561,7 +561,7 @@ export default {