预览

src/components/PreviewImg/index.vue

@@ -1,11 +1,14 @@
 <template>
   <v-overlay v-model="overlay" class="align-center justify-center" @update:model-value="handleChange">
-    <div class="close" @click="overlay = false">
+    <div class="close" @click="overlay = false; handleChange(false)">
       <v-icon color="#fff" size="60">mdi-close-circle</v-icon>
     </div>
     <v-window v-model="window" show-arrows @update:model-value="val => window = val">
       <v-window-item v-for="val in list" :key="val">
-        <v-img v-if="isImage || checkIsImage(val)" width="900" height="800" :src="val"></v-img>
+        <!-- <v-img v-if="isImage || checkIsImage(val)" width="900" height="800" :src="val"></v-img> -->
+        <div v-if="isImage || checkIsImage(val)" style="width: 70vw; height: 90vh;margin: auto;">
+          <img :src="val" alt="" style="object-fit: scale-down;width: 100%; height: 100%;">
+        </div>
         <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
       </v-window-item>
     </v-window>
@@ -45,8 +48,8 @@ const handleChange = (e) => {
 <style scoped lang="scss">
 .close {
   position: absolute;
-  right: -150px;
-  top: -45px;
+  right: -60px;
+  top: 0;
   cursor: pointer;
 }
 </style>