<template>
    <CommonBox title="班主任管理" class="moral-education-headmaster-style">
        <a-spin class="brandCreat" :spinning="spinning">
            <div class="headMasterManage">
                <a-row type="flex">
                    <!--队伍建设----标题-->
                    <a-col style="width: 68px">
                        <div class="masterTitle1 coltitle">
                            <img src="../images/teamBuildImg1.png" alt="" class="titleImg">
                            <div class="circle"></div>
                            <p class="titleP">队&emsp;伍&emsp;建&emsp;设</p>
                        </div>
                    </a-col>
                    <!--队组建设----时间轴-->
                    <a-col style="width: 300px;margin-top: 5px;" class="timeLine">
                        <vue-scroll :ops="listScroll" style="height:100%">
                        <a-empty description="暂无数据" v-if="teamBuildDataEmpty" class="timeLine-empty"/>
                        <a-timeline reverse ref="timeLineUl" v-if="teamBuildData.length !== 0">
                            <a-timeline-item
                                    v-for="(item,i) in teamBuildData" :key="i" @mouseenter="enter(i)"
                                    @mouseleave="leave(i)" @click="showTeamBuildInfo(item)"
                            >
                                <p style="color:#80FFFF;font-size: 12px;margin-bottom: 0;">{{item.create_time.substring(0,10)}}</p>
                                <p style="font-size: 14px;color: #fff;margin-bottom: 0;overflow:hidden; text-overflow:ellipsis;white-space: nowrap;">
                                    {{item.info_title}}</p>
                            </a-timeline-item>
                        </a-timeline>
                        </vue-scroll>
                    </a-col>
                    <!--队伍建设----图片-->
                    <a-col class="teamBuildPic">
                        <div class="teamBuildPic1">
                            <p>宣化启臻 | 感怀师恩！“魅力班主任”评选活动精彩瞬间回顾</p>
                        </div>
                        <div class="teamBuildPic2">
                            <p>秋班主任工作交流分享暨期末总结活动</p>
                        </div>
                    </a-col>
                    <!--班主任例会----标题-->
                    <a-col style="width: 68px">
                        <div class="masterTitle2 coltitle">
                            <img src="../images/headMaster1.png" alt="" class="titleImg">
                            <div class="circle"></div>
                            <p class="titleP">班&emsp;主&emsp;任&emsp;例&emsp;会</p>
                        </div>
                    </a-col>
                    <!--班主任例会----时间轴列表-->
                    <a-col class="masterLine">
                        <a-empty description="暂无数据" v-if="headMasterMeetingEmpty" class="timeLine-empty"/>
                        <vue-scroll v-if="headMasterMeeting.length != 0" :ops="listScroll"
                                    :style="showPage?'height:13rem':'height:13rem'"
                                    class="score-list-div">
                            <a-timeline reverse class="headMasterMeeting">
                                <a-timeline-item v-for="(item,i) in headMasterMeeting" :key="i">
                                    <p style="color:#80FFFF;font-size: 12px;margin-bottom: 0;">
                                        {{item.meeting_date.slice(0, 9)}} {{item.start_time.slice(11, 16)}}</p>
                                    <p style="font-size: 14px;color: #fff;margin-bottom: 0;overflow:hidden; text-overflow:ellipsis;white-space: nowrap;">
                                        {{item.meeting_place}} | {{item.attendees}}</p>
                                </a-timeline-item>
                            </a-timeline>
                        </vue-scroll>
                    </a-col>
                    <a-col style="width: 1px;height: 215px;border-right: 1px dashed #fff;margin-left: 2px;margin-right: 10px;"></a-col>
                    <!--班主任培训----标题-->
                    <a-col style="width: 68px">
                        <div class="masterTitle3 coltitle">
                            <img src="../images/headMaster2.png" alt="" class="titleImg">
                            <div class="circle"></div>
                            <p class="titleP">班&emsp;主&emsp;任&emsp;培&emsp;训</p>
                        </div>
                    </a-col>
                    <!--班主任培训----列表内容-->
                    <a-col class="masterList">
                        <vue-scroll :ops="listScroll" style="height:100%">
                        <a-empty description="暂无数据" v-if="headMasterTrainDataEmpty" class="timeLine-empty"/>
                        <a-collapse :activeKey="masterListActiveKey" accordion v-if="headMasterTrainData.length !== 0">
                            <a-collapse-panel :key="i" :header="item.info_title" v-for="(item,i) in headMasterTrainData"
                                              @click="showTrainInfo(item)">
                                <span class="masterList-span"> {{item.create_time.substring(0,10)}}</span>
                                <!--<img v-for="(item2,i2) in item.picData" :src="item2.src" alt="" :key="i2">-->
                                <img-preview v-for="(item2,i2) in item.imgs" :key="'banzhuren-px-'+i2" :imgObj="item2" style="width: 30%"/>
                            </a-collapse-panel>
                        </a-collapse>
                        </vue-scroll>
                    </a-col>
                    <a-col style="width: 1px;height: 215px;border-right: 1px dashed #fff;margin-left: 10px;margin-right: 10px;"></a-col>
                    <!--班主任评优----标题-->
                    <a-col style="width: 68px">
                        <div class="masterTitle2 coltitle">
                            <img src="../images/headMaster6.png" alt="" class="titleImg">
                            <div class="circle"></div>
                            <p class="titleP">班&emsp;主&emsp;任&emsp;评&emsp;优</p>
                        </div>
                    </a-col>
                    <!--班主任评优----内容-->
                    <a-col class="masterBest">
                        <a-carousel ref="imgs" class="masterBest-title" easing="linear" :dots="false">
                            <a-row type="flex" style="margin-bottom: 2px;color: #fff" v-for="(item,i) in titleData"
                                   :key="i">
                                <a-col @click.native="prve(item.excellent_id)"
                                       style="cursor: pointer;display: inline-block"><
                                </a-col>
                                <a-col style="display: inline-block;margin: 0 10px">{{item.excellent_name}}</a-col>
                                <a-col @click.native="next(item.excellent_id)"
                                       style="cursor: pointer;display: inline-block">
                                    >
                                </a-col>
                            </a-row>
                        </a-carousel>
                        <a-empty description="暂无数据" v-if="bestHeadMaster1Empty" class="timeLine-empty"/>
                        <div class="teacher-py-box-style">
                            <vue-scroll :ops="listScroll" style="height:100%">
                                <div class="content-style">
                                    <div class="teacher-box-style" v-for="(item,i) in bestHeadMaster1" :key="i">
                                        <img src="../../../assets/images/teacher.svg" alt=""
                                        style="width: 35px;height: 35px;margin-top: 10px;border-radius: 50%;">
                                        <!--<p style="margin: 0;margin-top: 5px;margin-bottom:4px;"></p>-->
                                        <div class="item-title-style">{{item.teacher_name}}</div>
                                        <div class="item-title-style">{{item.class_names}}</div>
                                        <!--<p style="margin: 0;margin-top: 5px;margin-bottom:4px;">{{item.class_names}}</p>-->
                                    </div>
                                </div>
                            </vue-scroll>
                        </div>
                        <!--<swiper class="masterBest-row" id="mySwiper1" :options="swiperOption1" ref="mySwiper"-->
                                <!--v-if="bestHeadMaster1.length!=0">-->
                            <!--<swiper-slide v-for="(item,i) in bestHeadMaster1" :key="i" class="masterBest-Col">-->
                                <!--<img :src="item.src" alt=""-->
                                     <!--style="width: 35px;height: 35px;margin-top: 10px;border-radius: 50%;">-->
                                <!--<p style="margin: 0;margin-top: 5px;margin-bottom:4px;">{{item.teacher_name}}</p>-->
                                <!--&lt;!&ndash;<p style="color: #01F6F9;font-size: 12px;margin: 0;">{{item.class}}</p>&ndash;&gt;-->
                            <!--</swiper-slide>-->
                        <!--</swiper>-->
                        <!--<a-empty description="暂无数据" v-if="bestHeadMaster2Empty" class="timeLine-empty"/>-->
                        <!--<swiper class="masterBest-row" id="mySwiper2" :options="swiperOption2" ref="mySwiper"-->
                                <!--v-if="bestHeadMaster2.length!=0">-->
                            <!--<swiper-slide v-for="(item,i) in bestHeadMaster2" :key="i" class="masterBest-Col">-->
                                <!--<img :src="item.src" alt=""-->
                                     <!--style="width: 35px;height: 35px;margin-top: 10px;border-radius: 50%;">-->
                                <!--<p style="margin: 0;margin-top: 5px;margin-bottom:4px;">{{item.name}}</p>-->
                                <!--<p style="color: #01F6F9;font-size: 12px;margin: 0;">{{item.class}}</p>-->
                            <!--</swiper-slide>-->
                        <!--</swiper>-->
                    </a-col>
                </a-row>
            </div>
            <CommonInfo commonQueryId="query_dangjian_tuandui" :infoObj="infoObj" :commonId="infoId" :show="visible"
                        @cancel="closeInfo"/>
        </a-spin>
    </CommonBox>
