<template>
    <div class="module">
        <ModuleCard3 class="module-card3" title="宗教信仰统计">
            <div class="module-container">
                <div class="left">
                    <CircleWave class="circle-container"/>
                    <CircleWave class="circle-container"/>
                    <CircleWave class="circle-container"/>
                    <CircleWave class="circle-container"/>
                </div>
                <div class="right">
                    <Process class="process"/>
                    <Process class="process"/>
                    <Process class="process"/>
                    <Process class="process"/>
                </div>
            </div>
        </ModuleCard3>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ModuleCard3 from './card/ModuleCard3.vue';
import Process from '../components/process/Process.vue';
import CircleWave from '../components/circle/CircleWave.vue';

</script>

<style lang="stylus" scoped>
.module
    .module-card3
        .module-container
            display flex
            background-image  url(assets/imgs/card/bg9.png)
            .left
                width 350px
                height 200px
                position relative
                .circle-container
                    transform scale(0.4)
                    position absolute
                    top 10px
                    left 10px
            .right
                width 250px
                height 200px
                .process
                    margin-top 6px
</style>