From 57ec7832f2c051633e5e196f0f883124e82776d0 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Tue, 22 Oct 2024 23:19:44 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E4=BF=AE=E5=A4=8D=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=BC=B9=E7=AA=97=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/filePreview/ImagePreview.vue | 20 +++++++++++++++++++-
 src/components/filePreview/index.vue        |  6 ++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/filePreview/ImagePreview.vue b/src/components/filePreview/ImagePreview.vue
index 62e7db5..663f7a6 100644
--- a/src/components/filePreview/ImagePreview.vue
+++ b/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>
diff --git a/src/components/filePreview/index.vue b/src/components/filePreview/index.vue
index 7dc3990..71bb054 100644
--- a/src/components/filePreview/index.vue
+++ b/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;
   }
 }