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:
@@ -456,6 +456,67 @@
|
||||
//background: #f5f6fa;
|
||||
}
|
||||
|
||||
// 发货模板新增/编辑弹窗:参照 vehicle/customer-archive 的视觉
|
||||
// 弹窗体占满视口高度(顶部 4vh、底部留白),内容较少时也保持高大、视觉居中;
|
||||
// 解除全局 80vh 上限并由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
.shipping-template-dialog.el-dialog {
|
||||
margin-top: 4vh !important;
|
||||
margin-bottom: 0 !important;
|
||||
height: calc(100vh - 4vh - 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shipping-template-dialog .el-dialog__header {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.shipping-template-dialog .el-dialog__body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.shipping-template-dialog .avue-dialog__footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
flex: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体封顶 72vh,
|
||||
// 内容较少时弹窗随内容变矮,内容超出 72vh 时窗内滚动;
|
||||
// 底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
|
||||
.transport-plan-dialog.el-dialog {
|
||||
margin-top: 4vh !important;
|
||||
max-height: 72vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.transport-plan-dialog .el-dialog__header {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.transport-plan-dialog .el-dialog__body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transport-plan-dialog .avue-dialog__footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
flex: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 统一表格线条颜色
|
||||
.el-table {
|
||||
--el-table-border-color: #eff1f7;
|
||||
|
||||
Reference in New Issue
Block a user