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

<template>
  <div>
    <img v-if="step === 4" src="../../../assets/img/next.png" class="next" />
    <div class="sex" :style="'background-image: url(' + bgimg + ')'">
      <img
        :src="kuangimg"
        :style="
          step === 2
            ? 'opacity: 1'
            : step === 3 || step === 4
            ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
            : 'opacity: 0'
        "
        class="firstImg"
      />
      <transition name="fade">
        <div
          class="sImg img"
          v-if="step === 1"
          :style="'width:' + width + 'px;'"
        >
          <template v-for="(item, i) in text.texts" :key="i">
            <p
              v-text="item"
              :style="
                stepBody >= i
                  ? 'opacity: 1;color: ' + text.color
                  : 'color: ' + text.color
              "
            ></p>
            <br />
          </template>
        </div>
      </transition>
      <img
        :src="text2img"
        :style="step === 4 ? 'opacity: 1' : ''"
        class="tImg"
      />
      <div class="btns" v-if="step === 4">
        <div
          class="btn"
          @click="showDown"
          style="margin-left: 0"
          :stype="'border-color:' + text.color + ';color:' + text.color"
        >
          下载壁纸
        </div>
        <div
          class="btn"
          @click="showDown"
          :stype="'border-color:' + text.color + ';color:' + text.color"
        >
          生成海报
        </div>
      </div>
    </div>
    <div class="model" v-show="showImg !== undefined" @click="close">
      <van-icon
        color="#fff"
        size="26"
        name="close"
        class="close"
        @click="close"
      />
      <img :src="showImg" class="modelImg" alt="" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import data from "../data/data.json";
// 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 showImg = ref(undefined);
let width = window.$originData.orginParames.availWidth * 0.7;
const type = Math.floor(Math.random() * 12 + 1);
let ori = data[type - 1] || { texts: [] };
let max = 0;
for (let i = 0; i < ori.texts.length; i++) {
  max < ori.texts[i].length && (max = ori.texts[i].length);
}
width = 14 * max;
const text = reactive({
  ...data[type - 1],
  width,
});
const url = {
  bg: require("@/assets/img/12/" + type + "-1.png"),
  kuang: require("@/assets/img/12/" + type + ".kuang.png"),
  text2: require("@/assets/img/12/" + type + ".text2.png"),
};

const bgimg = ref(url.bg);
const kuangimg = ref(url.kuang);
const text2img = ref(url.text2);
const step = ref(0);
const stepBody = ref(0);
let t = setTimeout(() => {
  clearTimeout(t);
  step.value += 1;
  t = setInterval(() => {
    stepBody.value += 1;
    if (stepBody.value === text.texts.length) {
      clearInterval(t);
      autoStep();
    }
  }, 2000);
}, 200);

function autoStep() {
  t = setInterval(() => {
    step.value += 1;
    if (step.value === 4) {
      clearInterval(t);
      t = setTimeout(() => {
        // 跳转下一页
      }, 2000);
    }
  }, 3000);
}

function showDown() {
  showImg.value = url.bg;
}
function close() {
  showImg.value = undefined;
}
</script>
<style lang="scss" scoped>
.sex {
  @font-face {
    font-family: OPPOSans;
    src: url(../../../assets/css/OPPOSans-R.ttf);
  }
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  img,
  .img {
    width: 50%;
    transition-property: all;
    transition-duration: 2s;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .firstImg {
    transition-delay: 1s;
    -moz-transition-delay: 1s; /* Firefox 4 */
    -webkit-transition-delay: 1s; /* Safari 和 Chrome */
    -o-transition-delay: 1s; /* Opera */
  }
  .sImg {
    width: 70%;
    color: #ffffff;
    font-family: OPPOSans;
    font-size: 14px;
    line-height: 2em;
    opacity: 1;
    p {
      display: inline-block;
      white-space: nowrap;
      transition-property: all;
      transition-duration: 2s;
      opacity: 0;
    }
  }
  .tImg {
    width: 80%;
    transition-delay: 1s;
    -moz-transition-delay: 1s; /* Firefox 4 */
    -webkit-transition-delay: 1s; /* Safari 和 Chrome */
    -o-transition-delay: 1s; /* Opera */
  }

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

  .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;
  }
}

.next {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  top: inherit;
  width: 2em;
  z-index: 1;
  position: fixed;
  animation-name: an;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes an {
  from {
    bottom: 10px;
  }
  to {
    bottom: 15px;
  }
}

.model {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #00000040;

  .modelImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }
  .close {
    position: absolute;
    top: 1em;
    right: 1em;
  }
}
</style>