<template>
    <CommonBox title="校本课程" class="teaching-center-school-base-course-style">
        <a-spin class="school-base-course-box-style" :spinning="spinning">
            <div class="select-top-style">
                <span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
                      @click="typeChange(1)">特色课程</span>
                <span :class="'select-item-style border-right-style' + (selectType === 2?' select-style':'')"
                      @click="typeChange(2)">劳动课程</span>
                <span :class="'select-item-style' + (selectType === 3?' select-style':'')"
                      @click="typeChange(3)">思政课程</span>
            </div>
            <div class="school-base-course-content-style">
                <a-tabs :activeKey="paneKey">
                    <a-tab-pane :key="1" tab="Tab 1">
                        <div class="special-content-style">
                            <div class="top-style">
                                <div class="box-style">
                                    <img src="../../assets/images/teachingCenter/communityActivities.svg"
                                         style="width: 20px;height: 20px"/>
                                    <span>社团风采</span>
                                </div>
                                <div class="box-right-style"></div>
                            </div>
                            <div class="content-style">
                                <div class="item-content-style">
                                    <div class="item-row-style item-title-style">
                                        <img src="../../assets/images/teachingCenter/special.svg"
                                             style="width: 16px;height: 16px"/>科技社团
                                    </div>
                                    <div class="item-scroll-content-style">
                                        <vue-scroll key="special_scroll" class="table-boday-style" :ops="listScroll"
                                                    :style="{height: (specialDownBtnShow?'90%':'100%')}">
                                            <div class="item-row-style" v-for="item in specialList">
                                                {{item.course_name}}
                                            </div>
                                        </vue-scroll>
                                        <a-icon type="down" title="查看更多" class="downBtn" v-if="specialDownBtnShow"
                                                @click="showMore(1)"/>
                                    </div>
                                </div>
                                <div class="item-content-style">
                                    <div class="item-row-style item-title-style">
                                        <img src="../../assets/images/teachingCenter/art.svg"
                                             style="width: 16px;height: 16px"/>艺术社团
                                    </div>
                                    <div class="item-scroll-content-style">
                                        <vue-scroll key="art_scroll" class="table-boday-style" :ops="listScroll"
                                                    :style="{height: (artDownBtnShow?'90%':'100%')}">
                                            <div class="item-row-style" v-for="item in artList">
                                                {{item.course_name}}
                                            </div>
                                        </vue-scroll>
                                        <a-icon type="down" title="查看更多" class="downBtn" v-if="artDownBtnShow"
                                                @click="showMore(2)"/>
                                    </div>
                                </div>
                                <div class="item-content-style">
                                    <div class="item-row-style item-title-style">
                                        <img src="../../assets/images/teachingCenter/sports.svg"
                                             style="width: 16px;height: 16px"/>体育社团
                                    </div>
                                    <div class="item-scroll-content-style">
                                        <vue-scroll key="sports_scroll" class="table-boday-style" :ops="listScroll"
                                                    :style="{height: (sportsDownBtnShow?'90%':'100%')}">
                                            <div class="item-row-style" v-for="item in sportsList">
                                                {{item.course_name}}
                                            </div>
                                        </vue-scroll>
                                        <a-icon type="down" title="查看更多" class="downBtn" v-if="sportsDownBtnShow"
                                                @click="showMore(3)"/>
                                    </div>
                                </div>
                                <div class="item-tips-style">
                                    <div class="point-style"></div>
                                    <div class="left-line-style"></div>
                                    <div class="right-line-style"></div>
                                    <div class="text-box-style">
                                        <div class="text-title-style">特色课程简介</div>
                                        <div class="text-content-style">
                                            特色课程体系的建构是对国家课程的充分利用和有效补充,从宏观上看,它既可以推进教育民主化、多样化的发展进程,也可以推进国家素质教育改革的深化,还可以促进高中新课改的顺利实施;微观方面,它在促进学生全方位成长的同时,可以带动教师的专业进步,从而形成学校蓬勃发展的态势。
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane :key="2" tab="Tab 2">
                        <div class="labour-content-style">
                            <div class="labour-col-box-style col-01-style">
                                <vue-scroll key="labour01_scroll" class="table-boday-style" :ops="listScroll"
                                            :style="{height: (labour1DownBtnShow?'90%':'100%')}">
                                    <div class="item-row-style" v-for="item in labourList1">
                                        {{item.course_name}}
                                    </div>
                                </vue-scroll>
                                <a-icon type="down" title="查看更多" class="downBtn" v-if="labour1DownBtnShow"
                                        @click="showMore(4)"/>
                            </div>
                            <div class="labour-col-box-style col-02-style">
                                <vue-scroll key="labour02_scroll" class="table-boday-style" :ops="listScroll"
                                            :style="{height: (labour2DownBtnShow?'90%':'100%')}">
                                    <div class="item-row-style" v-for="item in labourList2">
                                        {{item.course_name}}
                                    </div>
                                </vue-scroll>
                                <a-icon type="down" title="查看更多" class="downBtn" v-if="labour2DownBtnShow"
                                        @click="showMore(5)"/>
                            </div>
                            <div class="labour-col-box-style col-03-style">
                                <vue-scroll key="labour03_scroll" class="table-boday-style" :ops="listScroll"
                                            :style="{height: (labour3DownBtnShow?'90%':'100%')}">
                                    <div class="item-row-style" v-for="item in labourList3">
                                        {{item.course_name}}
                                    </div>
                                </vue-scroll>
                                <a-icon type="down" title="查看更多" class="downBtn" v-if="labour3DownBtnShow"
                                        @click="showMore(6)"/>
                            </div>
                            <div class="labour-col-box-style col-04-style">
                                <vue-scroll key="labour04_scroll" class="table-boday-style" :ops="listScroll"
                                            :style="{height: (labour4DownBtnShow?'90%':'100%')}">
                                    <div class="item-row-style" v-for="item in labourList4">
                                        {{item.course_name}}
                                    </div>
                                </vue-scroll>
                                <a-icon type="down" title="查看更多" class="downBtn" v-if="labour4DownBtnShow"
                                        @click="showMore(7)"/>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane :key="3" tab="Tab 3">
                        <div class="politics-content-style">
                            <div class="left-content-style">
                                <vue-scroll key="labour04_scroll" class="table-boday-style" :ops="listScroll"
                                            style="height: 100%">
                                    <div class="item-row-style" v-for="item in schoolBaseList"
                                         @click="changePolitics(item)">
                                        {{'《' + item.course_name + '》'}}
                                    </div>
                                </vue-scroll>
                            </div>
                            <div class="center-content-style">
                                <div class="title-style">
                                    <span>{{'《' + currentBaseData.course_name + '》'}}</span>
                                </div>
                                <!--<img-preview :imgObj="imgList[0]"/>-->
                                <div class="img-box-style">
                                    <!--<img src="../../assets/images/teachingCenter/curriculum.png"-->
                                    <!--style="width: 100%;height: 100%"/>-->
                                    <img-preview :imgObj="currentBaseData.course_cover"/>
                                    <!--<img-->
                                    <!--v-if="currentBaseData.course_cover !== '[]'"-->
                                    <!--:src="currentBaseData.course_cover"-->
                                    <!--style="width: 100%;height: 100%"/>-->
                                    <!--<a-empty v-if="currentBaseData.course_cover === '[]'"-->
                                    <!--class="imgEmpty"-->
                                    <!--description='No Pic'-->
                                    <!--image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"-->
                                    <!--:image-style="{height: '80px',marginTop:'50px',}"-->
                                    <!--/>-->
                                </div>
                            </div>
                            <div class="right-content-style">
                                <a-row class="item-row-style">
                                    <a-col class="item-col-style" :span="12">主讲教师：</a-col>
                                    <a-col class="item-col-style" :span="12">{{currentBaseData.course_teacher}}</a-col>
                                </a-row>
                                <a-row class="item-row-style" style="margin-top: 5px">
                                    <a-col class="item-col-style" :span="12">授课时间：</a-col>
                                    <a-col class="item-col-style" :span="12">{{currentBaseData.course_teaching_time}}
                                    </a-col>
                                </a-row>
                                <a-row class="item-row-style" style="margin-top: 5px">
                                    <a-col class="item-col-style" :span="12">授课地点：</a-col>
                                    <a-col class="item-col-style" :span="12">{{currentBaseData.course_teaching_place}}
                                    </a-col>
                                </a-row>
                                <a-row class="item-row-style" style="margin-top: 5px">
                                    <a-col class="item-col-style" :span="12">授课对象：</a-col>
                                    <a-col class="item-col-style" :span="12">
                                        {{currentBaseData.course_teaching_object}}
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-spin>
    </CommonBox>
