style(shipping-template): 调整发货模板弹窗高度接近全屏
- 修改 shipping-template 弹窗样式,取消库内置 200px 安全区限制 - 将弹窗上下边距改为 20px,弹窗高度和最大高度设为视口高度减 40px - 采用 flex 布局保持底部操作栏 sticky 效果及视觉居中 - 同步调整运输计划弹窗样式,保持一致的弹窗高度策略 - 未改动 Avue 库全局 `.avue-dialog` 样式,仅覆盖 shipping-template 和 transport-plan 独立样式规则
This commit is contained in:
+14
-10
@@ -457,12 +457,14 @@
|
||||
}
|
||||
|
||||
// 发货模板新增/编辑弹窗:参照 vehicle/customer-archive 的视觉
|
||||
// 弹窗体占满视口高度(顶部 4vh、底部留白),内容较少时也保持高大、视觉居中;
|
||||
// 解除全局 80vh 上限并由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
// 弹窗体接近全屏(上下各留 20px 边距),内容较少时也保持高大、视觉居中;
|
||||
// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限,
|
||||
// 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
.shipping-template-dialog.el-dialog {
|
||||
margin-top: 4vh !important;
|
||||
margin-bottom: 0 !important;
|
||||
height: calc(100vh - 4vh - 24px);
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
height: calc(100vh - 40px);
|
||||
max-height: calc(100vh - 40px) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -487,12 +489,14 @@
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体固定 72vh,
|
||||
// 内容较少时下方留白,内容超出 72vh 时窗内滚动;
|
||||
// 底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体接近全屏(上下各留 20px 边距);
|
||||
// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限,
|
||||
// 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
.transport-plan-dialog.el-dialog {
|
||||
margin-top: 4vh !important;
|
||||
max-height: 72vh;
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
height: calc(100vh - 40px);
|
||||
max-height: calc(100vh - 40px) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user