提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -9,7 +9,22 @@
         </div>
       </div>
     </div>
-    <div class="screen">
+    <div class="screen" @click="click">
+      <video
+        loop
+        id="video"
+        x5-video-player-type="h5"
+        preload="metadata"
+        autoplay
+        playsinline="true"
+        webkit-playsinline="true"
+        x-webkit-airplay="true"
+        x5-video-orientation="portraint"
+        x5-video-player-fullscreen="true"
+        src="../../assets/video/W.mp4"
+        class="video"
+        :style="page === 'fourth' || page === 'five'? '': 'z-index: -1'"
+      ></video>
       <transition name="fade">
         <second v-if="page === 'second'" @changePage="changePage" />
       </transition>
@@ -36,7 +51,7 @@ import five from "./pages/five.vue";
 import sex from "./pages/sex.vue";
 
 // import { onMounted, reactive } from "vue";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
  * window.$originData.orginParames.title 页面标题
@@ -54,6 +69,28 @@ const page = ref("second");
 //     page.value = "second";
 // }, 5000);
 
+function click() {
+  const video = document.querySelector("video");
+  video.play();
+}
+onMounted(() => {
+  const video = document.querySelector("video");
+  video.play();
+  document.addEventListener(
+    "WeixinJSBridgeReady",
+    function () {
+      video.play();
+    },
+    false
+  );
+  document.addEventListener(
+    "touchstart",
+    function () {
+      video.play();
+    },
+    false
+  );
+});
 function changePage(type) {
   page.value = type;
 }
@@ -67,13 +104,24 @@ function changePage(type) {
   .screen {
     width: 100%;
     height: 100%;
-    background-color: #000000;
+    background-image: url("../../assets/img/bg4.png");
+    background-size: 100% 100%;
     > div {
       height: 100%;
       width: 100%;
       transition: all 2s;
     }
 
+    .video {
+      position: absolute;
+      z-index: 0;
+      width: 400vw;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 100vh;
+      top: 0;
+    }
+
     .fade-enter-from,
     .fade-leave-to {
       opacity: 0;

src/view/SilkRoadSpringFestivalGala/pages/five.vue

@@ -1,19 +1,5 @@
 <template>
-  <div class="five" @click="click">
-    <video
-      loop
-      id="video"
-      x5-video-player-type="h5"
-      preload="metadata"
-      autoplay
-      playsinline="true"
-      webkit-playsinline="true"
-      x-webkit-airplay="true"
-      x5-video-orientation="portraint"
-      x5-video-player-fullscreen="true"
-      src="../../../assets/video/W.mp4"
-      class="video"
-    ></video>
+  <div class="five">
     <img src="../../../assets/img/xh.png" class="title" alt="">
     <div class="text">
       <p :style="line[0] ? 'opacity: 1' : ''" class="line">
@@ -31,7 +17,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineEmits, onMounted } from "vue";
+import { ref, defineEmits } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -60,33 +46,9 @@ let fiveT = setInterval(() => {
 
 
 
-function click() {
-  const video = document.querySelector("video");
-  video.play();
-}
-onMounted(() => {
-  const video = document.querySelector("video");
-  video.play();
-  document.addEventListener(
-    "WeixinJSBridgeReady",
-    function () {
-      video.play();
-    },
-    false
-  );
-  document.addEventListener(
-    "touchstart",
-    function () {
-      video.play();
-    },
-    false
-  );
-});
 </script>
 <style lang="scss" scoped>
 .five {
-  background-image: url("../../../assets/img/bg4.png");
-  background-size: 100% 100%;
   position: relative;
   .title {
     position: absolute;

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -1,19 +1,6 @@
 <template>
-  <div class="fourth" @click="click">
-    <video
-      loop
-      id="video"
-      x5-video-player-type="h5"
-      preload="metadata"
-      autoplay
-      playsinline="true"
-      webkit-playsinline="true"
-      x-webkit-airplay="true"
-      x5-video-orientation="portraint"
-      x5-video-player-fullscreen="true"
-      src="../../../assets/video/W.mp4"
-      class="video"
-    ></video>
+  <div class="fourth">
+    
     <div class="main animate__animated">
       <img src="../../../assets/img/top4.png" />
       <label for="file" :class="{ camere: true, shakeSlow: dou === 2 }">
@@ -36,7 +23,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineEmits, onMounted } from "vue";
+import { ref, defineEmits } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -56,29 +43,6 @@ window.addEventListener(
 );
 
 const dou = ref(0);
-onMounted(() => {
-  const video = document.querySelector("video");
-  video.play();
-  document.addEventListener(
-    "WeixinJSBridgeReady",
-    function () {
-      video.play();
-    },
-    false
-  );
-  document.addEventListener(
-    "touchstart",
-    function () {
-      video.play();
-    },
-    false
-  );
-});
-
-function click() {
-  const video = document.querySelector("video");
-  video.play();
-}
 
 function inputFile() {
   dou.value = 1;
@@ -94,18 +58,7 @@ function inputFile() {
 </script>
 <style lang="scss" scoped>
 .fourth {
-  background-image: url("../../../assets/img/bg4.png");
-  background-size: 100% 100%;
   position: relative;
-  .video {
-    position: absolute;
-    z-index: 0;
-    width: 400vw;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 100vh;
-    top: 0;
-  }
   .main {
     position: absolute;
     top: 50%;