<template>
    <div>
        <fullscreen :fullscreen.sync="fullscre" class="container">
            <div class="container-s">
                <div class="tit">
                    <span class="i-n-left">
                        <em class="linelong"></em>
                        <em class="line"></em>
                        <em class="line liner"></em>
                    </span>
                    <span @click="bigto">大数据服务平台</span>
                    <span class="i-n-left rigth">
                        <em class="line liner"></em>
                        <em class="line"></em>
                        <em class="linelong"></em>
                    </span>
                </div>
                <div class="tit-bottom">
                    <span>
                        <em class="t-b-ll"></em>
                        <em class="t-b-lc"></em>
                        <em class="t-b-lr"></em>
                    </span>
                    <span style="text-align: right;">
                        <em class="t-b-rr"></em>
                        <em class="t-b-rc"></em>
                        <em class="t-b-rl"></em>
                    </span>
                </div>
                <div class="tabinfo bigscreen">


                    <div class="mc-right-select">
                        <el-select :popper-append-to-body="false" v-model="topType" @change="topTypeEvent"
                            placeholder="">
                            <el-option v-for="item in options" :key="item.value" :label="item.dataName"
                                :value="item.dataCode">
                            </el-option>
                        </el-select>
                    </div>


                    <div class="info-box">
                        <em class="em-tit">前台 <span style="font-size: 1rem;">({{topLeftTotal}})次</span></em>
                        <em class="em-lt"></em>
                        <em class="em-lb"></em>
                        <em class="em-rt"></em>
                        <em class="em-rb"></em>
                        <div class="em-time">
                            <span style="padding-right: 20px;color: #fff;">日视图</span>
                            <el-select :popper-append-to-body="false" v-model="topTime" @change="topTimeEvent"
                                placeholder="">
                                <el-option v-for="item in toptions" :key="item.id" :label="item.id"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div id="echarts-pies" class="echarts-style echart-l" v-loading="loadingtl"></div>
                    </div>


                    <div class="info-box">
                        <em class="em-tit">前台 <span style="font-size: 1rem;">({{topRightTotal}})次</span></em>
                        <em class="em-lt"></em>
                        <em class="em-lb"></em>
                        <em class="em-rt"></em>
                        <em class="em-rb"></em>
                        <div class="em-timer">
                            近60日视图
                        </div>
                        <div id="echarts-Line" class="echarts-style" v-loading="loadingtr"></div>
                    </div>


                    <div class="mc-right-select">
                        <el-select :popper-append-to-body="false" v-model="bottomType" @change="bottomTypeEvent"
                            placeholder="">
                            <el-option v-for="item in options" :key="item.value" :label="item.dataName"
                                :value="item.dataCode">
                            </el-option>
                        </el-select>
                    </div>


                    <div class="info-box">
                        <em class="em-tit">电子渠道 <span style="font-size: 1rem;">({{bottomLeftTotal}})次</span></em>
                        <em class="em-lt"></em>
                        <em class="em-lb"></em>
                        <em class="em-rt"></em>
                        <em class="em-rb"></em>
                        <div class="em-time">
                            <span style="padding-right: 20px;color: #fff;">日视图</span>
                            <el-select :popper-append-to-body="false" v-model="bottomTime" @change="bottomTimeEvent"
                                placeholder="">
                                <el-option v-for="item in toptions" :key="item.id" :label="item.id"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div id="bottom-echarts-pies" class="echarts-style echart-l" v-loading="loadingbl"></div>
                    </div>


                    <div class="info-box">
                        <em class="em-tit">电子渠道 <span style="font-size: 1rem;">({{bottomRightTotal}})次</span></em>
                        <em class="em-lt"></em>
                        <em class="em-lb"></em>
                        <em class="em-rt"></em>
                        <em class="em-rb"></em>
                        <div class="em-timer">
                            近60日视图
                        </div>
                        <div id="bottom-echarts-Line" class="echarts-style" v-loading="loadingbr"></div>
                    </div>


                </div>
            </div>
        </fullscreen>

    </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        components: {

        },
        data() {
            return {
                fullscre: false,
                topTime: "07:00", // 前台时间
                topTimeList: [], // 前台日期
                topType: "0000",
                topLeftTotal: 0,

                bottomTime: "07:00", // 渠道时间
                bottomType: "0000",
                bottomLeftTotal: 0,
                bottomTimeList: [], // 渠道日期

                topRightTotal: 0,
                bottomRightTotal: 0,

                options: [],
                loadingtl: false,
                loadingtr: false,
                loadingbl: false,
                loadingbr: false,
                myChart: null,
                myChartb: null,
                myChartc: null,
                myChartd: null,
                toptions:[
                    {
                        id:'07:00',
                    },{
                        id:'08:00',
                    },{
                        id:'09:00',
                    },{
                        id:'10:00',
                    },{
                        id:'11:00',
                    },{
                        id:'12:00',
                    },{
                        id:'13:00',
                    },{
                        id:'14:00',
                    },{
                        id:'15:00',
                    },{
                        id:'16:00',
                    },{
                        id:'17:00',
                    },{
                        id:'18:00',
                    },{
                        id:'19:00',
                    },{
                        id:'20:00',
                    },{
                        id:'21:00',
                    },{
                        id:'22:00',
                    }
                ]
            }
        },
        methods: {
            bigto() {
                this.fullscre = !this.fullscre;
            },
            getAllAjax() {
                Promise.all([
                        this.getTopBarData(),
                        this.getBottomBarData(),
                        this.getTopLineData(),
                        this.getBottomLineData(),
                    ])
                    .then((result) => {
                        // this.loading = false;
                        this.bigto();
                    })
                    .catch((error) => {
                        console.log(error); // 失败了，打出 '失败'
                    });
            },
            // 上部分时间切换
            topTimeEvent(val) {
                this.getTopBarData();
            },
            // 下部分时间切换
            bottomTimeEvent(val) {
                this.getBottomBarData();
            },
            // 上部分柱状图数据
            getTopBarData() {
                this.loadingtl = true;
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCylList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            time: this.topTime ? this.topTime + ":00" : this.topTime,
                            type: this.topType,
                            channel: "前台",
                            date: this.topTimeList,
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        res.data.data.map((item) => {
                            list.push(item.day);
                        });
                        this.topTimeList = list;
                        this.initTopBar(res.data.data, list);
                        this.topLeftTotal = res.data.total;
                        this.loadingtl = false;
                    });
                });
            },
            // 下部分柱状图数据
            getBottomBarData() {
                this.loadingbl = true;
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCylList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            time: this.bottomTime ? this.bottomTime + ":00" : this.bottomTime,
                            type: this.bottomType,
                            channel: "电子渠道",
                            date: this.bottomTimeList,
                        },
                    }).then((res) => {
                        let list = [];
                        resolve(res);
                        res.data.data.map((item) => {
                            list.push(item.day);
                        });
                        this.bottomTimeList = list;
                        this.initBottomBar(res.data.data, list);
                        this.bottomLeftTotal = res.data.total;
                        this.loadingbl = false;
                    });
                });
            },
            // 上部分折线图数据
            getTopLineData() {
                this.loadingtr = true;
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCurList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            type: this.topType,
                            channel: "前台",
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        let data = res.data.data.reverse();
                        data.map((item) => {
                            list.push(item.day);
                        });
                        this.initTopLine(data, list);
                        this.topRightTotal = res.data.total;
                        this.loadingtr = false;
                    });
                });
            },
            // 下部分折线图数据
            getBottomLineData() {
                this.loadingbr = true;
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCurList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            type: this.bottomType,
                            channel: "电子渠道",
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        let data = res.data.data.reverse();
                        data.map((item) => {
                            list.push(item.day);
                        });
                        this.initBottomLine(data, list);
                        this.bottomRightTotal = res.data.total;
                        this.loadingbr = false;
                    });
                });
            },
            // 初始化上部分柱状图
            initTopBar(data, xData) {
                // data = [2,5,3,7,4]
                let _this = this;
                this.myChart = echarts.init(document.getElementById("echarts-pies"));
                let colorArr = [
                    "#748EDE", //黄色
                    "#A9DF96", //蓝色
                    "#F6DC7D", //蓝色
                    "#F6868A",
                    "#8FD5F3",
                ];

                this.myChart.setOption({
                    tooltip: {
                        formatter: function(params) {
                            return `<div>
              ${params.name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params.data.value}

             ${
               params.data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params.data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                        axisPointer: {
                            // 悬停显示块级
                            type: "shadow",
                            shadowStyle: {
                                color: "#ffffff",
                                shadowColor: "rgba(225,225,225,1)",
                                shadowBlur: 5,
                            },
                        },
                    },
                    backgroundColor: "",
                    grid: {
                        left: "0",
                        right: "25",
                        bottom: "15",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: [{
                        type: "category",
                        color: "#fff",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        triggerEvent: true,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }, ],
                    yAxis: [{
                        axisLabel: {
                            color: "#fff",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#fff",
                                type: "dashed",
                            },
                        },
                    }, {}],
                    series: [{
                            type: "bar",
                            data: data,
                            barWidth: "30px",
                            barMinHeight: 2,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        return colorArr[params.dataIndex];
                                    },
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#333",
                                    position: "top",
                                },
                            },
                        },
                        {
                            type: 'line',
                            yAxisIndex: 1,
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: '#0090FF'
                                }
                            },
                        }
                    ]
                });
            },
            // 初始化下部份柱状图
            initBottomBar(data, xData) {
                this.myChartb = echarts.init(
                    document.getElementById("bottom-echarts-pies")
                );
                let colorArr = [
                    "#748EDE", //黄色
                    "#A9DF96", //蓝色
                    "#F6DC7D", //蓝色
                    "#F6868A",
                    "#8FD5F3",
                ];
                this.myChartb.setOption({
                    tooltip: {
                        formatter: function(params) {
                            return `<div>
              ${params.name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params.data.value}

             ${
               params.data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params.data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                        axisPointer: {
                            // 悬停显示块级
                            type: "shadow",
                            shadowStyle: {
                                color: "#ffffff",
                                shadowColor: "rgba(225,225,225,1)",
                                shadowBlur: 5,
                            },
                        },
                    },
                    backgroundColor: "",
                    grid: {
                        left: "0",
                        right: "25",
                        bottom: "15",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: [{
                        type: "category",
                        color: "#fff",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        triggerEvent: true,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }, ],
                    yAxis: [{
                            axisLabel: {
                                color: "#fff",
                                textStyle: {
                                    fontSize: 12,
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#fff",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#fff",
                                    type: "dashed",
                                },
                            }
                        },
                        {

                        }
                    ],
                    series: [{
                            type: "bar",
                            data: data,
                            barWidth: "30px",
                            barMinHeight: 2,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        return colorArr[params.dataIndex];
                                    },
                                },
                            },
                            label: {
                                normal: {
                                    show: false,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#fff",
                                    position: "top",
                                },
                            },
                        },
                        {
                            type: 'line',
                            yAxisIndex: 1,
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: '#0090FF'
                                }
                            },
                        }
                    ]
                });
            },
            // 初始化上部分折线图
            initTopLine(data, xData) {
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69",
                ];
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                };
                this.myChartc = echarts.init(document.getElementById("echarts-Line"));
                this.myChartc.setOption({
                    backgroundColor: "",
                    color: ["#73A0FA", "#73DEB3", "#FFB761"],
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            return `<div>
                ${params[0].name}
                <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
                ${params[0].data.value}

               ${
                 params[0].data.change == null
                   ? ""
                   : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params[0].data.change}%`
               }
                </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                    },
                    grid: {
                        left: "25",
                        right: "25",
                        bottom: "0",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        show: false,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            color: "#fff",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#999",
                            },
                        },
                    },
                    series: {
                        name: "钱包笔数",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        // symbolSize: 1,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10,
                            },
                        },
                        data: data,
                    },
                });
            },
            // 初始化下部分折线图
            initBottomLine(data, xData) {
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69",
                ];
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                };
                this.myChartd = echarts.init(
                    document.getElementById("bottom-echarts-Line")
                );
                this.myChartd.setOption({
                    backgroundColor: "",
                    color: ["#73A0FA", "#73DEB3", "#FFB761"],
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            return `<div>
                ${params[0].name}
                <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
                ${params[0].data.value}

               ${
                 params[0].data.change == null
                   ? ""
                   : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params[0].data.change}%`
               }
                </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                    },
                    grid: {
                        left: "25",
                        right: "25",
                        bottom: "0",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        splitLine: {
                            show: false,
                        },
                        show: false,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            color: "#fff",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#999",
                            },
                        },
                    },
                    series: {
                        name: "钱包笔数",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        // symbolSize: 1,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10,
                            },
                        },
                        data: data,
                    },
                });
            },
            // 获取下拉框选项
            getOpations() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: "func",
                    },
                }).then((res) => {
                    this.options = res.data;
                });
            },
            // 上部分类型切换
            topTypeEvent(val) {
                this.getTopBarData();
                this.getTopLineData();
            },
            // 下部分类型切换
            bottomTypeEvent(val) {
                this.getBottomLineData();
                this.getBottomBarData();
            },
        },
        mounted() {
            this.getAllAjax();
            this.getOpations();
            let _this = this;
            window.onresize = function() {
                _this.myChart.resize();
                _this.myChartb.resize();
                _this.myChartc.resize();
                _this.myChartd.resize();
            }
        },
        computed: {
            collapse() {
                return this.$store.state.collapse;
            },
        },
        watch: {
            collapse() {
                let _this = this;
                _this.myChart.resize();
                _this.myChartb.resize();
                _this.myChartc.resize();
                _this.myChartd.resize();
            },
            fullscre() {
                let _this = this;
                console.log(this.fullscre)
                setTimeout(function() {
                    _this.myChart.resize();
                    _this.myChartb.resize();
                    _this.myChartc.resize();
                    _this.myChartd.resize();
                }, 500)
            },
        }
    }
