修复开屏动画

public/intopagedir.svg

@@ -1 +1,5 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747735707334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 68c-209.868 0-380 170.132-380 380s170.132 380 380 380 380-170.132 380-380-170.132-380-380-380z m-48.516 212.181l0.435 0.29 0.435 0.3L664.38 484.828c9.168 6.42 13.94 16.775 13.635 27.183 0.301 10.245-4.318 20.438-13.204 26.877l-0.43 0.307-200.026 140.059c-14.477 10.137-34.43 6.618-44.567-7.859-10.035-14.332-6.687-34.032 7.428-44.26l0.43-0.307 163.976-114.817-163.975-114.816c-14.477-10.137-17.996-30.09-7.859-44.567 9.935-14.19 29.3-17.851 43.697-8.448z" fill="#d81e06" p-id="9007"></path></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1747735707334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+    <path d="M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 68c-209.868 0-380 170.132-380 380s170.132 380 380 380 380-170.132 380-380-170.132-380-380-380z m-48.516 212.181l0.435 0.29 0.435 0.3L664.38 484.828c9.168 6.42 13.94 16.775 13.635 27.183 0.301 10.245-4.318 20.438-13.204 26.877l-0.43 0.307-200.026 140.059c-14.477 10.137-34.43 6.618-44.567-7.859-10.035-14.332-6.687-34.032 7.428-44.26l0.43-0.307 163.976-114.817-163.975-114.816c-14.477-10.137-17.996-30.09-7.859-44.567 9.935-14.19 29.3-17.851 43.697-8.448z" fill="#ffffff" p-id="9007"></path>
+</svg>

src/components/HeaderVideo.vue

@@ -11,15 +11,14 @@ name: "HeaderVideo"
 <template>
 <div id="beginroot" class="pageroot">
  <div id="videodiv">
-   <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-          poster="/bannervideopreload.png" controls=""
+   <video poster="/logobeginweppld.png" controls="controls"
           id="wepstart" muted autoplay
           playsinline webkit-playsinline
           class="startvideo"
           x5-video-player-type="h5-page">
      <source src="/logobeginwep.mp4" type="video/mp4"></source>
    </video>
-   <video v-else poster="/bannervideopreload.png"
+   <video poster="/logobeginPCpld.png"
           id="pcstart" muted autoplay
           playsinline webkit-playsinline
           class="startvideo"
@@ -30,8 +29,8 @@ name: "HeaderVideo"
  <div id="beginbottom">
    <a href="/Homepage">
       <div class="normalcontentdiv" id="intovideoreq">
-        <span class="normalcontenttitle">
-          进入kdesign.top
+        <span class="normalcontenttitle" id="intoa">
+          <u>进入kdesign.top</u>
           <img src="/intopagedir.svg" id="intopagesvg"/>
         </span>
       </div>
@@ -47,6 +46,26 @@ name: "HeaderVideo"
   display: flex;
   flex-direction: column;
 }
+#wepstart{
+  @include media-breakpoint-between(xs, md) {
+    visibility: visible;
+    height: 100%!important;
+  }
+  @include media-breakpoint-up(md) {
+    visibility: collapse;
+    height: 0!important;
+  }
+}
+#pcstart{
+  @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;
@@ -60,6 +79,15 @@ name: "HeaderVideo"
       justify-content: center; /* flex布局下的水平居中 */
       align-items: center; /* 垂直居中对齐图标 */
     }
+    #intoa{
+      @include media-breakpoint-between(xs, md) {
+        font-size: 24px;
+      }
+      @include media-breakpoint-up(md) {
+        font-size: 35px;
+        line-height: 48px;
+      }
+    }
 
     &:hover {
       .normalcontenttitle {
@@ -80,7 +108,7 @@ name: "HeaderVideo"
 }
 .startvideo{
   width: 100%;
-  height: 100%;
+  //height: 100%;
   @include media-breakpoint-between(xs, md) {
     object-fit: contain;
   }