手机开屏动画改成动图

src/components/HeaderVideo.vue

@@ -1,36 +1,86 @@
-<script>
+<script lang="ts">
-import {defineComponent} from 'vue'
+import { defineComponent, onMounted, ref } from 'vue';
-import { useBootstrapBreakpoint } from './useBreakpoint.js';
-const { breakpoint } = useBootstrapBreakpoint();
 
 export default defineComponent({
-name: "HeaderVideo"
+  name: 'HeaderVideo',
+  setup() {
+    // 创建一个 ref 来引用 <video> 元素
+    const startVideoRef = ref<HTMLVideoElement | null>(null);
+
+    onMounted(() => {
+      const videoElement = startVideoRef.value;
+
+      if (videoElement) {
+        // 1. 再次确保视频是静音的 (iOS autoplay 的关键)
+        videoElement.muted = true;
+
+        // 2. 尝试播放视频
+        const playPromise = videoElement.play();
+
+        if (playPromise !== undefined) {
+          playPromise
+              .then(() => {
+                // 视频成功开始自动播放
+                console.log('视频已自动播放');
               })
+              .catch((error) => {
+                // 自动播放失败。这在某些严格的浏览器策略下可能发生，
+                // 即便 muted 和 playsinline 都设置了。
+                console.error('视频自动播放失败:', error);
+                // 在这里可以添加一些备用逻辑，
+                // 例如：显示一个播放按钮，等待用户交互后再播放。
+                // 或者绑定一个一次性的 'click' 或 'touchstart' 事件到 document 或某个元素上
+                // document.body.addEventListener('click', () => videoElement.play(), { once: true });
+              });
+        }
+      } else {
+        console.warn('在 onMounted 中未找到视频元素。');
+      }
+    });
+
+    // 把 ref 暴露给模板
+    return {
+      startVideoRef,
+    };
+  },
+  // 如果你还用到了 $isMobile，需要确保它在 setup 或全局属性中可用
+  // 例如，如果你用的是 vue-is-mobile 插件，它通常会全局注入
+});
 </script>
 
 <template>
   <div id="beginroot" class="pageroot">
     <div id="videodiv">
-   <video v-if="$isMobile.phone" poster="/logobeginweppld.png" controls="controls"
+      <img v-if="$isMobile.phone" src="/beginwepgif.gif" id="mobilebeginv"/>
-          id="wepstart" muted autoplay preload="auto"
+      <video
-          playsinline webkit-playsinline
+          v-else-if="$isMobile.tablet"
+          ref="startVideoRef"
+          poster="/logobeginPCpld.png"
+          id="pcstart"
+          muted
+          autoplay
+          preload="auto"
+          playsinline
+          webkit-playsinline
           class="startvideo"
-          x5-video-player-type="h5-page">
+          x5-video-player-type="h5-page"
-     <source src="/logobeginwep.mp4" type="video/mp4"></source>
+      >
+        <source src="/logobeginPC.mp4" type="video/mp4" />
       </video>
-   <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png" controls="controls"
+      <video
-          id="pcstart" muted autoplay preload="auto"
+          v-else
-          playsinline webkit-playsinline
+          ref="startVideoRef"
+          poster="/logobeginPCpld.png"
+          id="pcstart_else"
+          muted
+          autoplay
+          preload="auto"
+          playsinline
+          webkit-playsinline
           class="startvideo"
-          x5-video-player-type="h5-page">
+          x5-video-player-type="h5-page"
-     <source src="/logobeginPC.mp4" type="video/mp4"></source>
+      >
-   </video>
+        <source src="/logobeginPC.mp4" type="video/mp4" />
-   <video v-else poster="/logobeginPCpld.png"
-          id="pcstart" muted autoplay preload="auto"
-          playsinline webkit-playsinline
-          class="startvideo"
-          x5-video-player-type="h5-page">
-     <source src="/logobeginPC.mp4" type="video/mp4"></source>
       </video>
     </div>
     <div id="beginbottom">
@@ -47,6 +97,7 @@ name: "HeaderVideo"
 </template>
 
 <style scoped lang="scss">
+/* 你的样式保持不变 */
 @import "src/publicstyle.scss";
 #beginroot{
   height: 100vh;
@@ -56,35 +107,31 @@ name: "HeaderVideo"
 #wepstart{
   @include media-breakpoint-between(xs, md) {
     visibility: visible;
-    //height: 100%!important;
   }
   @include media-breakpoint-up(md) {
     visibility: collapse;
-    //height: 0!important;
   }
 }
-#pcstart{
+#pcstart, #pcstart_else { /* 同时应用到两个可能的桌面/平板视频ID */
   @include media-breakpoint-between(xs, md) {
     visibility: collapse;
-    //height: 0!important;
   }
   @include media-breakpoint-up(md) {
     visibility: visible;
-    //height: 100%!important;
   }
 }
 #beginbottom {
   a {
     text-decoration: none;
-    width: 100%; /* 确保链接占满整个宽度 */
+    width: 100%;
 
     .normalcontenttitle {
       transition: color 0.3s ease;
       color: white;
-      text-align: center; /* 文本居中 */
+      text-align: center;
       display: flex;
-      justify-content: center; /* flex布局下的水平居中 */
+      justify-content: center;
-      align-items: center; /* 垂直居中对齐图标 */
+      align-items: center;
     }
     #intoa{
       @include media-breakpoint-between(xs, md) {
@@ -108,28 +155,19 @@ name: "HeaderVideo"
   height: 100%;
   background-color: black;
   overflow: hidden;
-  @include media-breakpoint-between(xs, md) {
-  }
-  @include media-breakpoint-up(md) {
-  }
 }
 .startvideo{
   width: 100%;
   height: 100%;
-  @include media-breakpoint-between(xs, md) {
   object-fit: contain;
 }
-  @include media-breakpoint-up(md) {
+#mobilebeginv{
-    object-fit: contain;
+  width: 100%;
-  }
-}
-#intopagesvg{
   height: 100%;
-  width: auto;
+  object-fit: contain;
-  max-width: 100%;
 }
 #intopagesvg{
-  height: 1em;
+  height: 1em; /* 改为相对单位 */
   width: auto;
   margin-left: 0.5em;
 }
@@ -140,8 +178,8 @@ name: "HeaderVideo"
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center; /* 添加这一行使内容水平居中 */
+  align-items: center;
-  width: 100%; /* 确保宽度占满 */
+  width: 100%;
   margin-left: 0!important;
   margin-bottom: 10px;
 }

src/components/Toolbar.vue

@@ -6,7 +6,7 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
   <div id="toproot">
     <MobileToolbar></MobileToolbar>
     <div id="topbar">
-      <a href="/Homepage">
+      <a href="/">
         <img
             id="toplogo"
             referrerpolicy="no-referrer"

src/components/Tools/MobileToolbar.vue

@@ -6,7 +6,7 @@ import FooterContent from './FooterContent.vue'
   <div id="mobilebarroot">
     <div id="barcontent">
       <div id="weptoplogo" class="image-wrapper_2 flex-row justify-between">
-        <a href="/Homepage">
+        <a href="/">
           <img
               id="image_1"
               referrerpolicy="no-referrer"