提交

src/view/SilkRoadSpringFestivalGala/data/data.json

@@ -4,7 +4,7 @@
             "晚风踩着云朵，日落跌进迢迢星野。",
             "橙色热浪把节拍敲响，橘子汽水瓶叮叮当当，",
             "霞光掩护着发烫的脸庞，声色张扬，欲盖弥彰，",
-            "余光蹑手蹑脚，竖起耳朵，等你说天色尚早"
+            "余光蹑手蹑脚，竖起耳朵，等你说天色尚早。"
         ],
         "color": "#ffffff"
     },
@@ -13,7 +13,7 @@
             "清风沐浴，草香四溢，步履一生",
             "心里又原野的人，跑起来，脚步带着狂野的风。",
             "当云有了形状，湖水有了心跳，种子有了远方，",
-            "风铃响起，久违了，自由的心"
+            "风铃响起，久违了，自由的心。"
         ],
         "color": "#ffffff"
     },
@@ -58,7 +58,7 @@
             "仅仅活着是不够的，",
             "还需要有阳光、自由，",
             "和一点花的芬芳。",
-            "你就当我是在说爱情吧"
+            "你就当我是在说爱情吧。"
         ],
         "color": "#ffffff"
     },

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -102,7 +102,6 @@ audio.loop = true;
 function tosecond() {
   changePage("second");
   const video = document.querySelectorAll("video");
-  console.log(video, audio.playing);
   for (let i = 0; i < video.length; i++) {
     const v = video[i];
     !v.playing && v.play();

src/view/SilkRoadSpringFestivalGala/pages/second.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="second">
     <img src="@/assets/img/Hi.png" class="title" />
-    <div class="titlselect">点我进入</div>
+    <!-- <div class="titlselect">点我进入</div> -->
     <img src="@/assets/img/bottom.png" class="titlbottom" />
     <!-- <div class="star">
       <img src="@/assets/img/star.png" class="starimg" />
     </div> -->
-    <div :class="{swiper: true, isSelect: swiperClick}" @click="close">
+
+    <div class="loading second" @click="close">
+      <div class="loading1">
+        <div class="loading2"></div>
+      </div>
+    </div>
+    <!-- <div :class="{swiper: true, isSelect: swiperClick}" @click="close">
       <div
         class="clickEle"
         :style="swiperClick ? 'margin-left: 2.1em;' : ''"
       ></div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup>
@@ -37,23 +43,29 @@ function close() {
 <style lang="scss" scoped>
 .second {
   position: relative;
-//   background-image: url("../../../assets/img/silubg.jpg");
-//   background-size: 100% 100%;
-  .title{
+  //   background-image: url("../../../assets/img/silubg.jpg");
+  //   background-size: 100% 100%;
+  .second{
+    bottom: 13vh;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .title {
     position: absolute;
     width: 10em;
     top: 12vh;
     left: 10vw;
   }
-  .titlbottom{
+  .titlbottom {
     position: absolute;
     bottom: 4vh;
     width: 100%;
   }
-  .titlselect{
+  .titlselect {
     color: #ffffff;
     position: absolute;
-    bottom: 18vh;
+    bottom: 24vh;
     width: 100%;
     text-align: center;
     font-size: 16px;
@@ -95,13 +107,12 @@ function close() {
       width: 1.8em;
     }
   }
-  
-  .isSelect{
+
+  .isSelect {
     background-color: #ffffff80;
   }
 }
 
-
 @keyframes star {
   0% {
     width: 15px;