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:
2026-05-17 21:13:46 +08:00
committed by guanyu
parent 33424d0a72
commit 14dc9964d5

View File

@@ -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>