</template>
<script>
    /*
     * 校本课程
     * */
    import CommonBox from '../secondPages/commonBox.vue';
    import {Icon, Spin, List, Empty, Tabs, Row, Col} from 'ant-design-vue';
    import ImgPreview from '../../common/imgPreview.vue';
    import InterConfig from './interConfig';

    export default {
        data() {
            return {
                spinning: true,
                listScroll: this.StaticParams.scrollOption,
                selectType: 1,//1 周历 2 校历
                paneKey: 1,
                courseType: 11,
                specialDownBtnShow: false,
                artDownBtnShow: false,
                sportsDownBtnShow: false,
                labour1DownBtnShow: false,
                labour2DownBtnShow: false,
                labour3DownBtnShow: false,
                labour4DownBtnShow: false,
                specialPageSize: 6,
                artPageSize: 6,
                sportPageSize: 6,
                labourList1PageSize: 5,
                labourList2PageSize: 5,
                labourList3PageSize: 5,
                labourList4PageSize: 5,
                specialPageNumber: 1,
                artPageNumber: 1,
                sportPageNumber: 1,
                labourList1PageNumber: 1,
                labourList2PageNumber: 1,
                labourList3PageNumber: 1,
                labourList4PageNumber: 1,
                specialTotalPage: 0,
                artTotalPage: 0,
                sportTotalPage: 0,
                labourList1TotalPage: 0,
                labourList2TotalPage: 0,
                labourList3TotalPage: 0,
                labourList4TotalPage: 0,
                specialList: [],
                artList: [],
                sportsList: [],
                labourList1: [],
                labourList2: [],
                labourList3: [],
                labourList4: [],
                schoolBaseList: [],
                currentBaseData: {}
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                switch (this.paneKey) {
                    case 1:
                        this.getspecialList()
                        this.getartList()
                        this.getsportsList()
                        break;
                    case 2:
                        this.getLabourList1()
                        this.getLabourList2()
                        this.getLabourList3()
                        this.getLabourList4()
                        break;
                    case 3:
                        this.getSchoolBaseList()
                        break;
                }
            },
            // 特色课程-科技社团数据
            getspecialList() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 11,//必填 number 课程分类（11：科技社团；12：艺术社团；13：体育社团）
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.specialPageNumber,// 非必填 number 当前页码 1
                    page_size: this.specialPageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        // console.log('科技社团数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            // this.specialTotolNum = res.total_row
                            this.specialTotalPage = res.total_page
                            this.specialList = res.list
                            if (this.specialList.length !== res.total_row) {
                                this.specialDownBtnShow = true
                            } else {
                                this.specialDownBtnShow = false
                            }
                        }
                    }
                )
            },
            //特色课程-艺术社团数据
            getartList() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 12,//必填 number 课程分类（11：科技社团；12：艺术社团；13：体育社团）
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.artPageNumber,// 非必填 number 当前页码 1
                    page_size: this.artPageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        // console.log('艺术社团数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            //this.artTotolNum = res.total_row
                            this.artTotalPage = res.total_page
                            this.artList = res.list
                            if (this.artList.length !== res.total_row) {
                                this.artDownBtnShow = true
                            } else {
                                this.artDownBtnShow = false
                            }
                        }
                    }
                )
            },
            //特色课程-体育社团数据
            getsportsList() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 13,//必填 number 课程分类（11：科技社团；12：艺术社团；13：体育社团）
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.sportPageNumber,// 非必填 number 当前页码 1
                    page_size: this.sportPageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        //console.log('体育社团数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            //this.sportTotolNum = result[0].data.data.total_row
                            this.sportTotalPage = res.total_page
                            this.sportsList = res.list
                            if (this.sportsList.length !== res.total_row) {
                                this.sportsDownBtnShow = true
                            } else {
                                this.sportsDownBtnShow = false
                            }
                        }
                    }
                )
            },
            //劳动课程-labourList1数据
            getLabourList1() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 21,//必填 number 课程分类（21：体会劳动光荣；22：提高劳动能力；23：启蒙劳动意识；24：养成劳动习惯
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.labourList1PageNumber,// 非必填 number 当前页码 1
                    page_size: this.labourList1PageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        //console.log('labourList1数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            //this.labourList1TotolNum = res.total_row
                            this.labourList1TotalPage = res.total_page
                            this.labourList1 = res.list
                            if (this.labourList1.length !== res.total_row) {
                                this.labour1DownBtnShow = true
                            } else {
                                this.labour1DownBtnShow = false
                            }
                        }
                    }
                )
            },
            //劳动课程-labourList2数据
            getLabourList2() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 22,//必填 number 21：体会劳动光荣；22：提高劳动能力；23：启蒙劳动意识；24：养成劳动习惯
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.labourList2PageNumber,// 非必填 number 当前页码 1
                    page_size: this.labourList2PageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        //console.log('labourList2数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            //this.labourList2TotolNum = result[0].data.data.total_row
                            this.labourList2TotalPage = res.total_page
                            this.labourList2 = res.list
                            if (this.labourList2.length !== res.total_row) {
                                this.labour2DownBtnShow = true
                            } else {
                                this.labour2DownBtnShow = false
                            }
                        }
                    }
                )
            },
            //劳动课程-labourList3数据
            getLabourList3() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 23,//必填 number 21：体会劳动光荣；22：提高劳动能力；23：启蒙劳动意识；24：养成劳动习惯
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.labourList3PageNumber,// 非必填 number 当前页码 1
                    page_size: this.labourList3PageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        //console.log('labourList3数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            this.labourList3TotalPage = res.total_page
                            this.labourList3 = res.list
                            if (this.labourList3.length !== res.total_row) {
                                this.labour3DownBtnShow = true
                            } else {
                                this.labour3DownBtnShow = false
                            }
                        }
                    }
                )
            },
            //劳动课程-labourList4数据
            getLabourList4() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 24,//必填 number 21：体会劳动光荣；22：提高劳动能力；23：启蒙劳动意识；24：养成劳动习惯
                    // course_name: 1,//非必填 string 课程名称
                    page_number: this.labourList4PageNumber,// 非必填 number 当前页码 1
                    page_size: this.labourList4PageSize, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        //console.log('labourList4数据', result)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            let res = result[0].data.data
                            this.labourList4TotalPage = res.total_page
                            this.labourList4 = res.list
                            if (this.labourList4.length < res.total_row) {
                                this.labour4DownBtnShow = true
                            } else {
                                this.labour4DownBtnShow = false
                            }
                        }
                    }
                )
            },
            //思政课程数据
            getSchoolBaseList() {
                this.spinning = true
                let param = {
                    org_id: this.BaseConfig.person_info_my.bureau_id,  //登录人机构ID
                    type_id: this.paneKey,//必填 number 校本课程类型（1：特色课程；2：劳动课程；3：思政课程）
                    course_type: 31,//31：思政课程；
                    // course_name: 1,//非必填 string 课程名称
                    // page_number: this.pageNumber,// 非必填 number 当前页码 1
                    page_size: 99999999999, //非必填 number 每页条数 10
                }
                this.InterfaceConfig.callInterface([{
                        url: InterConfig.schoolCourse.url,
                        params: param,
                        method: InterConfig.schoolCourse.method,
                        isTestLogin: InterConfig.schoolCourse.isTestLogin,
                    }], (result) => {
                        // console.log('思政课程', result)
                        //console.log('思政课程', result[0].data.data.list[0].course_cover)
                        this.spinning = false
                        if (result[0].data.code === 2000) {
                            this.schoolBaseList = result[0].data.data.list
                            this.schoolBaseList.forEach(item => {
                                item.course_cover = JSON.parse(item.course_cover)[0]
                            })
                            this.currentBaseData = this.schoolBaseList[0];
                        }
                    }
                )
            },
            //tab切换时
            typeChange: function (type) {
                if (this.selectType !== type) {
                    this.selectType = type;
                    this.paneKey = type;
                    this.getData()
                }
            },
            changePolitics(item) {
                this.currentBaseData = item;
            },
            showMore(index) {
                if (index === 1) {
                    if (this.specialPageNumber === this.specialTotalPage) {
                        return
                    } else {
                        this.specialPageSize += 6
                        this.getspecialList()
                    }
                } else if (index === 2) {
                    if (this.artPageNumber === this.artTotalPage) {
                        return
                    } else {
                        this.artPageSize += 6
                        this.getartList()
                    }
                } else if (index === 3) {
                    if (this.sportPageNumber === this.sportTotalPage) {
                        return
                    } else {
                        this.sportPageSize += 6
                        this.getsportsList()
                    }
                } else if (index === 4) {
                    if (this.labourList1PageNumber === this.labourList1TotalPage) {
                        return
                    } else {
                        this.labourList1PageSize += 5
                        this.getLabourList1()
                    }
                } else if (index === 5) {
                    if (this.labourList2PageNumber === this.labourList2TotalPage) {
                        return
                    } else {
                        this.labourList2PageSize += 5
                        this.getLabourList2()
                    }
                } else if (index === 6) {
                    if (this.labourList3PageNumber === this.labourList3TotalPage) {
                        return
                    } else {
                        this.labourList3PageSize += 5
                        this.getLabourList3()
                    }
                } else if (index === 7) {
                    if (this.labourList4PageNumber === this.labourList4TotalPage) {
                        return
                    } else {
                        this.labourList4PageSize += 5
                        this.getLabourList4()
                    }
                }
            },
        },
        components: {
            CommonBox,
            ASpin: Spin,
            ATabs: Tabs,
            ATabPane: Tabs.TabPane,
            ImgPreview,
            ARow: Row,
            ACol: Col,
            AIcon: Icon,
            AEmpty: Empty,
        }
    }
