TV.kanbanUI.git

parent: 63065688 | 补丁 | 提交 | ignore whitespace

wyb

2021-05-12 72d5b374e8fedb89abaafc09c898736dbe755296

地图头部样式添加

3个文件已添加

1个文件已修改

	HDMap.html	75 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	css/common.css	81 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	css/dataCenterGlobal.css	27 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	css/new30.css	1101 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 HDMap.html

@@ -5,16 +5,89 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dataCenterGlobal.css">
    <link rel="stylesheet" type="text/css" href="./css/new30.css">
    <style>
        body {
            background: #001123;
        }

        .left .shuju_box .shuju {
            width: 121px;
            height: 100px
        }
    </style>
</head>

<body>

    <div class="map2" id="map_1" style="width: 100%"></div>
    <div style="text-align: center;">
        <div class="shuju_box clearfix">
            <div class="shuju shuju1">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2>130+</h2>
                        <p>服务国家和地区</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju2">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="AllCount">191765</h2>
                        <p>全球注册客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju3">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurrentMonthReg">8265</h2>
                        <p>全球新增客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju4">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthOrder">16185</h2>
                        <p>全球下单客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju2">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthMoney">120+</h2>
                        <p>全球销售额(RMB)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju3">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthFileCount">69410</h2>
                        <p>全球文件(款)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju4">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthArea">85002</h2>
                        <p>全球面积(㎡)</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="map2" id="map_1" style="width: 100%;"></div>




</body>

</html>

 css/common.css

