提交

public/index.html

@@ -13,6 +13,7 @@
         });
     </script>
     <% } %>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <script src="https://cxzx.smcic.net/topic/highSpeed/index.min.js"></script>
     <script src="https://cxzx.smcic.net/topic/tool/js/shareWinxin.js"></script>
 </head>

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -1,36 +1,32 @@
 <template>
   <div class="SilkRoadSpringFestivalGala">
-    <div class="screen first" v-if="showFirst">
-      <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>
-        </p>
-      </div>
-    </div>
-    <div class="screen second">
-      <div class="star">
-        <img src="@/assets/img/star.png" class="starimg" />
-      </div>
-      <div class="swiper" @click="swiperClick = !swiperClick">
-        <div
-          class="clickEle"
-          :style="swiperClick ? 'margin-left: 2.1em;' : ''"
-        ></div>
+    <div class="screen" v-if="page == 'first'">
+      <div class="first">
+        <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>
+          </p>
+        </div>
       </div>
     </div>
     <div class="screen">
-        <third />``
+      <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'" />
     </div>
-    <div class="screen">4</div>
-    <div class="screen">5</div>
-    <div class="screen">6</div>
   </div>
 </template>
 <script setup>
 import third from "./pages/third.vue";
+import second from "./pages/second.vue";
+import fourth from "./pages/fourth.vue";
+import five from "./pages/five.vue";
+import sex from "./pages/sex.vue";
 
 // import { onMounted, reactive } from "vue";
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
  * window.$originData.orginParames.title 页面标题
@@ -38,20 +34,22 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-// let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
-const showFirst = ref(false);
-const swiperClick = ref(false);
-// 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);
-//   showFirst.value = false;
-// }, 5000);
+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 = "sex";
+}, 5000);
+
+function changePage(type) {
+  page.value = type;
+}
 </script>
 <style lang="scss" scoped>
-@import url(https://cxzx.smcic.net/topic/tool/css/swiper-bundle8.4.4.min.css);
 .SilkRoadSpringFestivalGala {
   width: 100vw;
   height: 100vh;
@@ -60,6 +58,9 @@ const swiperClick = ref(false);
   .screen {
     width: 100%;
     height: 100%;
+    > div {
+      height: 100%;
+    }
   }
   .first {
     background-color: #000000;
@@ -86,49 +87,6 @@ const swiperClick = ref(false);
       }
     }
   }
-
-  .second {
-    position: relative;
-    background-image: url("../../assets/img/silubg.jpg");
-    background-size: 100% 100%;
-    .star {
-      position: absolute;
-      top: 50%;
-      right: 10vw;
-      width: 60px;
-      height: 60px;
-      z-index: 1;
-      .starimg {
-        animation: star 3s infinite;
-        width: 15px;
-        height: 15px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-    .swiper {
-      width: 4em;
-      height: 2em;
-      bottom: 13vh;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: 2em;
-      line-height: 2em;
-      position: absolute;
-      border: 2px solid #ffffff;
-      background-image: linear-gradient(to right, #ffffff, #ffffff00);
-      .clickEle {
-        background-color: #ffffff;
-        border-radius: 50%;
-        transition: all 0.5s;
-        height: 1.8em;
-        width: 1.8em;
-      }
-    }
-  }
-
 }
 
 @keyframes rainbow {

src/view/SilkRoadSpringFestivalGala/pages/five.vue

@@ -0,0 +1,61 @@
+<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>
+  </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);
+  }, 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;
+      }
+    }
+  }
+  </style>
+  

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="fourth">
+    <div class="main animate__animated">
+      <img src="../../../assets/img/top4.png" />
+      <label for="file">
+        <img
+          :class="{ camere: true, animate__shake: d }"
+          src="../../../assets/img/camere.png"
+        />
+      </label>
+      <img src="../../../assets/img/bottom4.png" />
+    </div>
+
+    <input
+      type="file"
+      accept="image/*"
+      style="display: none;"
+      id="file"
+      capture="user"
+      @change="inputFile"
+    />
+  </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 emits = defineEmits(["changePage"]);
+const d = ref(false);
+window.addEventListener(
+  "devicemotion",
+  function (e) {
+    const event = e || {};
+    const acceleration = event.accelerationIncludingGravity;
+    console.log(acceleration);
+  },
+  true
+);
+let t = setTimeout(() => {
+  clearTimeout(t);
+  d.value = true;
+  console.log("------");
+}, 2000);
+
+function inputFile(e) {
+  console.log(e);
+  emits("changePage", "five")
+}
+</script>
+<style lang="scss" scoped>
+.fourth {
+  background-image: url("../../../assets/img/bg4.png");
+  background-size: 100% 100%;
+  padding-top: 30%;
+  position: relative;
+  .main {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    img {
+      width: 50%;
+      margin: 0 auto;
+      display: block;
+    }
+    .camere {
+      width: 8em;
+      margin: 2em auto;
+    }
+  }
+}
+</style>

