<template>
    <div class="container3">
        <div class="top">
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value1}}</div>
            </div>
            <div class="box">
                <div class="text">全体党员大会</div>
                <div class="number">{{value2}}</div>
            </div>
        </div>
        <div class="middle">
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value3}}</div>
            </div>
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value4}}</div>
            </div>
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value5}}</div>
            </div>
        </div>
        <div class="bottom">
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value6}}</div>
            </div>
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value7}}</div>
            </div>
            <div class="box">
                <div class="text">支部委员会会议</div>
                <div class="number">{{value8}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getZzshqk1, getZzshqk2, getZzshqk3, getZzshqk4, getZzshqk5, getZzshqk6, getZzshqk7, getZzshqk8 } from '@/api/zhdjxt.js'
export default {
    data() {
        return {
            value1: 0,
            value2: 0,
            value3: 0,
            value4: 0,
            value5: 0,
            value6: 0,
            value7: 0,
            value8: 0,
        }
    },
    created() {
        this.getZzshqk()
    },
    methods: {
        async getZzshqk() {
            try {
                const res1 = await getZzshqk1()
                this.value1 = res1.data.data.value
                //  console.log(res1);
                const res2 = await getZzshqk2()
                this.value2 = res1.data.data.value
                const res3 = await getZzshqk3()
                this.value3 = res1.data.data.value

                const res4 = await getZzshqk4()
                this.value4 = res1.data.data.value

                const res5 = await getZzshqk5()
                this.value5 = res1.data.data.value

                const res6 = await getZzshqk6()
                this.value6 = res1.data.data.value

                const res7 = await getZzshqk7()
                this.value7 = res1.data.data.value

                const res8 = await getZzshqk8()
                this.value8 = res1.data.data.value


            } catch (error) {
                console.log('数据获取失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container3 {
    width: 23.4896vw;
    height: 19.7849vh;
    // border: 1px solid #00ffff;
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    .box {
        height: 5.2688vh;
        background-color: rgba(255, 255, 255, .1);
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }

    .number {
        font-size: 1.3021vw;
        color: #fff;
        font-weight: 700;
    }

    .top,
    .middle,
    .bottom {
        display: flex;
        justify-content: space-around;
    }

    .top .box {
        width: 10vw;
    }

    .middle .box,
    .bottom .box {
        width: 6.3542vw;
    }

    .text {
        font-size: .6771vw;
        color: #01aaed;
        font-weight: 700;
    }
}
</style>