提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -12,16 +12,23 @@
         <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="clickEle"
+          :style="swiperClick ? 'margin-left: 2.1em;' : ''"
+        ></div>
       </div>
     </div>
-    <div class="screen third">3</div>
+    <div class="screen">
+        <third />``
+    </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 { onMounted, reactive } from "vue";
 import { ref } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
@@ -101,31 +108,27 @@ const swiperClick = ref(false);
         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 .5s;
-            height: 1.8em;
-            width: 1.8em;
-        }
+    .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;
+      }
     }
   }
 
-  .third {
-    background-image: url("../../assets/img/bg3.jpg");
-    background-size: 100% 100%;
-  }
 }
 
 @keyframes rainbow {

src/view/SilkRoadSpringFestivalGala/pages/third.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="third">
+        3
+    </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%;
+  }
+  </style>
+  

vue.config.js

@@ -17,6 +17,6 @@ module.exports = {
       ComponentsPlugin({
         resolvers: [VantResolver()],
       }),
-    ],
+    ]
   },
 };