</script>
<style lang="scss" scoped>
    .echarts-style {
        height: calc(98% - 60px);
        margin-top: 60px;
        // height: 98%;
        padding: 20px;
        overflow: hidden;
        position: relative;
        top: -4vh;
    }
    .echart-l{
        height: calc(98% - 60px);
        margin-top: 60px;
    }

    // ::-webkit-scrollbar {
    //     width: 0 !important;
    //     height: 0;
    // }

    .container-s {
        padding: 0;
        margin: 0;
        height: 100%;
        background: #142132;
    }

    .tit {
        display: flex;

        .i-n-left {
            display: inline-block;
            width: 34%;
            height: 3vh;
            background-image: linear-gradient(to right, #142132 20%, #2D5EB0 80%);
            text-align: right;
            overflow: hidden;
            position: relative;

            .linelong {
                width: 10vh;
                height: 10vh;
                background: #142132;
                display: inline-block;
                position: absolute;
                right: -5vh;
                transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                /* IE 9 */
                -moz-transform: rotate(45deg);
                /* Firefox */
                -webkit-transform: rotate(45deg);
                /* Safari 和 Chrome */
                -o-transform: rotate(45deg);
                /* Opera */
                z-index: 1;
            }

            .line {
                width: 1px;
                background: #2D5EB0;
                height: 10vh;
                display: inline-block;
                position: absolute;
                z-index: 2;
                right: 5px;
                transform-origin: top;
                transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -o-transform: rotate(45deg);
            }

            .liner {
                right: -5px;
            }
        }

        .rigth {
            background-image: linear-gradient(to left, #142132 20%, #2D5EB0 80%);
            text-align: left;

            .linelong {
                left: -5vh;
            }

            .linelong {
                width: 10vh;
                height: 10vh;
                background: #142132;
                display: inline-block;
                position: absolute;
                left: -5vh;
                transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                /* IE 9 */
                -moz-transform: rotate(-45deg);
                /* Firefox */
                -webkit-transform: rotate(-45deg);
                /* Safari 和 Chrome */
                -o-transform: rotate(-45deg);
                /* Opera */
                z-index: 1;
            }

            .line {
                width: 1px;
                background: #2D5EB0;
                height: 10vh;
                display: inline-block;
                position: absolute;
                z-index: 2;
                left: 5px;
                transform-origin: top;
                transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
            }

            .liner {
                left: -5px;
            }
        }

        span {
            display: inline-block;
            width: 32%;
            height: 8vh;
            line-height: 8vh;
            text-align: center;
            font-size: 1.5rem;
            color: #fff;
            z-index: 3;
        }
    }

    .tit-bottom {
        height: 3vh;
        position: relative;
        top: -3vh;
        z-index: 1;
        overflow: hidden;

        span {
            display: inline-block;
            width: 50%;
            height: 100%;
            overflow: hidden;

            .t-b-ll {
                display: inline-block;
                margin-left: 30%;
                width: 35%;
                height: 100%;
                border-top: 1px solid #2D5EB0;
                position: relative;
                right: -1px;
            }

            .t-b-rl {
                display: inline-block;
                margin-right: 30%;
                width: 35%;
                height: 100%;
                border-top: 1px solid #2D5EB0;
                position: relative;
                right: 1px;
            }

            .t-b-lc {
                display: inline-block;
                width: 1px;
                height: 4vh;
                background: #2D5EB0;
                position: absolute;
                transform-origin: top;
                transform: rotate(-30deg);
                -ms-transform: rotate(-30deg);
                -moz-transform: rotate(-30deg);
                -webkit-transform: rotate(-30deg);
                -o-transform: rotate(-30deg);
            }

            .t-b-rc {
                display: inline-block;
                width: 1px;
                height: 4vh;
                background: #2D5EB0;
                position: absolute;
                transform-origin: top;
                transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                -moz-transform: rotate(30deg);
                -webkit-transform: rotate(30deg);
                -o-transform: rotate(30deg);
            }

            .t-b-lr {
                display: inline-block;
                position: relative;
                right: -1px;
                margin-left: 1.5vh;
                width: 10%;
                height: 100%;
                border-bottom: 1px solid #2D5EB0;
            }

            .t-b-rr {
                display: inline-block;
                position: relative;
                right: 1px;
                margin-right: 1.5vh;
                width: 10%;
                height: 100%;
                border-bottom: 1px solid #2D5EB0;
            }
        }
    }

    .tabinfo {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        height: 88%;
        overflow-y: scroll;

        .mc-right-select {
            width: 100%;
            padding-left: 3vw;
        }

        .info-box {
            width: 46%;
            height: 50%;
            border: 2px solid #2D5EB0;
            display: inline-block;
            position: relative;
            margin: 3vh 0;
            margin-left: 1%;
            margin-right: 1%;
            text-align: center;
            .em-time{
                position: absolute;
                top: 30px;
                left: 20px;
            }
            .em-timer{
                position: absolute;
                top: 30px;
                right: 40px;
                text-align: right;
                color: #fff;
            }
        }

        .em-tit {
            display: inline-block;
            height: 4vh;
            line-height: 4vh;
            padding: 0 5%;
            background: #2C58A6;
            text-align: center;
            position: relative;
            top: -2vh;
            color: #fff;
            font-size: 1.2rem;
            z-index: 2005;
            font-style: normal;
            border-radius: 2vh;
            overflow: hidden;
        }

        .em-lt {
            border-top: 4px solid #4788FB;
            border-left: 4px solid #4788FB;
            width: 25px;
            height: 25px;
            position: absolute;
            top: -3px;
            left: -3px;
        }

        .em-rt {
            border-top: 4px solid #4788FB;
            border-right: 4px solid #4788FB;
            width: 25px;
            height: 25px;
            position: absolute;
            top: -3px;
            right: -3px;
        }

        .em-lb {
            border-bottom: 4px solid #4788FB;
            border-left: 4px solid #4788FB;
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -3px;
            left: -3px;
        }

        .em-rb {
            border-right: 4px solid #4788FB;
            border-bottom: 4px solid #4788FB;
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -3px;
            right: -3px;
        }
    }
</style>
