<template>
    <div class="managePlatform-right">
        <title-line :con="'师资/课程/活动'"></title-line>
        <!-- 师资力量 -->
        <div class="faculty">
            <div class="teachernum">
                <div class="minTitle">师资力量</div>
                <pie-chart :option="eduConfig.option" />
            </div>
            <div class="staff">
                <bar-chart :option="staffConfig.option" />
            </div>
        </div>
        <!-- 教学课程 -->
        <div class="course">
            <div class="coursetitle">
                <div class="minTitle">教学课程</div>
                <div class="seemore" @click="Seemore">查看更多</div>
            </div>
            <p class="percent">
                <span v-for="(item, l) in coursedata" :key="l">
                    {{item.key}}
                    <count-to :endVal="item.value" :suffix="item.unit"/>
                </span>
            </p>
            <div class="line">
                <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
            </div>
        </div>
        <popup-frame :visible.sync="visible" @beforeClose="closePopup">
            <img src="../../../static/images/index/course.jpg" alt="弹框">
        </popup-frame>

        <!-- 学习内容 -->
        <div class="learnContent">
            <div class="minTitle">学习内容</div>
            <bar-chart style="margin-top:13px" :layout="learnConfig.layout" :option="learnConfig.option" />
        </div>
        <!-- 活动开展 -->
        <div class='activ'>
            <div class="activity-one">
                <div class="act">活动开展</div>
                <div class="mor" @click="getMore">查看更多</div>
            </div>
            <div class="activity-two">
                <div class="left">
                    <div class="act-left">
                        <count-roll :count="4166"/><span>次</span>
                    </div>
                    <p class="act-num">活动开展次数</p>
                </div>
                <div class="line"></div>
                <div class="right">
                    <line-bar
                        :layout="activeConfig.layout"
                        :option="activeConfig.option"
                    />
                </div>
            </div>
        </div>
        <!-- 活动开展弹出层 -->
         <popup-frame
            :visible.sync="activeShow"
            @beforeClose="beforeCloses"
        >
            <div class="img">
                <img src="../../../static/images/index/03.png" alt="">
            </div>
        </popup-frame>
        <!-- 交流会弹出层 -->
        <popup-frame
            :visible.sync="showVisible"
            @beforeClose="beforeCloses"
            class="topic-frame"
        >
            <div class="img">
                <img src="../../../static/images/index/supply-demand1.jpg" alt="" v-show="topicShow">
                <img src="../../../static/images/index/supply-demand2.jpg" alt="" v-show="!topicShow">
                <div class="button" @click="topicChange"></div>
            </div>
        </popup-frame>
        <div class="right-bottom">
            <div class="seemore" @click="topicDialog">查看更多</div>
            <title-line :con="'交流会/专题'"></title-line>
            <div class="topic">
                <div class="left">
                    <p class="sub-title">****交流会</p>
                    <div class="swiper-content">
                        <swiper :options="swiperOption" class="swipers">
                            <swiper-slide
                                v-for="(item, index) in topicList"
                                :key="index"
                                class="swiper-item"
                            >
                                <img :src="item.img" alt="" />
                            </swiper-slide>
                        </swiper>
                        <div class="pagination-items">
                            <div
                                class="swiper-pagination change"
                                slot="pagination"
                            ></div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="num">
                        <span><count-to :endVal="110" /></span>
                        <span><count-to :endVal="120" /></span>
                        <span><count-to :endVal="270" /></span>
                        <span><count-to :endVal="4000" /></span>
                    </div>
                    <div class="text">
                        <span class="item"
                            >对接交流活动 <count-to :endVal="110" />余场</span
                        >
                        <span class="item"
                            >发布大企业创新需求<count-to
                                :endVal="120"
                            />余个</span
                        >
                        <span class="item"
                            >促成项目合作<count-to :endVal="270" />余个</span
                        >
                        <span class="item"
                            >服务创新创业企业<count-to
                                :endVal="4000"
                            />余家次</span
                        >
                    </div>
                </div>
            </div>
            <div class="topic-show">
                <p class="sub-title">专题展示</p>
                <div class="topic-item">
                    <div class="item">
                        <img
                            src="../../../static/images/index/topic-bg4.png"
                            alt=""
                        />
                        <p>连续两届成功“创客中国”上海赛区总决赛</p>
                    </div>
                    <div class="item">
                        <img
                            src="../../../static/images/index/topic-bg4.png"
                            alt=""
                        />
                        <p>连续两届成功“创客中国”上海赛区总决赛</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TitleLine from 'components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import BarChart from 'components/echarts/BarChart.vue'
