提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -7,10 +7,15 @@
         </p>
       </div>
     </div>
-    <div class="screen">
-        
+    <div class="screen second">
+      <div class="star">
+        <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>
     </div>
-    <div class="screen">3</div>
+    <div class="screen third">3</div>
     <div class="screen">4</div>
     <div class="screen">5</div>
     <div class="screen">6</div>
@@ -18,7 +23,7 @@
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
  * window.$originData.orginParames.title 页面标题
@@ -26,19 +31,17 @@ import { reactive, ref } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
-const showFirst = ref(true);
-for (let i = 0; i < first_text.length; i++) {
-  first_text[i] = first_text[i].split("");
-}
-const first_text_view = reactive(first_text);
-let time = setTimeout(() => {
-  clearTimeout(time);
-  showFirst.value = false;
-}, 5000);
-
-
-
+// let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
+const showFirst = ref(false);
+const swiperClick = ref(false);
+// for (let i = 0; i < first_text.length; i++) {
+//   first_text[i] = first_text[i].split("");
+// }
+// const first_text_view = reactive(first_text);
+// let time = setTimeout(() => {
+//   clearTimeout(time);
+//   showFirst.value = false;
+// }, 5000);
 </script>
 <style lang="scss" scoped>
 @import url(https://cxzx.smcic.net/topic/tool/css/swiper-bundle8.4.4.min.css);
@@ -76,6 +79,53 @@ let time = setTimeout(() => {
       }
     }
   }
+
+  .second {
+    position: relative;
+    background-image: url("../../assets/img/silubg.jpg");
+    background-size: 100% 100%;
+    .star {
+      position: absolute;
+      top: 50%;
+      right: 10vw;
+      width: 60px;
+      height: 60px;
+      z-index: 1;
+      .starimg {
+        animation: star 3s infinite;
+        width: 15px;
+        height: 15px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        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;
+        }
+    }
+  }
+
+  .third {
+    background-image: url("../../assets/img/bg3.jpg");
+    background-size: 100% 100%;
+  }
 }
 
 @keyframes rainbow {
@@ -85,4 +135,19 @@ let time = setTimeout(() => {
     }
   }
 }
+
+@keyframes star {
+  0% {
+    width: 15px;
+    height: 15px;
+  }
+  50% {
+    width: 35px;
+    height: 35px;
+  }
+  100% {
+    width: 15px;
+    height: 15px;
+  }
+}
 </style>