2023-11-20 18:04:58 +08:00
|
|
|
1<template>
|
|
|
|
<div class="module-center">
|
2023-11-21 17:48:18 +08:00
|
|
|
<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="人"/>
|
2023-11-20 18:04:58 +08:00
|
|
|
<PersonPercent id="manPercent" class="item"/>
|
|
|
|
<PersonPercent id="womenPercent" class="item" type="women"/>
|
|
|
|
<CardTwoCount id="cardTwoCount" class="item"/>
|
2023-11-21 17:48:18 +08:00
|
|
|
<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">
|
2023-11-20 18:04:58 +08:00
|
|
|
</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
|
2023-11-21 17:48:18 +08:00
|
|
|
.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
|
2023-11-20 18:04:58 +08:00
|
|
|
#manPercent
|
|
|
|
top 400px
|
|
|
|
left 210px
|
|
|
|
#womenPercent
|
|
|
|
top 420px
|
|
|
|
left 240px
|
|
|
|
transform scale(0.6)
|
|
|
|
#cardTwoCount
|
|
|
|
top 400px
|
|
|
|
left 320px
|
|
|
|
transform scale(0.8)
|
2023-11-21 17:48:18 +08:00
|
|
|
|
2023-11-20 18:04:58 +08:00
|
|
|
</style>
|