<template>
  <section class="_container">
    <div v-for="(item, i) in list" :key="`item_${i}`" :class="['_item', `item_${i + 1}`]">
      <div>{{ item.name }}</div>
      <div class="_num">{{ item.value }}</div>
    </div>
  </section>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const list = ref([
  {
    name: '珠海市',
    value: '13万件',
  },
  {
    name: '广州市',
    value: '12万件',
  },
  {
    name: '深圳市',
    value: '8万件',
  },
  {
    name: '香港',
    value: '8651件',
  },
  {
    name: '澳门市',
    value: '7541件',
  },
]);
onMounted(() => {});
</script>
<style lang="scss" scoped>
._container {
  width: 100%;
  height: 100%;
  position: relative;
  ._item {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1 / 1;
    color: #fff;
    font-size: 16px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    ._num {
      font-size: 18px;
    }
    div {
      text-align: center;
    }
  }
  .item_1 {
    right: 16%;
    bottom: 0%;
    width: 32%;
    background-image: url('../../../assets/images/trace/bubbleA.png');
    ._num {
      color: #75c9ff;
    }
  }
  .item_2 {
    left: 5%;
    top: 5%;
    width: 28%;
    background-image: url('../../../assets/images/trace/bubbleB.png');
    ._num {
      color: #01fefd;
    }
  }
  .item_3 {
    right: 0;
    top: 5%;
    width: 26%;
    background-image: url('../../../assets/images/trace/bubbleC.png');
    ._num {
      color: #fef906;
    }
  }
  .item_4 {
    top: 40px;
    left: 36%;
    width: 22%;
    background-image: url('../../../assets/images/trace/bubbleD.png');
    ._num {
      color: #02fd94;
    }
  }
  .item_5 {
    left: 20%;
    bottom: 0;
    width: 20%;
    background-image: url('../../../assets/images/trace/bubbleE.png');
    ._num {
      color: #34f9b7;
    }
  }
}
</style>
