提交

src/assets/css/base.css

@@ -1,9 +1,19 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-html,body{
-    width: 100vw;
-    height: 100vh;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
+@font-face {
+  font-family: OPPOSans;
+  src: url(./OPPOSans-R.ttf);
+}
+@font-face {
+  font-family: PingFangRegular;
+  src: url(./PingFangRegular.ttf);
 }

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -2,11 +2,21 @@
   <div class="SilkRoadSpringFestivalGala">
     <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>
+        <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>
+          <div class="titleClass" @click="tosecond">点击开始</div>
+          <div class="subtitle" @click="tosecond">PRESS START</div>
         </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>
+          </p> 
+        </div> -->
       </div>
     </div>
 
@@ -60,7 +70,7 @@ import audioFile from "../../assets/music/BGM.mp3";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("second");
+const page = ref("first");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");
@@ -68,7 +78,7 @@ const page = ref("second");
 // const first_text_view = reactive(first_text);
 // let time = setTimeout(() => {
 //   clearTimeout(time);
-//     page.value = "second";
+// page.value = "second";
 // }, 5000);
 const audio = new Audio();
 audio.src = audioFile;
@@ -76,9 +86,15 @@ audio.loop = true;
 
 function click() {
   const video = document.querySelector("video");
+  console.log(video.playing,audio.playing)
   !video.playing && video.play();
   !audio.playing && audio.play();
 }
+
+function tosecond() {
+  changePage("second");
+  click();
+}
 onMounted(() => {
   click();
   document.addEventListener("WeixinJSBridgeReady", click, false);
@@ -86,7 +102,6 @@ onMounted(() => {
 });
 function changePage(type) {
   page.value = type;
-  if (type === "third") click();
 }
 </script>
 <style lang="scss" scoped>
@@ -101,8 +116,6 @@ function changePage(type) {
     overflow: hidden;
     background-color: #000000;
     position: relative;
-    // background-image: url("../../assets/img/bg4.png");
-    // background-size: 100% 100%;
     > div {
       height: 100%;
       width: 100%;
@@ -134,9 +147,53 @@ function changePage(type) {
   }
   .first {
     background-color: #000000;
+    color: #ffffff;
+    text-align: center;
+    font-family: PingFangRegular;
     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;
+    }
     .first_text {
       position: absolute;
       top: 50%;
@@ -166,4 +223,12 @@ 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/second.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="second">
     <img src="@/assets/img/Hi.png" class="title" />
-    <img src="@/assets/img/clickStart.png" class="titlselect" />
+    <div class="titlselect">点我进入</div>
     <img src="@/assets/img/bottom.png" class="titlbottom" />
     <div class="star">
       <img src="@/assets/img/star.png" class="starimg" />
@@ -51,10 +51,13 @@ function close() {
     width: 100%;
   }
   .titlselect{
+    color: #ffffff;
     position: absolute;
     bottom: 18vh;
-    width: 120%;
-    margin-left: -8%;
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    padding: 3px 0;
   }
   .star {
     position: absolute;

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -140,10 +140,6 @@ 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%;