src/views/home/components/ModuleTen.vue

@@ -30,12 +30,12 @@ let hlsInstance = null
 
 const videoWrapper = ref(null)
 
-const savedScale = parseFloat(localStorage.getItem('videoScale') || '1')
+const scale = ref(1)
-const scale = ref(savedScale)
 const scrollLeft = ref(0)
 const scrollTop = ref(0)
 
 const minScale = 1
+const maxScale = 3
 const scaleStep = 0.2
 
 const showScrollbar = computed(() => scale.value > 1)
@@ -90,39 +90,29 @@ const scrollbarYStyle = computed(() => {
 })
 
 const zoomIn = () => {
-  scale.value += scaleStep
+  if (scale.value < maxScale) {
-  localStorage.setItem('videoScale', scale.value.toString())
+    scale.value = Math.min(maxScale, scale.value + scaleStep)
-  centerVideo()
+    updateScrollBounds()
+  }
 }
 
 const zoomOut = () => {
   if (scale.value > minScale) {
     scale.value = Math.max(minScale, scale.value - scaleStep)
-    localStorage.setItem('videoScale', scale.value.toString())
+    updateScrollBounds()
-    centerVideo()
   }
 }
 
-const centerVideo = () => {
+const updateScrollBounds = () => {
   if (!videoWrapper.value) return
-
+  
-  const wrapper = videoWrapper.value
+  const wrapperWidth = videoWrapper.value.clientWidth
-  // clientWidth/clientHeight 不包含滚动条和边框，但包含 padding
+  const wrapperHeight = videoWrapper.value.clientHeight
-  // 直接使用 clientWidth/clientHeight 作为可视区域尺寸
+  const maxScrollLeft = Math.max(0, wrapperWidth * (scale.value - 1))
-  const contentWidth = wrapper.clientWidth
+  const maxScrollTop = Math.max(0, wrapperHeight * (scale.value - 1))
-  const contentHeight = wrapper.clientHeight
+  
-
+  scrollLeft.value = Math.min(scrollLeft.value, maxScrollLeft)
-  if (scale.value <= 1) {
+  scrollTop.value = Math.min(scrollTop.value, maxScrollTop)
-    scrollLeft.value = 0
-    scrollTop.value = 0
-    return
-  }
-
-  const scaledWidth = contentWidth * scale.value
-  const scaledHeight = contentHeight * scale.value
-
-  scrollLeft.value = (scaledWidth - contentWidth) / 2
-  scrollTop.value = (scaledHeight - contentHeight) / 2
 }
 
 let isDraggingX = false
@@ -256,16 +246,6 @@ const initVideo = async () => {
 
 onMounted(() => {
   initVideo()
-  // 多次尝试居中，确保 DOM 渲染完成后生效
-  nextTick(() => {
-    centerVideo()
-    setTimeout(() => {
-      centerVideo()
-    }, 100)
-    setTimeout(() => {
-      centerVideo()
-    }, 300)
-  })
 })
 
 onBeforeUnmount(() => {
@@ -311,14 +291,11 @@ onBeforeUnmount(() => {
         width: 100%;
         height: 100%;
         transition: width 0.1s ease, height 0.1s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
 
         .video-ats {
           width: 100%;
           height: 100%;
-          object-fit: contain;
+          object-fit: fill;
           display: block;
         }
       }