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

<template>
  <div class="sex" :style="'background-image: url(' + bgimg + ')'">
    <img
      :src="kuangimg"
      :style="
        step === 2
          ? 'opacity: 1'
          : step === 3
          ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
          : 'opacity: 0'
      "
      class="firstImg"
    />
    <transition name="sex_step_1">
      <img :src="textimg" v-if="step === 1" class="sImg" />
    </transition>
    <img
      :src="text2img"
      :style="step === 3 ? 'opacity: 1' : 'opacity: 0'"
      class="tImg"
    />

    <div class="btns">
      <div class="btn" style="margin-left: 0">下载壁纸</div>
      <div class="btn">生成海报</div>
    </div>
  </div>
</template>
<script setup>
import { ref } 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 step = ref(1);
let t = setInterval(() => {
  step.value += 1;
  if (step.value === 3) clearInterval(t);
}, 2000);

const type = Math.floor(Math.random() * 13 + 1);
const url = {
  bg: require("@/assets/img/12/" + type + "-1.png"),
  kuang: require("@/assets/img/12/" + type + ".kuang.png"),
  text: require("@/assets/img/12/" + type + ".text.png"),
  text2: require("@/assets/img/12/" + type + ".text2.png"),
};
const bgimg = ref(url.bg);
const kuangimg = ref(url.kuang);
const textimg = ref(url.text);
const text2img = ref(url.text2);
</script>
<style lang="scss" scoped>
.sex {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  img {
    width: 50%;
    transition: all 4s;
  }
  .firstImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sImg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
  }
  .tImg {
    position: absolute;
    top: 50%;
    width: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .btns {
    position: absolute;
    text-align: center;
    bottom: 5vh;
    width: 100%;
    > div {
      display: inline-block;
      border: 1px solid #fff;
      border-radius: 2em;
      font-weight: 600;
      color: #fff;
      padding: 5px 15px;
      margin-left: 2em;
    }
  }

  .sex_step_1-enter-from,
  .sex_step_1-leave-to {
    opacity: 0;
  }
  .sex_step_1-enter-active,
  .sex_step_1-leave-active {
    transition: opacity 1s ease;
  }
  .sex_step_1-enter-to,
  .sex_step_1-leave-from {
    opacity: 1;
  }
}
</style>