1<template>
    <div class="module-center">
        <CardCount1 id="xtlCount" :type="1" title="稀土路街道" unit="人"/>
        <CardCount1 id="mxlCount" :type="3" title="民馨路街道" unit="人"/>
        <CardCount1 id="wsqCount" :type="4" title="万水泉镇" unit="人"/>
        <CardCount1 id="totalCount" :type="2" title="总人口数" unit="人"/>
        <PersonPercent id="manPercent" class="item"/>
        <PersonPercent id="womenPercent" class="item" type="women"/>
        <CardTwoCount id="cardTwoCount" class="item"/>
    </div>
</template>

<script setup>
import PersonPercent from '../components/card/PersonPercent.vue';
import CardCount1 from '../components/card/CardCount1.vue';
import CardTwoCount from '../components/card/CardTwoCount.vue';
</script>

<style lang="stylus" scoped>
.module-center
    width 800px
    height 600px
    border 1px solid #ccc
    background-image url(assets/imgs/center-map-bg.png)
    background-size 100% 400px
    background-repeat no-repeat
    position relative
    .item
        position absolute
        top 0
        left 0
    #manPercent
        top 400px
        left 210px
    #womenPercent
        top 420px
        left 240px
        transform scale(0.6)
    #cardTwoCount
        top 400px
        left 320px
        transform scale(0.8)
</style>