111 lines
2.0 KiB
Vue
111 lines
2.0 KiB
Vue
<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>
|