style(archive-form): 统一和优化弹窗表单风格及间距
- 统一财务/信用信息分组备注字段宽度及对齐,修正跨列占位 - 调整评分量化表弹窗左右边距,移除多余内边距复用全局样式 - 将评分量化表相关编辑弹窗改用 section-card 白卡分组并应用 archive-form 风格 - 给业务编辑弹窗添加 archive-form 样式,统一 label 固定宽度和控件宽度至 250px - 新增 common-route 编辑弹窗自定义类,实现输入框宽度和标签对齐 - 全局修改弹窗灰底区间距为 8px,放宽表单项上下间距至 20px,提升视觉一致性 - 优化 Avue 弹窗底部按钮区样式,实现按钮内嵌于白卡底部 - 移除主弹窗标题左侧竖条,全站统一弹窗标题风格,遵循用户需求 - 修复弹窗表单 label 换行稳定性,保证长文本正确展示 - 调整 customer-archive 备注字段布局,保证输入框对齐美观 - 各手写编辑弹窗附加 archive-form,保证样式一致不破坏功能
This commit is contained in:
@@ -173,7 +173,7 @@
|
||||
.el-dialog .el-form-item--small.el-form-item,
|
||||
.el-dialog .el-form-item--large.el-form-item,
|
||||
.el-dialog .el-form-item--medium.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__title,
|
||||
@@ -214,18 +214,57 @@
|
||||
// 灰底弹窗体 + 分组白卡(标题融入卡头,4px 主色竖条 + 8px 间距)
|
||||
// =====================================================================
|
||||
|
||||
// 1) 所有弹窗内容区统一灰底 + 16px 内边距(与 project-apply 一致,避免内容贴边)
|
||||
// 1) 所有弹窗内容区统一灰底 + 8px 内边距(全站统一)
|
||||
.el-dialog__body {
|
||||
background-color: #f2f2f2;
|
||||
padding: 8px;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
// 2) Avue 默认弹窗表单自动包成白卡,无需逐页改 option 即统一标准
|
||||
// Avue CRUD 弹窗:表单白卡 + 底部按钮区视觉合一(按钮在卡片内部)
|
||||
.el-dialog .avue-form {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
padding: 16px;
|
||||
padding: 24px; // 加大内边距,与 customer-archive 对齐
|
||||
margin-bottom: 0; // 与下方 footer 无缝衔接
|
||||
}
|
||||
|
||||
.avue-crud__dialog .avue-dialog__footer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fff;
|
||||
border-radius: 0 0 6px 6px; // 接续白卡底部圆角
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); // 与白卡阴影一致
|
||||
padding: 16px 24px; // 与白卡 padding 对齐
|
||||
margin-top: 0; // 消除与上方白卡的灰底间隙
|
||||
}
|
||||
|
||||
// 3c) common-route 编辑弹窗:输入框宽度与 customer-archive 对齐(固定 250px + label 固定宽)
|
||||
.avue-dialog--common-route {
|
||||
.el-form-item__label {
|
||||
flex: 0 0 calc(6em + 24px) !important;
|
||||
width: calc(6em + 24px) !important;
|
||||
white-space: normal !important;
|
||||
word-break: break-all;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-form-item__content > .el-input,
|
||||
.el-form-item__content > .el-select,
|
||||
.el-form-item__content > .el-cascader,
|
||||
.el-form-item__content > .el-input-number,
|
||||
.el-form-item__content > .el-date-editor {
|
||||
width: 250px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 3) Avue 弹窗内分组(option.group)渲染为白卡,标题在卡内
|
||||
@@ -238,13 +277,13 @@
|
||||
|
||||
.avue-group__header {
|
||||
border-bottom: none;
|
||||
padding: 14px 16px 4px;
|
||||
padding: 16px 24px 4px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.avue-group__item {
|
||||
padding: 14px 16px 4px;
|
||||
padding: 16px 24px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,9 +305,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px)
|
||||
// 4) 弹窗内表单项默认上下间距 20px(覆盖默认 18px / 22px,与 customer-archive 对齐)
|
||||
.el-dialog .el-form-item {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 5) 通用分组白卡组件(<section-card>):标题融入卡头
|
||||
|
||||
Reference in New Issue
Block a user