优化预览弹窗样式

- 调整预览弹窗的宽度和顶部位置,提升视觉效果。
- 增加预览容器的高度和隐藏溢出内容,改善用户体验。
This commit is contained in:
2026-05-12 00:38:24 +08:00
parent 41a40cc6ee
commit 88c9d08e95

View File

@@ -537,7 +537,7 @@
</el-dialog> </el-dialog>
<!-- 预览弹窗 --> <!-- 预览弹窗 -->
<el-dialog v-model="previewDialogVisible" title="预览" width="90%" :close-on-click-modal="false" destroy-on-close> <el-dialog v-model="previewDialogVisible" title="预览" width="95%" top="2vh" :close-on-click-modal="false" destroy-on-close>
<div class="preview-container"> <div class="preview-container">
<iframe v-if="previewUrl" :src="previewUrl" class="preview-iframe" frameborder="0"></iframe> <iframe v-if="previewUrl" :src="previewUrl" class="preview-iframe" frameborder="0"></iframe>
<el-empty v-else description="无法加载预览内容" /> <el-empty v-else description="无法加载预览内容" />
@@ -3423,10 +3423,11 @@ onBeforeUnmount(() => {
/* 预览弹窗样式 */ /* 预览弹窗样式 */
.preview-container { .preview-container {
width: 100%; width: 100%;
height: 70vh; height: 85vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.preview-iframe { .preview-iframe {
width: 100%; width: 100%;