提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -10,11 +10,21 @@
       </div>
     </div>
     <div class="screen">
-      <second v-if="page == 'second'" @changePage="changePage" />
-      <third v-if="page == 'third'" @changePage="changePage" />
-      <fourth v-if="page == 'fourth'" @changePage="changePage" />
-      <five v-if="page == 'five'" @changePage="changePage" />
-      <sex v-if="page === 'sex'" />
+      <transition name="fade">
+        <second v-if="page === 'second'" @changePage="changePage" />
+      </transition>
+      <transition name="fade">
+        <third v-if="page === 'third'" @changePage="changePage" />
+      </transition>
+      <transition name="fade">
+        <fourth v-if="page === 'fourth'" @changePage="changePage" />
+      </transition>
+      <transition name="fade">
+        <five v-if="page === 'five'" @changePage="changePage" />
+      </transition>
+      <transition name="fade">
+        <sex v-if="page === 'sex'" />
+      </transition>
     </div>
   </div>
 </template>
@@ -26,7 +36,7 @@ import five from "./pages/five.vue";
 import sex from "./pages/sex.vue";
 
 // import { onMounted, reactive } from "vue";
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
  * window.$originData.orginParames.title 页面标题
@@ -34,16 +44,16 @@ import { ref, reactive } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-const page = ref("first");
-let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
-for (let i = 0; i < first_text.length; i++) {
-  first_text[i] = first_text[i].split("");
-}
-const first_text_view = reactive(first_text);
-let time = setTimeout(() => {
-  clearTimeout(time);
-    page.value = "second";
-}, 5000);
+const page = ref("second");
+// let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
+// for (let i = 0; i < first_text.length; i++) {
+//   first_text[i] = first_text[i].split("");
+// }
+// const first_text_view = reactive(first_text);
+// let time = setTimeout(() => {
+//   clearTimeout(time);
+//     page.value = "second";
+// }, 5000);
 
 function changePage(type) {
   page.value = type;
@@ -58,8 +68,24 @@ function changePage(type) {
   .screen {
     width: 100%;
     height: 100%;
+    background-color: #000000;
     > div {
       height: 100%;
+      width: 100%;
+      transition: all 2s;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 1s ease;
+    }
+    .fade-enter-to,
+    .fade-leave-from {
+      opacity: 1;
     }
   }
   .first {

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -44,11 +44,9 @@ window.addEventListener(
 let t = setTimeout(() => {
   clearTimeout(t);
   d.value = true;
-  console.log("------");
 }, 2000);
 
-function inputFile(e) {
-  console.log(e);
+function inputFile() {
   emits("changePage", "five")
 }
 </script>

src/view/SilkRoadSpringFestivalGala/pages/second.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup>
-import { ref,defineEmits } from "vue";
+import { ref, defineEmits } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -28,7 +28,7 @@ function close() {
   let t = setTimeout(() => {
     clearTimeout(t);
     emits("changePage", "third");
-  }, 2000);
+  }, 300);
 }
 </script>
 <style lang="scss" scoped>
@@ -67,7 +67,7 @@ function close() {
     .clickEle {
       background-color: #ffffff;
       border-radius: 50%;
-      transition: all 0.5s;
+      transition: all 0.2s;
       height: 1.8em;
       width: 1.8em;
     }

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="sex">
+  <div class="sex" :style="'background-image: url(' + bgimg + ')'">
     <img
-      src="../../../assets/img/1.kuang.png"
-      v-show="step === 2 || step === 3"
+      :src="kuangimg"
       :style="
         step === 2
           ? 'opacity: 1'
@@ -13,20 +12,18 @@
       class="firstImg"
     />
     <img
-      src="../../../assets/img/1.text.png"
-      v-show="step === 1"
+      :src="textimg"
       :style="step === 1 ? 'opacity: 1' : 'opacity: 0'"
       class="sImg"
     />
     <img
-      src="../../../assets/img/1.text2.png"
-      v-show="step === 3"
+      :src="text2img"
       :style="step === 3 ? 'opacity: 1' : 'opacity: 0'"
       class="tImg"
     />
 
     <div class="btns">
-      <div class="btn" style="margin-left: 0;">下载壁纸</div>
+      <div class="btn" style="margin-left: 0">下载壁纸</div>
       <div class="btn">生成海报</div>
     </div>
   </div>
@@ -45,26 +42,36 @@ let t = setInterval(() => {
   step.value += 1;
   if (step.value === 3) clearInterval(t);
 }, 2000);
+
+const type = Math.floor(Math.random() * 13 + 1);
+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);
 </script>
 <style lang="scss" scoped>
 .sex {
   width: 100%;
   height: 100%;
-  background-image: url(../../../assets/img/1-1.png);
   background-size: 100% 100%;
   position: relative;
   img {
     width: 50%;
+    transition: all 4s;
   }
   .firstImg {
-    transition: all 1s;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   .sImg {
-    transition: all 1s;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -72,7 +79,6 @@ let t = setInterval(() => {
     transform: translate(-50%, -50%);
   }
   .tImg {
-    transition: all 1s;
     position: absolute;
     top: 50%;
     width: 90%;