50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
|
<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>
|