<template>
    <div style="width: 100%;height: 100%;background-color: #000d4a;">
        <div class="loading">
            <div class="loadbox"><img src="../../../public/images/loading.gif"> 页面加载中...</div>
        </div>
        <div class="head">
            <h1>
                <img src="../../../static/img/bsd-logo.png" class="title-logo"/>
            </h1>
        </div>
        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="min-height: 100px;padding-bottom: 20px;">
                        <div class="div-title">零售公司店均拓客TOP10</div>
                        <div style="height: 1px;width: 200px;background-color: #00B1F7;"></div>
                        <div id="companyTopList" style="margin-top: 10px;min-height: 100px;">
                            <Row v-for="(item,index) in companyTopList" v-bind:key="item.id"
                                 :style="{'padding-top': '10px','padding-bottom': '10px','border-top': index !== 0 ? '1px #00B1F7 solid' : ''}">
                                <i-col span="2">
                                    <span style="width: 20px;height: 20px;background-color: #FFCC33;border-radius: 50%;display: block;text-align: center;color: #ffffff;">{{item.id}}</span>
                                </i-col>
                                <i-col span="14">
                                    <span style="color: #00B1F7;font-size: 14px;">{{item.companyName}}</span>
                                </i-col>
                                <i-col span="8" style="text-align: right;">
                                    <span style="color: #00B1F7;font-size: 16px;">{{item.avgAddCustomerNum}}</span>
                                </i-col>
                            </Row>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                    <div class="boxall" style="height: 400px">
                        <div class="alltitle">模块标题样式</div>
                        <div class="allnav">
                            <ve-bar :after-set-option="companyDataOption" style="height: 380px"></ve-bar>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                </li>
                <li>
                    <div class="bar">
                        <div class="barbox">
                            <ul class="clearfix">
                                <li class="pulll_left counter-num-text">累计好友总数</li>
                                <li class="pulll_left counter-num-text">新增好友总数</li>
                            </ul>
                            <ul class="clearfix">
                                <li class="pulll_left counter">
                                    <countTo :startVal='startVal' :endVal='endVal' :duration='3000' class="counter-num"></countTo>

                                    </li>
                                <li class="pulll_left counter">
                                    <countTo :startVal='startVal2' :endVal='endVal2' :duration='3000' class="counter-num"></countTo>
                                    </li>
                            </ul>
                        </div>
                        <!--                        <div class="barbox2">-->
                        <!--                            <ul class="clearfix">-->
                        <!--                                <li class="pulll_left">累计好友总数</li>-->
                        <!--                                <li class="pulll_left">新增好友总数</li>-->
                        <!--                            </ul>-->
                        <!--                        </div>-->
                    </div>
                    <div class="map">
                        <div class="map1"><img src="../../../public/images/lbx.png"></div>
                        <div class="map2"><img src="../../../public/images/jt.png"></div>
                        <div class="map3"><img src="../../../public/images/map.png"></div>
                        <!--                        <div class="map4" id="map_1"></div>-->

                        <div class="map">
                            <AreaMap></AreaMap>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="min-height: 100px;">
                        <div style="text-align: right;">
                            <div class="div-title">门店店均拓客TOP10</div>
                            <div style="height: 1px;width: 200px;background-color: #00B1F7;float: right;"></div>
                        </div>

                        <div id="storeTopList" style="margin-top: 10px;min-height: 100px;">
                            <Row v-for="(item,index) in storeTopList" v-bind:key="item.id"
                                 :style="{'padding-top': '10px','padding-bottom': '10px','border-top': index !== 0 ? '1px #00B1F7 solid' : ''}">
                                <i-col span="2">
                                    <span style="width: 20px;height: 20px;background-color: #FFCC33;border-radius: 50%;display: block;text-align: center;color: #ffffff;">{{item.id}}</span>
                                </i-col>
                                <i-col span="14">
                                    <span style="color: #00B1F7;font-size: 14px;">{{item.storeName}}</span>
                                </i-col>
                                <i-col span="8" style="text-align: right;">
                                    <span style="color: #00B1F7;font-size: 16px;">{{item.addCustomerNum}}</span>
                                </i-col>
                            </Row>
                        </div>
                        <div class="boxfoot"></div>
                    </div>

                    <div class="boxall" style="min-height: 100px;">
                        <div class="div-title" style="text-align: center;">实时添加记录</div>
                        <div id="customerAddList" style="margin-top: 10px;min-height: 100px;">
                            <Row v-for="(item,index) in companyTopList" v-bind:key="item.id"
                                 style="padding-top: 10px;padding-bottom: 10px;font-size: 14px;color: #ffffff;">
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                                <span style="padding-left: 20px;color: #ffffff;">一起种田的约定，加入武汉光谷店</span>
                            </Row>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                    <!--                    <div class="boxall" style="height: 3rem">-->
                    <!--                        <div class="alltitle">模块标题样式</div>-->
                    <!--                        <div class="allnav" id="echart6"></div>-->
                    <!--                        <div class="boxfoot"></div>-->
                    <!--                    </div>-->
                </li>
            </ul>
        </div>
        <div class="back"></div>
    </div>

