提交

src/view/SilkRoadSpringFestivalGala/pages/five.vue

@@ -1,61 +1,114 @@
 <template>
-    <div class="five">
-      <div class="text">
-        <p :style="line[0] ? 'opacity: 1' : ''" class="line">生物振动波形分析……</p>
-        <p :style="line[1] ? 'opacity: 1' : ''" class="line">怪诞行为学检测……</p>
-        <p :style="line[2] ? 'opacity: 1' : ''" class="line">GPS星象分析展开中……</p>
-        <p :style="line[3] ? 'opacity: 1' : ''" class="line">元宇宙万年历计算……</p>
-        <p :style="line[4] ? 'opacity: 1' : ''" class="line">开运色彩已匹配……</p>
-      </div>
+  <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="text">
+      <p :style="line[0] ? 'opacity: 1' : ''" class="line">
+        生物振动波形分析……
+      </p>
+      <p :style="line[1] ? 'opacity: 1' : ''" class="line">怪诞行为学检测……</p>
+      <p :style="line[2] ? 'opacity: 1' : ''" class="line">
+        GPS星象分析展开中……
+      </p>
+      <p :style="line[3] ? 'opacity: 1' : ''" class="line">
+        元宇宙万年历计算……
+      </p>
+      <p :style="line[4] ? 'opacity: 1' : ''" class="line">开运色彩已匹配……</p>
     </div>
-  </template>
-  <script setup>
-  import { ref,defineEmits } from "vue";
-  // import { onMounted, reactive } from "vue";
-  // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-  /**
-   * window.$originData.orginParames.title 页面标题
-   * window.$originData.orginParames.parameters 固定参数值
-   * window.$originData.urlParames url参数
-   */
-  const line = ref(Array(5).fill(false));
-  const emits = defineEmits(['changePage'])
-  line.value[0] = true;
-  let fiveT = setInterval(() => {
-    let li = line.value;
-    for (let i = 0; i < li.length; i++) {
-      const l = li[i];
-      if (l !== false) continue;
-      line.value[i] = true;
-      break;
-    }
-    if (li[li.length - 1] !== true) return;
-    clearInterval(fiveT);
-    fiveT = setTimeout(() => {
-      clearTimeout(fiveT);
-      emits("changePage", "sex");
-    }, 1000);
+  </div>
+</template>
+<script setup>
+import { ref, defineEmits, onMounted } from "vue";
+// import { onMounted, reactive } from "vue";
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+const line = ref(Array(5).fill(false));
+const emits = defineEmits(["changePage"]);
+line.value[0] = true;
+let fiveT = setInterval(() => {
+  let li = line.value;
+  for (let i = 0; i < li.length; i++) {
+    const l = li[i];
+    if (l !== false) continue;
+    line.value[i] = true;
+    break;
+  }
+  if (li[li.length - 1] !== true) return;
+  clearInterval(fiveT);
+  fiveT = setTimeout(() => {
+    clearTimeout(fiveT);
+    emits("changePage", "sex");
   }, 1000);
-  </script>
-  <style lang="scss" scoped>
-  .five {
-    background-image: url("../../../assets/img/bg5.png");
-    background-size: 100% 100%;
-    position: relative;
-    .text {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      bottom: 0;
-      width: 100%;
-      color: #fff;
-      text-align: center;
-      line-height: 5vh;
-      .line {
-        opacity: 0;
-        transition: opacity 1s;
-      }
+}, 1000);
+
+
+
+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/bg5.png");
+  background-size: 100% 100%;
+  position: relative;
+  .video {
+    position: absolute;
+    z-index: 0;
+    width: 400vw;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100vh;
+    top: 0;
+  }
+  .text {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    bottom: 0;
+    width: 100%;
+    color: #fff;
+    text-align: center;
+    line-height: 5vh;
+    .line {
+      opacity: 0;
+      transition: opacity 1s;
     }
   }
-  </style>
-  
+}
+</style>

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -80,13 +80,11 @@ const text = reactive({
 const url = {
   bg: require("@/assets/img/12/" + type + "-1.png"),
   kuang: require("@/assets/img/12/" + type + ".kuang.png"),
-  text: require("@/assets/img/12/" + type + ".text.png"),
   text2: require("@/assets/img/12/" + type + ".text2.png"),
 };
 
 const bgimg = ref(url.bg);
 const kuangimg = ref(url.kuang);
-// const textimg = ref(url.text);
 const text2img = ref(url.text2);
 const step = ref(0);
 const stepBody = ref(0);