开屏动画彻底完善

src/components/HeaderVideo.vue

@@ -4,15 +4,58 @@ import { useBootstrapBreakpoint } from './useBreakpoint.js';
 const { breakpoint } = useBootstrapBreakpoint();
 
 export default defineComponent({
-name: "HeaderVideo"
+  name: "HeaderVideo",
+  data() {
+    return {
+      // timestamp: new Date().getTime()
+    }
+  },
+  methods:{
+    handleVideoEnded:function (event){
+      window.location.href = "/Homepage";
+    }
+  },
+  mounted() {
+    if(this.$isMobile.phone)
+    {
+      // 重置 GIF 图片的 src 以确保从第一帧开始播放
+      const img = document.getElementById('beginwep');
+      if (img) {
+        const src = img.getAttribute('src');
+        img.setAttribute('src', '');
+        setTimeout(() => {
+          img.setAttribute('src', src);
+        }, 10);
+      }
+
+      setTimeout(function() {
+        // 在这里写入你的跳转语句
+        window.location.href = "/Homepage";
+      }, 5100);
+    }
+    else
+    {
+      const videos = document.querySelectorAll('.startvideo');
+      // 检查是否找到了视频元素 (可选，但好习惯)
+      if (videos.length > 0) {
+        videos.forEach(video => {
+          video.addEventListener('ended', this.handleVideoEnded);
+          console.log('为视频添加了 ended 事件监听器:', video);
+        });
+      } else {
+        console.warn("没有找到视频元素。");
+      }
+    }
+  }
 })
 </script>
 
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
-   <img v-if="$isMobile.phone" src="/beginwepgif.gif" id="beginwep"/>
+   <img v-if="$isMobile.phone"
-   <video v-if="$isMobile.tablet" poster="/logobeginPCpld.png"
+        src="/beginwepgif.gif" id="beginwep"/>
+   <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png"
           id="tbstart" muted autoplay controls="controls"
           playsinline webkit-playsinline
           class="startvideo"
@@ -43,7 +86,7 @@ name: "HeaderVideo"
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
 #beginroot{
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -66,6 +109,7 @@ name: "HeaderVideo"
   }
 }
 #beginbottom {
+  flex-shrink: 0; /* 添加这一行，防止此元素被压缩 */
   a {
     text-decoration: none;
     width: 100%; /* 确保链接占满整个宽度 */
@@ -97,7 +141,9 @@ name: "HeaderVideo"
 }
 #videodiv{
   width: 100%;
-  height: 100%;
+  //height: 100%;
+  flex:1;
+  min-height: 0;
   background-color: black;
   overflow: hidden;
   @include media-breakpoint-between(xs, md) {

start.html

@@ -20,7 +20,7 @@
     #start {
         display: flex;
         flex-direction: column;
-        height: 100vh;
+        height: 100%;
         overflow: hidden;
         position: fixed;
         top: 0;