提交

src/view/SilkRoadSpringFestivalGala/data/data.json

@@ -0,0 +1,110 @@
+[
+    {
+        "texts": [
+            "晚风踩着云朵，日落跌进迢迢星野。",
+            "橙色热浪把节拍敲响，橘子汽水瓶叮叮当当，",
+            "霞光掩护着发烫的脸庞，声色张扬，欲盖弥彰，",
+            "余光蹑手蹑脚，竖起耳朵，等你说天色尚早"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "清风沐浴，草香四溢，步履一生",
+            "心里又原野的人，跑起来，脚步带着狂野的风。",
+            "当云有了形状，湖水有了心跳，种子有了远方，",
+            "风铃响起，久违了，自由的心"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "有人认为爱是性，是婚姻，",
+            "是一堆孩子，是呼之即来的金钱，",
+            "但我觉得，爱，是那天夜晚在我们头顶闪烁的星星，",
+            "是那晚我们聊的很晚，是你懂我懂的悄悄话。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "奇妙的旅程将要开始，",
+            "无意避开猛烈的狂喜，",
+            "不畏未知的遗憾来袭，",
+            "心流劈开混沌，启程。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "星河在上，波光在下，话开在你身边，",
+            "阳光扫描全身，打个哈欠，伸个懒腰。",
+            "你要相信，冬天从这里夺取的，",
+            "春天会交换与你。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "虽然生命无法绕过迟暮的季节，",
+            "但只要还有不断的念想，",
+            "里头顽石的希望终将穿透寒冰万丈，",
+            "到你身旁。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "仅仅活着是不够的，",
+            "还需要有阳光、自由，",
+            "和一点花的芬芳。",
+            "你就当我是在说爱情吧"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "在一个暮色沉沉的早上醒来，",
+            "时间已然实效。",
+            "吻半杯红酒，剩下倒在头上，",
+            "自顾自享受着这狼狈不堪的美丽。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "惬意午后，草坪上时光悠闲，",
+            "手牵着阳光，把自己裹进大地的怀抱。",
+            "慷慨的夏天，带走忧愁烦扰吧！",
+            "赐我清梦一场。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "太阳的情话穿过虚空，",
+            "在地球的两极化作爱意。",
+            "深深的话，要浅浅的说，",
+            "深深的话，要浅浅的说，"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "奋不顾身，",
+            "是真爱的第一个特征。",
+            "绞尽脑汁，拼尽全力，",
+            "想要成为你众所周知的欢喜。"
+        ],
+        "color": "#ffffff"
+    },
+    {
+        "texts": [
+            "不要温和地走进那良夜，",
+            "怒斥，怒斥光明的消逝。",
+            "冲破藩篱，",
+            "黑暗消散。"
+        ],
+        "color": "#000000"
+    }
+]

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -43,8 +43,7 @@ import { ref } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-console.log(window.$originData);
-const page = ref("second");
+const page = ref("sex");
 // 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

@@ -4,11 +4,14 @@
       <img src="../../../assets/img/top4.png" />
       <label for="file">
         <img
-          :class="{ camere: true, shakeSlow: dou }"
+          :class="{ camere: true, shakeSlow: dou === 2 }"
           src="../../../assets/img/camere.png"
         />
       </label>
-      <img src="../../../assets/img/bottom4.png" />
+      <img
+        :class="{ doudong: dou === 1 }"
+        src="../../../assets/img/bottom4.png"
+      />
     </div>
 
     <input
