<template>
    <CommonBox title="学生管理" class="moral-education-student-style">
        <a-spin class="brandCreat" :spinning="spinning">
            <div class="studentManageBox">
                <!--左侧学生信息标题部分-->
                <div class="studentManageBox-leftTitle">
                    <img class="bg1" src="../images/titleBg1.png" alt="">
                    <img class="bg2" src="../images/titleBg2.png" alt="">
                    <p class="p">
                        <span>学</span>
                        <span>生</span>
                        <span>信</span>
                        <span>息</span>
                    </p>
                </div>
                <div class="studentManageBox-left">
                    <div class="left-topNum">
                        <div class="left-topNum-ani">
                            <dv-decoration-9>
                                <div class="box-9-content-style">
                                    <div class="box-9-text-style"
                                         style="font-size: 26px;margin-bottom: 10px;font-weight: 700;">
                                        {{allStudeantTotal}}
                                    </div>
                                    <div class="box-9-text-style"
                                         style="font-size: 14px;border-top: 1px solid #0C3163;padding-top: 6px;">学生总数
                                    </div>
                                </div>
                            </dv-decoration-9>
                        </div>
                        <div class="left-topNum-num">
                            <div class="numbox1 numbox" v-for="(item,i) in studentManageData1" :key="i">
                                <p class="num">{{item.total}}</p>
                                <p class="text">{{item.stage_name}}部</p>
                            </div>
                        </div>
                        <div class="left-topNum-gender">
                            <div class="boy">
                                <a-row style="width: 100%;height: 100%">
                                    <a-col :span="14" style="height: 100%">
                                        <div class="border"></div>
                                        <span class="gender-style">{{genderBoy}}生</span>
                                        <br>
                                        <i class="total">{{numrBoy}}人</i>
                                    </a-col>
                                    <a-col class="echarts" id="myechartsBoy" ref="myecharts" :span="10"
                                           style="height: 100%"></a-col>
                                    <a-col style="position: absolute; top: 28px;right: 9px; fontSize: 18px;fontWeight: 700;color: #01F6F9">
                                        {{boybili}}%
                                    </a-col>
                                </a-row>
                            </div>
                            <div class="gril">
                                <a-row style="width: 100%;height: 100%;position: relative;">
                                    <a-col :span="14" style="height: 100%">
                                        <div class="border"></div>
                                        <span class="gender-style">{{genderGril}}生</span>
                                        <br>
                                        <i class="total">{{numGril}}人</i>
                                    </a-col>
                                    <a-col class="echarts" id="myechartsGril" ref="myecharts" :span="10"
                                           style="height: 100%"></a-col>
                                    <a-col style="position: absolute; top: 28px;right: 9px; fontSize: 18px;fontWeight: 700;color: #01F6F9">
                                        {{grilbili}}%
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </div>
                    <!--学生管理中的左侧表格-->
                    <div class="bot-collapse">
                        <a-empty description="暂无数据" v-if="collapseDataEmpty" class="timeLine-empty"/>
                        <a-collapse :activeKey="currentKey" accordion @change="collapseChange"
                                    v-if="collapseData.length !=0">
                            <a-collapse-panel v-for="(item,i) in collapseData" :key="i" :show-arrow="false"
                                              :header="item.headText">
                                <a-table :columns="item.columns" :dataSource="item.tableData" :customRow="getCustomRow"
                                         :pagination="false"></a-table>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </div>
                <div class="studentManageBox-right">
                    <!--行为规范-->
                    <a-carousel easing="linear" class="topCarousel" effect="fade" autoplay :dots="false">
                        <div class="right-top right-top1">
                            <p>1、热爱祖国，热爱人民，热爱中国共产党。</p>
                            <p>2、遵守法律法规，增强法律意识。遵守校规校纪，遵守社会公德。</p>
                            <p>3、热爱科学，努力学习，勤思好问，乐于探究，积极参加社会实践和有益的活动。</p>
                            <p>4、珍爱生命，注意安全，锻炼身体，讲究卫生。</p>
                            <p>5、自尊自爱，自信自强，生活习惯文明健康。</p>
                            <p>6、积极参加劳动，勤俭朴素，自己能做的事自己做。</p>
                            <p>7、孝敬父母，尊敬师长，礼貌待人。</p>
                            <p>8、热爱集体，团结同学，互相帮助，关心他人。</p>
                        </div>
                        <div class="right-top right-top2">
                            <p>爱祖国&emsp;拥护党</p>
                            <p>尊老师&emsp;敬亲长</p>
                            <p>明事理&emsp;懂礼貌</p>
                            <p>知感恩&emsp;担责任</p>
                            <p>存爱心&emsp;能合作</p>
                            <p>爱劳动&emsp;有毅力</p>
                            <p>常锻炼&emsp;身体好</p>
                        </div>
                    </a-carousel>
                    <!--学生荣誉-->
                    <div class="middleAni">
                        <a-row class="middleAni-pic" @mouseenter.native="mouseenterSwiper($event)"
                               @mouseleave.native="mouseleaveSwiper($event)">
                            <a-col class="middleAni-pic-box">
                                <a-empty description="暂无数据" v-if="honorDataSourseEmpty"
                                         class="timeLine-empty"/>
                                <swiper id="mySwiper" :options="swiperOption" ref="mySwiper"
                                        v-if="honorDataSourse.length!=0">
                                    <swiper-slide class="swiper-item divcard swiper-slide"
                                                  v-for='(item,index) of honorDataSourse' :key='index'>
                                        <a-row>
                                            <a-col :span="8">
                                                <img src="../images/headSrc1.png" alt="">
                                            </a-col>
                                            <a-col :span="16">
                                                <p style="margin-bottom: 0 !important; ">{{item.student_name}}</p>
                                                <p style="display: inline-block;white-space:nowrap;">
                                                    {{item.class_name}}</p>
                                            </a-col>
                                        </a-row>
                                        <a-row style="color: #3CD5FF;margin:10px 0 15px 0;">
                                            <a-col>{{item.reward_name}}</a-col>
                                        </a-row>
                                        <a-row>
                                            <a-col :span="4" offset="4">
                                                <img src="../images/prizeLogoSrc1.png" alt="">
                                            </a-col>
                                            <a-col :span="10" offset="2"
                                                   style="border: 1px solid orange;color: orange;font-size: 12px">
                                                {{item.level_name}}
                                            </a-col>
                                        </a-row>
                                    </swiper-slide>
                                </swiper>
                            </a-col>
                            <a-col style="display: inline-block" class="middleAni-title">
                                <img class="middleAni-title-bg1" src="../images/titleBg1-reverse.png" alt="">
                                <img class="middleAni-title-bg2" src="../images/titleBg2.png" alt="">
                                <p class="middleAni-title-p">学&emsp;&emsp;&emsp;生&emsp;荣&emsp;誉</p>
                            </a-col>
                        </a-row>
                    </div>
                    <!--学生通报-->
                    <div class="botNotice">
                        <a-row>
                            <a-col :span="4" style="border-right: 2px solid #82E8FE;height: 90px;">
                                <img src="../images/studentNotice.png" alt="" style="margin-bottom: 20px;">
                                <br>
                                <span style="color: #82E8FE">学生通报</span>
                            </a-col>
                            <a-col :span="19" offset="1">
                                <a-empty description="暂无数据" v-if="studentNoticeDataEmpty"
                                         class="timeLine-empty"/>
                                <a-carousel :dot-position="dotposition" easing="linear" class="botNoticeCarousel"
                                            :autoplay="isAutoPaly" @mouseenter="mouseenter" @mouseleave="mouseleave"
                                            :dots="false" v-if="studentNoticeData.length != 0">
                                    <p style="color: #fff !important;text-indent: 2em;font-size: 12px;margin-bottom: 0 !important;"
                                       v-for="(item,i) in studentNoticeData" :key="i" @click="showModal(item)">
                                        {{item.punish_context}}
                                        <br><br>
                                        <span>具体名单如下：</span>
                                        <br>
                                        <span style="display: inline-block;margin-left: 60px;">
                                        {{item.punish_students}}
                                        </span>
                                        <br>
                                    </p>
                                </a-carousel>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
            <CommonModal :visible="visible" :modalTitle="modalTitle" :releaseCompany="releaseCompany"
                         :releasePerson="releasePerson" :releaseTime="releaseTime" :modalContent="modalContent"
                         :modalContentName="modalContentName"
                         @cancelModal="cancelModal"></CommonModal>
        </a-spin>
    </CommonBox>
