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
+44 -18
View File
@@ -394,7 +394,7 @@ export default {
dialogWidth: 900,
dialogCustomClass: 'port-terminal-edit-dialog',
labelPosition: 'right',
labelWidth: 'auto',
labelWidth: '108px',
tip: false,
searchShow: true,
searchLabelWidth: 160,
@@ -830,9 +830,12 @@ export default {
this.clearCityValue();
},
handleCategoryChange(value, reset = true) {
const required = value === '码头';
const parentColumn = this.findColumn(this.option.column, 'parentId');
parentColumn.rules[0].required = value === '码头';
this.setColumnDisplay('parentId', value === '码头');
if (parentColumn && parentColumn.rules && parentColumn.rules[0]) {
parentColumn.rules[0].required = required;
}
this.setColumnDisplay('parentId', required);
if (value === '港口') {
this.form.parentId = undefined;
this.form.parentCode = '';
@@ -1379,19 +1382,42 @@ export default {
</style>
<style lang="scss">
/* 港口码头编辑/新增弹窗:所有 input 文本框、select 下拉控件统一宽度 250px */
.port-terminal-edit-dialog {
.el-input,
.el-select {
width: 250px !important;
}
/* 详细地址为整行字段,放宽到占满整行 */
//.detail-address-input {
// width: 81% !important;
//}
/* 备注宽度 83% */
.remark-input {
width: 85% !important;
}
}
/* 港口码头编辑/新增弹窗:对齐 railway-station 统一风格(灰底 + 白卡表单 + 浮动底栏,padding 24px 与全局弹窗标准一致) */
//.port-terminal-edit-dialog {
// /* 灰底内容区 */
// .el-dialog__body {
// background-color: #f2f2f2;
// padding: 8px;
// }
// /* 表单白卡(与全局 .el-dialog .avue-form 一致,padding 24px 对齐 customer-archive / railway-station */
// .avue-form {
// background: #fff;
// border-radius: 6px;
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
// padding: 24px !important;
// margin-bottom: 0;
// }
// /* 底部按钮区白卡(Avue 弹窗 footer 在 body 内,接续白卡) */
// .avue-dialog__footer {
// background: #fff;
// border-radius: 0 0 6px 6px;
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
// padding: 16px 24px !important;
// display: flex;
// justify-content: flex-end;
// }
// /* label 宽度统一 108px(对齐 railway-station,标签对齐更整齐) */
// .el-form-item__label {
// width: 108px !important;
// }
// /* 所有 input 文本框、select 下拉控件统一宽度 250px */
// .el-input,
// .el-select {
// width: 250px !important;
// }
// /* 备注宽度 85% */
// .remark-input {
// width: 85% !important;
// }
//}
</style>