</script>
<style scoped lang="scss">
    @import "../../assets/scss/style";

    .teaching-center-school-base-course-style {
        width: 100%;
        height: 320px !important;
        position: relative;

        .school-base-course-box-style {
            width: 100%;
            height: 100%;
            /deep/ .ant-spin-container {
                width: 100%;
                height: 100%;
                .select-top-style {
                    width: 100%;
                    height: 20px;
                    text-align: right;
                    /*position: absolute;*/
                    /*right: 0;*/
                    .select-item-style {
                        color: #1379c8;
                        padding: 0 10px;
                        font-size: 16px;
                        cursor: pointer;
                    }
                    .border-right-style {
                        border-right: 1px solid #1379c8;
                    }
                    .select-style {
                        color: $color-default-bright;
                        cursor: default;
                    }
                }
                .school-base-course-content-style {
                    width: 100%;
                    height: calc(100% - 20px);
                    /*min-height: 350px;*/
                    /*margin-top: 10px;*/
                    .ant-tabs {
                        width: 100%;
                        height: 100%;
                        .ant-tabs-bar {
                            display: none !important;
                        }
                        .ant-tabs-content {
                            width: 100%;
                            height: 100%;
                            .ant-tabs-tabpane {
                                width: 100%;
                                height: 100%;
                                .special-content-style {
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    .top-style {
                                        width: 100%;
                                        height: 30px;
                                        display: flex;
                                        align-items: center;
                                        .box-style {
                                            width: 120px;
                                            height: 25px;
                                            background: -webkit-linear-gradient(to right, #1459c1, #031b5c); /* Safari 5.1 - 6.0 */
                                            background: -o-linear-gradient(to right, #1459c1, #031b5c); /* Opera 11.1 - 12.0 */
                                            background: -moz-linear-gradient(to right, #1459c1, #031b5c); /* Firefox 3.6 - 15 */
                                            background: linear-gradient(to right, #1459c1, #031b5c); /* 标准的语法（必须放在最后） */
                                            display: flex;
                                            align-items: center;
                                            span {
                                                color: $color-default-bright;
                                            }
                                        }
                                        .box-right-style {
                                            width: 0;
                                            height: 0;
                                            border-color: transparent #031b5c; /*上下颜色 左右颜色*/
                                            border-width: 0 0 25px 25px;
                                            border-style: solid;
                                        }
                                    }
                                    .content-style {
                                        width: 100%;
                                        height: calc(100% - 30px);
                                        display: flex;
                                        justify-content: space-between;
                                        .item-content-style {
                                            width: 100px;
                                            height: 100%;
                                            border: 1px dashed $color-default-bright;
                                            border-radius: 5px;
                                            display: flex;
                                            flex-direction: column;
                                            .item-row-style {
                                                width: 100%;
                                                height: 30px;
                                                border-bottom: 1px dashed white;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                color: white;
                                            }
                                            .item-title-style {
                                                color: #F59A23;
                                            }
                                            .item-scroll-content-style {
                                                position: relative;
                                                width: 100%;
                                                height: calc(100% - 30px);
                                                .downBtn {
                                                    color: $color-default-bright;
                                                    position: absolute;
                                                    bottom: 2px;
                                                    left: 40px;
                                                    cursor: pointer;
                                                }
                                            }
                                        }
                                        .item-tips-style {
                                            width: 200px;
                                            height: 100%;
                                            /*  border: 1px dashed $color-default-bright;*/
                                            border-radius: 5px;
                                            display: flex;
                                            justify-content: center;
                                            position: relative;
                                            .point-style {
                                                width: 10px;
                                                height: 10px;
                                                border-radius: 10px;
                                                background-color: $color-default-bright;
                                            }
                                            .left-line-style {
                                                width: 50px;
                                                height: 2px;
                                                background-color: $color-default-bright;
                                                transform: rotateZ(-50deg);
                                                position: absolute;
                                                top: 25px;
                                                left: 55px;
                                            }
                                            .right-line-style {
                                                width: 50px;
                                                height: 2px;
                                                background-color: $color-default-bright;
                                                transform: rotateZ(50deg);
                                                position: absolute;
                                                top: 25px;
                                                left: 92px;
                                            }
                                            .text-box-style {
                                                width: 100%;
                                                height: 190px;
                                                border: 1px dashed $color-default-bright;
                                                position: absolute;
                                                bottom: 0;
                                                border-radius: 10px;
                                                display: flex;
                                                flex-direction: column;
                                                padding: 5px;
                                                .text-title-style {
                                                    width: 100%;
                                                    height: 20px;
                                                    color: #F59A23;
                                                }
                                                .text-content-style {
                                                    width: 100%;
                                                    height: calc(100% - 20px);
                                                    color: $color-default-bright;
                                                    display: flex;
                                                    flex-wrap: nowrap;
                                                    font-size: 10px;
                                                }
                                            }
                                        }
                                    }
                                }
                                .labour-content-style {
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: space-between;
                                    .labour-col-box-style {
                                        width: 20%;
                                        height: 100%;
                                        position: relative;
                                        .downBtn {
                                            color: $color-default-bright;
                                            position: absolute;
                                            bottom: 2px;
                                            left: 50px;
                                            cursor: pointer;
                                        }
                                        .item-row-style {
                                            width: 100%;
                                            height: 40px;
                                            border: 1px dashed #facd91;
                                            border-radius: 5px;
                                            margin-bottom: 10px;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            color: white;
                                            &:hover {
                                                background-color: #facd91;
                                                color: black;
                                            }
                                        }
                                    }
                                    .col-01-style {
                                        border-top: 1px dashed #bfbf00;
                                        border-left: 1px dashed #bfbf00;
                                        .item-row-style {
                                            border: 1px dashed #facd91;
                                            color: white;
                                            &:hover {
                                                background-color: #facd91;
                                                color: black;
                                            }
                                        }
                                    }
                                    .col-02-style {
                                        border-top: 1px dashed #ec808d;
                                        border-left: 1px dashed #ec808d;
                                        .item-row-style {
                                            border: 1px dashed #ec808d;
                                            color: white;
                                            &:hover {
                                                background-color: #ec808d;
                                                color: black;
                                            }
                                        }
                                    }
                                    .col-03-style {
                                        border-top: 1px dashed #f59a23;
                                        border-left: 1px dashed #f59a23;
                                        .item-row-style {
                                            border: 1px dashed #facd91;
                                            color: white;
                                            &:hover {
                                                background-color: #facd91;
                                                color: black;
                                            }
                                        }
                                    }
                                    .col-04-style {
                                        border-top: 1px dashed #70b603;
                                        border-left: 1px dashed #70b603;
                                        .item-row-style {
                                            border: 1px dashed #caf982;
                                            color: white;
                                            &:hover {
                                                background-color: #caf982;
                                                color: black;
                                            }
                                        }
                                    }
                                }
                                .politics-content-style {
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    .left-content-style {
                                        width: 30%;
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        .item-row-style {
                                            width: 80%;
                                            height: 40px;
                                            border: 1px solid $color-default-bright;
                                            border-radius: 5px;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            color: white;
                                            margin-bottom: 10px;
                                            cursor: pointer;
                                        }
                                    }
                                    .center-content-style {
                                        width: 40%;
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        padding: 10px 0;
                                        .title-style {
                                            width: 100%;
                                            height: 40px;
                                            color: white;
                                        }
                                        .img-box-style {
                                            width: 100%;
                                            height: calc(100% - 40px);
                                            border: 1px solid #ccc;
                                            .imgEmpty {
                                                color: #fff !important;
                                                width: 100%;
                                                height: 100%
                                            }
                                        }
                                    }
                                    .right-content-style {
                                        width: 30%;
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 50px 5px 0 5px;
                                        .item-row-style {
                                            width: 100%;
                                            height: 40px;
                                            .item-col-style {
                                                color: white;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>