提交

src/view/SilkRoadSpringFestivalGala/index.js

@@ -53,3 +53,15 @@ window.setUserSession = () => {
   console.log("登录");
   getUser(() => createApp(App).mount("#app"));
 };
+
+// 给元素添加playing属性
+Object.defineProperty(HTMLMediaElement.prototype, "playing", {
+  get: function () {
+    return !!(
+      this.currentTime > 0 &&
+      !this.paused &&
+      !this.ended &&
+      this.readyState > 2
+    );
+  },
+});

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -9,10 +9,11 @@
         </div>
       </div>
     </div>
+
     <div class="screen" @click="click">
       <video
+        muted
         loop
-        id="video"
         x5-video-player-type="h5"
         preload="metadata"
         autoplay
@@ -52,6 +53,7 @@ import sex from "./pages/sex.vue";
 
 // import { onMounted, reactive } from "vue";
 import { ref, onMounted } from "vue";
+import audioFile from "../../assets/music/BGM.mp3";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
  * window.$originData.orginParames.title 页面标题
@@ -68,31 +70,23 @@ const page = ref("second");
 //   clearTimeout(time);
 //     page.value = "second";
 // }, 5000);
+const audio = new Audio();
+audio.src = audioFile;
+audio.loop = true;
 
 function click() {
   const video = document.querySelector("video");
-  video.play();
+  !video.playing && video.play();
+  !audio.playing && audio.play();
 }
 onMounted(() => {
-  const video = document.querySelector("video");
-  video.play();
-  document.addEventListener(
-    "WeixinJSBridgeReady",
-    function () {
-      video.play();
-    },
-    false
-  );
-  document.addEventListener(
-    "touchstart",
-    function () {
-      video.play();
-    },
-    false
-  );
+  click();
+  document.addEventListener("WeixinJSBridgeReady", click, false);
+  document.addEventListener("touchstart", click, false);
 });
 function changePage(type) {
   page.value = type;
+  if (type === "third") click();
 }
 </script>
 <style lang="scss" scoped>

src/view/SilkRoadSpringFestivalGala/pages/five.vue

@@ -57,15 +57,6 @@ let fiveT = setInterval(() => {
     width: 10em;
     transform: translateX(-50%);
   }
-  .video {
-    position: absolute;
-    z-index: 0;
-    width: 400vw;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 100vh;
-    top: 0;
-  }
   .text {
     position: absolute;
     left: 0;

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,6 +1,8 @@
 <template>
-  <div style="width: 100%; overflow: hidden;">
-    <img v-if="step === 5" src="../../../assets/img/next.png" class="next" />
+  <div style="width: 100%; overflow: hidden">
+    <transition name="fade">
+      <img v-if="step === 5" src="../../../assets/img/next.png" class="next" />
+    </transition>
     <div class="sex" :style="'background-image: url(' + bgimg + ')'">
       <img
         :src="kuangimg"
@@ -37,34 +39,38 @@
         :style="step >= 4 ? 'opacity: 1' : ''"
         class="tImg"
       />
-      <div class="btns" v-if="step === 5">
-        <div
-          class="btn"
-          @click="showDown"
-          style="margin-left: 0"
-          :stype="'border-color:' + text.color + ';color:' + text.color"
-        >
-          下载壁纸
-        </div>
-        <div
-          class="btn"
-          @click="showDown"
-          :stype="'border-color:' + text.color + ';color:' + text.color"
-        >
-          生成海报
+      <transition name="fade">
+        <div class="btns" v-if="step === 5">
+          <div
+            class="btn"
+            @click="showDown"
+            style="margin-left: 0"
+            :stype="'border-color:' + text.color + ';color:' + text.color"
+          >
+            下载壁纸
+          </div>
+          <div
+            class="btn"
+            @click="showDown"
+            :stype="'border-color:' + text.color + ';color:' + text.color"
+          >
+            生成海报
+          </div>
         </div>
-      </div>
-    </div>
-    <div class="model" v-show="showImg !== undefined" @click="close">
-      <van-icon
-        color="#fff"
-        size="26"
-        name="close"
-        class="close"
-        @click="close"
-      />
-      <img :src="showImg" class="modelImg" alt="" />
+      </transition>
     </div>
+    <transition name="fade">
+      <div class="model" v-show="showImg !== undefined" @click="close">
+        <van-icon
+          color="#fff"
+          size="26"
+          name="close"
+          class="close"
+          @click="close"
+        />
+        <img :src="showImg" class="modelImg" alt="" />
+      </div>
+    </transition>
   </div>
 </template>
 <script setup>