@@ -22,7 +25,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";
 /**
@@ -41,13 +44,17 @@ window.addEventListener(
   true
 );
 
-const dou = ref(false);
+const dou = ref(0);
 
 function inputFile() {
-  dou.value = true;
+  dou.value = 1;
   let t = setTimeout(() => {
     clearTimeout(t);
-    emits("changePage", "five");
+    dou.value = 2;
+    t = setTimeout(() => {
+      clearTimeout(t);
+      emits("changePage", "five");
+    }, 2000);
   }, 2000);
 }
 </script>
@@ -62,13 +69,13 @@ function inputFile() {
     top: 50%;
     transform: translateY(-50%);
     img {
-      width: 50%;
+      width: 40%;
       margin: 0 auto;
       display: block;
     }
     .camere {
-      width: 8em;
-      margin: 2em auto;
+      width: 5em;
+      margin: 4em auto;
     }
   }
 
@@ -225,6 +232,56 @@ function inputFile() {
       transform: translate(0, 0) rotate(0);
     }
   }
+  @keyframes buzz-out {
+    0% {
+      transform: translateX(3px) rotate(2deg);
+    }
+
+    10% {
+      transform: translateX(-3px) rotate(-2deg);
+    }
+
+    20% {
+      transform: translateX(3px) rotate(2deg);
+    }
+
+    30% {
+      transform: translateX(-3px) rotate(-2deg);
+    }
+
+    40% {
+      transform: translateX(3px) rotate(2deg);
+    }
+
+    50% {
+      transform: translateX(-3px) rotate(-2deg);
+    }
+
+    60% {
+      transform: translateX(3px) rotate(2deg);
+    }
+
+    70% {
+      transform: translateX(-3px) rotate(-2deg);
+    }
+
+    80% {
+      transform: translateX(3px) rotate(2deg);
+    }
+
+    90% {
+      transform: translateX(-3px) rotate(-2deg);
+    }
+
+    100% {
+      transform: translateX(3px) rotate(2deg);
+    }
+  }
+
+  .doudong {
+    animation: buzz-out 2s 1 ease-in-out;
+  }
+
   .shakeSlow {
     animation: shake-slow 2s 1 ease-in-out;
   }

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -6,20 +6,30 @@
         :style="
           step === 2
             ? 'opacity: 1'
-            : step === 3
+            : step === 3 || step === 4
             ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
             : 'opacity: 0'
         "
         class="firstImg"
       />
-      <img
-        :src="textimg"
-        :style="step === 1 ? 'opacity: 1' : ''"
-        class="sImg"
-      />
+      <transition name="fade">
+        <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"
+              :style="
+                stepBody >= i
+                  ? 'opacity: 1;color: ' + text.color
+                  : 'color: ' + text.color
+              "
+            ></p>
+            <br />
+          </template>
+        </div>
+      </transition>
       <img
         :src="text2img"
-        :style="step === 3 ? 'opacity: 1' : ''"
+        :style="step === 4 ? 'opacity: 1' : ''"
         class="tImg"
       />
 
@@ -30,13 +40,20 @@
       </div>
     </div>
     <div class="model" v-show="showImg !== undefined" @click="close">
-        <van-icon color="#fff" size="26" name="close" class="close" @click="close" />
+      <van-icon
+        color="#fff"
+        size="26"
+        name="close"
+        class="close"
+        @click="close"
+      />
       <img :src="showImg" class="modelImg" alt="" />
     </div>
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+import data from "../data/data.json";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -45,29 +62,47 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 const showImg = ref(undefined);
+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;
+for (let i = 0; i < ori.texts.length; i++) {
+  max < ori.texts[i].length && (max = ori.texts[i].length);
+}
+width  = 14 * max;
+const text = reactive({
+  ...data[type - 1],
+  width,
+});
 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 textimg = ref(url.text);
 const text2img = ref(url.text2);
 const step = ref(0);
+const stepBody = ref(0);
 let t = setTimeout(() => {
   clearTimeout(t);
   step.value += 1;
-  console.log("---");
-  return autoStep();
+  t = setInterval(() => {
+    stepBody.value += 1;
+    if (stepBody.value === text.texts.length) {
+      clearInterval(t);
+      autoStep();
+    }
+  }, 2000);
 }, 200);
 
 function autoStep() {
   t = setInterval(() => {
     step.value += 1;
-    if (step.value === 3) clearInterval(t);
+    if (step.value === 4) clearInterval(t);
   }, 3000);
 }
 
@@ -80,11 +115,16 @@ function close() {
 </script>
 <style lang="scss" scoped>
 .sex {
+  @font-face {
+    font-family: OPPOSans;
+    src: url(../../../assets/css/OPPOSans-R.ttf);
+  }
   width: 100%;
   height: 100%;
   background-size: 100% 100%;
   position: relative;
-  img {
+  img,
+  .img {
     width: 50%;
     transition-property: all;
     transition-duration: 2s;
@@ -102,9 +142,21 @@ function close() {
   }
   .sImg {
     width: 70%;
+    color: #ffffff;
+    font-family: OPPOSans;
+    font-size: 14px;
+    line-height: 2em;
+    opacity: 1;
+    p {
+      display: inline-block;
+      white-space: nowrap;
+      transition-property: all;
+      transition-duration: 2s;
+      opacity: 0;
+    }
   }
   .tImg {
-    width: 90%;
+    width: 80%;
     transition-delay: 1s;
     -moz-transition-delay: 1s; /* Firefox 4 */
     -webkit-transition-delay: 1s; /* Safari 和 Chrome */
@@ -126,6 +178,19 @@ function close() {
       margin-left: 2em;
     }
   }
+
+  .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;
+  }
 }
 .model {
   position: fixed;
@@ -143,7 +208,7 @@ function close() {
     transform: translate(-50%, -50%);
     width: 80%;
   }
-  .close{
+  .close {
     position: absolute;
     top: 1em;
     right: 1em;

src/view/imageLive/index.vue

@@ -22,7 +22,6 @@
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-console.log(window.$originData);
 </script>
 <style lang="scss">
 .imageLive {