fix

src/components/ImageDisplay/index.vue

@@ -2,7 +2,7 @@
   <Transition>
     <div
       v-if="visible"
-      class="fixed h-screen w-screen top-0 left-0 flex items-center justify-center flex-col z-30"
+      class="fixed h-screen w-screen top-0 left-0 flex items-center flex-col z-30"
     >
       <div class="opacity-70 bg-black absolute w-full h-full"></div>
       <div
@@ -11,25 +11,31 @@
       >
         <img src="@/assets/img/close.png" class="w-9" alt="" srcset="" />
       </div>
+      <div
+        style="height: 100%"
+        class="flex flex-col justify-center items-center"
+      >
         <ElImage
           id="imageDisplay"
           :src="url"
           :style="{
-          transform: `scale(${scale})`,
+            height: '70%',
             zIndex: 1,
             position: 'relative',
+            overflow: 'hidden',
           }"
         />
         <div class="relative z-10">
           <slot></slot>
         </div>
       </div>
+    </div>
   </Transition>
 </template>
 
 <script setup lang="ts">
 import { ElImage } from "element-plus";
-import { ref, watch } from "vue";
+import { ref, useSlots, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 
 const props = defineProps<{
@@ -37,30 +43,12 @@ const props = defineProps<{
   url: string;
 }>();
 const emit = defineEmits(["update:visible"]);
-const scale = ref(1);
-
-watch(
-  () => [props.visible, props.url],
-  () => {
-    scale.value = 1;
-  }
-);
 
 useEventListener(window, "keydown", (e) => {
   if (e.key === "Escape") {
     emit("update:visible", false);
   }
 });
-
-useEventListener(document, "wheel", (e) => {
-  if (e.deltaY > 0) {
-    if (scale.value < 0.2) return;
-    scale.value /= 1.1;
-  } else {
-    if (scale.value > 7) return;
-    scale.value *= 1.1;
-  }
-});
 </script>
 
 <style scoped lang="scss">

src/views/CopyRightDetail/index.vue

@@ -66,6 +66,7 @@
                 打印证书
               </div>
             </div>
+            <div class="flex-grow"></div>
           </ImageDisplay>
         </div>
       </div>

src/views/copyrightManagement/index.vue

@@ -94,8 +94,9 @@
         <div class="imgBtn" @click="printJS('imageDisplay', 'html')">
           打印证书
         </div>
-      </div></ImageDisplay
-    >
+      </div>
+      <div class="flex-grow"></div>
+    </ImageDisplay>
   </LayoutVue>
 </template>
 <script lang="ts" setup>