h5-draw-lots/src/components/imgbox.vue

<template>
  <div :class="{ bigBox: state === 1 }">
    <popup :show="showPopup" @cancel="cancelFrom" />
    <div class="card" :class="{ flipped: state === 1 }" @click="showPopup=true">
      <div class="front">
        <img v-if="isFrist" :src="fristFontImg" class="nowimage" />
        <img v-else :src="nowFontImg" class="nowimage" />
      </div>
      <div class="back">
        <img v-if="state===1" :src="nowBackImg" class="nowimage" />
        <img v-else :src="openImg" class="nowimage" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      require: true,
    },
  },
  components: {
    Popup: () => import("@/components/Popup.vue"),
  },
  data() {
    return {
      showPopup: false,
      state: 1,
      classList: ["card"],
      fristFontImg:undefined,
      nowFontImg: require('../assets/popupImg/backImag.jpg'),
      nowBackImg: require('../assets/popupImg/popuBody.jpg'),
      openImg: require('../assets/popupImg/redBack.jpg'),
      isFrist:true,
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.fristFontImg = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    transform() {
      this.showPopup=true
      this.state = Math.abs(this.state - 1);
    },
    cancelFrom() {
      this.state = Math.abs(this.state - 1);
      this.showPopup=false
      this.isFrist=false
    }
  },
};
</script>
<style lang="less" scoped>
.bigBox {
  perspective: 600px;
  overflow: hidden;
}

.card {
  position: relative;
  width: 22vw;
  height: 60.5vw;
  transform-style: preserve-3d;
  transition: all 1.6s ease;
  transform: rotateY(-180deg) scale(2);
}


.card > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  /* 背面不显示 */
  backface-visibility: hidden;
}

.flipped {
  transform: rotateY(0);
}

.nowimage {
  width: 22vw;
  height: 60.5vw;
}

.card .back {
  transform: rotateY(-180deg);
}
</style>>