import PieChart from 'components/echarts/PieChart.vue'
import LineBar from 'components/echarts/LineBar'
import CountRoll from 'components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default {
    name: 'Right',
    components: {
        TitleLine,
        BarChart,
        PieChart,
        swiper,
        swiperSlide,
        LineBar,
        CountRoll
        // PopupFrame
    },
    props: {
        rightData: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            visible: false,
            activeShow: false,
            showVisible: false,
            // 师资力量
            eduConfig: {},
            edu: null,
            staffConfig: {},
            staff: [],
            // 教学课程
            coursedata: [],
            lineConfig: {},
            line: [],
            // 学习内容
            learnConfig: {},
            learn: [],
            swiperOption: {
                mousewheel: true,
                centeredSlides: true,
                centeredSlidesBounds: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'bullets'
                }
            },
            topicList: [
                {
                    img: '../../../static/images/index/topic-bg1.png'
                },
                {
                    img: '../../../static/images/index/topic-bg1.png'
                },
                {
                    img: '../../../static/images/index/topic-bg1.png'
                }

            ],
            topicShow: true,
            // 活动开展
            activeConfig: {},
            activeList: [
                {name: '*****活动', value: 192},
                {name: '组织活动', value: 1103},
                {name: '*****活动', value: 381}
            ]
        }
    },
    mounted () {
        this.getstaff()
        this.getEdudata()
        this.getcoursedata()
        this.getlinedata()
        this.getline()
        this.getlearn()
        this.getActive(this.activeList)
    },
    methods: {
        // 师资力量
        getstaff () {
            this.staffConfig = {
                option: {
                    seriesData: [
                        {
                            data: this.rightData.staff.list.map(item => item.value).reverse()
                        }
                    ],
                    base: {
                        yAxis: [{
                            data: this.rightData.staff.list.map(item => item.key).reverse()
                        }]
                    }
                }
            }
        },
        getEdudata () {
            const num = this.rightData.staff.list.map(item => {
                return item.value
            })
            function sum (arr) {
                var s = 0
                arr.forEach(val => {
                    s += val
                })
                return s
            }
            this.edu = sum(num)
            this.getEdu()
        },
        getEdu () {
            this.eduConfig = {
                option: {
                    base: {
                        color: [],
                        legend: {
                            show: false
                        }
                    },
                    seriesData: [
                        {
                            type: 'pie',
                            name: '师资力量',
                            itemStyle: {
                                shadowBlur: 0,
                                shadowColor: '#3EB8F7'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            clockWise: false,
                            hoverAnimation: false,
                            center: ['38%', '50%'],
                            radius: ['65%', '78%'],
                            data: [
                                {
                                    value: this.edu,
                                    label: {
                                        rich: {
                                            a: {
                                                color: '#fff',
                                                align: 'center',
                                                fontSize: 30,
                                                fontWeight: '400'
                                            },
                                            b: {
                                                color: '#fff',
                                                align: 'center',
                                                fontWeight: '400',
                                                fontSize: 18
                                            }
                                        },
                                        formatter: function (params) {
                                            return '{a|' + params.value + '}\n{b|教师数}'
                                        },
                                        position: 'center',
                                        show: true
                                    },
                                    itemStyle: {
                                        color: '#3EB8F7',
                                        shadowColor: '#2c6cc4',
                                        shadowBlur: 0
                                    }
                                }, {
                                    value: this.edu / 2 + 20,
                                    name: 'invisible',
                                    itemStyle: {
                                        color: 'rgba(0, 12, 27)'
                                    }
                                }
                            ]
                        }
                    ]
                }
            }
        },
        getcoursedata () {
            this.coursedata = this.rightData.coursedata.list || []
        },
        getlinedata () {
            this.line = this.rightData.line.list.map(item => {
                return {
                    name: item.key,
                    value: item.value
                }
            }) || []
        },
        // 教学课程更多
        Seemore () {
            this.visible = true
        },
        // 教学课程更多关闭
        closePopup (flag) {
            this.visible = flag
        },
        // 教学课程百分比
        getline () {
            this.lineConfig = {
                layout: {
                    width: '100%',
                    height: '31px'
                },
                option: {
                    base: {
                        grid: {
                            left: 0,
                            right: 0,
                            bottom: 0,
                            top: 0,
                            containLabel: true
                        }
                    },
                    seriesData: [
                        {
                            name: 'A',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                color: 'rgba(0, 190, 255, .3)',
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [5, 0, 0, 5]
                            },
                            label: {
                                show: true,
                                position: 'insideRight',
                                offset: [-40, 2],
                                formatter: function (params) {
                                    console.log(params, '5555')
                                    return '{a|' + params.name + '}{b|' + params.value + '%}'
                                },
                                rich: {
                                    a: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 14,
                                        fontFamily: 'Microsoft YaHei',
                                        fontWeight: '400'
                                    },
                                    b: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 24,
                                        fontFamily: 'Century Gothic',
                                        fontWeight: '400'
                                    }
                                }
                            },
                            data: [this.line[0]]
                        },
                        {
                            name: 'B',
                            type: 'bar',
                            stack: 'Tik Tok',
                            barWidth: 25,
                            itemStyle: {
                                color: 'rgba(0, 222, 125, .3)',
                                shadowOffsetY: 0,
                                shadowOffsetX: 0,
                                barBorderRadius: [0, 5, 5, 0]
                            },
                            label: {
                                show: true,
                                position: 'insideRight',
                                offset: [-40, 2],
                                formatter: function (params) {
                                    return '{a|' + params.name + '}{b|' + params.value + '%}'
                                },
                                rich: {
                                    a: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 14,
                                        fontFamily: 'Microsoft YaHei',
                                        fontWeight: '400'
                                    },
                                    b: {
                                        color: '#fff',
                                        align: 'center',
                                        fontSize: 24,
                                        fontFamily: 'Century Gothic',
                                        fontWeight: '400'
                                    }
                                }
                            },
                            data: [this.line[1]]
                        }
                    ]
                }
            }
        },
        // 学习内容
        getlearn () {
            const xData = this.rightData.learn.data.list.map(v => v.key)
            const Data = this.rightData.learn.data.list.map(v => v.value)
            const max = Math.max.apply(null, Data)
            const maxdata = this.rightData.learn.data.list.map(v => {
                return ((v.value / max) * 100).toFixed(2)
            })
            const data = this.rightData.learn.data.list
            this.learnConfig = {
                layout: {
                    width: '100%',
                    height: '136px'
                },
                option: {
                    base: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line'
                            },
                            textStyle: {
                                color: '#ffffff'
                            },
                            formatter: function (params) {
                                let str
                                data.forEach((item, l) => {
                                    if (item.key === params[0].name) {
                                        str = '<span style=' + 'font-size: 13px;font-family: Century Gothic;font-weight: 400;color: #FFFFFF;' + '>' + item.value + item.unit + '</span><br/><span style=' + 'font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #B8E6FF;' + '>' + params[0].name + '</span>'
                                    }
                                })

                                return str
                            },
                            backgroundColor: 'rgba(55, 128, 246, 0.2)',
                            borderColor: 'rgba(55, 128, 246, 0.2)'
                        },
                        grid: {
                            left: 0,
                            right: 0,
                            bottom: 0,
                            top: 10,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                interval: 0,
                                show: true,
                                fontSize: 14,
                                color: '#469CCC'
                            },
                            data: xData
                        },
                        yAxis: [{
                            type: 'value',
                            max: this.rightData.learn.yMaxValue,
                            min: this.rightData.learn.yMinValue,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(17, 63, 116, 1)'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value}%',
                                fontSize: 14,
                                fontFamily: 'Century Gothic',
                                fontWeight: 400,
                                color: '#469CCC'
                            },
                            boundaryGap: ['20%', '20%']
                        }]
                    },
                    seriesData: [
                        {
                            type: 'bar',
                            barWidth: 6,
                            itemStyle: {
                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: '#24E8FF'
                                    },
                                    {
                                        offset: 0,
                                        color: '#00BEFf'
                                    }
                                ]),
                                barBorderRadius: [3, 3, 0, 0]
                            },
                            label: {
                                show: false
                            },
                            data: maxdata
                        }
                    ]
                }
            }
        },
        getActive (data) {
            let yData = data.map(v => v.name).reverse() // y轴左侧的数据
            let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据
            let max = 4166 // x轴的最大值
            let maxData = new Array(data.length).fill(max)// x轴的最大值
            let pointData = data.reverse().map((v, i) => {
                return {
                    xAxis: v.value,
                    yAxis: i
                }
            })
            this.activeConfig = {
                layout: {
                    width: '100%',
                    height: '100%'
                },
                option: {
                    base: {
                        xAxis: {
                            max: max
                        },
                        yAxis: [
                            {
                                axisLabel: {
                                    color: '#fff',
                                    align: 'left',
                                    padding: [0, 0, 0, -60]
                                },
                                data: yData
                            }, {
                                data: y2Data
                            }
                        ]
                    },
                    seriesData: [
                        {
                            name: 'show',
                            type: 'bar',
                            barWidth: '4px',
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                normal: {
                                    color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: 'rgba(59, 150, 235, 1)'
                                    }, {
                                        offset: 1,
                                        color: '#3b96eb'
                                    }], false)
                                }
                            },
                            markPoint: {
                                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
                                symbolSize: [10, 10],
                                data: []
                            },
                            data: [50]
                        },
                        {
                            name: 'back',
                            barWidth: '5px',
                            data: maxData
                        },
                        {
                            name: 'show',
                            barWidth: '5px',
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                color: 'rgba(64, 169, 248, .05)'
                            },
                            markPoint: {
                                symbolOffset: [0, 0.5],
                                data: pointData // x轴的数值
                            },
                            data: [10, 10, 10, 10]
                        }
                    ]
                }
            }
        },
        // 查看更多的点击事件
        getMore () {
            console.log(123)
            this.activeShow = true
        },
        // 交流会/专题弹框
        topicDialog () {
            this.showVisible = true
        },
        // 关闭交流会/专题弹框弹框前的回调
        beforeCloses (flag) {
            this.showVisible = flag
            this.activeShow = flag
        },
        topicChange () {
            this.topicShow = !this.topicShow
        }

    }
}
</script>

