feat(business-crud-page): 优化合同管理表单页为多分组卡片风格
- 为合同管理独立表单页设置 dialogCustomClass 以实现表单背景透明 - 按业务分区拆分表单列,分组渲染多张白底卡片,卡间距定为 12px - 调整卡片边距由 16px 至 12px,优化视觉层次与空间感 - 统一多分组表单样式,标题区块采用主色蓝条突出显示 - 透明化弹窗内 Avue 表单背景,解决白卡叠白卡问题 - 兼顾表单底部按钮滚动展示,不同于弹窗底部浮动布局
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user