bt-xtgxq-population-bigdata/src/module/ModuleCenter.vue

1<template>
    <div class="module-center">
        <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人"/>
        <CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人"/>
        <CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人"/>
        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人"/>
        <PersonPercent id="manPercent" class="item"/>
        <PersonPercent id="womenPercent" class="item" type="women"/>
        <CardTwoCount id="cardTwoCount" class="item"/>
        <img id="xtlIcon" class="stree-icon" src="assets/imgs/icon/xtl.png">
        <img id="mxlIcon" class="stree-icon" src="assets/imgs/icon/mxl.png">
        <img id="wsqIcon" class="stree-icon" src="assets/imgs/icon/wsq.png">
    </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
    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
    .stree-icon
        position absolute
        top 0
        left 0
        width 25px
    #totalCount
        top 280px
        left 300px
    #xtlIcon
        top 30px
        left 300px
    #xtlCount
        top 20px
        left 330px
    #mxlIcon
        top 140px
        left 60px
    #mxlCount
        top 180px
        left 10px
    #wsqIcon
        top 220px
        left 560px
    #wsqCount
        top 220px
        left 600px
    #manPercent
        top 400px
        left 210px
    #womenPercent
        top 420px
        left 240px
        transform scale(0.6)
    #cardTwoCount
        top 400px
        left 320px
        transform scale(0.8)

</style>