style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局
- 新增全局弹窗灰底背景色,提升视觉一致性 - 新增通用分组白卡组件 section-card,标题融入卡头,支持额外插槽 - 统一 Avue 弹窗表单及分组为白卡样式 - 调整 common-route.vue 弹窗,使用 section-card 分组包裹查询条件与常用地址 - 改造 loading-manage.vue 弹窗所有分区,采用 section-card 统一风格 - 全局样式调整弹窗内容区表单项间距及两列表单布局工具类 - 在 main.js 全局注册 section-card 组件,便于项目统一复用
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user