2023-11-20 18:04:58 +08:00
|
|
|
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>
|
