<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/common/common.jsp" %>
<head>
    <Dst:SMBase type="jquery,eui"
                pakgagePath="com.dst.slms.slmsworkBench.costEffective"
                uipk="costEffective" title="费效工作台"/>
    <Dst:SMResourse path="assets/js/echarts/echarts.min.js"/>
</head>
<body style="padding-top: 5px; background: #f5f5f5;">
<div  fit="true">
    <div class="dst-row">
        <div class="dst-col-md8 " >
            <Dst:SMTagBox id="selectTagData" label=""  classStyle="select-tag"  width="650" editable="true"  height="55px" panelMinHeight="500" entityPath="com.dst.slms.base.entity.MarketProjectInfo" hasDownArrow="true" ></Dst:SMTagBox>
        </div>
        <div class="dst-col-md4 " >
            <div class="button " onClick="projectCut(false)"> 切换</div>
        </div>
    </div>
    <div class="dst-row dst-col-space10 margin-top-10">
        <div class="dst-col-md4 ">
            <div class=" round-frame row-1-height background-theme ">
                <div class="dst-col-xs4">
                    <div class="row-1-height ">
                        <div class="row-1-right-1">
                            <div class="circle background-78C06E"></div>
                        </div>
                        <div class="row-1-right-2">
                            <span name="allSummary" class="row-1-right-font2 color-whitex">2.3%</span>
                        </div>
                        <div class="row-1-right-3">
                            <span class="row-1-right-font3 color-whitex">费率</span>
                        </div>
                    </div>
                </div>
                <div class="dst-col-xs4">
                    <div class="row-1-height ">
                        <div class="row-1-right-1">
                            <div class="circle background-FF8000"></div>
                        </div>
                        <div class="row-1-right-2">
                            <span name="allSummary" class="row-1-right-font2 color-whitex">18,000</span>
                        </div>
                        <div class="row-1-right-3">
                            <span class="row-1-right-font3 color-whitex">来访费效</span>
                        </div>
                    </div>
                </div>
                <div class="dst-col-xs4">
                    <div class="row-1-height ">
                        <div class="row-1-right-1">
                            <div class="circle background-FF2D2D"></div>
                        </div>
                        <div class="row-1-right-2">
                            <span name="allSummary"  class="row-1-right-font2 color-whitex">260,000</span>
                        </div>
                        <div class="row-1-right-3">
                            <span class="row-1-right-font3 color-whitex" >成交费效</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame  row-1-height border-tow">
                <div class="dst-col-xs4  ">
                    <div class="row-1-height ">
                        <img class="ion-img"
                             src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3450234367,736131340&fm=26&gp=0.jpg"/>
                    </div>
                </div>
                <div class="dst-col-xs8  ">
                    <div class="row-1-height">
                        <div class="row-1-left-1">
                            <span class="font-size">来访人数</span>
                        </div>
                        <div class="row-1-left-2">
                            <span name="allSummary" class="font-size font-weight">1234</span>
                            <span class="font-size">人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame  row-1-height background-theme ">
                <div class="dst-col-xs4  ">
                    <div class="row-1-height ">
                        <img class="ion-img"
                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588410018776&di=d6612bfa639dbf2e1386540f86b9f26f&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F54%2F40%2F5817232909acc_610.jpg"/>
                    </div>
                </div>
                <div class="dst-col-xs8  ">
                    <div class="row-1-height">
                        <div class="row-1-left-1">
                            <span class="font-size color-whitex">成交套数</span>
                        </div>
                        <div class="row-1-left-2">
                            <span name="allSummary" class="font-size font-weight color-whitex">154</span>
                            <span class="font-size color-whitex">套</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame  row-1-height border-tow">
                <div class="dst-col-xs4  ">
                    <div class="row-1-height ">
                        <img class="ion-img"
                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588410051593&di=f699487e661a6d2606e4daad60543cb5&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F32%2F66%2F5810fec833d03_610.jpg"/>
                    </div>
                </div>
                <div class="dst-col-xs8  ">
                    <div class="row-1-height">
                        <div class="row-1-left-1">
                            <span class="font-size">成交金额</span>
                        </div>
                        <div class="row-1-left-2">
                            <span name="allSummary" class="font-size font-weight">5604</span>
                            <span class="font-size">万元</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dst-col-md2 ">
            <div class=" round-frame  row-1-height background-theme border-zero">
                <div class="dst-col-xs4  ">
                    <div class="row-1-height ">
                        <img class="ion-img"
                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588410076339&di=8e4c7b5ee29d966ca91cead79b0d44e2&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F30%2F38%2F58107dac298e2_610.jpg"/>
                    </div>
                </div>
                <div class="dst-col-xs8  ">
                    <div class="row-1-height">
                        <div class="row-1-left-1">
                            <span class="font-size color-whitex">营销费用</span>
                        </div>
                        <div class="row-1-left-2">
                            <span name="allSummary" class="font-size font-weight color-whitex">334</span>
                            <span class="font-size color-whitex">万</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dst-row row-2" >
        <div class="dst-col-xs6 margin-bottom-zero">
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span name="yearMonthSummary" class="font-size color-whitex">4月</span></div>
                    <div class="row-2-2-2">
                        <img class="ion-img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1073301157,547453943&fm=26&gp=0.jpg"/>
                    </div>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">销售目标/万元</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">4800</span></div>
                    <div class="row-2-3">
                        <div class="row-2-3">
                            <div class="container">
                                <div id="yearMonthRate" class="skills css" style="width: 2.5%">2.5%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">费用计划/万元</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">300</span></div>
                    <div class="row-2-3">
                        <%--<div class="container">
                            <div class="skills css" style="width: 56%">56%</div>
                        </div>--%>
                    </div>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">来访计划</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">5000</span></div>
                    <div class="row-2-3">
                        <%--<div class="container">
                            <div class="skills css">40%</div>
                        </div>--%>
                    </div>
                </div>
            </div>
        </div>
        <div class="dst-col-xs6 margin-bottom-zero">
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">成交套数</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">150</span></div>
                    <div class="row-2-3">
                        <%--<div class="container">
                            <div class="skills css">40%</div>
                        </div>--%>
                    </div>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">成交金额/万元</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">2600</span></div>
                    <div class="row-2-3">
                        <%--<div class="container">
                            <div class="skills css">40%</div>
                        </div>--%>
                    </div>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">费率</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">2.5%</span></div>
                    <%--<div class="row-2-3">
                        <div class="container">
                            <div id="yearMonthRate" class="skills css" style="width: 2.5%">2.5%</div>
                        </div>
                    </div>--%>
                </div>
            </div>
            <div class="dst-col-xs3 margin-bottom-zero">
                <div class="row-2-height ">
                    <div class="row-2-1"><span class="font-size color-whitex">费效</span></div>
                    <div class="row-2-2"><span name="yearMonthSummary" class="font-size color-whitex">12</span></div>
                    <div class="row-2-3">
                        <%--<div class="container">
                            <div class="skills css">40%</div>
                        </div>--%>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dst-row dst-col-space1">
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">渠道占比比例</span>
                </div>
                <div id="echarts1" class="row-chart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">渠道费效分析</span>
                </div>
                <div id="echarts2" class="row-chart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
    </div>
    <div class="dst-row dst-col-space1 ">
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">费率排名</span>
                </div>
                <div id="echarts3" class="row-chart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">费效排名</span>
                </div>
                <div id="echarts4" class="row-chart" style="width: 100%;height: 350px">
                </div>
            </div>
        </div>
    </div>
    <div class="dst-row dst-col-space1 ">
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">费率趋势</span>
                </div>
                <div id="echarts5" class="row-chart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
        <div class="dst-col-md6 row-chart-height">
            <div class="row-chart">
                <div >
                    <span class="span-point">·</span>
                    <span class="row-chart-title">费效趋势</span>
                </div>
                <div id="echarts6" class="row-chart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = function(){
        //$('select').comboSelect();
        projectCut(true);
        tagStylerInit();

    }
    function tagStylerInit (){
        $('#selectTagData').tagbox({
            tagStyler: function(value){
                return 'background:#3296F5;color:#fff;';
            }
        });
    }

    function projectCut (isFirst){
        initData(isFirst);
        echartsInit(isFirst);
    }
    function getProjectIds (){
        var projectIds = '';
        var arr = $('#selectTagData').tagbox('getValues');
        for (var i = 0; i < arr.length; i++) {
            var obj = arr[i];
            if(projectIds == ''){
                projectIds += "'" + obj + "'";
            }else{
                projectIds += ",'" + obj + "'";
            }
        }
        return projectIds;
    }

    function initData(isFirst){
        var projectIds = isFirst ? '' : getProjectIds();
        $.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "initData?projectIds="+projectIds,
            async:false,
            success : function(result) {
                if (result.code != 200){
                    dst.tip({message: result.message});
                }else{
                    var allSummaryData = result.allSummary;
                    var allSummarySpan = $("span[name='allSummary']");
                    allSummarySpan.eq(0).html(allSummaryData.rate + '%');
                    allSummarySpan.eq(1).html(allSummaryData.costEffective);
                    allSummarySpan.eq(2).html(allSummaryData.costTransaction);
                    allSummarySpan.eq(3).html(allSummaryData.lfcount);
                    allSummarySpan.eq(4).html(allSummaryData.cjcount);
                    allSummarySpan.eq(5).html(allSummaryData.cjAmt);
                    allSummarySpan.eq(6).html(allSummaryData.ysAmt);

                    var yearMonthSummaryData = result.yearMonthSummary;
                    var yearMonthSummarySpan = $("span[name='yearMonthSummary']");
                    yearMonthSummarySpan.eq(0).html((new Date().getMonth() + 1)+'月');
                    yearMonthSummarySpan.eq(1).html(yearMonthSummaryData.salesTarget);
                    yearMonthSummarySpan.eq(2).html(yearMonthSummaryData.yearBudget);
                    yearMonthSummarySpan.eq(3).html(yearMonthSummaryData.lfcount);
                    yearMonthSummarySpan.eq(4).html(yearMonthSummaryData.cjcount);
                    yearMonthSummarySpan.eq(5).html(yearMonthSummaryData.cjAmt);
                    yearMonthSummarySpan.eq(6).html(yearMonthSummaryData.rate+'%');
                    var completionRatio = yearMonthSummaryData.completionRatio;
                    $("#yearMonthRate").html(completionRatio+'%');
                    $("#yearMonthRate").css("width",(completionRatio > 100 ? 100 : completionRatio)+'%');
                    yearMonthSummarySpan.eq(7).html(yearMonthSummaryData.costEffective);


                }
                console.log(JSON.stringify(result));
            },
            error : function(e){
            }
        });
    }
    var  echartsColor1 = '#3296F5';
    var  echartsColor2 = '#3bcec6';
    var  echartsColor3 = '#78C06E';
    function echartsInit(isFirst) {
        var projectIds = isFirst ? '' : getProjectIds();
        //console.log(JSON.stringify($('#selectTagData').tagbox('getData')));
        $.ajax({
            type : "GET",
            contentType: "application/json;charset=UTF-8",
            url : "initEcharts?projectIds="+projectIds,
            async:false,
            success : function(result) {
                console.log(JSON.stringify(result));
                if (result.code != 200){
                    dst.tip({message: result.message});
                }else{
                    echartsInit1(result.echarts1 == undefined ? [] : result.echarts1);
                    echartsInit2(result.echarts2 == undefined ? [] : result.echarts2);
                    echartsInit3(result.echarts3 == undefined ? [] : result.echarts3);
                    echartsInit4(result.echarts4 == undefined ? [] : result.echarts4);
                    echartsInit5(result.echarts5 == undefined ? [] : result.echarts5);
                    echartsInit6(result.echarts6 == undefined ? [] : result.echarts6);
                }

            },
            error : function(e){
            }
        });
    }
    function echartsInit1(data){
        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var option1 = {
            color: [echartsColor1,echartsColor2,echartsColor3],
            legend: {},
            tooltip: {},
            grid:{
                left:'1%',
                right:'0',
                bottom:'1%',
                containLabel:true
            },
            dataset: {
                source: data
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
            ]
        };
        myChart1.setOption(option1,true);
    }
    function echartsInit2(data){

        var myChart2 = echarts.init(document.getElementById('echarts2'));
        var temp = data;
        var legTitle = new Array();
        var merData = new Array();
        for (var i = 0; i < temp.length; i++) {
            var dt = temp[i];

            dt[0] = dt[0] -10;
            dt[1] = dt[1] -10;
            legTitle.push(dt[2]);
            var mdt = {
                name:dt[2],
                data: [dt],
                type: 'scatter',
                symbolSize: function (data) {
                    return 30;
                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: function (param) {
                            return param.seriesName;
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter:function (value) {
                                return ( ((value.data[1]+10).toFixed(1) )+','+( (value.data[0]+10).toFixed(1))+ value.value[2] );
                            }
                        }
                    },
                }
            }
            merData.push(mdt);
        }

        var option2 = {
            color: [echartsColor1,echartsColor2,echartsColor3,'#FD530B','#FBBB02','#D0EB2C','#65B033','#65B033','#0592CD','#0147FF','#3E02A6','#8702B1'],
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#f5f5f5'
            }, {
                offset: 1,
                color: '#f5f5f5'
            }]),
            title: {
                text: ''
            },
            legend: {
                show:true,
                data:legTitle
            },
            xAxis: {
                name:'成交占比%',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel:{
                    formatter:function(value) {
                        return value+10;   //负数取绝对值变正数
                    }
                },
                max:25,
                min:-10,
            },
            yAxis: {
                name:'费用占比%',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel:{
                    formatter:function(value) {
                        return value+10;   //负数取绝对值变正数
                    }
                },
                scale: true,
                max:20,
                min:-10,
            },
            series:merData
        };
        myChart2.setOption(option2,true);
    }
    function echartsInit3(data){
        var myChart3 = echarts.init(document.getElementById('echarts3'));
        var option3 =  {
            color: [echartsColor1,echartsColor2,echartsColor3],
            legend: {},
            tooltip: {},
            dataset: {
                source: data
            },
            xAxis: {},
            grid: {
                top: '15%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                left: '2%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                right: '5%',
                bottom: '3%',
                containLabel: true //grid 区域是否包含坐标轴的刻度标签，
            },
            yAxis:{
                type: 'category',
                axisLabel:{
                    show:true,
                    formatter:function(value){
                        var texts=value;
                        if(texts.length>15){ // 具体多少字就看自己了
                            texts=texts.substr(0,15)+'...';
                        }
                        return texts;
                    }
                }
            },
            series: [
                {type: 'bar'},
            ]
        };
        myChart3.setOption(option3,true);
    }
    function echartsInit4(data){
        var myChart4 = echarts.init(document.getElementById('echarts4'));
        var option4 =  {
            color: [echartsColor1,echartsColor2,echartsColor3],
            legend: {},
            tooltip: {},
            dataset: {
                source: data
            },
            xAxis: {},
            grid: {
                top: '15%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                left: '2%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                right: '5%',
                bottom: '3%',
                containLabel: true //grid 区域是否包含坐标轴的刻度标签，
            },
            yAxis:{
                type: 'category',
                axisLabel:{
                    show:true,
                    formatter:function(value){
                        var texts=value;
                        if(texts.length>15){ // 具体多少字就看自己了
                            texts=texts.substr(0,15)+'...';
                        }
                        return texts;
                    }
                }
            },
            series: [
                {type: 'bar'},
            ]
        };
        myChart4.setOption(option4,true);
    }
    function echartsInit5(data){
        var myChart5 = echarts.init(document.getElementById('echarts5'));
        var option5 =  {
            color: [echartsColor1,echartsColor2,echartsColor3],
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.data,
                itemStyle : { normal: {label : {show: true}}},
                type: 'line'
            }]
        };
        myChart5.setOption(option5,true);
    }
    function echartsInit6(data){
        var myChart6 = echarts.init(document.getElementById('echarts6'));
        var option6 =  {
            color: [echartsColor1,echartsColor2,echartsColor3],
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.data,
                itemStyle : { normal: {label : {show: true}}},
                type: 'line'
            }]
        };
        myChart6.setOption(option6,true);
    }

