style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局

- 新增全局弹窗灰底背景色,提升视觉一致性
- 新增通用分组白卡组件 section-card,标题融入卡头,支持额外插槽
- 统一 Avue 弹窗表单及分组为白卡样式
- 调整 common-route.vue 弹窗,使用 section-card 分组包裹查询条件与常用地址
- 改造 loading-manage.vue 弹窗所有分区,采用 section-card 统一风格
- 全局样式调整弹窗内容区表单项间距及两列表单布局工具类
- 在 main.js 全局注册 section-card 组件,便于项目统一复用
This commit is contained in:
2026-08-06 09:27:49 +08:00
parent 819a59e6fc
commit 8a262d9d41
6 changed files with 267 additions and 116 deletions

View File

@@ -207,6 +207,101 @@
justify-content: center;
}
// =====================================================================
// 弹窗标准(与 business/project-apply 弹窗视觉一致)
// 灰底弹窗体 + 分组白卡标题融入卡头4px 主色竖条 + 8px 间距)
// =====================================================================
// 1) 所有弹窗内容区统一灰底
.el-dialog__body {
background-color: #f5f6fa;
}
// 2) Avue 默认弹窗表单自动包成白卡,无需逐页改 option 即统一标准
.el-dialog .avue-form {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
padding: 16px;
}
// 3) Avue 弹窗内分组option.group渲染为白卡标题在卡内
.el-dialog .avue-form__group {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
margin-bottom: 16px;
overflow: hidden;
.avue-group__header {
border-bottom: none;
padding: 14px 16px 4px;
font-weight: 500;
color: #303133;
}
.avue-group__item {
padding: 14px 16px 4px;
}
}
// 4) 弹窗内表单项默认上下间距 16px覆盖默认 18px / 22px
.el-dialog .el-form-item {
margin-bottom: 16px;
}
// 5) 通用分组白卡组件(<section-card>):标题融入卡头
.section-card {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
margin-bottom: 16px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
&__header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px 4px;
font-weight: 500;
color: #303133;
}
&__bar {
flex: none;
width: 4px;
height: 16px;
border-radius: 2px;
background-color: var(--el-color-primary);
}
&__title {
flex: 1;
min-width: 0;
}
&__extra {
margin-left: auto;
flex: none;
}
&__body {
padding: 14px 16px 4px;
}
}
// 6) 弹窗内两列表单栅格工具类(与 project-apply 一致)
.form-grid-2 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 72px;
row-gap: 0;
}
.avue-crud__dialog .avue-dialog__footer > .el-button {
margin-left: 12px;
}