提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -3,15 +3,13 @@
     <div class="screen" v-if="page == 'first'">
       <div class="first">
         <img class="head" src="../../assets/img/GNie.gif" alt="" />
-        <div class="body">
-          <div class="loading" @click="tosecond">
-            <div class="loading1">
-              <div class="loading2"></div>
-            </div>
+        <div class="loading" @click="tosecond">
+          <div class="loading1">
+            <div class="loading2"></div>
           </div>
-          <div class="titleClass" @click="tosecond">点击开始</div>
-          <div class="subtitle" @click="tosecond">PRESS START</div>
         </div>
+        <div class="titleClass" @click="tosecond">点击开始</div>
+        <div class="subtitle" @click="tosecond">PRESS START</div>
         <!-- <div class="first_text">
            <p v-for="v in first_text_view" :key="v">
             <span v-for="val in v" v-text="val" :key="val"></span>
@@ -70,7 +68,7 @@ import audioFile from "../../assets/music/BGM.mp3";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("first");
+const page = ref("sex");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");
@@ -100,6 +98,62 @@ function changePage(type) {
   page.value = type;
 }
 </script>
+<style lang="scss">
+.SilkRoadSpringFestivalGala {
+  .loading {
+    width: 5em;
+    height: 5em;
+    margin: 0 auto;
+    transition: all 1s;
+    position: relative;
+    border-radius: 50%;
+    background-color: #ffffff40;
+    animation: loading 3s alternate infinite forwards;
+    .loading1 {
+      width: 80%;
+      height: 80%;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      transition: all 1s;
+      border-radius: 50%;
+      background-color: #ffffff60;
+      transform: translate(-50%, -50%);
+      animation: loading 3s alternate infinite forwards;
+      .loading2 {
+        top: 50%;
+        left: 50%;
+        width: 80%;
+        height: 80%;
+        transition: all 1s;
+        position: absolute;
+        border-radius: 50%;
+        background-color: #ffffff;
+        transform: translate(-50%, -50%);
+        animation: loading 3s alternate infinite forwards;
+      }
+    }
+  }
+  .titleClass {
+    font-size: 20px;
+    color: #ffffff;
+    text-align: center;
+  }
+  .subtitle {
+    font-size: 12px;
+    color: #ffffff;
+    text-align: center;
+  }
+}
+
+@keyframes loading {
+  @for $i from 0 through 3 {
+    #{percentage($i * 0.33)} {
+      opacity: $i/3 * 0.5 + 0.5;
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 .SilkRoadSpringFestivalGala {
   width: 100vw;
@@ -149,43 +203,7 @@ function changePage(type) {
     position: relative;
     transition: all 5s;
     opacity: 1;
-    .loading {
-      width: 5em;
-      height: 5em;
-      margin: 0 auto;
-      position: relative;
-      border-radius: 50%;
-      background-color: #ffffff40;
-      animation: loading 2s alternate infinite forwards;
-      .loading1 {
-        width: 80%;
-        height: 80%;
-        top: 50%;
-        left: 50%;
-        position: absolute;
-        border-radius: 50%;
-        background-color: #ffffff60;
-        transform: translate(-50%, -50%);
-        animation: loading 2s alternate infinite forwards;
-        .loading2 {
-          top: 50%;
-          left: 50%;
-          width: 80%;
-          height: 80%;
-          position: absolute;
-          border-radius: 50%;
-          background-color: #ffffff;
-          transform: translate(-50%, -50%);
-          animation: loading 2s alternate infinite forwards;
-        }
-      }
-    }
-    .titleClass {
-      font-size: 20px;
-    }
-    .subtitle {
-      font-size: 12px;
-    }
+
     .head {
       display: block;
       margin: 0 auto;
@@ -219,12 +237,4 @@ function changePage(type) {
     }
   }
 }
-
-@keyframes loading {
-  @for $i from 0 through 3 {
-    #{percentage($i * 0.33)} {
-      opacity: $i/3 * 0.5 + 0.5;
-    }
-  }
-}
 </style>

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -34,6 +34,17 @@
           </template>
         </div>
       </transition>
+      <transition name="fade">
+        <div class="body" @click="changeNextStep" v-if="nextStep === 1">
+          <div class="loading">
+            <div class="loading1">
+              <div class="loading2"></div>
+            </div>
+          </div>
+          <div class="titleClass">点击开始</div>
+          <div class="subtitle">PRESS START</div>
+        </div>
+      </transition>
       <img
         :src="text2img"
         :style="step >= 4 ? 'opacity: 1' : ''"
@@ -88,6 +99,7 @@ let width = window.$originData.orginParames.availWidth * 0.7;
 const type = Math.floor(Math.random() * 12 + 1);
 let ori = data[type - 1] || { texts: [] };
 let max = 0;
+let nextStep = ref(0);
 for (let i = 0; i < ori.texts.length; i++) {
   max < ori.texts[i].length && (max = ori.texts[i].length);
 }
@@ -113,15 +125,20 @@ let t = setTimeout(() => {
   t = setInterval(() => {
     stepBody.value += 1;
     if (stepBody.value === text.texts.length) {
+      nextStep.value = 1;
       clearInterval(t);
       autoStep();
     }
   }, 2000);
 }, 200);
 
+function changeNextStep() {
+  nextStep.value += 1;
+}
+
 function autoStep() {
   t = setInterval(() => {
-    step.value += 1;
+    nextStep.value === 2 && (step.value += 1);
     if (step.value === 5) {
       clearInterval(t);
       t = setTimeout(() => {
@@ -144,6 +161,11 @@ function close() {
   height: 100%;
   background-size: 100% 100%;
   position: relative;
+  .body {
+    position: absolute;
+    bottom: 10vh;
+    width: 100vw;
+  }
   img,
   .img {
     width: 50%;