启动页 背景序列帧和过渡视频对齐

src/views/StartupView.vue

@@ -6,8 +6,8 @@
     <SerialFrames
       class="bg-serial-frames"
       :image-src="require(`@/assets/images/serial-frame-startup.png`)"
-      :total-width="22950"
-      :height="675"
+      :total-width="22950 / 675 * windowHeight"
+      :height="windowHeight"
       :frame-number="51"
       :frame-duration="55"
     />
@@ -68,6 +68,7 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { ref, computed, watch, onMounted, inject, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { useWindowSize } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
@@ -80,6 +81,7 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 
 const isShowLoadingTip = ref(true)
@@ -124,8 +126,9 @@ function onVideoEnd() {
 
   >.bg-serial-frames{
     position: absolute;
-    left: 0;
+    left: 50%;
     top: 0;
+    transform: translateX(-50%);
     mix-blend-mode: multiply;
   }
 
@@ -154,11 +157,10 @@ function onVideoEnd() {
 
   >video.transition-video{
     position: absolute;
-    left: 0;
+    left: 50%;
     top: 0;
-    width: 100%;
     height: 100%;
-    object-fit: cover;
+    transform: translateX(-50%);
   }
 
   // @keyframes spin {