<style lang="less">
.managePlatform-right {
    height: 500px;
    .minTitle {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
    }
    .faculty {
        margin-top: 7px;
        height: 156px;
        display: flex;
        .teachernum {
            width: 134px;
            height: 100%;
        }
        .staff {
            margin-top: 47px;
            width: 340px;
        }
    }

    .course {
        height: 110px;
        .coursetitle {
            display: flex;
            justify-content: space-between;
            .seemore {
                width: 94px;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #18d1c6;
                background: url('./../../../static/images/index/more.png')
                    no-repeat right;
            }
        }
        .percent {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            span {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #6dcdff;
                span{
                    font-size: 26px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #fff;
                }
            }
        }
        .line {
            height: 31px;
            margin-top: 12px;
        }
    }
    .learnContent{
        height: 178px;
    }
    // 活动开展
    .activ{
            width: 100%;
            height: 140px;
            .activity-one{
                height: 20px;
                display: flex;
                justify-content: space-between;
                .act{
                    width: 72px;
                    height: 20px;
                    margin-top: -5px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 28px;
                }
                .mor{
                    width: 94px;
                    height: 20px;
                    cursor: pointer;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #18d1c6;
                    background:url('../../../static/images/index/more.png') no-repeat right;
                }
            }
            .activity-two{
                margin-top: 12px;
                display: flex;
                justify-content: space-between;
                .left{
                    margin-top:10px;
                    width: 150px;
                    .act-left{
                        display: flex;
                        .act-style{
                            width: 150px;
                        }
                        span{
                            width: 16px;
                            height: 17px;
                            margin-top: 22px;
                            margin-left: 12px;
                            font-size: 16px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 35px;
                        }
                    }
                    .act-num{
                        width: 108px;
                        height: 18px;
                        margin-top: 20px;
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6DCDFF;
                        line-height: 17px;
                    }
                }
                .line{
                    width: 3px;
                    height: 76px;
                    margin: 10px 0 0 20px;
                    background:url('../../../static/images/index/3.png');
                }
                .right{
                    width: 270px;
                    height: 100%;
                }
            }
        }
    .right-bottom {
        position: relative;
        .seemore {
                position: absolute;
                top: 0;
                right: 0;
                width: 94px;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #18d1c6;
                background: url('./../../../static/images/index/more.png')
                    no-repeat right;
            }
        .topic {
            margin-top: 19px;
            width: 482px;
            height: 158px;
            display: flex;
            background: url('../../../static/images/index/comm-bg.png')
                no-repeat center;
            .left {
                margin-left: 11px;
                margin-right: 21px;
                .sub-title {
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 28px;
                }
                .swiper-content {
                    width: 190px;
                    height: 107px;
                    .swipers {
                        width: 100%;
                        height: 100%;
                        .swiper-item {
                            width: 100%;
                            height: 100%;
                            img {
                                width: 190px;
                                height: 107px;
                            }
                        }
                    }
                    .pagination-items {
                        width: 60px;
                        margin: 0 auto;
                        .change.swiper-pagination.swiper-pagination-clickable {
                            width: 60px;
                            height: 6px;
                            border-radius: 50%;
                            margin-top: 5px;
                            display: flex;
                            justify-content: space-between;
                        }
                        .swiper-pagination-bullet {
                            width: 6px;
                            height: 6px;
                            background: rgba(62, 157, 247, 0.4);
                        }
                        .swiper-pagination-bullet-active {
                            background: #3e9df7;
                        }
                    }
                }
            }
            .right {
                display: flex;
                .num {
                    position: relative;
                    margin-top: 14px;
                    width: 54px;
                    height: 138px;
                    background: url('../../../static/images/index/topic-bg2.png')
                        no-repeat center 0;
                    span {
                        position: absolute;
                        font-size: 16px;
                        font-family: Century Gothic;
                        font-weight: 400;
                        color: #ffffff;
                        left: 3px;
                        top: 6px;
                    }
                    span:nth-child(2) {
                        left: 20px;
                        top: 40px;
                    }
                    span:nth-child(3) {
                        left: 3px;
                        top: 70px;
                    }
                    span:nth-child(4) {
                        left: 16px;
                        top: 105px;
                    }
                }
                .text {
                    position: relative;
                    margin-top: 14px;
                    width: 197px;
                    display: flex;
                    align-items: center;
                    height: 138px;
                    .item {
                        position: absolute;
                        height: auto;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #ffffff;
                        left: 0;
                        top: 9px;
                    }
                    .item:nth-child(2) {
                        left: 10px;
                        top: 45px;
                    }
                    .item:nth-child(3) {
                        left: 0;
                        top: 78px;
                    }
                    .item:nth-child(4) {
                        left: 10px;
                        top: 108px;
                    }
                }
            }
        }
        .topic-show {
            .sub-title {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
                line-height: 28px;
                margin: 15px 0;
            }
            .topic-item {
                display: flex;
                justify-content: space-between;
                .item {
                    width: 230px;
                    height: 105px;
                    background: url('../../../static/images/index/topic-bg3.png')
                        no-repeat;
                    img {
                        display: block;
                        width: 153px;
                        height: 56px;
                        margin: 0 auto;
                        margin-top: 17px;
                        margin-bottom: 8px;
                    }
                    p {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #6dcdff;
                    }
                }
            }
        }
    }
    .topic-frame{
        width: 100%;
        height: 100%;
        .img{
            position: relative;
            width: 100%;
            height: 100%;
            .button{
              width: 50px;
              height: 100px;
              position: absolute;
              top: 40%;
              right: 10px;
            }
        } 
    }
}
</style>