解决填不满屏幕的问题

src/components/HeaderVideo.vue

@@ -1,103 +1,46 @@
-<script lang="ts">
+<script>
-import { defineComponent, onMounted, ref } from 'vue';
+import {defineComponent} 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="beginroot" class="pageroot">
-    <div id="videodiv">
+ <div id="videodiv">
-      <img v-if="$isMobile.phone" src="/beginwepgif.gif" id="mobilebeginv"/>
+   <img v-if="$isMobile.phone" src="/beginwepgif.gif" id="beginwep"/>
-      <video
+   <video v-if="$isMobile.tablet" poster="/logobeginPCpld.png"
-          v-else-if="$isMobile.tablet"
+          id="tbstart" muted autoplay controls="controls"
-          ref="startVideoRef"
+          playsinline webkit-playsinline
-          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="/logobeginPC.mp4" type="video/mp4"></source>
-        <source src="/logobeginPC.mp4" type="video/mp4" />
+   </video>
-      </video>
+   <video v-else poster="/logobeginPCpld.png"
-      <video
+          id="pcstart" muted autoplay
-          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>
-        <source src="/logobeginPC.mp4" type="video/mp4" />
+   </video>
-      </video>
+ </div>
-    </div>
+ <div id="beginbottom">
-    <div id="beginbottom">
+   <a href="/Homepage">
-      <a href="/Homepage">
+      <div class="normalcontentdiv" id="intovideoreq">
-        <div class="normalcontentdiv" id="intovideoreq">
+        <span class="normalcontenttitle" id="intoa">
-          <span class="normalcontenttitle" id="intoa">
+          <u>进入kdesign.top</u>
-            <u>进入kdesign.top</u>
+          <img src="/intopagedir.svg" id="intopagesvg"/>
-            <img src="/intopagedir.svg" id="intopagesvg" />
+        </span>
-          </span>
+      </div>
-        </div>
+   </a>
-      </a>
+ </div>
-    </div>
+</div>
-  </div>
 </template>
 
 <style scoped lang="scss">
-/* 你的样式保持不变 */
 @import "src/publicstyle.scss";
 #beginroot{
   height: 100vh;
@@ -107,12 +50,14 @@ export default defineComponent({
 #wepstart{
   @include media-breakpoint-between(xs, md) {
     visibility: visible;
+    height: 100%!important;
   }
   @include media-breakpoint-up(md) {
     visibility: collapse;
+    height: 0!important;
   }
 }
-#pcstart, #pcstart_else { /* 同时应用到两个可能的桌面/平板视频ID */
+#pcstart{
   @include media-breakpoint-between(xs, md) {
     visibility: collapse;
   }
@@ -123,15 +68,15 @@ export default defineComponent({
 #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;
+      justify-content: center; /* flex布局下的水平居中 */
-      align-items: center;
+      align-items: center; /* 垂直居中对齐图标 */
     }
     #intoa{
       @include media-breakpoint-between(xs, md) {
@@ -155,19 +100,29 @@ export default defineComponent({
   height: 100%;
   background-color: black;
   overflow: hidden;
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md) {
+  }
 }
 .startvideo{
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 }
-#mobilebeginv{
+#beginwep{
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 }
+
 #intopagesvg{
-  height: 1em; /* 改为相对单位 */
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+}
+#intopagesvg {
+  height: 1em;
   width: auto;
   margin-left: 0.5em;
 }
@@ -178,8 +133,8 @@ export default defineComponent({
   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;
 }