update

src/views/components/ThumbnailSlide/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="thumbnail-slide"
+  <div
+    class="thumbnail-slide"
     :style="{
       width: size + 'px',
       height: size * viewportRatio + 'px',
     }"
   >
-    <div 
+    <div
       class="elements"
       :style="{
         width: viewportSize + 'px',
         height: viewportSize * viewportRatio + 'px',
         transform: `scale(${scale})`,
+        position: 'absolute',
       }"
       v-if="visible"
     >
@@ -21,7 +23,7 @@
         :elementInfo="element"
         :elementIndex="index + 1"
       />
-      
+
       <!-- 遮罩层：确保iframe不会阻止缩略图点击事件 -->
       <div class="thumbnail-mask" @click="handleMaskClick"></div>
     </div>
@@ -30,42 +32,43 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import type { Slide } from '@/types/slides'
-import { injectKeySlideScale } from '@/types/injectKey'
-import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
+import { computed, provide } from "vue";
+import { storeToRefs } from "pinia";
+import { useSlidesStore } from "@/store";
+import type { Slide } from "@/types/slides";
+import { injectKeySlideScale } from "@/types/injectKey";
+import useSlideBackgroundStyle from "@/hooks/useSlideBackgroundStyle";
 
-import ThumbnailElement from './ThumbnailElement.vue'
+import ThumbnailElement from "./ThumbnailElement.vue";
 
-const props = withDefaults(defineProps<{
-  slide: Slide
-  size: number
-  visible?: boolean
-}>(), {
-  visible: true,
-})
+const props = withDefaults(
+  defineProps<{
+    slide: Slide;
+    size: number;
+    visible?: boolean;
+  }>(),
+  {
+    visible: true,
+  }
+);
 
 const emit = defineEmits<{
-  (event: 'click'): void
-}>()
+  (event: "click"): void;
+}>();
 
 // 处理遮罩层点击事件
 const handleMaskClick = (e: MouseEvent) => {
-  e.stopPropagation()
-  emit('click')
-}
-
-
+  e.stopPropagation();
+  emit("click");
+};
 
-const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore());
 
-const background = computed(() => props.slide.background)
-const { backgroundStyle } = useSlideBackgroundStyle(background)
+const background = computed(() => props.slide.background);
+const { backgroundStyle } = useSlideBackgroundStyle(background);
 
-const scale = computed(() => props.size / viewportSize.value)
-provide(injectKeySlideScale, scale)
+const scale = computed(() => props.size / viewportSize.value);
+provide(injectKeySlideScale, scale);
 </script>
 
 <style lang="scss" scoped>