New file
@@ -0,0 +1,81 @@
@charset "utf-8";
html,body{width:100%;height:100%;background:#000 url(../../../Content/images/data/bg.jpg) no-repeat center top;background-size:100%;font-family: "Alibaba Sans";overflow: hidden;}
html,body,h1, h2, h3, h4, h5, h6, div,ul,li,p {font-family:"Alibaba Sans",arial,\5b8b\4f53;margin:0;padding:0;font-size: 12px;color:#666;list-style: none;}
.pull-left {float:left;}
.pull-right {float:right;}
.clearfix:after{content:"\0020"; height:0; display:block; clear:both;}
.rel{position: relative;}
.dis{display: block;}
.inline-block{display: inline-block;}
.top{width:100%;position: fixed;top:0;text-align:center;z-index:9;}
.top_box{position: absolute;left: 0;top:30px;width:100%;}
.shuju_box{padding-top:12px;display:inline-block;}
.top_box img{width:300px;}
.shuju_box .shuju{float:left;height:54px;text-align:center;overflow: hidden;padding:0 10px;position:relative;}
.shuju_item{height:54px;}
.shuju_item h2{
    background-image: -webkit-linear-gradient(bottom,#3e8aec,#d9fcfd);
    background-clip:text; 
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent; 
    font-size:18px;
    padding-bottom: 5px;
    font-weight: 600;
    height: 30px;
}
.shuju_item p{font-size: 12px;color:#f90;}
.shuju_box .shuju::after{
    content: '';
    display: block;
    width: 1px;
    height:50px;
    clear: both;
    position: absolute;top:0px;left:0;
    background: -webkit-linear-gradient(top, #000 -4%, #f90 50%, #000 100%);
}
.shuju_box .shuju1::after {
    width:0;
}
.map{padding-top:2%;}
.map1{text-align: center;width:40%;left:30%;position: relative;overflow: hidden;}
.map1 img{width:100%;/*animation: myfirst2 15s infinite linear;*/opacity: 0.1;}
.map2{width:100%;z-index:5;top:0;position: fixed!important;top:40px;}
@keyframes myfirst2{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}


.left{position: absolute;top:230px;left:10px;width:300px;z-index:99;}
.left li{float: left;width:130px;margin-bottom: 15px;}
.data_cont:before{
    content: '';
    display: block;
    width: 1px;
    height:34px;
    clear: both;
    float: left;
    background: -webkit-linear-gradient(top, #000 -4%, #333 50%, #000 100%);
    margin-right:5px;
}
.data_cont h2{font-size:18px;color:#f90;margin-bottom: 2px;}
.data_cont p{color:#fff;font-size: 10px;}
.left li .data_icon{padding-left:7px;margin-bottom:2px;height:14px;}
.data_icon img{height:14px;}

.title{width:calc(100% - 10px);height:22px;background: #222;line-height: 22px;font-size: 14px;color:#fff;padding-left:10px;}

.legend_box{position:absolute;bottom:10px;}
.legend_box li{float: left;margin-right:5px;color:#999;font-size:8px;}
.legend_box li i{display: inline-block;width:8px;height:8px;vertical-align: middle;border-radius: 50%;}
.legend_box li .icon1{background: #f90;}
.legend_box li .icon2{background: #fff;}
.legend_box li .icon3{background: #026afe;}
.legend_box li .icon4{background: #3fffea;}
.legend_box li .icon5{background: #98efff;}
.legend_box li .icon6{background: #5b81ff;}
.echart_title{position: absolute;top:10px;color:#fff;font-size:12px;left:30px;}

 css/dataCenterGlobal.css

New file
@@ -0,0 +1,27 @@
@charset "utf-8";

.left{top:80px;}
.right{width:260px;position:absolute;top:80px;right:10px;z-index: 99;}

.rank_cont{height:100px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;width:calc(100% - 12px);padding-left: 10px;}
.rank_right{height:100px;width: 100%;}
.order{margin-top:5px;}
.order-cont{height:100px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;width:calc(100%-10);padding-left: 10px;padding-top:5px;}
.order-title{color:#666;margin-bottom:4px;}
.order-cont .order_list{overflow: hidden;height:84px;}
.order-cont li{color:#fff;height:14px;}
.ww{display:block;float: left;font-size: 8px;}
.ww1{width:28%;
     overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.ww2{width:16%;}
.ww3{width:21%;}
.ww4{width:14%;}
.ww5{width:18%;}
.ww1 img{width:12px;vertical-align: middle;}
.bottom{position:absolute;height:180px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;left:10px;right: 10px;bottom:10px;background: url(../../images/data/bottom_bg.png) no-repeat center bottom;z-index: 99;}
.contry_item{float:left;width:20%;height:180px;overflow: hidden;}
.chartItem{height:180px;padding: 0 1%;width:100%;}
.legend_box{left: 10px;}

 css/new30.css

New file
@@ -0,0 +1,1101 @@
body {
    background: url(/Content/images/data/bg.png) no-repeat;
    background-size: cover;
}

.jcgmt-container {
    float: left;
    padding: 3px;
}

.jcgmt-container .jcgmt-lbl {
    font-size: 10px;
    color: #fff;
    line-height: 14px;
    text-align: center;
    width: 68px;
    margin: 0 auto;
    position: absolute;
    bottom: -10px;
    left: 23%;
    background-image: linear-gradient(to left, #27241b 0%, #7d5618 50%, #27241b 100%);
}

.jcgmt-clockHolder {
    width: 100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.jcgmt-sec,
.jcgmt-min,
.jcgmt-hour {
    display: block;
    position: absolute;
}

.jcgmt-rotatingWrapper {
    position: absolute;
    width: 100px;
    height: 100px;
}

.jcgmt-digital,
.jcgmt-date {
    font-weight: bold;
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-left: 8px;
    position: absolute;
    bottom: -24px;
    left: 25px
}

.tv30-1 .tv-top {
    height: 130px;
    width: 100%;
    background-size: 250px;
}

.tv30-1 .tv-top img{
    width:80px;margin-top:0
}
.tv30-1 .tv-top .bgimg{
    width: 300px;
    margin-top: 30px;
}

.tv30-1 .tv-top .newdata {
    color: #fff;
    position: absolute;
    left: 12%;
    bottom: -30px;
}

.tv30-1 .tv-top .timebox {
    width: 100%;
    height: 130px;
    padding: 0 15%;
    margin: auto;
    background-size: 250px;
    position:fixed
}

.tv30-1 .tv-top .timebox>div {
    width: 20%;
    position: relative;
}

.tv30-1 .tv-center {
    width: 94%;
    margin: 2px auto 10px;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 20px;
    height: 220px;
}

.tv30-1 .tv-center ul li {
    height: 200px;
    width: 20%;
    float: left;
    position: relative;
}

.tv30-1 .tv-center ul li>div {
    width: 100%;
    height: 100%;
}

.tv30-1 .tv-center .titp {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}

.tv30-1 .tv-center .legenddiv {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
    font-size: 8px
}

.tv30-1 .tv-center .legenddiv .pie1 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f90;
    border-radius: 50%;
}

.tv30-1 .tv-center .legenddiv .pie2 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #0061d0;
    border-radius: 50%;
}

.tv30-1 .tv-center .legenddiv .pie3 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #3fffea;
    border-radius: 50%;
}

.jcgmt-digital {
    display: none;
}

.tv30-1 .tv-bottom {
    width: 94%;
    margin: auto;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 0 20px;
    height: 160px;
}

.tv30-1 .tv-bottom ul li {
    height: 160px;
    width: 14%;
    float: left;
    position: relative;
}

.tv30-1 .tv-bottom ul li p {
    position: absolute;
    left: 0;
    top: 10px;
    color: #fff;
}

.tv30-1 .tv-bottom ul li>div {
    width: 100%;
    height: 100%;
}



.tv30-2 .tv-top {
    height: 50px;
    width: 100%;
}

.tv30-2 .tv-top h2 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tv30-2 .tv-center {
    width: 98%;
    margin: 10px auto;
    padding: 0px;
    height: 300px;
}

.tv30-2 .tv-center .pull-left {
    position: relative;
    height: 300px;
    width: 39%;
    float: left;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
}

.tv30-2 .tv-center .pull-left div {
    height: 300px;
    width: 100%;
}

.tv30-2 .tv-center .pull-right {
    height: 300px;
    width: 60%;
    float: left;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
}

.tv30-2 .tv-center .pull-right ul li {
    position: relative;
    width: 33.3%;
    float: left;
    height: 150px
}

.tv30-2 .tv-center .pull-right ul li>div {
    width: 100%;
    height: 100%;
}

.tv30-2 .tv-center .titp {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}

.tv30-2 .tv-center .legenddiv {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
    font-size: 8px
}

.tv30-2 .tv-center .legenddiv .pie1 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f90;
    border-radius: 50%;
}

.tv30-2 .tv-center .legenddiv .pie2 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #0061d0;
    border-radius: 50%;
}

.tv30-2 .tv-center .legenddiv .pie3 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #3fffea;
    border-radius: 50%;
}


.tv30-2 .tv-bottom {
    width: 98%;
    margin: auto;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 0 20px;
    height: 160px;
}

.tv30-2 .tv-bottom ul li {
    height: 160px;
    width: 14%;
    float: left;
    position: relative;
}

.tv30-2 .tv-bottom ul li p {
    position: absolute;
    left: 0;
    top: 10px;
    color: #fff;
}

.tv30-2 .tv-bottom ul li>div {
    width: 100%;
    height: 100%;
}



.tv30-3 .tv-top {
    height: 50px;
    width: 100%;
    background-size: 300px 50px;
}

.tv30-3 .tv-top div {
    background-size: 300px 50px;
}

.tv30-3 .tv-top h2 span {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tv30-3 .tv-top h2 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: url(../../../Content/images/data/top_bg.png) center no-repeat;
    background-size: 500px 50px;
}

.tv30-3 .tv-center {
    width: 98%;
    margin: 0px auto;
    padding: 0px;
    height: 310px;
}

.tv30-3 .tv-center .pull-right {
    height: 320px;
    width: 100%;
}

.tv30-3 .tv-center .pull-right ul li {
    position: relative;
    width: 33.3%;
    float: left;
    height: 150px
}

.tv30-3 .tv-center .pull-right ul li>div {
    width: 100%;
    height: 100%;
}

.tv30-3 .tv-center .titp {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}


.tv30-3 .tv-bottom {
    margin: auto;
    position:fixed;bottom:10px;left:10px;right:10px;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 0 20px;
    height: 180px;
    background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
    background-size: 500px 1px;
}

.tv30-3 .tv-bottom ul li {
    height: 180px;
    width: 33.3%;
    float: left;
    position: relative;
}

.tv30-3 .tv-bottom ul li p {
    position: absolute;
    left: 0;
    top: 5px;
    color: #fff;
}

.tv30-3 .tv-bottom ul li>div {
    width: 100%;
    height: 100%;
    top:0px
}


.tv30-4 .tv-top div {
    background-size: 300px 50px;
}

.tv30-4 .tv-top {
    height: 50px;
    width: 100%;
    background-size: 300px 50px;
}

.tv30-4 .tv-top h2 span {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tv30-4 .tv-top h2 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: url(../../../Content/images/data/top_bg.png) center no-repeat;
    background-size: 500px 50px;
}

.tv30-4 .tv-center {
    width: 94%;
    margin: 10px auto;
    padding: 0px;
    height: 250px;
}

.tv30-4 .tv-center .pull-left {
    position: relative;
    height: 260px;
    width: 33%;
    float: left;
}

.tv30-4 .tv-center .pull-left div {
    height: 260px;
    width: 100%;
}

.tv30-4 .tv-center .pull-right {
    height: 260px;
    width: 60%;
    float: left;
}

.tv30-4 .tv-center .pull-right ul li {
    position: relative;
    width: 50%;
    float: left;
    height: 150px
}

.tv30-4 .tv-center .pull-right ul li>div {
    width: 100%;
    height: 135px;
}

.tv30-4 .tv-center .titp {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}

.tv30-4 .tv-center .legenddiv {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
    font-size: 8px
}

.tv30-4 .tv-center .legenddiv .pie1 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f90;
    border-radius: 50%;
}

.tv30-4 .tv-center .legenddiv .pie2 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #0061d0;
    border-radius: 50%;
}

.tv30-4 .tv-center .legenddiv .pie3 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #3fffea;
    border-radius: 50%;
}


.tv30-4 .tv-bottom {
    width: 94%;
    margin: auto;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 0 20px;
    height: 160px;
    background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
    background-size: 500px 1px;
}

.tv30-4 .tv-bottom ul li {
    height: 160px;
    width: 25%;
    float: left;
    position: relative;
}

.tv30-4 .tv-bottom ul li p {
    position: absolute;
    left: 0;
    top: 10px;
    color: #fff;
}

.tv30-4 .tv-bottom ul li>div {
    width: 100%;
    height: 100%;
}

.tv30-4 .top {
    width: 100%;
    height: 70px;
    position:inherit
}

.tv30-4 .top_box {
    width: 100%;
    height: 80px;
    top:50px
}

/*.tv30-4 .shuju_box {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
}

.tv30-4 .shuju_box .shuju {
    float: left;
    width: 13.2%;
    height: 76px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    margin: 0 0.5%;
    border: 1px solid #222;
}

.tv30-4 .shuju_item {
    height: 75px;
}

.tv30-4 .shuju_item h2 {
    background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: 600;
    height: 45px;
}

.tv30-4 .shuju_item p {
    font-size: 12px;
    color: #f90;
}*/



/*ç¬¬äº”ä¸ª*/
.tv-top img{width:300px;margin-top:30px}

.tv30-5 .tv-top {
    height: 50px;
    width: 100%;
    background-size: 300px 50px;
}

.tv30-5 .tv-top div {
    background-size: 300px 50px;
}

.tv30-5 .tv-top h2 {
    text-align: center;
    line-height: 50px;
    background: url(../../../Content/images/data/top_bg.png) center no-repeat;
    background-size: 500px 50px;
}

.tv30-5 .tv-top h2 span {
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.tv30-5 .tv-center {
    width: 94%;
    margin: 10px auto;
    padding: 0px;
    height: 260px;
}

.tv30-5 .tv-center .pull-left {
    position: relative;
    height: 300px;
    width: 37.3%;
    float: left;
}

.tv30-5 .tv-center .pull-left:nth-of-type(1) {
    width: 24.3%;
    padding-left:1%
}
.tv30-5 .data_cont p{font-size:9px}

.tv30-5 .tv-center .pull-left:nth-of-type(2) {
    margin-right: 1%
}

.tv30-5 .tv-center .pull-left>div {
    height: 240px;
    width: 100%;
    position:inherit;
    top:0
}

.tv30-5 .left li img{
    height:14px
}

.tv30-5 .tv-center .pull-right {
    height: 300px;
    width: 60%;
    float: left;
}

.tv30-5 .tv-center .pull-right ul li {
    position: relative;
    width: 50%;
    float: left;
    height: 150px
}

.tv30-5 .tv-center .pull-right ul li>div {
    width: 100%;
    height: 100%;
}

.tv30-5 .tv-center .titp {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}

.tv30-5 .tv-center .legenddiv {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
    font-size: 8px
}

.tv30-5 .tv-center .legenddiv .pie1 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f90;
    border-radius: 50%;
}

.tv30-5 .tv-center .legenddiv .pie2 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #0061d0;
    border-radius: 50%;
}

.tv30-5 .tv-center .legenddiv .pie3 {
    vertical-align: middle;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #3fffea;
    border-radius: 50%;
}


.tv30-5 .tv-bottom {
    margin: auto;
    position:fixed;left:10px;right:10px;bottom:10px;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    border: 1px solid #222;
    padding: 0 20px;
    height: 160px;
    background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
    background-size: 500px 1px
}

.tv30-5 .tv-bottom ul li {
    height: 160px;
    width: 33.3%;
    float: left;
    position: relative;
}

.tv30-5 .tv-bottom ul li p {
    position: absolute;
    left: 0;
    top: 5px;
    color: #fff;
}

.tv30-5 .tv-bottom ul li>div {
    width: 100%;
    height: 100%;
    top:0px;
    position:relative
}

.tv30-5 .top {
    width: 100%;
    height: 60px;
    position:inherit
}

.tv30-5 .top_box {
    width: 100%;
    height: 60px;
    top:50px;
}

/*.tv30-5 .shuju_box {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7px;
}

.tv30-5 .shuju_box .shuju {
    float: left;
    width: 13.2%;
    height: 55px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
    margin: 0 0.5%;
    border: 1px solid #222;
}

.tv30-5 .shuju_item {
    height: 65px;
}

.tv30-5 .shuju_item h2 {
    background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: 600;
    height: 35px;
}

.tv30-5 .shuju_item p {
    font-size: 14px;
    color: #f90;
}*/

 

.left li {
    float: left;
    width: 48%;
    margin-right: 0px;
    margin-bottom: 25px;
}

.data_cont h2 {
    font-size: 20px;
    color: #f90;
    margin-bottom: 5px;
}

.data_cont p {
    color: #fff;
    font-size: 12px;
}

.data_icon {
    background-image: url(../../../Content/images/data/data_icon.png);
    background-repeat: no-repeat;
    display: block;
}

.left li .data_icon {
    padding-left: 8px;
    margin-bottom: 10px;
}

.icon1 {
    width: 26px;
    height: 24px;
    background-position: 0 0;
}

.icon2 {
    width: 28px;
    height: 24px;
    background-position: -152px 0;
}

.icon3 {
    width: 23px;
    height: 24px;
    background-position: 0 -55px;
}

.icon4 {
    width: 28px;
    height: 24px;
    background-position: -155px -57px;
}

.icon5 {
    width: 38px;
    height: 24px;
    background-position: 0px -117px;
}

.icon6 {
    width: 24px;
    height: 24px;
    background-position: -156px -118px;
}

.icon7 {
    width: 25px;
    height: 24px;
    background-position: 0px -190px;
}

.icon8 {
    width: 24px;
    height: 24px;
    background-position: -156px -184px;
}

.gtp {
    background: #222222;
    color: #fff;
    display: block;
    width: 100%;
    height: 22px;
    line-height: 22px;
    text-indent: 10px;
}

.tv30-5 .spantitbox {
    color: #999;
    margin: 2px 0;
}

.tv30-5 .spantitbox span {
    display: inline-block;
}

.tv30-5 .spantitbox .ww1 {
    width: 30%;
    text-indent: 23px
}

.tv30-5 .spantitbox .ww2 {
    width: 15%
}

.tv30-5 .spantitbox .ww3 {
    width: 13%
}

.tv30-5 .spantitbox .ww4 {
    width: 20%
}

.tv30-5 .spantitbox .ww5 {
    width: 17%
}



.tv30-5 .contentspan {
    color: #fff
}

.tv30-5 .contentspan li {
    line-height: 20px;
    font-size:12px
}

.tv30-5 .contentspan span {
    display: inline-block;
    color: #fff
}

.tv30-5 .contentspan .ww1 {
    width: 30%;
}

.tv30-5 .contentspan .ww2 {
    width: 15%
}

.tv30-5 .contentspan .ww3 {
    width: 13%
}

.tv30-5 .contentspan .ww4 {
    width: 20%
}

.tv30-5 .contentspan .ww5 {
    width: 17%
}


.tv30-5 .spantitbox2 {
    color: #999;
    margin: 2px 0;
}

.tv30-5 .spantitbox2 span {
    display: inline-block;
}

.tv30-5 .spantitbox2 .ww1 {
    width: 35%;
    text-indent: 23px
}

.tv30-5 .spantitbox2 .ww2 {
    width: 15%
}

.tv30-5 .spantitbox2 .ww3 {
    width: 25%
}

.tv30-5 .spantitbox2 .ww4 {
    width: 30%
}

.tv30-5 .spantitbox2 .ww5 {
    width: 15%
}

.tv30-5 .contentspan2 {
    color: #fff
}

.tv30-5 .contentspan2 li {
    line-height: 20px;
    font-size:12px;
}

.tv30-5 .contentspan2 span {
    display: inline-block;
    color: #fff
}

.tv30-5 .contentspan2 .ww1 {
    width: 40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* overflow: hidden; */
}

.tv30-5 .contentspan2 .ww2 {
    width: 10%
}

.tv30-5 .contentspan2 .ww3 {
    width: 25%
}

.tv30-5 .contentspan2 .ww4 {
    width: 30%
}

.tv30-5 .contentspan2 .ww5 {
    width: 15%
}






.onespan {
    margin-right: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: red;
    color: #fff;
    text-align: center;
    line-height: 18px;
}

.twospan {
    margin-right: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ff9900;
    color: #fff;
    text-align: center;
    line-height: 18px;
}

.threespan {
    margin-right: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #0072ff;
    color: #fff;
    text-align: center;
    line-height: 18px;
}

.spanbg {
    margin-right: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #333333;
    color: #fff;
    text-align: center;
    line-height: 18px;
}

			@@ -5,16 +5,89 @@
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Document</title>
			<link rel="stylesheet" href="./css/common.css">
			<link rel="stylesheet" href="./css/dataCenterGlobal.css">
			<link rel="stylesheet" type="text/css" href="./css/new30.css">
			<style>
			body {
			background: #001123;
			}

			.left .shuju_box .shuju {
			width: 121px;
			height: 100px
			}
			</style>
			</head>

			<body>

			<div class="map2" id="map_1" style="width: 100%"></div>
			<div style="text-align: center;">
			<div class="shuju_box clearfix">
			<div class="shuju shuju1">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2>130+</h2>
			<p>服务国家和地区</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju2">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="AllCount">191765</h2>
			<p>全球注册客户(人)</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju3">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurrentMonthReg">8265</h2>
			<p>全球新增客户(人)</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju4">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthOrder">16185</h2>
			<p>全球下单客户(人)</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju2">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthMoney">120+</h2>
			<p>全球销售额(RMB)</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju3">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthFileCount">69410</h2>
			<p>全球文件(款)</p>
			</div>
			</div>
			</div>
			<div class="shuju shuju4">
			<div class="shuju_cont">
			<div class="shuju_item">
			<h2 class="CurMonthArea">85002</h2>
			<p>全球面积(㎡)</p>
			</div>
			</div>
			</div>
			</div>
			</div>

			<div class="map2" id="map_1" style="width: 100%;"></div>




			</body>

			</html>

New file
			@@ -0,0 +1,81 @@
			@charset "utf-8";
			html,body{width:100%;height:100%;background:#000 url(../../../Content/images/data/bg.jpg) no-repeat center top;background-size:100%;font-family: "Alibaba Sans";overflow: hidden;}
			html,body,h1, h2, h3, h4, h5, h6, div,ul,li,p {font-family:"Alibaba Sans",arial,\5b8b\4f53;margin:0;padding:0;font-size: 12px;color:#666;list-style: none;}
			.pull-left {float:left;}
			.pull-right {float:right;}
			.clearfix:after{content:"\0020"; height:0; display:block; clear:both;}
			.rel{position: relative;}
			.dis{display: block;}
			.inline-block{display: inline-block;}
			.top{width:100%;position: fixed;top:0;text-align:center;z-index:9;}
			.top_box{position: absolute;left: 0;top:30px;width:100%;}
			.shuju_box{padding-top:12px;display:inline-block;}
			.top_box img{width:300px;}
			.shuju_box .shuju{float:left;height:54px;text-align:center;overflow: hidden;padding:0 10px;position:relative;}
			.shuju_item{height:54px;}
			.shuju_item h2{
			background-image: -webkit-linear-gradient(bottom,#3e8aec,#d9fcfd);
			background-clip:text;
			-webkit-background-clip: text;
			-webkit-text-fill-color:transparent;
			font-size:18px;
			padding-bottom: 5px;
			font-weight: 600;
			height: 30px;
			}
			.shuju_item p{font-size: 12px;color:#f90;}
			.shuju_box .shuju::after{
			content: '';
			display: block;
			width: 1px;
			height:50px;
			clear: both;
			position: absolute;top:0px;left:0;
			background: -webkit-linear-gradient(top, #000 -4%, #f90 50%, #000 100%);
			}
			.shuju_box .shuju1::after {
			width:0;
			}
			.map{padding-top:2%;}
			.map1{text-align: center;width:40%;left:30%;position: relative;overflow: hidden;}
			.map1 img{width:100%;/animation: myfirst2 15s infinite linear;/opacity: 0.1;}
			.map2{width:100%;z-index:5;top:0;position: fixed!important;top:40px;}
			@keyframes myfirst2{
			0% {
			transform: rotate(0deg);
			}
			100% {
			transform: rotate(359deg);
			}
			}


			.left{position: absolute;top:230px;left:10px;width:300px;z-index:99;}
			.left li{float: left;width:130px;margin-bottom: 15px;}
			.data_cont:before{
			content: '';
			display: block;
			width: 1px;
			height:34px;
			clear: both;
			float: left;
			background: -webkit-linear-gradient(top, #000 -4%, #333 50%, #000 100%);
			margin-right:5px;
			}
			.data_cont h2{font-size:18px;color:#f90;margin-bottom: 2px;}
			.data_cont p{color:#fff;font-size: 10px;}
			.left li .data_icon{padding-left:7px;margin-bottom:2px;height:14px;}
			.data_icon img{height:14px;}

			.title{width:calc(100% - 10px);height:22px;background: #222;line-height: 22px;font-size: 14px;color:#fff;padding-left:10px;}

			.legend_box{position:absolute;bottom:10px;}
			.legend_box li{float: left;margin-right:5px;color:#999;font-size:8px;}
			.legend_box li i{display: inline-block;width:8px;height:8px;vertical-align: middle;border-radius: 50%;}
			.legend_box li .icon1{background: #f90;}
			.legend_box li .icon2{background: #fff;}
			.legend_box li .icon3{background: #026afe;}
			.legend_box li .icon4{background: #3fffea;}
			.legend_box li .icon5{background: #98efff;}
			.legend_box li .icon6{background: #5b81ff;}
			.echart_title{position: absolute;top:10px;color:#fff;font-size:12px;left:30px;}

New file
			@@ -0,0 +1,27 @@
			@charset "utf-8";

			.left{top:80px;}
			.right{width:260px;position:absolute;top:80px;right:10px;z-index: 99;}

			.rank_cont{height:100px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;width:calc(100% - 12px);padding-left: 10px;}
			.rank_right{height:100px;width: 100%;}
			.order{margin-top:5px;}
			.order-cont{height:100px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;width:calc(100%-10);padding-left: 10px;padding-top:5px;}
			.order-title{color:#666;margin-bottom:4px;}
			.order-cont .order_list{overflow: hidden;height:84px;}
			.order-cont li{color:#fff;height:14px;}
			.ww{display:block;float: left;font-size: 8px;}
			.ww1{width:28%;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			}
			.ww2{width:16%;}
			.ww3{width:21%;}
			.ww4{width:14%;}
			.ww5{width:18%;}
			.ww1 img{width:12px;vertical-align: middle;}
			.bottom{position:absolute;height:180px;box-shadow: 0 0 30px 10px rgba(34,34,34,.8) inset;border: 1px solid #222;left:10px;right: 10px;bottom:10px;background: url(../../images/data/bottom_bg.png) no-repeat center bottom;z-index: 99;}
			.contry_item{float:left;width:20%;height:180px;overflow: hidden;}
			.chartItem{height:180px;padding: 0 1%;width:100%;}
			.legend_box{left: 10px;}

New file
			@@ -0,0 +1,1101 @@
			body {
			background: url(/Content/images/data/bg.png) no-repeat;
			background-size: cover;
			}

			.jcgmt-container {
			float: left;
			padding: 3px;
			}

			.jcgmt-container .jcgmt-lbl {
			font-size: 10px;
			color: #fff;
			line-height: 14px;
			text-align: center;
			width: 68px;
			margin: 0 auto;
			position: absolute;
			bottom: -10px;
			left: 23%;
			background-image: linear-gradient(to left, #27241b 0%, #7d5618 50%, #27241b 100%);
			}

			.jcgmt-clockHolder {
			width: 100px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			}

			.jcgmt-sec,
			.jcgmt-min,
			.jcgmt-hour {
			display: block;
			position: absolute;
			}

			.jcgmt-rotatingWrapper {
			position: absolute;
			width: 100px;
			height: 100px;
			}

			.jcgmt-digital,
			.jcgmt-date {
			font-weight: bold;
			font-size: 12px;
			color: #fff;
			text-align: center;
			margin-left: 8px;
			position: absolute;
			bottom: -24px;
			left: 25px
			}

			.tv30-1 .tv-top {
			height: 130px;
			width: 100%;
			background-size: 250px;
			}

			.tv30-1 .tv-top img{
			width:80px;margin-top:0
			}
			.tv30-1 .tv-top .bgimg{
			width: 300px;
			margin-top: 30px;
			}

			.tv30-1 .tv-top .newdata {
			color: #fff;
			position: absolute;
			left: 12%;
			bottom: -30px;
			}

			.tv30-1 .tv-top .timebox {
			width: 100%;
			height: 130px;
			padding: 0 15%;
			margin: auto;
			background-size: 250px;
			position:fixed
			}

			.tv30-1 .tv-top .timebox>div {
			width: 20%;
			position: relative;
			}

			.tv30-1 .tv-center {
			width: 94%;
			margin: 2px auto 10px;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 20px;
			height: 220px;
			}

			.tv30-1 .tv-center ul li {
			height: 200px;
			width: 20%;
			float: left;
			position: relative;
			}

			.tv30-1 .tv-center ul li>div {
			width: 100%;
			height: 100%;
			}

			.tv30-1 .tv-center .titp {
			position: absolute;
			left: 10px;
			top: 5px;
			color: #fff;
			}

			.tv30-1 .tv-center .legenddiv {
			position: absolute;
			right: 10px;
			top: 5px;
			color: #fff;
			font-size: 8px
			}

			.tv30-1 .tv-center .legenddiv .pie1 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #f90;
			border-radius: 50%;
			}

			.tv30-1 .tv-center .legenddiv .pie2 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #0061d0;
			border-radius: 50%;
			}

			.tv30-1 .tv-center .legenddiv .pie3 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #3fffea;
			border-radius: 50%;
			}

			.jcgmt-digital {
			display: none;
			}

			.tv30-1 .tv-bottom {
			width: 94%;
			margin: auto;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 0 20px;
			height: 160px;
			}

			.tv30-1 .tv-bottom ul li {
			height: 160px;
			width: 14%;
			float: left;
			position: relative;
			}

			.tv30-1 .tv-bottom ul li p {
			position: absolute;
			left: 0;
			top: 10px;
			color: #fff;
			}

			.tv30-1 .tv-bottom ul li>div {
			width: 100%;
			height: 100%;
			}



			.tv30-2 .tv-top {
			height: 50px;
			width: 100%;
			}

			.tv30-2 .tv-top h2 {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}

			.tv30-2 .tv-center {
			width: 98%;
			margin: 10px auto;
			padding: 0px;
			height: 300px;
			}

			.tv30-2 .tv-center .pull-left {
			position: relative;
			height: 300px;
			width: 39%;
			float: left;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			}

			.tv30-2 .tv-center .pull-left div {
			height: 300px;
			width: 100%;
			}

			.tv30-2 .tv-center .pull-right {
			height: 300px;
			width: 60%;
			float: left;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			}

			.tv30-2 .tv-center .pull-right ul li {
			position: relative;
			width: 33.3%;
			float: left;
			height: 150px
			}

			.tv30-2 .tv-center .pull-right ul li>div {
			width: 100%;
			height: 100%;
			}

			.tv30-2 .tv-center .titp {
			position: absolute;
			left: 10px;
			top: 5px;
			color: #fff;
			}

			.tv30-2 .tv-center .legenddiv {
			position: absolute;
			right: 10px;
			top: 5px;
			color: #fff;
			font-size: 8px
			}

			.tv30-2 .tv-center .legenddiv .pie1 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #f90;
			border-radius: 50%;
			}

			.tv30-2 .tv-center .legenddiv .pie2 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #0061d0;
			border-radius: 50%;
			}

			.tv30-2 .tv-center .legenddiv .pie3 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #3fffea;
			border-radius: 50%;
			}


			.tv30-2 .tv-bottom {
			width: 98%;
			margin: auto;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 0 20px;
			height: 160px;
			}

			.tv30-2 .tv-bottom ul li {
			height: 160px;
			width: 14%;
			float: left;
			position: relative;
			}

			.tv30-2 .tv-bottom ul li p {
			position: absolute;
			left: 0;
			top: 10px;
			color: #fff;
			}

			.tv30-2 .tv-bottom ul li>div {
			width: 100%;
			height: 100%;
			}



			.tv30-3 .tv-top {
			height: 50px;
			width: 100%;
			background-size: 300px 50px;
			}

			.tv30-3 .tv-top div {
			background-size: 300px 50px;
			}

			.tv30-3 .tv-top h2 span {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}

			.tv30-3 .tv-top h2 {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background: url(../../../Content/images/data/top_bg.png) center no-repeat;
			background-size: 500px 50px;
			}

			.tv30-3 .tv-center {
			width: 98%;
			margin: 0px auto;
			padding: 0px;
			height: 310px;
			}

			.tv30-3 .tv-center .pull-right {
			height: 320px;
			width: 100%;
			}

			.tv30-3 .tv-center .pull-right ul li {
			position: relative;
			width: 33.3%;
			float: left;
			height: 150px
			}

			.tv30-3 .tv-center .pull-right ul li>div {
			width: 100%;
			height: 100%;
			}

			.tv30-3 .tv-center .titp {
			position: absolute;
			left: 10px;
			top: 5px;
			color: #fff;
			}


			.tv30-3 .tv-bottom {
			margin: auto;
			position:fixed;bottom:10px;left:10px;right:10px;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 0 20px;
			height: 180px;
			background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
			background-size: 500px 1px;
			}

			.tv30-3 .tv-bottom ul li {
			height: 180px;
			width: 33.3%;
			float: left;
			position: relative;
			}

			.tv30-3 .tv-bottom ul li p {
			position: absolute;
			left: 0;
			top: 5px;
			color: #fff;
			}

			.tv30-3 .tv-bottom ul li>div {
			width: 100%;
			height: 100%;
			top:0px
			}


			.tv30-4 .tv-top div {
			background-size: 300px 50px;
			}

			.tv30-4 .tv-top {
			height: 50px;
			width: 100%;
			background-size: 300px 50px;
			}

			.tv30-4 .tv-top h2 span {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}

			.tv30-4 .tv-top h2 {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background: url(../../../Content/images/data/top_bg.png) center no-repeat;
			background-size: 500px 50px;
			}

			.tv30-4 .tv-center {
			width: 94%;
			margin: 10px auto;
			padding: 0px;
			height: 250px;
			}

			.tv30-4 .tv-center .pull-left {
			position: relative;
			height: 260px;
			width: 33%;
			float: left;
			}

			.tv30-4 .tv-center .pull-left div {
			height: 260px;
			width: 100%;
			}

			.tv30-4 .tv-center .pull-right {
			height: 260px;
			width: 60%;
			float: left;
			}

			.tv30-4 .tv-center .pull-right ul li {
			position: relative;
			width: 50%;
			float: left;
			height: 150px
			}

			.tv30-4 .tv-center .pull-right ul li>div {
			width: 100%;
			height: 135px;
			}

			.tv30-4 .tv-center .titp {
			position: absolute;
			left: 10px;
			top: 5px;
			color: #fff;
			}

			.tv30-4 .tv-center .legenddiv {
			position: absolute;
			right: 10px;
			top: 5px;
			color: #fff;
			font-size: 8px
			}

			.tv30-4 .tv-center .legenddiv .pie1 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #f90;
			border-radius: 50%;
			}

			.tv30-4 .tv-center .legenddiv .pie2 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #0061d0;
			border-radius: 50%;
			}

			.tv30-4 .tv-center .legenddiv .pie3 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #3fffea;
			border-radius: 50%;
			}


			.tv30-4 .tv-bottom {
			width: 94%;
			margin: auto;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 0 20px;
			height: 160px;
			background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
			background-size: 500px 1px;
			}

			.tv30-4 .tv-bottom ul li {
			height: 160px;
			width: 25%;
			float: left;
			position: relative;
			}

			.tv30-4 .tv-bottom ul li p {
			position: absolute;
			left: 0;
			top: 10px;
			color: #fff;
			}

			.tv30-4 .tv-bottom ul li>div {
			width: 100%;
			height: 100%;
			}

			.tv30-4 .top {
			width: 100%;
			height: 70px;
			position:inherit
			}

			.tv30-4 .top_box {
			width: 100%;
			height: 80px;
			top:50px
			}

			/*.tv30-4 .shuju_box {
			width: 96%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 12px;
			}

			.tv30-4 .shuju_box .shuju {
			float: left;
			width: 13.2%;
			height: 76px;
			text-align: center;
			overflow: hidden;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			margin: 0 0.5%;
			border: 1px solid #222;
			}

			.tv30-4 .shuju_item {
			height: 75px;
			}

			.tv30-4 .shuju_item h2 {
			background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 30px;
			padding-bottom: 5px;
			padding-top: 5px;
			font-weight: 600;
			height: 45px;
			}

			.tv30-4 .shuju_item p {
			font-size: 12px;
			color: #f90;
			}*/



			/ç¬¬äº”ä¸ª/
			.tv-top img{width:300px;margin-top:30px}

			.tv30-5 .tv-top {
			height: 50px;
			width: 100%;
			background-size: 300px 50px;
			}

			.tv30-5 .tv-top div {
			background-size: 300px 50px;
			}

			.tv30-5 .tv-top h2 {
			text-align: center;
			line-height: 50px;
			background: url(../../../Content/images/data/top_bg.png) center no-repeat;
			background-size: 500px 50px;
			}

			.tv30-5 .tv-top h2 span {
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, #ff9900, #d9b593);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}



			.tv30-5 .tv-center {
			width: 94%;
			margin: 10px auto;
			padding: 0px;
			height: 260px;
			}

			.tv30-5 .tv-center .pull-left {
			position: relative;
			height: 300px;
			width: 37.3%;
			float: left;
			}

			.tv30-5 .tv-center .pull-left:nth-of-type(1) {
			width: 24.3%;
			padding-left:1%
			}
			.tv30-5 .data_cont p{font-size:9px}

			.tv30-5 .tv-center .pull-left:nth-of-type(2) {
			margin-right: 1%
			}

			.tv30-5 .tv-center .pull-left>div {
			height: 240px;
			width: 100%;
			position:inherit;
			top:0
			}

			.tv30-5 .left li img{
			height:14px
			}

			.tv30-5 .tv-center .pull-right {
			height: 300px;
			width: 60%;
			float: left;
			}

			.tv30-5 .tv-center .pull-right ul li {
			position: relative;
			width: 50%;
			float: left;
			height: 150px
			}

			.tv30-5 .tv-center .pull-right ul li>div {
			width: 100%;
			height: 100%;
			}

			.tv30-5 .tv-center .titp {
			position: absolute;
			left: 10px;
			top: 5px;
			color: #fff;
			}

			.tv30-5 .tv-center .legenddiv {
			position: absolute;
			right: 10px;
			top: 5px;
			color: #fff;
			font-size: 8px
			}

			.tv30-5 .tv-center .legenddiv .pie1 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #f90;
			border-radius: 50%;
			}

			.tv30-5 .tv-center .legenddiv .pie2 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #0061d0;
			border-radius: 50%;
			}

			.tv30-5 .tv-center .legenddiv .pie3 {
			vertical-align: middle;
			display: inline-block;
			width: 8px;
			height: 8px;
			background: #3fffea;
			border-radius: 50%;
			}


			.tv30-5 .tv-bottom {
			margin: auto;
			position:fixed;left:10px;right:10px;bottom:10px;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			border: 1px solid #222;
			padding: 0 20px;
			height: 160px;
			background: url(../../images/data/bottom_bg.png) no-repeat center bottom;
			background-size: 500px 1px
			}

			.tv30-5 .tv-bottom ul li {
			height: 160px;
			width: 33.3%;
			float: left;
			position: relative;
			}

			.tv30-5 .tv-bottom ul li p {
			position: absolute;
			left: 0;
			top: 5px;
			color: #fff;
			}

			.tv30-5 .tv-bottom ul li>div {
			width: 100%;
			height: 100%;
			top:0px;
			position:relative
			}

			.tv30-5 .top {
			width: 100%;
			height: 60px;
			position:inherit
			}

			.tv30-5 .top_box {
			width: 100%;
			height: 60px;
			top:50px;
			}

			/*.tv30-5 .shuju_box {
			width: 96%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 7px;
			}

			.tv30-5 .shuju_box .shuju {
			float: left;
			width: 13.2%;
			height: 55px;
			text-align: center;
			overflow: hidden;
			box-shadow: 0 0 30px 10px rgba(34, 34, 34, .8) inset;
			margin: 0 0.5%;
			border: 1px solid #222;
			}

			.tv30-5 .shuju_item {
			height: 65px;
			}

			.tv30-5 .shuju_item h2 {
			background-image: -webkit-linear-gradient(bottom, #3e8aec, #d9fcfd);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 30px;
			padding-bottom: 5px;
			padding-top: 5px;
			font-weight: 600;
			height: 35px;
			}

			.tv30-5 .shuju_item p {
			font-size: 14px;
			color: #f90;
			}*/



			.left li {
			float: left;
			width: 48%;
			margin-right: 0px;
			margin-bottom: 25px;
			}

			.data_cont h2 {
			font-size: 20px;
			color: #f90;
			margin-bottom: 5px;
			}

			.data_cont p {
			color: #fff;
			font-size: 12px;
			}

			.data_icon {
			background-image: url(../../../Content/images/data/data_icon.png);
			background-repeat: no-repeat;
			display: block;
			}

			.left li .data_icon {
			padding-left: 8px;
			margin-bottom: 10px;
			}

			.icon1 {
			width: 26px;
			height: 24px;
			background-position: 0 0;
			}

			.icon2 {
			width: 28px;
			height: 24px;
			background-position: -152px 0;
			}

			.icon3 {
			width: 23px;
			height: 24px;
			background-position: 0 -55px;
			}

			.icon4 {
			width: 28px;
			height: 24px;
			background-position: -155px -57px;
			}

			.icon5 {
			width: 38px;
			height: 24px;
			background-position: 0px -117px;
			}

			.icon6 {
			width: 24px;
			height: 24px;
			background-position: -156px -118px;
			}

			.icon7 {
			width: 25px;
			height: 24px;
			background-position: 0px -190px;
			}

			.icon8 {
			width: 24px;
			height: 24px;
			background-position: -156px -184px;
			}

			.gtp {
			background: #222222;
			color: #fff;
			display: block;
			width: 100%;
			height: 22px;
			line-height: 22px;
			text-indent: 10px;
			}

			.tv30-5 .spantitbox {
			color: #999;
			margin: 2px 0;
			}

			.tv30-5 .spantitbox span {
			display: inline-block;
			}

			.tv30-5 .spantitbox .ww1 {
			width: 30%;
			text-indent: 23px
			}

			.tv30-5 .spantitbox .ww2 {
			width: 15%
			}

			.tv30-5 .spantitbox .ww3 {
			width: 13%
			}

			.tv30-5 .spantitbox .ww4 {
			width: 20%
			}

			.tv30-5 .spantitbox .ww5 {
			width: 17%
			}



			.tv30-5 .contentspan {
			color: #fff
			}

			.tv30-5 .contentspan li {
			line-height: 20px;
			font-size:12px
			}

			.tv30-5 .contentspan span {
			display: inline-block;
			color: #fff
			}

			.tv30-5 .contentspan .ww1 {
			width: 30%;
			}

			.tv30-5 .contentspan .ww2 {
			width: 15%
			}

			.tv30-5 .contentspan .ww3 {
			width: 13%
			}

			.tv30-5 .contentspan .ww4 {
			width: 20%
			}

			.tv30-5 .contentspan .ww5 {
			width: 17%
			}


			.tv30-5 .spantitbox2 {
			color: #999;
			margin: 2px 0;
			}

			.tv30-5 .spantitbox2 span {
			display: inline-block;
			}

			.tv30-5 .spantitbox2 .ww1 {
			width: 35%;
			text-indent: 23px
			}

			.tv30-5 .spantitbox2 .ww2 {
			width: 15%
			}

			.tv30-5 .spantitbox2 .ww3 {
			width: 25%
			}

			.tv30-5 .spantitbox2 .ww4 {
			width: 30%
			}

			.tv30-5 .spantitbox2 .ww5 {
			width: 15%
			}

			.tv30-5 .contentspan2 {
			color: #fff
			}

			.tv30-5 .contentspan2 li {
			line-height: 20px;
			font-size:12px;
			}

			.tv30-5 .contentspan2 span {
			display: inline-block;
			color: #fff
			}

			.tv30-5 .contentspan2 .ww1 {
			width: 40%;
			text-overflow: ellipsis;
			white-space: nowrap;
			/* overflow: hidden; */
			}

			.tv30-5 .contentspan2 .ww2 {
			width: 10%
			}

			.tv30-5 .contentspan2 .ww3 {
			width: 25%
			}

			.tv30-5 .contentspan2 .ww4 {
			width: 30%
			}

			.tv30-5 .contentspan2 .ww5 {
			width: 15%
			}






			.onespan {
			margin-right: 3px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: red;
			color: #fff;
			text-align: center;
			line-height: 18px;
			}

			.twospan {
			margin-right: 3px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #ff9900;
			color: #fff;
			text-align: center;
			line-height: 18px;
			}

			.threespan {
			margin-right: 3px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #0072ff;
			color: #fff;
			text-align: center;
			line-height: 18px;
			}

			.spanbg {
			margin-right: 3px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #333333;
			color: #fff;
			text-align: center;
			line-height: 18px;
			}