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:
@@ -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(保留),个别特殊分组 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)。
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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; } }
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user