style(dialogs): 统一全站自定义表单弹窗样式为客商档案风格

- 新增全局弹窗表单标准类 .dialog-form--carded,实现卡片白底分组风格
- 规范表单标签宽度为 calc(6em + 24px),右对齐且垂直居中
- 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px
- 保持 radio/checkbox 组宽度自适应
- 应用样式改造多个弹窗组件:流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入
- 港口码头编辑弹窗内 input 宽度统一为 250px,调整详细地址为单行输入框并放宽宽度
- 调整备注字段文本域高度,优化整体弹窗表单布局与风格统一
This commit is contained in:
2026-08-13 00:02:31 +08:00
parent 748dd80d4a
commit 563909fafa
11 changed files with 371 additions and 166 deletions
+34
View File
@@ -362,6 +362,40 @@
row-gap: 0;
}
// 7) 卡片式弹窗表单标准(与 vehicle/customer-archive 编辑弹窗一致)
// 在 el-dialog 上添加 class="dialog-form--carded" 即可生效
.dialog-form--carded {
.el-form-item {
align-items: center;
margin-bottom: 20px;
}
.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__content > .el-input,
.el-form-item__content > .el-select,
.el-form-item__content > .el-cascader,
.el-form-item__content > .el-tree-select,
.el-form-item__content > .el-input-number,
.el-form-item__content > .el-date-editor,
.el-form-item__content > .el-textarea {
width: 250px;
max-width: 100%;
}
.el-form-item__content > .el-radio-group,
.el-form-item__content > .el-checkbox-group {
width: auto;
}
}
.avue-crud__dialog .avue-dialog__footer > .el-button {
margin-left: 12px;
}