style(shipping-template): 调整发货模板弹窗高度接近全屏
- 修改 shipping-template 弹窗样式,取消库内置 200px 安全区限制 - 将弹窗上下边距改为 20px,弹窗高度和最大高度设为视口高度减 40px - 采用 flex 布局保持底部操作栏 sticky 效果及视觉居中 - 同步调整运输计划弹窗样式,保持一致的弹窗高度策略 - 未改动 Avue 库全局 `.avue-dialog` 样式,仅覆盖 shipping-template 和 transport-plan 独立样式规则
This commit is contained in:
@@ -9,6 +9,19 @@
|
|||||||
- 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。
|
- 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。
|
||||||
- 改动:`src/views/business/loading-manage.vue` 第 4 行 `<el-form ... label-width="88px">`。
|
- 改动:`src/views/business/loading-manage.vue` 第 4 行 `<el-form ... label-width="88px">`。
|
||||||
- 注意事项:AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px",本次按用户指令执行但与项目规范冲突;如后续要恢复规范或全站统一,需要回滚。
|
- 注意事项:AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px",本次按用户指令执行但与项目规范冲突;如后续要恢复规范或全站统一,需要回滚。
|
||||||
|
|
||||||
|
## shipping-template 弹窗高度改为接近全屏
|
||||||
|
|
||||||
|
- 用户要求把 `/business/shipping-template` 弹窗高度调到接近全屏(硬编码 200px 安全区太大)。
|
||||||
|
- 关键定位:Avue 库内置 `.avue-dialog { max-height: calc(100% - 200px) }` 加在 `el-dialog` 根元素(avue lib `packages/core/components/dialog-form/index4.js:14` `class:"avue-dialog"`);shipping-template 的 `dialogCustomClass:'shipping-template-dialog'` 合并到同一元素。项目样式(common.scss)在 main.js:24 晚于 Avue css(main.js:12)加载,可覆盖。
|
||||||
|
- 改动:`src/styles/element-ui.scss` 的 `.shipping-template-dialog.el-dialog` 规则,由 `margin-top:4vh; margin-bottom:0; height:calc(100vh - 4vh - 24px)` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`,用 max-height + !important 压过库内置上限。
|
||||||
|
- 注意:仅改 shipping-template 专属规则,未动库内置 `.avue-dialog` 根,也未影响其他弹窗。body/footer 的 flex 分摊规则(474-488 行)保持不变。
|
||||||
|
|
||||||
|
## transport-plan 弹窗高度也改为接近全屏
|
||||||
|
|
||||||
|
- 用户要求 `/business/transport-plan` 新增/编辑弹窗同样改为接近全屏(原来固定 max-height: 72vh,内容少时下方留白)。
|
||||||
|
- 改动:`src/styles/element-ui.scss` 的 `.transport-plan-dialog.el-dialog` 规则,由 `margin-top:4vh; max-height:72vh` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`,与 shipping-template 弹窗完全对齐(压过库内置 `.avue-dialog` 的 max-height: calc(100% - 200px))。
|
||||||
|
- 已确认 `src/option/business/transport-plan.js:607` 有 `dialogCustomClass: 'transport-plan-dialog'`,CSS 生效。body/footer flex 分摊规则(504-520 行)保持不变。
|
||||||
- 宽度来源:
|
- 宽度来源:
|
||||||
- `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: 'auto'`;
|
- `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: 'auto'`;
|
||||||
- Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
|
- Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
|
||||||
|
|||||||
+14
-10
@@ -457,12 +457,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 发货模板新增/编辑弹窗:参照 vehicle/customer-archive 的视觉
|
// 发货模板新增/编辑弹窗:参照 vehicle/customer-archive 的视觉
|
||||||
// 弹窗体占满视口高度(顶部 4vh、底部留白),内容较少时也保持高大、视觉居中;
|
// 弹窗体接近全屏(上下各留 20px 边距),内容较少时也保持高大、视觉居中;
|
||||||
// 解除全局 80vh 上限并由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限,
|
||||||
|
// 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||||
.shipping-template-dialog.el-dialog {
|
.shipping-template-dialog.el-dialog {
|
||||||
margin-top: 4vh !important;
|
margin-top: 20px !important;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 20px !important;
|
||||||
height: calc(100vh - 4vh - 24px);
|
height: calc(100vh - 40px);
|
||||||
|
max-height: calc(100vh - 40px) !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -487,12 +489,14 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体固定 72vh,
|
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体接近全屏(上下各留 20px 边距);
|
||||||
// 内容较少时下方留白,内容超出 72vh 时窗内滚动;
|
// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限,
|
||||||
// 底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
// 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||||
.transport-plan-dialog.el-dialog {
|
.transport-plan-dialog.el-dialog {
|
||||||
margin-top: 4vh !important;
|
margin-top: 20px !important;
|
||||||
max-height: 72vh;
|
margin-bottom: 20px !important;
|
||||||
|
height: calc(100vh - 40px);
|
||||||
|
max-height: calc(100vh - 40px) !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user