<template>
  <div class="SilkRoadSpringFestivalGala">
    <div class="screen first" v-if="showFirst">
      <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 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">
        <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";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
console.log(window.$originData);
// 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);
.SilkRoadSpringFestivalGala {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-weight: 400;
  .screen {
    width: 100%;
    height: 100%;
  }
  .first {
    background-color: #000000;
    position: relative;
    transition: all 5s;
    opacity: 1;
    .first_text {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      text-align: center;
      letter-spacing: 0.2rem;
      font-size: 1.2rem;
      font-family: Lato, serif;
      text-transform: uppercase;
      p {
        margin-top: 5px;
        span {
          animation: rainbow 50s alternate infinite forwards;
        }
      }
    }
  }

  .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 0.5s;
        height: 1.8em;
        width: 1.8em;
      }
    }
  }

}

@keyframes rainbow {
  @for $i from 0 through 20 {
    #{percentage($i * 0.05)} {
      color: hsl(random(360%), 75, 75);
    }
  }
}

@keyframes star {
  0% {
    width: 15px;
    height: 15px;
  }
  50% {
    width: 35px;
    height: 35px;
  }
  100% {
    width: 15px;
    height: 15px;
  }
}
</style>
