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

<template>
    <div class="module">
        <ModuleCard2 title="特殊信息类人员">
            <div class="module-card2-container">
                <div class="person-count1-container">
                    <PersonCount1/>
                </div>
                <div class="person-count2-container">
                    <PersonCount2 class="count1"/>
                    <PersonCount2 class="count2" :bg-type="2"/>
                </div>
            </div>
        </ModuleCard2>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ModuleCard2 from './card/ModuleCard2.vue';
import PersonCount1 from '../components/card/PersonCount1.vue';
import PersonCount2 from '../components/card/PersonCount2.vue';

</script>

<style lang="stylus" scoped>
.module
   .module-card2-container
        display flex
        height 100%
        align-items center
        .person-count1-container
            width 160px
            display flex
            justify-content: center
        .person-count2-container
            width 200px
            height 60px
            position relative
            .count1
                position absolute
                top 0
                left 0
            .count2
                position absolute
                top 0
                left 110px
</style>