<template>
    <div class="managePlatform-center">
        <div class="survey-content">
            <div class="item" v-for="(g, l) in survey" :key="l">
                <count-to :endVal="g.value" />
                <p>{{g.name}}</p>
            </div>
        </div>
        <div class="footer">
            <div class="item course">
                <title-line :con="'发展历程'"></title-line>
                <div class="courseModal">
                    2021年学校成立
                    ***********************
                </div>
            </div>
            <div class="item framework">
                <title-line :con="'组织架构'"></title-line>
            </div>
        </div>
    </div>
</template>

<script>
import TitleLine from '@/components/TitleLine'

export default {
    name: 'Center',
    components: {
        TitleLine
    },

    data () {
        return {
            survey: [
                { name: '学员数', value: 31721 },
                { name: '班级数', value: 105 },
                { name: '二级协会数', value: 15 }
            ]
        }
    },

    mounted () {},

    methods: {}
}
</script>

<style lang="less" scoped>
    .managePlatform-center {
        width: 100%;
        position: relative;
        .survey-content {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .item {
                width: 220px;
                height: 72px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 42px;
                    color: #FFFFFF;
                    font-weight: 400;
                } 
                p {
                    font-size: 18px;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
            .item:nth-child(2) {
                border-left: 1px solid rgba(89, 183, 249, 0.8);
                border-right: 1px solid rgba(89, 183, 249, 0.8);
            }
        }
        .footer {
            width: calc(100% - 30px);
            height: 270px;
            position: absolute;
            left: 15px;
            top: 740px;
            background: rgba(0, 7, 17, 0.18);
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            .item {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
            }
            .course {
                background: url('../../../static/images/index/courseBG.png') left top 113px no-repeat;
            }
            .courseModal {
                width: 214px;
                height: 75px;
                background: rgba(0, 190, 255, 0.1);
                border: 1px solid;
                border-image: linear-gradient(176deg, rgba(61, 162, 242, 0), #3DA2F2, rgba(10, 79, 135, 0)) 1 1;
                box-sizing: border-box;
                padding: 8px 12px;
                font-size: 14px;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 20px;
                margin-top: 10px;
            }
            .framework{
                padding-left: 42px;
                background: url('../../../static/images/index/frameworkBG.png') right top 43px no-repeat;
            }
        }
    }
</style>