fix : 修复文件预览弹窗适配

src/components/filePreview/ImagePreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="img-preview" >
-    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
+    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'100%',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
   </div>
 </template>
 
@@ -51,6 +51,24 @@ nextTick(() => {
 .img-preview {
   display: flex;
   justify-content: center;
+  overflow-y: auto;
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
 }
 
 </style>

src/components/filePreview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="file-preview">
-    <el-dialog id="dialog" :border="false" width="1500" :style="{height: fullscreen?'':'750px;'}" top="10vh"
+    <el-dialog id="dialog" :border="false" width="1200" :style="{height: fullscreen?'':'650px;'}" top="10vh"
                :fullscreen="fullscreen"
                :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
                :append-to-body="false"
@@ -54,7 +54,7 @@ if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .file-preview {
   .el-overlay-dialog {
     left: 0 !important;
@@ -69,6 +69,8 @@ if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType
   }
 
   .el-dialog__body {
+    overflow: hidden;
+
     padding: 0 !important;
   }
 }