提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -67,7 +67,10 @@
         <sex v-if="page === 'sex'" @changePage="changePage" />
       </transition>
       <transition name="fade">
-        <seven v-if="page === 'seven'" />
+        <seven v-if="page === 'seven'" @changePage="changePage" />
+      </transition>
+      <transition name="fade">
+        <eight v-if="page === 'eight'" />
       </transition>
     </div>
   </div>
@@ -79,6 +82,7 @@ import fourth from "./pages/fourth.vue";
 import five from "./pages/five.vue";
 import sex from "./pages/sex.vue";
 import seven from "./pages/seven.vue";
+import eight from "./pages/eight.vue";
 
 // import { onMounted, reactive } from "vue";
 import { ref } from "vue";
@@ -91,7 +95,7 @@ document.title = "多彩丝路中国年 | 2023新年开运色";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("first");
+const page = ref("seven");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/eight.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="eight">
+      <van-row class="luckDraw">
+        <van-col
+          span="8"
+          v-for="i in 12"
+          :key="i"
+          :class="{ shakeSlow: show[i - 1] }"
+        >
+          <div v-if="show[i - 1]" class="click">点我</div>
+          <van-image
+            :width="img.width"
+            :height="img.height"
+            :class="{ img: true }"
+            fit="contain"
+            src="err"
+          >
+            <template v-slot:loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+          </van-image>
+        </van-col>
+      </van-row>
+    </div>
+  </template>
+  <script setup>
+  import { reactive, 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参数
+   */
+  let w = window.$originData.orginParames.availWidth || 0;
+  const show = ref(Array(12).fill(false));
+  
+  setInterval(() => {
+    let index = Math.ceil(Math.random() * 12) - 1;
+    if (index < 0) index = 0;
+    for (let i = 0; i < show.value.length; i++) {
+      show.value[i] = i == index;
+    }
+  }, 5000);
+  
+  w = (w / 3) * 0.8;
+  const img = reactive({
+    width: w,
+    height: w,
+  });
+  </script>
+  <style lang="scss" scoped>
+  .eight {
+    width: 100%;
+    height: 100%;
+    padding-top: 1rem;
+    background-color: #fff;
+    .luckDraw {
+      $background: #00000040;
+      background-color: #eeeeee80;
+      border-radius: 5px;
+      padding: 0.5em;
+      margin: 0 auto;
+      width: 96%;
+      .img {
+        border-radius: 5px;
+        display: block;
+        margin: auto;
+        border: 3px solid #ffffff;
+      }
+      .click {
+        background-color: $background;
+        position: absolute;
+        border-radius: 3px;
+        text-align: center;
+        padding: 2px 3px;
+        color: #fff;
+        font-size: 14px;
+        right: -0.5em;
+        top: -0.5em;
+        width: 4em;
+        z-index: 10;
+      }
+      .click:before {
+        position: absolute;
+        display: block;
+        content: " ";
+        height: 0px;
+        width: 0px;
+        border: 3px solid $background;
+        border-top-color: rgba($color: #000000, $alpha: 0);
+        border-left-color: rgba($color: #000000, $alpha: 0);
+        bottom: -3px;
+        left: 9px;
+        transform: rotate(45deg);
+      }
+    }
+  }
+  
+  .shakeSlow {
+    animation: shake-slow 1s ease-in-out;
+  }
+  
+  @keyframes shake-slow {
+    0% {
+      transform: rotate(0) scale(1);
+    }
+    20% {
+      transform: rotate(2.5deg);
+    }
+    40% {
+      transform: rotate(-2.5deg);
+    }
+    60% {
+      transform: rotate(2.5deg) scale(1.1);
+    }
+    80% {
+      transform: rotate(-2.5deg);
+    }
+    100% {
+      transform: rotate(0);
+    }
+  }
+  </style>
+  <style lang="scss">
+  .eight {
+    .van-col {
+      padding: 0.2em 0;
+      position: relative;
+    }
+  }
+  </style>
+  

src/view/SilkRoadSpringFestivalGala/pages/seven.vue

@@ -1,19 +1,53 @@
 <template>
-    <div>
-        商务页
-    </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>
-  .seven {
+  <div class="seven">
+    <img @click="nextPage" src="../../../assets/img/next.png" class="next" />
+  </div>
+</template>
+<script setup>
+import { 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"]);
+
+function nextPage() {
+  emits("changePage", "eight");
+}
+</script>
+<style lang="scss" scoped>
+.seven {
+  width: 100%;
+  height: 100%;
+  padding-top: 1rem;
+  background-image: url(../../../assets/img/bg3.jpg);
+  background-size: 100% 100%;
+  position: relative;
+  .next {
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    top: inherit;
+    width: 2em;
+    z-index: 1;
+    position: fixed;
+    animation-name: an;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
   }
-  </style>
-  
+}
+
+@keyframes an {
+  from {
+    bottom: 10px;
+  }
+  to {
+    bottom: 15px;
+  }
+}
+</style>