</script>
<style>
    /****************************基础开始****************************/
    .font-weight {
        font-weight: bold;
    }
    .margin-bottom-zero{
        margin-bottom: 0px;
    }
    .border-zero{
        border: #ADADAD solid 0px;
    }
    .border-tow{
        border: #ADADAD solid 2px;
    }
    /****************************基础开始****************************/
    /****************************基础颜色开始****************************/
    /* 白色 */
    .color-whitex {
        color: white;
    }

    /* 基础蓝 */
    .color-027AFF {
        color: #027AFF;
    }

    /* 灰色 */
    .color-ADADAA {
        color: #ADADAA;
    }

    /* 浅灰色 */
    .color-D2D2D2 {
        color: #D2D2D2;
    }

    /* 绿色 */
    .color-78C06E {
        color: #78C06E;
    }

    /* 橙色 */
    .color-FF8000 {
        color: #FF8000;
    }

    /* 红色 */
    .color-FF2D2D {
        color: #FF2D2D;
    }

    /*白色背景*/
    .background-white {
        background-color: white;
    }

    /* 基础蓝 */
    .background-027AFF {
        background-color: #027AFF;
    }
    /* 淡蓝 */
    .background-theme {
        background-color: #3296F5;
    }

    /* 灰色 */
    .background-ADADAA {
        background-color: #ADADAA;
    }

    /* 浅灰色 */
    .background-D2D2D2 {
        background-color: #D2D2D2;
    }

    /* 绿色 */
    .background-78C06E {
        background-color: #78C06E;
    }

    /* 橙色 */
    .background-FF8000 {
        background-color: #FF8000;
    }

    /* 红色 */
    .background-FF2D2D {
        background-color: #FF2D2D;
    }

    /* 84AF9B */
    .background-84AF9B {
        background-color: #84AF9B;
    }

    /****************************基础颜色结束****************************/
    /****************************重写方法开始****************************/
    .dst-row {
        padding-right: 0px;
    }
    /****************************重写方法结束****************************/


    .font-size {
        font-size: 16px;
    }

    .margin-top-10 {
        margin-top: 10px;
    }

    /*圆框样式*/
    .round-frame {
        border-radius: 10px;
    }

    .row-1-height {
        height: 100px;
    }

    .row-1-right-1 {
        text-align: center;
        height: 30PX;
        line-height: 30px;
        width: 100%;
    }

    .circle {
        width: 20px;
        height: 20px;
        border-radius: 15%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, -50%);
    }

    .row-1-right-2 {
        text-align: center;
        height: 40PX;
        line-height: 40px;
    }

    .row-1-right-font2 {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }

    .row-1-right-3 {
        text-align: center;
        height: 30PX;
        line-height: 30px;
    }

    .row-1-right-font3 {
        font-size: 16px;
    }

    .ion-img {
        width: 45px;
        height: 45px;
        border-radius: 15%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .row-1-left-1 {
        height: 50px;
        line-height: 50px;
    }

    .row-1-left-2 {
        height: 50px;
        line-height: 50px;
    }
    .row-2-height {
        height: 90px;
    }


    .row-2{
        border-radius: 10px;
        background-color: #3296F5;
    }
    .row-2-1{
        height: 30px;
        line-height: 30px;

        text-align: center;
    }
    .row-2-2-2{
        height: 60px;
        line-height: 60px;
    }

    .row-2-2-2 .ion-img {
        width: 50px;
        height: 50px;
        border-radius: 15%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
    }
    .row-2-2{
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
    .row-2-3{
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .row-chart {
        height: 250px;
    }
    .row-chart-height {
        height: 385px;
    }
    .row-chart-title {
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        font-size: 18px;
    }

    .span-point {
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        font-size: 17px;
    }
    /**********************************进度条开始**********************************/
    * {box-sizing: border-box}

    .container {
        width: 80%;
        margin-left: 10%;
        border-radius: 10px;
        background-color: #ddd;
    }

    .skills {
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
        color: white;
    }
    .css { background-color: #78C06E;}
    /**********************************进度条结束**********************************/
    /************************多选下拉框样式重写开始************************/
    .select-tag{
        font-size: 16px;
    }
    .combobox-item, .combobox-group, .combobox-stick {
        height: 34px;
        line-height: 23px;
    }
    .tagbox-label {
        position: relative;
        display: block;
        margin: 5px 0 0 4px;
        padding: 0 19px 0 11px;
        float: left;
        font-size: 16px;
        vertical-align: top;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 10px;
        background: #a0a3a5;
        color: #fff;
    }
    .textbox {
        border-radius: 10px;
        border: 2px solid #ADADAD;
    }
    .combobox-item-selected {
        background-color: #3296F5;
        color: #fff;
        font-size: 16px;
    }
    .combobox-item, .combobox-group, .combobox-stick {
        font-size: 16px;
        padding: 5px 10px;
    }
    /************************多选下拉框样式重写结束************************/
    .button {
        border-radius:10px;
        background-color: #3296F5;
        border: none;
        color: white;
        padding: 17px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
</style>
</body>


