njDaTuSha/src/pages/pg3/flower.vue

<template>
  <div class="flower">
    <img src="/images/pg3/线轮廓.png" alt="">
    <Flower1 class="bg-lv1" />
  </div>
</template>

<script setup>
import Flower1 from './flower1.vue';
</script>

<style lang="less" scoped>
.flower {
  position: relative;
  width: 64vw;
  height: 64vw;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    z-index: 0;
    position: absolute;
    display: block;
    height: 100%;
    right: 0;
  }

  // background-image: url(./images/pg3/线轮廓.png);
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // background-position-x: 16.67vw;

  .bg-lv1 {
    flex: none;
    width: 56vw;
    height: 56vw;
    z-index: 1;
  }
}
</style>