activity/src/view/SilkRoadSpringFestivalGala/index.vue

<template>
  <div class="SilkRoadSpringFestivalGala">
    <div class="screen" v-if="page == 'first'">
      <div class="first">
        <div class="mian_first">
          <img class="head" src="../../assets/img/GNie.gif" alt="" />
          <div class="loading" @click="tosecond">
            <div class="loading1">
              <div class="loading2"></div>
            </div>
          </div>
          <div class="titleClass" @click="tosecond">点击开始</div>
          <div class="subtitle" @click="tosecond">PRESS START</div>
        </div>
        <!-- <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">
      <video
        muted
        loop
        x5-video-player-type="h5"
        preload="metadata"
        autoplay
        playsinline="true"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        x5-video-orientation="portraint"
        x5-video-player-fullscreen="true"
        src="../../assets/video/W.mp4"
        class="video"
        v-show="page === 'five'"
      ></video>
      <video
        muted
        loop
        x5-video-player-type="h5"
        preload="metadata"
        autoplay
        playsinline="true"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        x5-video-orientation="portraint"
        x5-video-player-fullscreen="true"
        src="../../assets/video/bg1.mp4"
        class="video firstvideo"
        v-show="page === 'second'"
      ></video>
      <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">
        <six v-if="page === 'six' || page === 'seven'" />
      </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 six from "./pages/six.vue";

// import { onMounted, reactive } from "vue";
import { ref } from "vue";
import audioFile from "../../assets/music/BGM.mp3";

document.title = "多彩丝路中国年 | 2023新年开运色";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const page = ref("six");
// 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);
const audio = new Audio();
audio.src = audioFile;
audio.loop = true;

function tosecond() {
  changePage("second");
  const video = document.querySelectorAll("video");
  for (let i = 0; i < video.length; i++) {
    const v = video[i];
    !v.playing && v.play();
  }
  !audio.playing && audio.play();
}

function changePage(type) {
  page.value = type;
}
</script>
<style lang="scss">
.SilkRoadSpringFestivalGala {
  .mian_first {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .loading {
    width: 4em;
    height: 4em;
    margin: 0 auto;
    transition: all 1s;
    position: relative;
    border-radius: 50%;
    background-color: #ffffff40;
    animation: loading 3s alternate infinite forwards;
    .loading1 {
      width: 80%;
      height: 80%;
      top: 50%;
      left: 50%;
      position: absolute;
      transition: all 1s;
      border-radius: 50%;
      background-color: #ffffff60;
      transform: translate(-50%, -50%);
      animation: loading 3s alternate infinite forwards;
      .loading2 {
        top: 50%;
        left: 50%;
        width: 80%;
        height: 80%;
        transition: all 1s;
        position: absolute;
        border-radius: 50%;
        background-color: #ffffff;
        transform: translate(-50%, -50%);
        animation: loading 3s alternate infinite forwards;
      }
    }
  }
  .titleClass {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
  }
  .subtitle {
    font-size: 10px;
    color: #ffffff;
    text-align: center;
  }
}

@keyframes loading {
  @for $i from 0 through 3 {
    #{percentage($i * 0.33)} {
      opacity: $i/3 * 0.5 + 0.5;
    }
  }
}
</style>
<style lang="scss" scoped>
.SilkRoadSpringFestivalGala {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-weight: 400;
  .screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    position: relative;
    > div {
      height: 100%;
      width: 100%;
      transition: all 2s;
    }

    .video {
      position: absolute;
      z-index: 0;
      width: 400vw;
      left: 50%;
      transform: translateX(-50%);
      height: 100vh;
      top: 0;
    }
    .firstvideo {
      width: 200vw;
      height: 100vh;
    }

    .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;
    color: #ffffff;
    text-align: center;
    font-family: PingFangRegular;
    position: relative;
    transition: all 5s;
    opacity: 1;
    .head {
      display: block;
      margin: 0 auto;
      width: 60vw;
    }
    .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>