提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -43,7 +43,7 @@ import { ref } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("second");
+const page = ref("fourth");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -1,12 +1,23 @@
 <template>
-  <div class="fourth">
+  <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="main animate__animated">
       <img src="../../../assets/img/top4.png" />
-      <label for="file">
-        <img
-          :class="{ camere: true, shakeSlow: dou === 2 }"
-          src="../../../assets/img/camere.png"
-        />
+      <label for="file" :class="{ camere: true, shakeSlow: dou === 2 }">
+        <img src="../../../assets/img/camere.png" style="width: 100%" />
       </label>
       <img
         :class="{ doudong: dou === 1 }"
@@ -25,7 +36,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineEmits } from "vue";
+import { ref, defineEmits, onMounted } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -45,6 +56,29 @@ 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;
@@ -62,8 +96,16 @@ function inputFile() {
 .fourth {
   background-image: url("../../../assets/img/bg4.png");
   background-size: 100% 100%;
-  padding-top: 30%;
   position: relative;
+  .video {
+    position: absolute;
+    z-index: 0;
+    width: 400vw;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100vh;
+    top: 0;
+  }
   .main {
     position: absolute;
     top: 50%;
@@ -74,6 +116,7 @@ function inputFile() {
       display: block;
     }
     .camere {
+      display: block;
       width: 5em;
       margin: 4em auto;
     }

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -13,7 +13,11 @@
         class="firstImg"
       />
       <transition name="fade">
-        <div class="sImg img" v-if="step === 1" :style="'width:' + width + 'px;'">
+        <div
+          class="sImg img"
+          v-if="step === 1"
+          :style="'width:' + width + 'px;'"
+        >
           <template v-for="(item, i) in text.texts" :key="i">
             <p
               v-text="item"
@@ -33,8 +37,7 @@
         class="tImg"
       />
 
-      <div class="btns">
-        <!-- <div class="btns" v-if="step === 3"> -->
+      <div class="btns" v-if="step === 3">
         <div class="btn" @click="showDown" style="margin-left: 0">下载壁纸</div>
         <div class="btn" @click="showDown">生成海报</div>
       </div>
@@ -69,7 +72,7 @@ let max = 0;
 for (let i = 0; i < ori.texts.length; i++) {
   max < ori.texts[i].length && (max = ori.texts[i].length);
 }
-width  = 14 * max;
+width = 14 * max;
 const text = reactive({
   ...data[type - 1],
   width,