src/view/SilkRoadSpringFestivalGala/pages/second.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="second">
+    <div class="star">
+      <img src="@/assets/img/star.png" class="starimg" />
+    </div>
+    <div class="swiper" @click="close">
+      <div
+        class="clickEle"
+        :style="swiperClick ? 'margin-left: 2.1em;' : ''"
+      ></div>
+    </div>
+  </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 swiperClick = ref(false);
+const emits = defineEmits(["changePage"]);
+
+function close() {
+  swiperClick.value = !swiperClick.value;
+  let t = setTimeout(() => {
+    clearTimeout(t);
+    emits("changePage", "third");
+  }, 2000);
+}
+</script>
+<style lang="scss" scoped>
+.second {
+  position: relative;
+  background-image: url("../../../assets/img/silubg.jpg");
+  background-size: 100% 100%;
+  .star {
+    position: absolute;
+    top: 50%;
+    right: 10vw;
+    width: 60px;
+    height: 60px;
+    z-index: 1;
+    .starimg {
+      animation: star 3s infinite;
+      width: 15px;
+      height: 15px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .swiper {
+    width: 4em;
+    height: 2em;
+    bottom: 13vh;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2em;
+    line-height: 2em;
+    position: absolute;
+    border: 2px solid #ffffff;
+    background-image: linear-gradient(to right, #ffffff, #ffffff00);
+    .clickEle {
+      background-color: #ffffff;
+      border-radius: 50%;
+      transition: all 0.5s;
+      height: 1.8em;
+      width: 1.8em;
+    }
+  }
+}
+</style>

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="sex">
+    <img
+      src="../../../assets/img/1.kuang.png"
+      v-show="step === 2 || step === 3"
+      :style="
+        step === 2
+          ? 'opacity: 1'
+          : step === 3
+          ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
+          : 'opacity: 0'
+      "
+      class="firstImg"
+    />
+    <img
+      src="../../../assets/img/1.text.png"
+      v-show="step === 1"
+      :style="step === 1 ? 'opacity: 1' : 'opacity: 0'"
+      class="sImg"
+    />
+    <img
+      src="../../../assets/img/1.text2.png"
+      v-show="step === 3"
+      :style="step === 3 ? 'opacity: 1' : 'opacity: 0'"
+      class="tImg"
+    />
+
+    <div class="btns">
+      <div class="btn" style="margin-left: 0;">下载壁纸</div>
+      <div class="btn">生成海报</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } 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 step = ref(1);
+let t = setInterval(() => {
+  step.value += 1;
+  if (step.value === 3) clearInterval(t);
+}, 2000);
+</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%;
+  }
+  .firstImg {
+    transition: all 1s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .sImg {
+    transition: all 1s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 70%;
+    transform: translate(-50%, -50%);
+  }
+  .tImg {
+    transition: all 1s;
+    position: absolute;
+    top: 50%;
+    width: 90%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .btns {
+    position: absolute;
+    text-align: center;
+    bottom: 5vh;
+    width: 100%;
+    > div {
+      display: inline-block;
+      border: 1px solid #fff;
+      border-radius: 2em;
+      font-weight: 600;
+      color: #fff;
+      padding: 5px 15px;
+      margin-left: 2em;
+    }
+  }
+}
+</style>

src/view/SilkRoadSpringFestivalGala/pages/third.vue

@@ -1,23 +1,63 @@
 <template>
-    <div class="third">
-        3
+  <div class="third">
+    <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">身边的光</p>
+      <p :style="line[3] ? 'opacity: 1' : ''" class="line">照亮前方的路</p>
+      <p :style="line[4] ? 'opacity: 1' : ''" class="line">2023年的答案</p>
+      <p :style="line[5] ? 'opacity: 1' : ''" class="line">或许</p>
+      <p :style="line[6] ? 'opacity: 1' : ''" class="line">就在其中</p>
+      <p :style="line[7] ? 'opacity: 1' : ''" class="line">......</p>
     </div>
-  </template>
-  <script setup>
-  // import { onMounted, reactive } from "vue";
-  // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-  /**
-   * window.$originData.orginParames.title 页面标题
-   * window.$originData.orginParames.parameters 固定参数值
-   * window.$originData.urlParames url参数
-   */
-  
-  </script>
-  <style lang="scss" scoped>
-  
-  .third {
-    background-image: url("../../../assets/img/bg3.jpg");
-    background-size: 100% 100%;
+  </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(8).fill(false));
+const emits = defineEmits(['changePage'])
+line.value[0] = true;
+let thirdT = 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;
   }
-  </style>
-  
+  if (li[li.length - 1] !== true) return;
+  clearInterval(thirdT);
+  thirdT = setTimeout(() => {
+    clearTimeout(thirdT);
+    emits("changePage", "fourth");
+  }, 1000);
+}, 1000);
+</script>
+<style lang="scss" scoped>
+.third {
+  background-image: url("../../../assets/img/bg3.jpg");
+  background-size: 100% 100%;
+  position: relative;
+  .text {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    bottom: 0;
+    width: 50%;
+    color: #fff;
+    text-align: center;
+    line-height: 5vh;
+    .line {
+      opacity: 0;
+      transition: opacity 1s;
+    }
+  }
+}
+</style>