</template>
<script>
    import CommonBox from '../../secondPages/commonBox.vue';
    import CommonModal from './commomModal.vue'
    import {Carousel, Table, Row, Col, Collapse, Spin, Empty} from 'ant-design-vue';
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import * as echarts from 'echarts'

    export default {
        data() {
            return {
                //对话框数据
                visible: false,//对话框显示隐藏
                modalTitle: '',//对话框标题
                releaseCompany: '',//发布单位
                releasePerson: '',//发布人
                releaseTime: '',//发布时间
                modalContent: '',//内容
                modalContentName: '',//名单
                //学生管理数据1
                studentManageData1: [],
                allStudeantTotal: 0,
                //学生管理数据2
                studentManageData2: [],
                genderGril: '',
                numGril: '',
                genderBoy: '',
                numrBoy: '',
                boybili: '',
                grilbili: '',
                spinning: false,
                currentKey: '0',
                rightTopShow: true,
                honorDataSourseIndex: 0,
                //学生荣誉
                honorDataSourse: [],
                swiperOption: {
                    initialSlide: 0,//默认第几张
                    loop: true, //循环
                    autoplay: true, //每张播放时长3秒，自动播放
                    speed: 800,//滑动速度
                    slidesPerView: 4,

                },
                dotposition: 'right',
                //学生通报
                studentNoticeData: [],
                //表格数据
                collapseData: [
                    {
                        headText: '',
                        tableData: [],
                        columns: [
                            {title: '年级', dataIndex: 'stage_name', key: 'stage_name', align: "center",},
                            {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
                            {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
                            {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
                            {title: '班级数', dataIndex: 'class_total', key: 'class_total', align: "center",},
                        ]

                    }, {
                        headText: '',
                        tableData: [],
                        columns: [
                            {title: '年级', dataIndex: 'stage_name', key: 'stage_name', align: "center",},
                            {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
                            {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
                            {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
                            {title: '班级数', dataIndex: 'class_total', key: 'class_total', align: "center",},
                        ]
                    }, {
                        headText: '',
                        tableData: [],
                        columns: [
                            {title: '年级', dataIndex: 'stage_name', key: 'stage_name', align: "center",},
                            {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
                            {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
                            {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
                            {title: '班级数', dataIndex: 'class_total', key: 'class_total', align: "center",},
                        ]
                    },
                ],
                //学生通报是否自动切换
                isAutoPaly: true,
                honorDataSourseEmpty: false,
                studentNoticeDataEmpty: false,
                collapseDataEmpty: false,

            }
        },
        computed: {},
        watch: {
            currentKey(val, old) {
                this.currentKey = val
            }
        },
        beforeMount() {
        },
        created() {

        },
        mounted() {
            this.$nextTick(() => {

            })
            //学生管理数据1获取
            this.getStudentManageData1()
            //学生管理数据2获取
            this.getStudentManageData2()
            //学生管理数据3获取
            this.getStudentManageData3()
            //学生管理数据4获取
            this.getStudentManageData4()
            //学生荣誉数据
            this.getHonorData()
            //学生通报
            this.getStudentNoticeData()
//            setInterval(() => {
//                this.currentKey++
//                if (this.currentKey == 4) {
//                    this.currentKey = 1
//                }
//            }, 2000)

        },
        beforeUpdate() {

        },
        methods: {
            //显示学生通报对话框
            showModal(accept) {
                //console.log('显示学生通报对话框', accept)
                this.visible = true
                this.modalTitle = accept.punish_title
                this.releaseTime = accept.create_time.slice(0, 10) + '\xa0\xa0' + accept.create_time.slice(12, 19)
                this.modalContent = accept.punish_context
                this.modalContentName = accept.punish_students
            },
            //关闭对话框
            cancelModal() {
                this.visible = false
            },
            //学生管理数据1获取
            getStudentManageData1: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xuesheng",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    // this.getStudentManageData2()
                    this.spinning = false;
                    if (result[0].data.result.length != 0) {
                        this.studentManageData1 = JSON.parse(result[0].data.result)
                        for (let i = 0; i < this.studentManageData1.length; i++) {
                            this.allStudeantTotal += this.studentManageData1[i].total
                        }
                    }
                })
            },
            //学生管理数据2获取
            getStudentManageData2: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xuesheng2",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    if (result[0].data.result.length != 0) {
                        this.studentManageData2 = JSON.parse(result[0].data.result)
                        this.genderGril = this.studentManageData2[0].XB_NAME
                        this.numGril = this.studentManageData2[0].total
                        this.genderBoy = this.studentManageData2[1].XB_NAME
                        this.numrBoy = this.studentManageData2[1].total
                        this.getEchartsBoy()
                        this.getEchartsGirl()
                    }
                    this.boybili = parseInt(Number(this.numrBoy) / Number(this.allStudeantTotal) * 100) + 1
                    this.grilbili = parseInt(Number(this.numGril) / Number(this.allStudeantTotal) * 100)
                })
            },
            //学生管理折叠面板数据获取
            getStudentManageData3: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xuesheng3",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    if (result[0].data.result.length != 0) {
                        let res3 = JSON.parse(result[0].data.result)
                        this.collapseData[0].headText = '小学部' + '\xa0\xa0\xa0\xa0\xa0\xa0' + '总数' + '\xa0' + '/' + '\xa0' +
                            res3[0].total + '\xa0\xa0\xa0\xa0\xa0\xa0' + '男生' + '\xa0' + '/' + '\xa0' + res3[0].nan_total +
                            '\xa0\xa0\xa0\xa0\xa0\xa0' + '女生' + '\xa0' + '/' + '\xa0' + res3[0].nv_total
                        this.collapseData[1].headText = '中学部' + '\xa0\xa0\xa0\xa0\xa0\xa0' + '总数' + '\xa0' + '/' + '\xa0' +
                            res3[1].total + '\xa0\xa0\xa0\xa0\xa0\xa0' + '男生' + '\xa0' + '/' + '\xa0' + res3[1].nan_total +
                            '\xa0\xa0\xa0\xa0\xa0\xa0' + '女生' + '\xa0' + '/' + '\xa0' + res3[1].nv_total
                        this.collapseData[2].headText = '高中部' + '\xa0\xa0\xa0\xa0\xa0\xa0' + '总数' + '\xa0' + '/' + '\xa0' +
                            res3[2].total + '\xa0\xa0\xa0\xa0\xa0\xa0' + '男生' + '\xa0' + '/' + '\xa0' + res3[2].nan_total +
                            '\xa0\xa0\xa0\xa0\xa0\xa0' + '女生' + '\xa0' + '/' + '\xa0' + res3[2].nv_total
                    } else {

                    }

                })
            },
            //学生管理数据4获取
            getStudentManageData4: function () {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_xuesheng4",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    if (result[0].data.result.length != 0) {
                        this.studentManageData4 = JSON.parse(result[0].data.result)
                        this.studentManageData4.forEach(item => {
                            if (item.stage_name == '小学') {
                                this.collapseData[0].tableData.push(item)
                            } else if (item.stage_name == '初中') {
                                this.collapseData[1].tableData.push(item)
                            } else if (item.stage_name == '高中') {
                                this.collapseData[2].tableData.push(item)
                            }
                        })
                    } else {
                        this.collapseDataEmpty = true
                    }
                    res.forEach(item => {
                        if (item.stage_name == '小学') {
                            this.collapseData[0].tableData.push(item)
                        } else if (item.stage_name == '初中') {
                            this.collapseData[1].tableData.push(item)
                        } else if (item.stage_name == '高中') {
                            this.collapseData[2].tableData.push(item)
                        }
                    })
                })
            },
            //学生荣誉
            getHonorData() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_rongyu",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    if (result[0].data.result.length != 0) {
                        this.honorDataSourse = JSON.parse(result[0].data.result)
                    } else {
                        this.honorDataSourseEmpty = true
                    }
                })
            },
            //学生通报
            getStudentNoticeData() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_tongbao",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.spinning = true;
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    this.spinning = false;
                    if (result[0].data.result != '') {
                        this.studentNoticeData = JSON.parse(result[0].data.result)
                    } else {
                        this.studentNoticeDataEmpty = true
                    }
                })
            },
            collapseChange(key) {
                this.currentKey = key
            },
            getEchartsBoy() {
                echarts.init(document.getElementById('myechartsBoy')).setOption({
                    tooltip: {
                        trigger: 'item',
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['75%', '100%'],
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            color: ['#93A0BD', '#2196f3'],
                            labelLine: {
                                show: false
                            },
                            label: {
                                show: false,
                                position: 'center',
                                //formatter: '{d}%'
                            },
                            tooltip: {
                                trigger: 'item',
                            },
                            data: [
                                {
                                    value: this.allStudeantTotal,
                                    label: {
                                        normal: {
                                            show: true,
                                        }
                                    }

                                },
                                {
                                    value: this.numrBoy,
                                    label: {
                                        normal: {
                                            show: true,
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                })
            },
            getEchartsGirl() {
                echarts.init(document.getElementById('myechartsGril')).setOption({
                    tooltip: {
                        trigger: 'item',
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['75%', '100%'],
                            center: ['50%', '50%'],
                            avoidLabelOverlap: false,
                            color: ['#93A0BD', '#EC808D'],
                            labelLine: {
                                show: false
                            },
                            tooltip: {
                                trigger: 'item',
                            },
                            data: [
                                {
                                    value: this.allStudeantTotal,
                                    label: {
                                        normal: {
                                            show: true,
                                        }
                                    }
                                },
                                {value: this.numGril}
                            ]
                        }
                    ]
                })
            },
            getCustomRow() {
                let obj = {style: {}};
                obj['style']['color'] = '#fff';
                return obj;
            },
            mouseenter() {
                this.isAutoPaly = false
            },
            mouseleave() {
                this.isAutoPaly = true
            },
            mouseenterSwiper(e) {
                this.swiperOption.autoplay = false
                this.swiperOption.loop = false
            },
            mouseleaveSwiper(e) {
                this.swiperOption.autoplay = true
                this.swiperOption.loop = true
            },
        },
        components: {
            CommonBox,
            CommonModal,
            ARow: Row,
            ACol: Col,
            ACollapse: Collapse,
            ACollapsePanel: Collapse.Panel,
            ATable: Table,
            ACarousel: Carousel,
            ASpin: Spin,
            AEmpty: Empty,
            //学生荣誉轮播图
            swiper,
            swiperSlide,
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    .moral-education-student-style {
        width: calc(65% - 12px) !important;
        height: 600px !important;
        padding-right: 0 !important;

        .brandCreat {
            width: 100%;
            height: 100%;

            .studentManageBox {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;

                .timeLine-empty {
                    margin-top: 30px;
                }

                /*‘学生信息’*/
                .studentManageBox-leftTitle {
                    width: 5%;
                    margin-left: -20px;
                    position: relative;

                    .bg1 {
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    .bg2 {
                        position: absolute;
                        top: 8px;
                        right: 3px;
                    }

                    .p {
                        position: absolute;
                        top: 30px;
                        left: 17px;
                        margin: 0 auto;
                        color: #fff;
                        width: 18px;
                        font-size: 18px;
                        line-height: 18px;

                        span {
                            margin-bottom: 15px;
                            display: inline-block;
                        }
                    }
                }

                /*左侧*/
                .studentManageBox-left {
                    width: 47%;
                    height: 100%;
                    border-right: 1px dashed #fff;
                    padding-right: 10px;

                    .left-topNum {
                        height: 180px;
                        width: 520px;
                        display: flex;
                        justify-content: space-between;
                        position: relative;

                        .left-topNum-ani {
                            margin: 10px;
                            width: 150px;
                            height: 150px;
                            font-size: 18px;

                            .box-9-content-style {
                                width: 150px;
                                height: 150px;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;

                                .box-9-text-style {
                                    color: #01F6F9;
                                    font-family: 'lightFont';
                                }
                            }
                        }

                        .left-topNum-num {
                            height: 45%;
                            margin-left: 24px;
                            color: #3CD5FF;
                            display: flex;
                            justify-content: space-between;

                            .numbox {
                                width: 80px;
                                height: 80px;
                                text-align: center;

                                .num {
                                    font-weight: 700;
                                    margin-top: 16px;
                                    margin-bottom: 20px;
                                    font-size: 34px;
                                }

                                .text {
                                    font-size: 14px;
                                }
                            }


                        }

                        .left-topNum-num > div:nth-child(2) {
                            border-left: 2px solid #0C3163;
                            border-right: 2px solid #0C3163;
                            margin: 0 20px;
                            width: 116px;
                            height: 60px;
                            margin-top: 10px;

                            .num {
                                margin-top: 7px;
                            }
                        }

                        .left-topNum-gender {
                            display: flex;
                            justify-content: space-between;
                            height: 90px;
                            margin-top: 10px;
                            position: absolute;
                            top: 80px;
                            right: 0;

                            .boy, .gril {
                                position: relative;
                                width: 140px;
                                height: 80px;
                                padding: 5px;
                                background: #1A366F;
                                box-shadow: 5px 5px 13px rgba(255, 255, 255, .3);

                                .total {
                                    position: absolute;
                                    display: inline-block;
                                    font-size: 22px;
                                    left: 10px;
                                    bottom: 9px;
                                    font-weight: 600;
                                    color: #fff;
                                    white-space: nowrap;
                                }

                                .gender-style {
                                    position: absolute;
                                    display: inline-block;
                                    font-size: 14px;
                                    color: #3CD5FF;
                                    left: 30px;
                                    top: 5px;
                                }
                            }

                            .boy {
                                margin-right: 40px;

                                .border {
                                    position: absolute;
                                    display: inline-block;
                                    width: 10px;
                                    height: 25px;
                                    background: #02A7F0;
                                    border-radius: 5px;
                                    left: 10px;
                                    /*#EC808D*/
                                }

                            }

                            .gril {
                                .border {
                                    position: absolute;
                                    display: inline-block;
                                    width: 10px;
                                    height: 25px;
                                    background: #EC808D;
                                    border-radius: 5px;
                                    left: 10px;
                                }
                            }
                        }
                    }

                    //表格
                    .bot-collapse {
                        margin-top: 20px;
                        width: 500px;
                        height: 350px;

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(1) .ant-table-thead > tr > th {
                            padding: 2px;
                        }

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(1) .ant-table-tbody > tr > td {
                            padding: 2px;
                        }

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(2) .ant-table-thead > tr > th {
                            padding: 12px;
                        }

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(2) .ant-table-tbody > tr > td {
                            padding: 12px;
                        }

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(3) .ant-table-thead > tr > th {
                            padding: 12px;
                        }

                        /deep/ .ant-collapse .ant-collapse-item:nth-child(3) .ant-table-tbody > tr > td {
                            padding: 12px;
                        }

                        /deep/ .ant-collapse {
                            height: 100%;
                            background: rgba(0, 0, 0, 0) !important;
                            border: none !important;
                            color: #3CD5FF !important;

                            .ant-collapse-item {
                                border: none !important;

                                .ant-collapse-header {
                                    color: #3CD5FF !important;
                                    background: #183A76;
                                    transform: skewX(-20deg);
                                    margin-bottom: 10px;
                                    height: 40px;
                                    font-size: 16px;

                                }

                                .ant-collapse-content {
                                    border: none !important;
                                    background: rgba(0, 0, 0, 0) !important;

                                    .ant-collapse-content-box {
                                        height: 200px !important;
                                        border-radius: 10px;
                                        border: 2px dashed #3CD5FF;
                                        color: #fff !important;
                                        margin: 0 auto;
                                        margin-bottom: 10px;
                                        width: 480px;
                                        overflow: hidden;

                                        /deep/ .ant-collapse-content > .ant-collapse-content-box {
                                            padding-top: 5px !important;
                                        }

                                        .ant-table-content {
                                            .ant-table-body {
                                                .ant-table-thead {
                                                    .ant-table-align-center {
                                                        background: #305795 !important;
                                                    }
                                                }

                                                .ant-table-tbody {
                                                    tr > td {
                                                        border-bottom: 1px dashed #fff !important;
                                                        background: none;
                                                    }

                                                    /deep/ tr > td:hover {
                                                        background: none !important;
                                                    }
                                                }

                                                .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
                                                    /*padding: 2px;*/
                                                }

                                                .ant-table-thead > tr > th {
                                                    border: none;
                                                    transform: skewX(-20deg);
                                                    border-right: 5px;
                                                    color: #f1f1f1;
                                                    font-weight: 400;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                /*右侧*/
                .studentManageBox-right {
                    width: 47%;
                    height: 100%;
                    padding-left: 10px;

                    .topCarousel {
                        padding-right: 20px;
                        width: 100%;
                        height: 200px;
                        margin-bottom: 30px;

                        .right-top {
                            width: 100%;
                            height: 200px;
                            overflow: hidden;
                            padding-top: 36px;

                            p {
                                color: #000;
                            }
                        }

                        .right-top2 {
                            padding-left: 140px;
                            padding-top: 40px;
                            background: url("../images/studentManageHonor2.png");
                            background-size: 100% 100%;
                        }

                        .right-top1 {
                            background: url("../images/studentManageHonor1.png");
                            background-size: 100% 100%;
                        }

                        .right-top2 p {
                            writing-mode: vertical-lr;
                            display: inline-block;
                            font-size: 20px;
                            font-weight: 600;
                            margin-right: 20px;
                        }

                        .right-top1 p {
                            margin-left: 47px;
                            line-height: 6px;
                            font-size: 12px;
                            font-weight: 700;
                        }
                    }

                    .middleAni {
                        width: 100%;
                        height: 155px;
                        overflow: hidden;
                        position: relative;

                        .middleAni-pic {
                            display: inline-block;
                            width: 100%;
                            overflow: hidden;

                            .middleAni-pic-box {
                                height: 155px;
                                width: calc(100% - 50px);
                                /*width: 200000000px;*/
                                display: inline-block;

                                /deep/ .swiper-item, .swiper-slide {
                                    width: 116px !important;
                                }

                                .divcard {
                                    width: 116px;
                                    padding: 5px;
                                    padding-top: 15px;
                                    margin-right: 9px;
                                    height: 160px;
                                    text-align: center;
                                    background: #3B487E;
                                    border-radius: 7px;
                                    display: inline-block;
                                }
                            }
                        }

                        @keyframes studentHonor {

                        }

                        .middleAni-title {
                            width: 48px;
                            height: 150px;
                            position: relative;
                            position: absolute;
                            top: 0;
                            z-index: 5;
                            margin-left: 2px;

                            .middleAni-title-bg1 {
                                position: absolute;
                            }

                            .middleAni-title-bg2 {
                                position: absolute;
                                top: 5px;
                            }

                            .middleAni-title-p {
                                position: absolute;
                                top: 33px;
                                left: 10px;
                                display: inline-block;
                                font-size: 18px;
                                writing-mode: vertical-lr;
                            }
                        }
                    }

                    .botNotice {
                        width: 96%;
                        height: 140px;
                        background: #284F89;
                        padding: 20px 10px 15px 20px;
                        margin-top: 20px;
                        border-radius: 7px;
                    }
                }
            }
        }

    }
</style>