style(business): 调整弹窗样式实现居中加高并优化滚动体验

- 修改 shipping-template 新增/编辑弹窗宽度为 92%,顶部边距调为 4vh,新增自定义 class 实现视觉居中
- 在全局样式中增加 .shipping-template-dialog,弹窗高度占满视口并解除最大高度限制,底部操作栏持续可见且固定贴底
- 调整 transport-plan 弹窗样式,限制最大高度 72vh,内容超出时内部滚动,底部操作栏同样固定
- 统一多处业务弹窗 dialogTop 属性由 '10px' 修改为 '4vh',增强界面一致性
- 调整 waybill-manage 模块部分表格列宽,优化显示效果
- 更新 vite 配置,启用本地开发服务器端口为 2889,更新代理目标地址
This commit is contained in:
2026-08-14 15:24:29 +08:00
parent a69a2efe45
commit a68cf04ff1
9 changed files with 111 additions and 19 deletions
+1
View File
@@ -31,6 +31,7 @@
- `.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 覆盖即可。
- **Avue 内置 CRUD 弹窗的 footer 真实 class(重要,易踩坑)**:Avue 内置弹窗的"提交/取消"按钮 class 是 `.avue-dialog__footer`**不是** `.el-dialog__footer`),且**渲染在 `.el-dialog__body` 内部**、随 body 滚动会滚出视口。要让它像手写 `#footer` 那样始终贴底,必须针对 `.avue-dialog__footer``position: sticky; bottom: 0; flex: none; background: #fff`(配合 body `flex` 列布局 + `overflow-y:auto`)。手写 `el-dialog` 的 footer 才是 `.el-dialog__footer` 且在 body 外、天然可见。典型落地见 `shipping-template-dialog` / `transport-plan-dialog` 两条全局规则。
### 上传证件区域尺寸规范(transportCapacity 模块强制)
- **比例**:中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**(横放)