activity/src/view/SilkRoadSpringFestivalGala/index.vue

<template>
  <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>
        </div>
      </div>
    </div>
    <div class="screen">
      <transition name="fade">
        <second v-if="page === 'second'" @changePage="changePage" />
      </transition>
      <transition name="fade">
        <third v-if="page === 'third'" @changePage="changePage" />
      </transition>
      <transition name="fade">
        <fourth v-if="page === 'fourth'" @changePage="changePage" />
      </transition>
      <transition name="fade">
        <five v-if="page === 'five'" @changePage="changePage" />
      </transition>
      <transition name="fade">
        <sex v-if="page === 'sex'" />
      </transition>
    </div>
  </div>
</template>
<script setup>
import third from "./pages/third.vue";
import second from "./pages/second.vue";
import fourth from "./pages/fourth.vue";
import five from "./pages/five.vue";
import sex from "./pages/sex.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参数
 */
const page = ref("second");
// let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
// 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);
//     page.value = "second";
// }, 5000);

function changePage(type) {
  page.value = type;
}
</script>
<style lang="scss" scoped>
.SilkRoadSpringFestivalGala {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-weight: 400;
  .screen {
    width: 100%;
    height: 100%;
    background-color: #000000;
    > div {
      height: 100%;
      width: 100%;
      transition: all 2s;
    }

    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 1s ease;
    }
    .fade-enter-to,
    .fade-leave-from {
      opacity: 1;
    }
  }
  .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;
        }
      }
    }
  }
}

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