feat(business-crud-page): 优化合同管理表单页为多分组卡片风格

- 为合同管理独立表单页设置 dialogCustomClass 以实现表单背景透明
- 按业务分区拆分表单列,分组渲染多张白底卡片,卡间距定为 12px
- 调整卡片边距由 16px 至 12px,优化视觉层次与空间感
- 统一多分组表单样式,标题区块采用主色蓝条突出显示
- 透明化弹窗内 Avue 表单背景,解决白卡叠白卡问题
- 兼顾表单底部按钮滚动展示,不同于弹窗底部浮动布局
This commit is contained in:
2026-08-21 08:55:56 +08:00
parent 63256a9d21
commit 10878d4aee
10 changed files with 115 additions and 24 deletions
+22
View File
@@ -586,6 +586,28 @@
background: #fff;
}
// 过程配置新增/编辑弹窗:avue-form 整体白卡透明化,
// 让 <section-card> 分组白卡(基本信息 / 现行过程节点 / 节点设置)独立成卡、卡间露出灰底,
// 与 business/project-apply 表单页的分组卡片风格统一
.process-config-dialog .avue-form {
background: transparent;
box-shadow: none;
padding: 0;
}
// formslot 外层 el-form-item 默认 margin-bottom 与 section-card 自身 margin 叠加会拉大卡距,
// 归零后卡间距统一为 section-card 自身的 12px(与 project-apply 一致)
.process-config-dialog .avue-form__group > .el-col > .el-form-item {
margin-bottom: 0;
}
// 抵消全局 .avue-crud__dialog .avue-dialog__footer 的 -30px 上移
// avue-form 已透明化,footer 若上移会压住最后一张分组卡片)
.process-config-dialog .avue-dialog__footer,
.avue-crud__dialog .process-config-dialog .avue-dialog__footer {
margin-top: 0 !important;
}
// 统一表格线条颜色
.el-table {
--el-table-border-color: #eff1f7;