activity/src/view/SilkRoadSpringFestivalGala/pages/second.vue

<template>
  <div class="second">
    <div class="star">
      <img src="@/assets/img/star.png" class="starimg" />
    </div>
    <div :class="{swiper: true, isSelect: swiperClick}" @click="close">
      <div
        class="clickEle"
        :style="swiperClick ? 'margin-left: 2.1em;' : ''"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from "vue";
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const swiperClick = ref(false);
const emits = defineEmits(["changePage"]);

function close() {
  swiperClick.value = !swiperClick.value;
  let t = setTimeout(() => {
    clearTimeout(t);
    emits("changePage", "third");
  }, 500);
}
</script>
<style lang="scss" scoped>
.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, #ffffff80, #ffffff00);
    .clickEle {
      background-color: #ffffff;
      border-radius: 50%;
      transition: all 0.2s;
      height: 1.8em;
      width: 1.8em;
    }
  }
  
  .isSelect{
    background-color: #ffffff80;
  }
}


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