</template>
<script>
    import $ from 'jquery';
    import AreaMap from '../../components/AreaMap';
    import countTo from 'vue-count-to';
    import http from '../../services/customer/CustomerViewHomeService'
    export default {
        components: {
            AreaMap,
            countTo
        },
        data() {
            return {
                startVal: 0,
                endVal: 100000,
                lastVal: null,
                lastVal2: null,
                startVal2: 1,
                endVal2: 10000,
                userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
                dateBtnValue: "今日",
                viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
                //近七天日期
                recentName: "近七天",
                //选中时间
                selectStartTime: "",
                selectEndTime: "",
                //柱状图时间
                startTime: "",
                endTime: "",
                currentDate: this.$moment().format("yyyy/MM/dd"),
                companyTopList: [{
                    id: 1,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 2,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 3,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 4,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 5,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 6,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 7,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 8,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 9,
                    name: '杭州分公司',
                    num: 999
                }, {
                    id: 10,
                    name: '杭州分公司',
                    num: 999
                }],
                storeTopList: [],
                chartMapData: {
                    columns: ['位置', '税收', '人口', '面积'],
                    rows: [
                        {'位置': '吉林', '税收': 123, '人口': 123, '面积': 92134},
                        {'位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234},
                        {'位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234},
                        {'位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234}
                    ]
                },
                chartMapSettings: {},
                chinaDatas: null,
                convertData: null,
                chartMapOption: null,
                namedata: null,
                geoCoordMap: null
            }
        },
        created() {
            this.selectStartTime = this.$moment().format("YYYY-MM-DD 00:00:00");
            this.selectEndTime = this.$moment().format("YYYY-MM-DD HH:mm:ss");

            this.getLsAnalysisInfo();
            this.getCompanyTopData();
            this.getStoreTopData();
            this.getLsAnalysisDateAdd();

        },
        mounted: function () {
            $(".loading").fadeOut();
            this.dateBtnClick('今日');
            // this.timingRefresh();

            let whei = $(window).width();
            $("html").css({fontSize: whei / 20});
            $(window).resize(function () {
                let whei = $(window).width();
                $("html").css({fontSize: whei / 20});
            });

        },
        methods: {
            //0转null
            checkZero: function (value) {
                if (value === 0) {
                    return null;
                }
                return value;
            },
            //日期按钮
            dateBtnClick: function (value) {
                switch (value) {
                    case '今日':
                        this.dateBtnValue = "今日";
                        this.recentName = "近七天";
                        // this.dateSelectChange('今日');

                        break;
                    case '本周':
                        this.dateBtnValue = "本周";
                        this.recentName = "本周";
                        // this.dateSelectChange('本周');

                        break;
                    case '本月':
                        this.dateBtnValue = "本月";
                        this.recentName = "本月";
                        // this.dateSelectChange('本月');

                        break;
                    case '自定义':
                        this.dateBtnValue = "自定义";
                        this.recentName = "自定义";
                        // this.diyDateChange();
                        break;
                }
            },
            //日期改变
            dateSelectChange: function (value) {
                //概览日期text
                let nowDate = this.$moment(new Date());
                switch (value) {
                    case '今日':
                        this.viewDate = nowDate.format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
                        this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本周':
                        this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本月':
                        this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '自定义':
                        this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.selectEndTime;
                        break;
                }

                // this.getMainList();
            },
            // 累计拓客数和新增拓客数
            getLsAnalysisInfo: function(){
                let that = this;
                let request = {
                    userId: this.userId,
                    startDate: this.selectStartTime,
                    endDate: this.selectEndTime
                };

                that.lastVal = that.startVal;
                that.lastVal2 = that.startVal2;
                http.getLsAnalysisInfo(request, function (res) {
                    let data = res.data;
                    if(data.results){
                        let num = data.results.addCustomerNum;
                        let addNum = data.results.newAddCustomerNum;
                        // that.startVal = that.lastVal;
                        that.endVal = addNum;
                        // that.startVal2 = that.lastVal2;
                        that.endVal2 = num;
                    }
                }, function (err) {

                });
            },
            // 零售公司拓客TOP10
            getCompanyTopData: function(){
                let that = this;
                let request = {
                    userId: this.userId,
                    startDate: this.selectStartTime,
                    endDate: this.selectEndTime
                };
                http.getLsAnalysisCompanyAvgAdd(request, function (res) {
                    let data = res.data;
                    if(data.results){
                        that.companyTopList = data.results;
                    }else{
                        that.companyTopList = [];
                    }
                }, function (err) {

                });
            },
            // 门店拓客数
            getStoreTopData: function(){
                let that = this;
                let reuqest = {
                    userId: this.userId,
                    startDate: this.selectStartTime,
                    endDate: this.selectEndTime
                };
                http.getLsAnalysisStoreAdd(reuqest, function (res) {
                    let data = res.data;
                    if(data.results){
                        that.storeTopList = data.results;
                    }else{
                        that.storeTopList = [];
                    }
                }, function (err) {

                });
            },
            getLsAnalysisDateAdd: function(){
                let that = this;
                let reuqest = {
                    userId: this.userId,
                    startDate: this.selectStartTime,
                    endDate: this.selectEndTime
                };
                http.getLsAnalysisDateAdd(reuqest, function (res) {
                    let data = res.data;
                    if(data.results){
                        that.barChartData = data.results;
                    }else{
                        that.barChartData = [];
                    }
                }, function (err) {

                });
            },
            companyDataOption: function (myChart) {
                let option = {
                    //  backgroundColor: '#00265f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'shadow'}
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            // rotate:50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            show: true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {

                            type: 'bar',
                            data: [1500, 1200, 600, 200, 300, 300, 900],
                            barWidth: '35%', //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: '#27d08a',
                                    opacity: 1,
                                    barBorderRadius: 5,
                                }
                            }
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }


        }
    }
</script>
<style scoped>
    /*日期按钮*/
    .date-btn {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        border: 1px #00B1F7 solid;
        color: #00B1F7;
    }

    .date-btn-active {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        border: 1px #060321 solid;
        color: #FFFFFF;
    }


    .div-title {
        color: #FFCC33;
        font-size: 20px;
        line-height: 44px;
        margin-bottom: 20px;
        margin-top: 20px;
    }


    .title-logo {
        text-align: center;
        align-items: center;
        align-content: center;
    }


    /**  big data screen style */
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    *, body {
        padding: 0px;
        margin: 0px;
        color: #222;
        font-family: "微软雅黑";
    }

    @font-face {
        font-family: electronicFont;
        src: url('../../../public/font/DS-DIGIT.TTF')
    }

    body {
        background: #000d4a url('../../../public/images/bg.jpg') center top;
        background-size: cover;
        color: #666;
        font-size: .1rem;
    }

    li {
        list-style-type: none;
    }

    table {
    }

    i {
        margin: 0px;
        padding: 0px;
        text-indent: 0px;
    }

    img {
        border: none;
        max-width: 100%;
    }

    a {
        text-decoration: none;
        color: #399bff;
    }

    a.active, a:focus {
        outline: none !important;
        text-decoration: none;
    }

    ol, ul, p, h1, h2, h3, h4, h5, h6 {
        padding: 0;
        margin: 0
    }

    a:hover {
        color: #06c;
        text-decoration: none !important
    }


    .clearfix:after, .clearfix:before {
        display: table;
        content: " "
    }

    .clearfix:after {
        clear: both
    }

    .pulll_left {
        float: left;
    }

    .pulll_right {
        float: right;
    }

    /*谷哥滚动条样式*/

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        position: absolute
    }

    ::-webkit-scrollbar-thumb {
        background-color: #5bc0de
    }

    ::-webkit-scrollbar-track {
        background-color: #ddd
    }

    /***/
    .canvas {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        height: 99%;
        z-index: 1;
    }

    .allnav {
        height: calc(100% - 30px);
    }

    .loading {
        position: fixed;
        left: 0;
        top: 0;
        font-size: 18px;
        z-index: 100000000;
        width: 100%;
        height: 100%;
        background: #1a1a1c;
        text-align: center;
    }

    .loadbox {
        position: absolute;
        width: 160px;
        height: 150px;
        color: #aaa;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -75px;
    }

    .loadbox img {
        margin: 10px auto;
        display: block;
        width: 40px;
    }

    .copyright {
        background: rgba(19, 31, 64, .32);
        border: 1px solid rgba(255, 255, 255, .05);
        line-height: .5rem;
        text-align: center;
        padding-right: 15px;
        bottom: 0;
        color: rgba(255, 255, 255, .7);
        font-size: .16rem;
    }

    .head {
        height: 180px;
        background: url(../../../public/images/head_bg.png) no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        z-index: 100;
    }

    .head h1 {
        color: #fff;
        text-align: center;
        font-size: .4rem;
        line-height: .8rem;
    }

    .head h1 img {
        width: 1.5rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .2rem
    }

    .weather {
        position: absolute;
        right: .3rem;
        top: 0;
        line-height: .75rem;
    }

    .weather img {
        width: .37rem;
        display: inline-block;
        vertical-align: middle;
    }

    .weather span {
        color: rgba(255, 255, 255, .7);
        font-size: .18rem;
        padding-right: .1rem;
    }

    .mainbox {
        padding: .1rem .1rem 0rem .1rem;
    }

    .mainbox > ul {
    }

    .mainbox > ul > li {
        float: left;
        padding: 0 .1rem
    }

    .mainbox > ul > li {
        width: 20%
    }

    .mainbox > ul > li:nth-child(2) {
        width: 60%;
        padding: 0
    }

    .boxall {
        border: 1px solid rgba(25, 186, 139, .17);
        padding: 0 .2rem .4rem .15rem;
        background: rgba(255, 255, 255, .04) url(../../../public/images/line.png);
        background-size: 100% auto;
        position: relative;
        margin-bottom: .15rem;
        z-index: 10;
    }

    .boxall:before,
    .boxall:after {
        position: absolute;
        width: .1rem;
        height: .1rem;
        content: "";
        border-top: 2px solid #02a6b5;
        top: 0;
    }

    .boxall:before, .boxfoot:before {
        border-left: 2px solid #02a6b5;
        left: 0;
    }

    .boxall:after, .boxfoot:after {
        border-right: 2px solid #02a6b5;
        right: 0;
    }

    .alltitle {
        font-size: .2rem;
        color: #fff;
        text-align: center;
        line-height: .5rem;
    }

    .boxfoot {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .boxfoot:before,
    .boxfoot:after {
        position: absolute;
        width: .1rem;
        height: .1rem;
        content: "";
        border-bottom: 2px solid #02a6b5;
        bottom: 0;
    }

    .bar {
        background: rgba(101, 132, 226, .1);
        padding: .15rem;
    }

    .barbox li, .barbox2 li {
        width: 50%;
        text-align: center;
        position: relative;
        z-index: 100;
    }

    .barbox:before,
    .barbox:after {
        position: absolute;
        width: .3rem;
        height: .1rem;
        content: "";
    }

    .barbox:before {
        border-left: 2px solid #02a6b5;
        left: 0;
        border-top: 2px solid #02a6b5;
    }

    .barbox:after {
        border-right: 2px solid #02a6b5;
        right: 0;
        bottom: 0;
        border-bottom: 2px solid #02a6b5;
    }

    .barbox li:first-child:before {
        position: absolute;
        content: "";
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, .2);
        right: 0;
        top: 25%;
    }

    .barbox {
        border: 1px solid rgba(25, 186, 139, .17);
        position: relative;
    }

    /*.barbox li {*/
    /*    font-size: .7rem;*/
    /*    color: #ffeb7b;*/
    /*    padding: .05rem 0;*/
    /*    font-family: electronicFont;*/
    /*    font-weight: bold;*/
    /*}*/

    .counter-num {
        font-size: .7rem;
        color: #ffeb7b;
        padding: .05rem 0;
        font-family: electronicFont;
        font-weight: bold;
    }

    /*.barbox2 li {*/
    /*    font-size: .19rem;*/
    /*    color: rgba(255, 255, 255, .7);*/
    /*    padding-top: .1rem;*/
    /*}*/
    .counter-num-text {
        font-size: .19rem;
        color: rgba(255, 255, 255, .7);
        padding-top: .1rem;
        font-weight: bold;
    }

    .map {
        position: relative;
        height: 7.2rem;
        z-index: 9;
    }

    .map4 {
        width: 200%;
        height: 7rem;
        position: relative;
        left: -50%;
        top: 4%;
        margin-top: .2rem;
        z-index: 5;
    }

    .map1, .map2, .map3 {
        position: absolute;
        opacity: .5
    }

    .map1 {
        width: 6.43rem;
        z-index: 2;
        top: .45rem;
        left: .7rem;
        animation: myfirst2 15s infinite linear;
    }

    .map2 {
        width: 5.66rem;
        top: .85rem;
        left: 1.2rem;
        z-index: 3;
        opacity: 0.2;
        animation: myfirst 10s infinite linear;
    }

    .map3 {
        width: 5.18rem;
        top: 1.07rem;
        left: 1.4rem;
        z-index: 1;
    }


    .tabs {
        text-align: center;
        padding: .1rem 0 0 0;
    }

    .tabs a {
        position: relative;
        display: inline-block;
        margin-left: 1px;
        padding: .05rem .2rem;
        color: #898989;
        transition: all .3s ease-out 0s;
        font-size: 14px;
    }

    .tabs li {
        display: inline-block;
    }

    .tabs a:after {
        position: absolute;
        width: 1px;
        height: 10px;
        background-color: rgba(255, 255, 255, .1);
        content: '';
        margin-left: 0;
        right: -1px;
        margin-top: 7px;


    }

    .tabs li a.active {
        border: 1px solid rgba(25, 186, 139, .17);
        background: rgba(255, 255, 255, .05);
        color: #fff;
    }

    .tit02 {
        text-align: center;
        margin: .1rem 0;
        position: relative
    }

    .tit02 span {
        border: 1px solid rgba(25, 186, 139, .17);
        letter-spacing: 2px;
        padding: .01rem .2rem;
        background: rgba(255, 255, 255, .05);
        font-size: .18rem;
        color: #49bcf7;
    }

    .tit02:before, .tit02:after {
        position: absolute;
        width: 26%;
        height: 1px;
        background: rgba(25, 186, 139, .2);
        content: "";
        top: .12rem;
    }

    .tit02:after {
        right: 0;
    }

    .tit02:before {
        left: 0;
    }

    .wrap {
        height: 2.54rem;
        overflow: hidden;
    }

    .wrap li {
        line-height: .42rem;
        height: .42rem;
        font-size: .18rem;
        text-indent: .24rem;
        margin-bottom: .1rem;
    }

    .wrap li p {
        border: 1px solid rgba(25, 186, 139, .17);
        color: rgba(255, 255, 255, .6);
    }

    .sy {
        float: left;
        width: 33%;
        height: 95%;
        margin-top: .25rem;
    }


    .adduser {
        height: 1.5rem;
        overflow: hidden;
    }

    .adduser li {
        height: .5rem;
    }

    .adduser img {
        width: .40rem;
        border-radius: .5rem;
        margin-right: .1rem;
        display: inline-block;
        vertical-align: middle;
    }

    .adduser span {
        line-height: .5rem;
        font-size: .18rem;
        color: rgba(255, 255, 255, .6);
    }

    .sycm ul {
        margin-left: -.5rem;
        margin-right: -.5rem;
        padding: .16rem 0;
    }

    .sycm li {
        float: left;
        width: 33.33%;
        text-align: center;
        position: relative
    }

    .sycm li:before {
        position: absolute;
        content: "";
        height: 30%;
        width: 1px;
        background: rgba(255, 255, 255, .1);
        right: 0;
        top: 15%;
    }

    .sycm li:last-child:before {
        width: 0;
    }

    .sycm li h2 {
        font-size: .3rem;
        color: #c5ccff;
    }

    .sycm li span {
        font-size: .18rem;
        color: #fff;
        opacity: .5;
    }

    @keyframes myfirst2 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }

    @keyframes myfirst {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-359deg);
        }
    }


    /*Plugin CSS*/
    .str_wrap {
        overflow: hidden;
        width: 100%;
        position: relative;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        white-space: nowrap;
    }


    .str_move {
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
    }

    .str_move_clone {
        display: inline-block;
        vertical-align: top;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .str_vertical .str_move_clone {
        left: 0;
        top: 100%;
    }

    .str_down .str_move_clone {
        left: 0;
        bottom: 100%;
    }

    .str_vertical .str_move,
    .str_down .str_move {
        white-space: normal;
        width: 100%;
    }

    .str_static .str_move,
    .no_drag .str_move,
    .noStop .str_move {
        cursor: inherit;
    }

    .str_wrap img {
        max-width: none !important;
    }


    /** 背景 */

    html {
        height: 100%;
        background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
        background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
        cursor: move;
    }

    body {
        width: 100%;
        margin: 0;
        overflow: hidden;
    }
</style>
