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:
@@ -24,6 +24,14 @@
|
||||
### 简单分组(仅 3 项)
|
||||
- 联系信息等仅 3 项的分组,可用 `el-col :span="8"` 让三项均分一行,避免 4 列网格留白。
|
||||
|
||||
### 弹窗底部操作栏浮动效果(全站统一规范)
|
||||
- **需求来源**:用户要求参考 `business/project-apply`(手写 el-dialog + `#footer` slot,body `max-height:76vh;overflow-y:auto`,footer 固定底部)实现"取消/保存按钮浮动在底部"。因绝大多数页面是 Avue CRUD 内置弹窗(无法用 `#footer` slot),统一用**全局 CSS** 实现,全站自动生效。
|
||||
- **实现位置**:`src/styles/element-ui.scss`(在 `.el-dialog .el-form-item` 规则之后新增)。
|
||||
- **规则**:
|
||||
- `.el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; }` —— 内容超高时独立滚动,footer(位于 body 之外)始终可见。
|
||||
- `.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,.04); border-radius:0 0 var(--el-dialog-border-radius,4px); .el-button+.el-button{margin-left:8px} }` —— 视觉底栏(白底+上边框+轻阴影),与主内容区分。
|
||||
- **注意**:`.el-dialog__body` 的 `max-height` 会作用于所有弹窗(含纯展示/表格弹窗),无 footer 的弹窗不受影响;project-apply 自身 `.project-apply-dialog .el-dialog__body{76vh}` 特异性更高仍优先。如需让某弹窗豁免,加更具体 class 覆盖即可。
|
||||
|
||||
### 上传证件区域尺寸规范(transportCapacity 模块强制)
|
||||
- **比例**:中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**(横放)
|
||||
- **尺寸**:取真实身份证的 ~75% → 固定 **240 × 151 px**(1.586:1 精确:151 × 1.586 ≈ 240)
|
||||
|
||||
Reference in New Issue
Block a user