style(forms): 全站表单项间距统一调整为14px

- 统一调整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
- 维护部分表单组件原本使用的重要样式不变,保证视觉统一且不影响特殊布局
This commit is contained in:
2026-08-26 15:38:39 +08:00
parent dca137df8d
commit c3f05a342e
19 changed files with 46 additions and 19 deletions
+27
View File
@@ -68,3 +68,30 @@ customer-archive.vue:4980(按钮 min-width)、cargo-type.vue:604(选择器拼错
line-height: normal; line-height: normal;
} }
``` ```
## 全站表单项间距统一 14px
**诉求**: `settlement/pre-settlement/form?mode=add``.el-form-item` 间距偏大,要求统一为 14px 且全站一致(用户指"表单项间距")。
**排查**: 全站 `.el-form-item``margin-bottom` 取值不一致——表单填写区有 16px / 18px / 20px
搜索栏统一 8px(保留),个别特殊分组 28pxrisk-disposal,保留)。全局 `.el-form-item--default`
已是 14px,但各页面 scoped `:deep(.xxx .el-form-item)` 覆盖成了 16/18/20px。
**改动(表单填写区统一 14px16/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)。
+1 -1
View File
@@ -576,7 +576,7 @@ export default {
} }
.mode-content :deep(.el-form-item) { .mode-content :deep(.el-form-item) {
margin-bottom: 18px; margin-bottom: 14px;
} }
.mode-content :deep(.el-form-item:last-child) { .mode-content :deep(.el-form-item:last-child) {
+1 -1
View File
@@ -427,7 +427,7 @@
.dialog-form--carded { .dialog-form--carded {
.el-form-item { .el-form-item {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 14px;
} }
.el-form-item__label { .el-form-item__label {
@@ -13377,7 +13377,7 @@ export default {
&__dispatch-shipping-form { &__dispatch-shipping-form {
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
} }
@@ -13891,7 +13891,7 @@ export default {
width: 100%; width: 100%;
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
:deep(.el-select), :deep(.el-select),
@@ -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; } .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-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; } .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; } .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; } } .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; } } .freight-heading { margin: 16px 0 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } }
+1 -1
View File
@@ -2250,7 +2250,7 @@ export default {
:deep(.el-form-item) { :deep(.el-form-item) {
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 14px;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
+1 -1
View File
@@ -2748,7 +2748,7 @@ export default {
} }
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
+1 -1
View File
@@ -2088,7 +2088,7 @@ export default {
} }
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
+1 -1
View File
@@ -1019,7 +1019,7 @@ load();
display: none; display: none;
} }
&__upload-form :deep(.el-form-item) { &__upload-form :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
&__upload-tip { &__upload-tip {
margin-left: 16px; margin-left: 16px;
+1 -1
View File
@@ -561,7 +561,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bill-ledger-form-page__form :deep(.el-form-item) { .bill-ledger-form-page__form :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.bill-ledger-form-page__basic-grid { .bill-ledger-form-page__basic-grid {
display: grid; display: grid;
+1 -1
View File
@@ -379,7 +379,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bill-payment-form-page__form :deep(.el-form-item) { .bill-payment-form-page__form :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.bill-payment-form-page__form :deep(.el-input), .bill-payment-form-page__form :deep(.el-input),
.bill-payment-form-page__form :deep(.el-input-number), .bill-payment-form-page__form :deep(.el-input-number),
+1 -1
View File
@@ -752,7 +752,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.receipt-form-page__form :deep(.el-form-item) { .receipt-form-page__form :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.receipt-form-page__form :deep(.el-select), .receipt-form-page__form :deep(.el-select),
.receipt-form-page__form :deep(.el-input-number) { .receipt-form-page__form :deep(.el-input-number) {
@@ -1321,7 +1321,7 @@ export default {
display: inline-flex; display: inline-flex;
} }
.payment-form-page :deep(.el-form-item) { .payment-form-page :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.payment-form-page :deep(.el-input-number .el-input__inner) { .payment-form-page :deep(.el-input-number .el-input__inner) {
text-align: left; text-align: left;
@@ -1557,7 +1557,7 @@ export default {
gap: 8px; gap: 8px;
} }
.formal-editor :deep(.el-form-item) { .formal-editor :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.formal-editor :deep(.el-form-item__content) { .formal-editor :deep(.el-form-item__content) {
line-height: normal; line-height: normal;
@@ -1634,7 +1634,7 @@ export default {
} }
:deep(.pre-settlement-editor .el-form-item) { :deep(.pre-settlement-editor .el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
:deep(.pre-settlement-editor .el-table), :deep(.pre-settlement-editor .el-table),
@@ -557,7 +557,7 @@ export default {
gap: 8px; gap: 8px;
} }
.settlement-adjustment-editor :deep(.el-form-item) { .settlement-adjustment-editor :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.settlement-adjustment-editor :deep(.el-table) { .settlement-adjustment-editor :deep(.el-table) {
--el-table-border-color: #eff1f7; --el-table-border-color: #eff1f7;
@@ -802,7 +802,7 @@ export default {
display: none; display: none;
} }
.reconciliation-editor :deep(.el-form-item) { .reconciliation-editor :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
} }
.reconciliation-editor :deep(.el-table) { .reconciliation-editor :deep(.el-table) {
--el-table-border-color: #eff1f7; --el-table-border-color: #eff1f7;
@@ -1857,7 +1857,7 @@ export default {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 16px; margin-bottom: 14px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
+1 -1
View File
@@ -1094,7 +1094,7 @@ export default {
} }
.user-edit-dialog .el-form-item { .user-edit-dialog .el-form-item {
margin-bottom: 16px; margin-bottom: 14px;
} }
.user-edit-dialog .el-form-item__label { .user-edit-dialog .el-form-item__label {