style(business): 优化业务弹窗布局与样式统一

- 修改 dispatchItemForm 表单标签宽度为 calc(6em + 24px),统一label宽度标准
- 调整 business-crud-page 内 section-card 间距,避免卡片紧贴,符合整体风格
- 规范 detail-content 内部元素间距及白卡底部边距,提升视觉一致性
- 调整 contract-manage select 组件列占比,优化表单布局
- 调整 customer-archive 弹窗间距,增强界面美观
- 全站弹窗新增底部操作栏固定与滚动内容区,提升弹窗交互体验
- port-terminal、railway-station 弹窗表单标签宽度调整及样式改进,提高表单对齐效果
- 统一多处弹窗及表单组件底部间距,确保全局风格一致
- port-terminal 弹窗取消分组白卡,恢复原有结构以满足用户需求
This commit is contained in:
2026-08-13 16:35:35 +08:00
parent f7b7218e62
commit 490efe2ce5
9 changed files with 165 additions and 36 deletions
+30 -3
View File
@@ -176,6 +176,28 @@
margin-bottom: 20px;
}
/* 全站弹窗:底部操作栏浮动效果(参照 business/project-apply
* - body 超高时内部独立滚动,footer(取消/保存等按钮)始终固定在底部可见
* - footer 加视觉底栏:白底 + 上边框 + 轻阴影,与主内容区分 */
.el-dialog__body {
max-height: calc(100vh - 200px);
overflow-y: auto;
overflow-x: hidden;
}
.el-dialog__footer {
margin: 0;
padding: 12px 20px;
background: #fff;
border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
//box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
border-radius: 0 0 var(--el-dialog-border-radius, 4px);
.el-button + .el-button {
margin-left: 8px;
}
}
.el-dialog__title,
.dialog-section-title {
display: inline-flex;
@@ -217,7 +239,7 @@
// 1) 所有弹窗内容区统一灰底 + 8px 内边距(全站统一)
.el-dialog__body {
background-color: #f2f2f2;
padding: 8px !important;
padding: 12px !important;
}
// Avue CRUD 弹窗:表单白卡 + 底部按钮区视觉合一(按钮在卡片内部)
@@ -305,9 +327,9 @@
}
}
// 4) 弹窗内表单项默认上下间距 20px(覆盖默认 18px / 22px,与 customer-archive 对齐)
// 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px,与 customer-archive 对齐)
.el-dialog .el-form-item {
margin-bottom: 20px;
margin-bottom: 16px;
}
// 5) 通用分组白卡组件(<section-card>):标题融入卡头
@@ -315,6 +337,7 @@
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
margin-bottom: 12px;
overflow: hidden;
&:last-child {
@@ -760,4 +783,8 @@
.avue-crud__dialog .avue-dialog__footer{
border-top: 0 !important;
margin-top: -30px !important;
}
.el-form-item__label {
margin-left: 20px !important;
}