njDaTuSha/src/pages/pg1/P2.vue

<template>
  <div class="p2-box">
    <div class="content-right">
      <img
        class="main-img animate__animated animate__rotateIn"
        style="animation-delay: 1.5s"
        src="/images/pg1/honour.png"
        alt=""
        @click="emit('clickImg', $event)"
      >
      <div class="back-line">
        <img src="/images/pg1/line2.png" alt="">
      </div>
    </div>
    <div class="content-left txt">      
      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 2s">
        <strong>近20万枚</strong> <br>
        紫金草徽章 <br>
        佩戴在了人们的心口
      </p>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['clickImg']);
</script>

<style lang="less" scoped>
.p2-box {
  position: relative;

  .content-right {
    position: relative;

    .main-img {
      width: 30vw;
      height: 30vw;
      position: relative;
      margin-left: auto;
      margin-right: 0;
      z-index: 10;
    }

    .back-line {
      position: absolute;
      z-index: 0;
      right: -4vw;
      bottom: -10vw;

      img {
        width: auto;
        height: 24.7vw;
        position: relative;
        z-index: 0;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/BG.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform-origin: bottom center;
        animation-name: erasure;
        animation-duration: 1s;
        animation-delay: 2.5s;
        animation-timing-function: cubic-bezier(0.07, 0.85, 0.18, 0.96);
        animation-fill-mode: forwards;
        z-index: 10;
      }
      
      @keyframes erasure {
        from {
          transform: scaleY(100%);
        }

        to {
          transform: scaleY(0);
        }
      }
    }
  }

  .content-left {
    position: absolute;
    width: calc(100% - 34vw);
    height: 100%;
    right: 34vw;
    top: 0;
    display: flex;
    justify-content: right;
    align-items: center;
  }
}
</style>