</template>
<script>
    import CommonBox from '../../secondPages/commonBox.vue';
    import CommonInfo from '../../../common/centerCommonInfo.vue'
    import {Carousel, Timeline, Table, Spin, Row, Col, Collapse, Empty} from 'ant-design-vue';
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import ImgPreview from '../../../common/imgPreview.vue';
    export default {
        data() {
            return {
                infoObj: {},
                infoId: '',
                visible: false,
                spinning: false,
                swiperOption1: {
                    initialSlide: 0,//默认第几张
                    loop: true, //循环
//                    autoplay: true,
                    speed: 800,//滑动速度
                    slidesPerView: 5,//一行有几列
                    //direction: 'vertical',
                },
                swiperOption2: {
                    initialSlide: 0,//默认第几张
                    loop: true, //循环
                    //autoplay: true,
                    speed: 1000,//滑动速度
                    slidesPerView: 5,//一行有几列
                    //direction: 'vertical',
                },
                dotposition: 'right',
                //队伍建设
                teamBuildData: [
                    // {time: '2021/12/12', content: '操行评语展评活动'},
                    // {time: '2021/12/19', content: '洋浦学校开展班主任基本功展示活动'},
                    // {time: '2021/12/22', content: '宣化启臻 | 感怀师恩！ “魅力班主任”评选活动精彩瞬间'},
                    // {time: '2021/12/29', content: '爱教育 会生活 共成长 | 期末工作总结会暨教师修身课'},
                    // {time: '2021/12/31', content: '秋班主任工作交流分享暨期末总结活动'},
                ],
                headMasterMeeting: [],
                classIsShow: false,
                showPage: true,
                listScroll: this.StaticParams.scrollOption,
                bestHeadMaster1: [
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '王艺伟', class: '小学1年4班'},
                ],
                bestHeadMaster2: [
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                    // {src: require('../images/bestPer.png'), name: '张鑫宇', class: '小学1年4班'},
                ],
                dotPosition: 'right',
                activeKey: 1,
                //班主任例会
                headMasterTrainData: [],
                //班主任评优title
                titleData: [],
                masterListBox: false,
                masterListActiveKey: '0',
                excellent_id: '',
                teamBuildDataEmpty: false,
                headMasterMeetingEmpty: false,
                headMasterTrainDataEmpty: false,
                bestHeadMaster1Empty: false,
                bestHeadMaster2Empty: false,
            }
        },
        components: {
            CommonBox,
            ARow: Row,
            ACol: Col,
            ACollapse: Collapse,
            ACollapsePanel: Collapse.Panel,
            ATable: Table,
            ACarousel: Carousel,
            ATimeline: Timeline,
            ATimelineItem: Timeline.Item,
            ASpin: Spin,
            AEmpty: Empty,
            //班主任评优
            swiper,
            swiperSlide,
            CommonInfo,
            ImgPreview
        },
        created() {
        },
        mounted() {
            this.creatSpan()
            //队伍建设
            this.getTeamBuildData()
            //班主任例会
            this.getHeadMasterMeeting()
            //班主任培训
            this.getHeadMasterTrainData()
            //班主任评优1
            this.getMasterBextData1()
        },
        beforeUpdate() {
        },
        methods: {
            enter(index) {
                index = Math.abs(index - 4)
                this.$refs.timeLineUl.$children[index].$el.classList.add('ant-timeline-item-enter')
            },
            leave(indexleave) {
                indexleave = Math.abs(indexleave - 4)
                this.$refs.timeLineUl.$children[indexleave].$el.classList.remove('ant-timeline-item-enter')
            },
            creatSpan() {
            },
            clickContent(index) {
            },
            //队伍建设
            getTeamBuildData() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_duiwu",
                        "query_param": [
                            //"900008135",
                            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) => {
                    console.log("队伍建设：",result)
                    this.spinning = false;
                    if(result[0].data.success){
                        let res = result[0].data.result;
                        if(res && res !== ""){
                            let arr = JSON.parse(res);
                            if(arr && arr.length > 0){
                                this.teamBuildData.push(...arr)
                            }
                        }else {
                            this.teamBuildDataEmpty = true
                        }
                    }else {
                        this.teamBuildDataEmpty = true
                    }
                })
            },
            //班主任例会
            getHeadMasterMeeting() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_lihui",
                        "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.headMasterMeeting = JSON.parse(result[0].data.result)
                    } else {
                        this.headMasterMeeting = true
                    }
                })
            },
            //班主任培训
            getHeadMasterTrainData() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_peixun",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                            //"900008135",
                        ]
                    },
                    "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.success){
                        let res = result[0].data.result;
                        if(res && res !== ""){
                            let arr = JSON.parse(res);
                            if(arr && arr.length > 0){
                                this.headMasterTrainData.push(...arr)
                                console.log("班主任培训数据",this.headMasterTrainData)
                                for(let i = 0,len = this.headMasterTrainData.length;i < len;i ++){
                                    let json = this.headMasterTrainData[i].cover_json;
                                    if(json && json !== ""){
                                        let arr = JSON.parse(json);
                                        if(arr.length > 3){
                                            arr = arr.slice(0,3)
                                        }
                                        this.headMasterTrainData[i]["imgs"] = arr;
                                    }
                                }
                            }
                        }else {
                            this.headMasterTrainDataEmpty = true
                        }
                    }else {
                        this.headMasterTrainDataEmpty = true
                    }
                })
            },
            //班主任评优1
            getMasterBextData1() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_pingyou",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + ""
                            //"900008135"
                        ]
                    },
                    "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.success){
                        let res = result[0].data.result;
                        if(res && res !== ""){
                            let arr = JSON.parse(res);
                            if(arr && arr.length > 0){
                                if(arr && arr.length > 0){
                                    this.titleData.push(...arr);
                                    console.log("this.titleData:",this.titleData)
                                    this.excellent_id = this.titleData[0].excellent_id
                                    if(this.excellent_id !== ""){
                                        this.getMasterBextData2()//班主任评优2
                                    }
                                }
                            }
                        }
                    }

                })
            },
            //班主任评优2
            getMasterBextData2() {
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_deyu_pingyou2",
                        "query_param": [
                            this.BaseConfig.person_info_my.bureau_id + "",
                            //"900008135",
                            this.excellent_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.success) {
                        let res = result[0].data.result;
                        if (res && res !== "") {
                            let arr = JSON.parse(res);
                            console.log("班主任评优数据：",arr)
                            if (arr && arr.length > 0) {
                                if (arr && arr.length > 0) {
                                    this.bestHeadMaster1.push(...arr);
                                }
                            } else {
                                this.bestHeadMaster1Empty = true
                                this.bestHeadMaster2Empty = true
                            }
                        }
                    }
                })
            },
            //班主任评优title
            next(id) {
                this.$refs.imgs.next()
                this.excellent_id = id
                if(this.excellent_id !== ""){
                    this.getMasterBextData2()
                }

            },
            prve(id) {
                this.$refs.imgs.prev()
                this.excellent_id = id
                if(this.excellent_id !== ""){
                    this.getMasterBextData2()
                }
            },
            //显示队伍建设详情
            showTeamBuildInfo(item){
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_dangjian_xiangxi",
                        "query_param": [
                            item.info_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    if (result[0].data.success) {
                        let dataInfo = JSON.parse(result[0].data.result);
                        if (dataInfo && dataInfo.length > 0) {
                            let info = dataInfo[0];
                            let infoObj = {
                                title: info.info_title,
                                infoArr: [
                                    {"title": "发布单位", "value": info.ORG_NAME},
                                    {"title": "发布人", "value": info.person_name},
                                    {"title": "发布时间", "value": info.create_time.replace('T', ' ').replace('Z', '')},
                                ],
                                content: info.info_content
                            }
                            this.infoObj = infoObj;
                            this.visible = true;
                        }
                    }
                })
            },
            //显示班主任培训详情
            showTrainInfo(item){
                let param = {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "query_dangjian_xiangxi",
                        "query_param": [
                            item.info_id + ""
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [],
                    "query_format": "json",
                    "query_group": []
                }
                this.DataexReportInterface.callInterface([{
                    params: param,
                    method: "post",
                }], (result) => {
                    if (result[0].data.success) {
                        let dataInfo = JSON.parse(result[0].data.result);
                        if (dataInfo && dataInfo.length > 0) {
                            let info = dataInfo[0];
                            let infoObj = {
                                title: info.info_title,
                                infoArr: [
                                    {"title": "发布单位", "value": info.ORG_NAME},
                                    {"title": "发布人", "value": info.person_name},
                                    {"title": "发布时间", "value": info.create_time.replace('T', ' ').replace('Z', '')},
                                ],
                                content: info.info_content
                            }
                            this.infoObj = infoObj;
                            this.visible = true;
                        }
                    }
                })
            },
            closeInfo(){
                this.infoId = "";
                this.visible = false;
            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    .moral-education-headmaster-style {
        width: 100%;
        height: 260px !important;
        margin-top: 30px;

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

            .headMasterManage {
                width: 100%;
                height: 100%;
                overflow: hidden;

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

                .coltitle {
                    background: #2E3F77;
                    border-radius: 10px;
                    height: 215px;
                    position: relative;
                    overflow: hidden;
                    margin-right: 10px;

                    .titleImg {
                        width: 40px;
                        position: absolute;
                        left: 50%;
                        top: 5px;
                        margin-left: -20px;
                    }

                    .circle {
                        position: absolute;
                        width: 150px;
                        height: 150px;
                        background: #183F77;
                        border-radius: 50%;
                        bottom: 0;
                        left: -100px;
                    }

                    .titleP {
                        position: absolute;
                        writing-mode: vertical-lr;
                        text-align: center;
                        color: #80FFFF;
                        font-size: 18px;
                        left: 10px;
                        bottom: 20px;
                    }
                }

                .timeLine {
                    height: 200px;
                    .ant-timeline, .ant-timeline-reverse {
                        margin-top: -10px;

                        /deep/ .ant-timeline-item {
                            padding: 10px 0 0;
                            border-radius: 5px;
                            cursor: pointer;
                            .ant-timeline-item-content{
                                top: 0 !important;
                            }

                            .ant-timeline-item-tail {
                                border-left: 2px dashed #80FFFF;
                            }

                            .ant-timeline-item-head-blue {
                                color: #80FFFF;
                                border-color: #80FFFF;
                                background: #80FFFF;
                                margin-top: 1px;
                            }

                            /deep/ .ant-timeline-item-content {
                                top: 0 !important;
                                min-height: 0 !important;
                            }

                            .ant-timeline-item-content p {
                                line-height: 17px;
                            }
                        }

                        .ant-timeline-item-enter {
                            background: linear-gradient(#017998, #01154d);
                        }
                    }
                }

                .teamBuildPic {
                    width: 160px;
                    border-right: 1px dashed #fff;
                    padding-right: 20px;
                    margin-right: 15px;

                    .teamBuildPic1, .teamBuildPic2 {
                        position: relative;
                        width: 100%;
                        height: 95px;
                        border-radius: 5px;
                    }

                    .teamBuildPic1 {
                        margin-bottom: 15px;
                        background: url("../images/teamBuildImg2.png");
                        background-size: 100% 100%;

                        p {
                            text-align: center;
                            position: absolute;
                            bottom: -15px;
                            font-size: 12px;
                            background: rgba(0, 0, 0, .5);
                        }
                    }

                    .teamBuildPic2 {
                        background: url("../images/teamBuildImg3.png");
                        background-size: 100% 100%;

                        p {
                            text-align: center;
                            position: absolute;
                            bottom: -15px;
                            font-size: 12px;
                            background: rgba(0, 0, 0, .5);
                        }
                    }
                }

                .masterTitle2, .masterTitle3 {
                    margin-right: 10px;
                    height: 215px;

                    .titleP {
                        bottom: 6px;
                    }
                }

                .masterLine {
                    width: 290px;
                    margin-right: 10px;
                    background: #2E3F77;
                    padding: 0 9px 10px;
                    height: 215px;
                    border-radius: 8px;
                    position: relative;
                    overflow: hidden;

                    .score-list-div {
                        width: 100%;
                        height: 23rem;
                        display: flex;
                        flex-direction: column;
                        margin-top: 0;
                        overflow: hidden;
                    }

                    .timeLineData2 {
                        position: absolute;
                        top: -2px;
                        width: 100%;

                        /deep/ .ant-timeline-item-last > .ant-timeline-item-content {
                            top: 0 !important;
                            min-height: 0 !important;
                        }
                    }

                    /deep/ .ant-timeline-item {
                        padding: 15px 0 0;
                        border-bottom: 1px solid #80FFFF;
                        width: 100%;
                        .ant-timeline-item-content{
                            top: 0 !important;
                        }

                        .ant-timeline-item-tail {
                            height: 0;
                        }

                        .ant-timeline-item-head-blue {
                            background-color: #80FFFF;
                            border: none;
                        }

                        .ant-timeline-item-head {
                            width: 5px;
                            height: 5px;
                        }

                    }
                }

                .masterBest {
                    width: 360px;
                    height: 215px;
                    overflow: hidden;
                    background: url("../images/best.png");
                    background-size: 100% 100%;
                    text-align: center;
                    color: #fff;
                    font-size: 14px;

                    .masterBest-title {
                        /*display: flex;*/
                        width: 100%;
                        height: 20px;
                        text-align: center;
                    }
                    .teacher-py-box-style{
                        width: 100%;
                        height: 200px;
                        /deep/ .content-style{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            .teacher-box-style{
                                border: 1px solid #4e9fb4;
                                border-radius: 5px;
                                height: 94px;
                                width: 67px !important;
                                margin-right: 5px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                .item-title-style{
                                    width: 100%;
                                    height: 20px;
                                    font-size: 12px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    padding: 0 2px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }

                    .masterBest-row {
                        height: 95px;
                        width: 100%;
                        overflow: hidden;
                        margin-bottom: 5px;
                    }

                    .swiper-container {
                        width: 100%;
                        /*height: 195px;*/
                        .swiper-wrapper {
                            //display: flex;
                            /deep/ .swiper-slide {
                                width: 67px !important;
                            }
                        }
                    }

                    .masterBest-Col {
                        border: 1px solid #4e9fb4;
                        border-radius: 5px;
                        height: 94px;
                        width: 67px !important;
                        margin-right: 5px;
                        /*margin-bottom: 5px;*/
                    }
                }

                /*.masterList .masterList-box:nth-child(1) {*/
                /*background: #2C396F;*/
                /*border-radius: 5px;*/
                /*}*/

                .masterList {
                    width: 359px;
                    height: 220px;
                    border: none;

                    /deep/ .ant-collapse {
                        background: none !important;
                        border: none;

                        .ant-collapse-item-active {
                            background: #2C3C74;
                            border-radius: 5px;
                        }

                        .ant-collapse-item {
                            border: none;
                            position: relative;

                            .ant-collapse-content {
                                background: none;
                                border: none;
                                height: 80px;

                                .ant-collapse-content-box {
                                    width: 100%;
                                    height: 100%;
                                    padding: 5px 0;

                                    .masterList-span {
                                        display: inline-block;
                                        position: absolute;
                                        top: 3px;
                                        right: 3px;
                                        color: #fff;
                                    }
                                }

                                .ant-collapse-content-box img {
                                    margin: 0 6px;
                                    border: 1px solid #7BF4F7;
                                    border-radius: 5px;
                                }
                            }
                        }

                        .ant-collapse-item > .ant-collapse-header {
                            width: 50%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            padding-left: 8px;
                            color: #fff;
                            line-height: 10px;

                            .anticon {
                                display: none;
                            }
                        }
                    }

                    /*.masterListBox {*/
                    /*background: #2C396F;*/
                    /*}*/
                    /*.masterList-box {*/
                    /*padding: 5px;*/
                    /*.masterList-title {*/
                    /*cursor: pointer;*/
                    /*font-size: 14px;*/
                    /*display: flex;*/
                    /*align-items: center;*/
                    /*!*margin: 3px 0;*!*/
                    /*}*/
                    /*.masterList-time {*/
                    /*cursor: pointer;*/
                    /*font-size: 14px;*/
                    /*}*/
                    /*.masterList-picrow {*/
                    /*.masterList-piccol img:nth-child(2) {*/
                    /*margin: 0 5px;*/
                    /*}*/
                    /*.masterList-piccol {*/
                    /*width: 340px;*/
                    /*display: flex;*/
                    /*justify-content: space-between;*/
                    /*margin: 0 auto;*/
                    /*.masterList-pic {*/
                    /*cursor: pointer;*/
                    /*border: 1px solid #1890ff;*/
                    /*border-radius: 5px;*/
                    /*width: 110px;*/
                    /*height: 70px;*/
                    /*}*/
                    /*}*/
                    /*}*/
                    /*}*/

                }
            }
        }
    }
</style>