style(printDemo): 优化 PDF 和图像的显示样式

- 为 pdf 组件添加宽度样式,确保 PDF 页面正确显示
- 在 drag-box 和 img 标签中添加宽度样式,以适应不同大小的图像
master
Tuzki 6 months ago
parent 11d809fc02
commit f513fad5c6
  1. 4
      src/views/report/eventList/printDemo.vue

@ -38,7 +38,7 @@
<div class="pdf-img-box drag-box" :style="showType === 'image' ? boxStyle : boxStyle1" @mousedown="startDrag">
<img v-if="showType === 'image'" :src="showUrl" class="preview-image" draggable="false" @mousedown.prevent
@dragstart.prevent>
<pdf v-if="showType === 'pdf'" :src="showUrl" :rotate="rotates" :page="currentPage"
<pdf style="width: 100%;" v-if="showType === 'pdf'" :src="showUrl" :rotate="rotates" :page="currentPage"
@num-pages="pageCount = $event" @progress="isLoading = true" @loaded="isLoading = false"></pdf>
</div>
<div class="mask" v-if="isLoading">加载中...</div>
@ -897,6 +897,7 @@
}
.drag-box {
width: 100%;
height: fit-content;
background: #f0f0f0;
display: flex;
@ -905,6 +906,7 @@
user-select: none;
img {
width: 100%;
user-select: none;
-webkit-user-drag: none;
/* Safari/Chrome */

Loading…
Cancel
Save