From 6f708d179a519fdfce06eb8c80ad4088295e6009 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Wed, 21 May 2025 15:21:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E5=BC=80=E5=B1=8F=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=94=B9=E6=88=90=E5=8A=A8=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/beginwepgif.gif                 |   3 +
 src/components/HeaderVideo.vue         | 170 +++++++++++++++----------
 src/components/Toolbar.vue             |   2 +-
 src/components/Tools/MobileToolbar.vue |   2 +-
 4 files changed, 109 insertions(+), 68 deletions(-)
 create mode 100644 public/beginwepgif.gif

diff --git a/public/beginwepgif.gif b/public/beginwepgif.gif
new file mode 100644
index 0000000..2591347
--- /dev/null
+++ b/public/beginwepgif.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:edb25ef715e6f41f6ab05807e4a2525b953051f92d3d22aac96c08738d0bb57e
+size 5472077
diff --git a/src/components/HeaderVideo.vue b/src/components/HeaderVideo.vue
index 66606c1..7119603 100644
--- a/src/components/HeaderVideo.vue
+++ b/src/components/HeaderVideo.vue
@@ -1,52 +1,103 @@
-<script>
-import {defineComponent} from 'vue'
-import { useBootstrapBreakpoint } from './useBreakpoint.js';
-const { breakpoint } = useBootstrapBreakpoint();
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
 
 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"
-          id="wepstart" muted autoplay preload="auto"
-          playsinline webkit-playsinline
+  <div id="beginroot" class="pageroot">
+    <div id="videodiv">
+      <img v-if="$isMobile.phone" src="/beginwepgif.gif" id="mobilebeginv"/>
+      <video
+          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">
-     <source src="/logobeginwep.mp4" type="video/mp4"></source>
-   </video>
-   <video v-else-if="$isMobile.tablet" poster="/logobeginPCpld.png" controls="controls"
-          id="pcstart" muted autoplay preload="auto"
-          playsinline webkit-playsinline
+          x5-video-player-type="h5-page"
+      >
+        <source src="/logobeginPC.mp4" type="video/mp4" />
+      </video>
+      <video
+          v-else
+          ref="startVideoRef"
+          poster="/logobeginPCpld.png"
+          id="pcstart_else"
+          muted
+          autoplay
+          preload="auto"
+          playsinline
+          webkit-playsinline
           class="startvideo"
-          x5-video-player-type="h5-page">
-     <source src="/logobeginPC.mp4" type="video/mp4"></source>
-   </video>
-   <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">
-   <a href="/Homepage">
-      <div class="normalcontentdiv" id="intovideoreq">
-        <span class="normalcontenttitle" id="intoa">
-          <u>进入kdesign.top</u>
-          <img src="/intopagedir.svg" id="intopagesvg"/>
-        </span>
-      </div>
-   </a>
- </div>
-</div>
+          x5-video-player-type="h5-page"
+      >
+        <source src="/logobeginPC.mp4" type="video/mp4" />
+      </video>
+    </div>
+    <div id="beginbottom">
+      <a href="/Homepage">
+        <div class="normalcontentdiv" id="intovideoreq">
+          <span class="normalcontenttitle" id="intoa">
+            <u>进入kdesign.top</u>
+            <img src="/intopagedir.svg" id="intopagesvg" />
+          </span>
+        </div>
+      </a>
+    </div>
+  </div>
 </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布局下的水平居中 */
-      align-items: center; /* 垂直居中对齐图标 */
+      justify-content: 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) {
-    object-fit: contain;
-  }
+  object-fit: contain;
+}
+#mobilebeginv{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 #intopagesvg{
-  height: 100%;
-  width: auto;
-  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; /* 添加这一行使内容水平居中 */
-  width: 100%; /* 确保宽度占满 */
+  align-items: center;
+  width: 100%;
   margin-left: 0!important;
   margin-bottom: 10px;
 }
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 56ff68e..379bb0d 100644
--- a/src/components/Toolbar.vue
+++ b/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"
diff --git a/src/components/Tools/MobileToolbar.vue b/src/components/Tools/MobileToolbar.vue
index 2005d9b..ff6a35a 100644
--- a/src/components/Tools/MobileToolbar.vue
+++ b/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"