Fix Bug #536: [门诊手术安排]手术申请查询弹窗底部,分页组件与界面底部元素重叠
根因:弹窗底部存在多层冗余间距叠加(分页容器inline样式+48px spacer div+ footer margin-top+CSS padding),导致弹窗尺寸变化时分页与footer重叠。 修复:移除冗余spacer div和分页容器inline样式,统一用CSS管理分页与footer 间距,避免固定高度堆叠导致的布局溢出问题。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -781,7 +781,7 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<!-- 底部分页区 -->
|
<!-- 底部分页区 -->
|
||||||
<div class="pagination-container apply-pagination" style="margin-top: 10px; padding-bottom: 20px">
|
<div class="pagination-container apply-pagination">
|
||||||
<pagination
|
<pagination
|
||||||
v-show="applyTotal > 0"
|
v-show="applyTotal > 0"
|
||||||
:total="applyTotal"
|
:total="applyTotal"
|
||||||
@@ -792,12 +792,9 @@
|
|||||||
@pagination="getSurgicalScheduleList"
|
@pagination="getSurgicalScheduleList"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 分页与底部操作区之间的间隔 -->
|
|
||||||
<div style="height: 48px"></div>
|
|
||||||
|
|
||||||
<!-- 底部操作区 -->
|
<!-- 底部操作区 -->
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer" style="margin-top: 24px; padding-top: 12px; border-top: 1px solid #ebeef5">
|
<div class="dialog-footer" style="padding-top: 12px; border-top: 1px solid #ebeef5">
|
||||||
<el-button @click="cancelApplyDialog">取消</el-button>
|
<el-button @click="cancelApplyDialog">取消</el-button>
|
||||||
<el-button type="primary" @click="confirmApply">确认</el-button>
|
<el-button type="primary" @click="confirmApply">确认</el-button>
|
||||||
</div>
|
</div>
|
||||||
@@ -2408,15 +2405,14 @@ function getRowClassName({ row, rowIndex }) {
|
|||||||
|
|
||||||
/* 手术申请查询弹窗 — 分页与footer间距 */
|
/* 手术申请查询弹窗 — 分页与footer间距 */
|
||||||
.surgery-apply-dialog :deep(.el-dialog__body) {
|
.surgery-apply-dialog :deep(.el-dialog__body) {
|
||||||
padding-bottom: 32px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog :deep(.el-dialog__footer) {
|
.surgery-apply-dialog :deep(.el-dialog__footer) {
|
||||||
padding-top: 0;
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog :deep(.apply-pagination) {
|
.surgery-apply-dialog :deep(.apply-pagination) {
|
||||||
padding-bottom: 24px;
|
padding-top: 12px;
|
||||||
margin-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
border-bottom: 1px solid #ebeef5;
|
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog :deep(.apply-pagination .el-pagination) {
|
.surgery-apply-dialog :deep(.apply-pagination .el-pagination) {
|
||||||
margin-right: 80px;
|
margin-right: 80px;
|
||||||
@@ -2436,17 +2432,16 @@ function getRowClassName({ row, rowIndex }) {
|
|||||||
<style>
|
<style>
|
||||||
/* 手术申请查询弹窗 — 非 scoped 确保穿透 teleport */
|
/* 手术申请查询弹窗 — 非 scoped 确保穿透 teleport */
|
||||||
.surgery-apply-dialog .apply-pagination {
|
.surgery-apply-dialog .apply-pagination {
|
||||||
padding-bottom: 24px !important;
|
padding-top: 12px !important;
|
||||||
margin-bottom: 16px !important;
|
padding-bottom: 16px !important;
|
||||||
border-bottom: 1px solid #ebeef5 !important;
|
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog .apply-pagination .el-pagination {
|
.surgery-apply-dialog .apply-pagination .el-pagination {
|
||||||
margin-right: 80px !important;
|
margin-right: 80px !important;
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog .el-dialog__body {
|
.surgery-apply-dialog .el-dialog__body {
|
||||||
padding-bottom: 32px !important;
|
padding-bottom: 16px !important;
|
||||||
}
|
}
|
||||||
.surgery-apply-dialog .el-dialog__footer {
|
.surgery-apply-dialog .el-dialog__footer {
|
||||||
padding-top: 0 !important;
|
padding-top: 8px !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user