div { box-sizing: border-box; } .clearfix { clear: both; } .container-header { width: 100%; height: 90px; line-height: 90px; text-align: center; box-sizing: border-box; } .container-header h3 { font-size: 40px; color: #fff; font-weight: 800; } .com-screen-content { width: 100%; height: auto; } .count-base, .count-resource, .count-topic { position: relative; padding: 20px; margin-top: 10px; box-sizing: border-box; } .count-base { margin-left: 90px; float: left; /*浮动*/ width: 36%; /* background-color:saddlebrown ; */ padding: 10px 3px; } .count-resource { margin-left: 10px; float: left; width: 28.8%; /* background-color: #034C6A; */ padding: 10px 3px; } .count-share { /* margin-left:10px; */ float: left; width: 100%; /* width:48.4%; */ height: 290px; background-size: cover; } * { margin: 0px; padding: 0px; font-family: '微软雅黑'; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } li { list-style: none } img { border: none } a { text-decoration: none; } .topRec_List dl, .maquee { width: 90%; overflow: hidden; margin: 0 auto; color: #f0ece2 } .topRec_List dd { float: left; text-align: left; color: #fff; font-size: 14px; background-color: #075871; padding-left: 20px; box-sizing: border-box; } .topRec_List dl dd:nth-child(1) { width: 30%; height: 40px; line-height: 40px; } .topRec_List dl dd:nth-child(2) { width: 40%; height: 40px; line-height: 40px; } .topRec_List dl dd:nth-child(3) { width: 30%; height: 40px; line-height: 40px; } .maquee { height: 195px; } .topRec_List ul { width: 100%; height: 195px; } .topRec_List li { width: 100%; height: 40px; line-height: 40px; text-align: left; font-size: 12px; color: #fff; border-bottom: 1px solid #536d7f; } .topRec_List li div { float: left; padding-left: 20px; box-sizing: border-box; } .topRec_List li div img { vertical-align: middle; } .topRec_List li div:nth-child(1) { width: 30%; } .topRec_List li div:nth-child(2) { width: 40%; } .topRec_List li div:nth-child(3) { width: 30%; } .test_List dl, .maquee { width: 90%; overflow: hidden; margin: 0 auto; color: #f0ece2 } .test_List dd { float: left; text-align: left; color: #fff; font-size: 14px; background-color: #075871; padding-left: 20px; box-sizing: border-box; } .test_List dl dd:nth-child(1) { width: 15%; height: 40px; line-height: 40px; } .test_List dl dd:nth-child(2) { width: 40%; height: 40px; line-height: 40px; } .test_List dl dd:nth-child(3) { width: 15%; height: 40px; line-height: 40px; } .test_List dl dd:nth-child(4) { width: 15%; height: 40px; line-height: 40px; } .test_List dl dd:nth-child(5) { width: 15%; height: 40px; line-height: 40px; } .maquee { height: 195px; } .test_List ul { width: 100%; height: 195px; } .test_List li { width: 100%; height: 40px; line-height: 40px; text-align: left; font-size: 12px; color: #fff; border-bottom: 1px solid #536d7f; } .test_List li div { float: left; padding-left: 20px; box-sizing: border-box; } .test_List li div img { vertical-align: middle; } .test_List li div:nth-child(1) { width: 15%; } .test_List li div:nth-child(2) { width: 40%; } .test_List li div:nth-child(3) { width: 15%; } .test_List li div:nth-child(4) { width: 15%; } .test_List li div:nth-child(5) { width: 15%; } body { background-image: url(../images/background.png); } .count-resource { margin-top: 15px; } .call_situation, .accept_statistics, .accept_channel, .key_word, .time_statistics, .test_rank { background-image: url(../images/model_background1.png); background-repeat: no-repeat; } .call_situation, .accept_statistics, .accept_channel, .key_word, .time_statistics, .test_rank { position: relative; margin-bottom: 25px; width: 100%; height: 290px; cursor: pointer; } .call_situation h3, .accept_statistics .title, .accept_channel h3, .key_word h3, .time_statistics h3, .test_rank h3 { position: absolute; left: 213px; top: 8px; color: #fff; z-index: 12; } .accept_statistics div { float: left; } .accept_statistics div h3 { background-image: url(../images/title_background.png); background-repeat: no-repeat; background-position: center; color: #fff; font-size: 14px; } .accept_channel div { position: absolute; bottom: 0; } .time_statistics>div, .test_rank>div { position: absolute; bottom: -75px; } #main4 { /* position: absolute; top: -45px; */ } .count-base { text-align: center; } .acceptance_state { background-image: url(../images/model_background2.png); background-size: 100% 100%; width: 109%; height: 140px; margin-top: 44px; margin-left: -70px; /* background-color: #03DA8D; */ position: relative; } .acceptance_state h3 { position: absolute; left: 300px; top: 8px; color: #fff; z-index: 12; } .acceptance_state ul { padding-top: 58px; padding-left: 25px; } .acceptance_state ul li { float: left; } .acceptance_state ul li div { width: 100%; } .acceptance_state ul li:nth-child(2), .acceptance_state ul li:nth-child(4), .acceptance_state ul li:nth-child(6) { background-image: url(../images/line.png); width: 2px; height: 54px; margin-top: 10px; } .acceptance_state ul li:nth-child(1), .acceptance_state ul li:nth-child(3), .acceptance_state ul li:nth-child(5), .acceptance_state ul li:nth-child(7) { width: 24%; } .num { font-size: 35px; font-weight: 700; color: #00f0ff; } .cont { color: #fff; font-weight: 700; font-size: 15px; } .map { background-image: url(../images/map.png); background-repeat: no-repeat; background-size: 100% 100%; /* background-color: #F0ECE2; */ margin-left: -33px; position: relative; } .lzmap { background-image: url(../images/map/linzhou.png); background-size: 100% 100%; /* width: 219px; */ /* height: 440px; */ width: 36%; height: 61%; opacity: 0; position: absolute; top: -1px; left: -6px; cursor: pointer; } .lzmap:hover { background-image: url(../images/map_active/linzhou.png); background-size: 100% 100%; width: 36%; height: 61%; opacity: 1; position: absolute; top: -1px; left: -6px; cursor: pointer; color: rgba(255, 255, 255, 0); } .aymap { background-image: url(../images/map/anyang.png); background-size: 100% 100%; width: 62.4%; height: 36.7%; opacity: 0; position: absolute; top: -6px; left: 137px; cursor: pointer; } .aymap:hover { background-image: url(../images/map_active/安anyang.png); background-size: 100% 100%; width: 62.4%; height: 36.7%; opacity: 1; position: absolute; top: -6px; left: 137px; cursor: pointer; color: rgba(255, 255, 255, 0); } .lamap { background-image: url(../images/map/longan.png); background-size: 100% 100%; /* width: 52px; height: 50px; */ width: 9%; height: 8.7%; opacity: 0; position: absolute; top: 119px; left: 289px; cursor: pointer; } .lamap:hover { background-image: url(../images/map_active/longan.png); background-size: 100% 100%; /* width: 52px; height: 50px; */ width: 9%; height: 8.7%; opacity: 1; position: absolute; top: 119px; left: 289px; cursor: pointer; color: rgba(255, 255, 255, 0); } .bgmap { background-image: url(../images/map/beiguan.png); background-size: 100% 100%; /* width: 50px; height: 47px; */ width: 9.9%; height: 6.9%; opacity: 0; position: absolute; top: 120px; left: 332px; cursor: pointer; } .bgmap:hover { background-image: url(../images/map_active/beiguan.png); background-size: 100% 100%; /* width: 50px; height: 47px; */ width: 9.9%; height: 6.9%; opacity: 1; position: absolute; top: 120px; left: 332px; cursor: pointer; color: rgba(255, 255, 255, 0); } .gxmap { background-image: url(../images/map/gaoxin.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 7.6%; height: 5.5%; opacity: 0; position: absolute; top: 160px; left: 328px; cursor: pointer; z-index: 5555; } .gxmap:hover { background-image: url(../images/map_active/gaoxin.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 7.6%; height: 5.5%; opacity: 1; position: absolute; top: 160px; left: 328px; cursor: pointer; color: rgba(255, 255, 255, 0); } .ydmap { background-image: url(../images/map/yindu.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 18%; height: 13.4%; opacity: 0; position: absolute; top: 167px; left: 238px; cursor: pointer; } .ydmap:hover { background-image: url(../images/map_active/yindu.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 20%; height: 14.4%; opacity: 1; position: absolute; top: 162px; left: 229px; cursor: pointer; color: rgba(255, 255, 255, 0); } .wfmap { background-image: url(../images/map/wenfeng.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 15.9%; height: 14%; opacity: 0; position: absolute; top: 159px; left: 339px; cursor: pointer; } .wfmap:hover { background-image: url(../images/map_active/wenfeng.png); background-size: 100% 100%; width: 15.9%; height: 14%; opacity: 1; position: absolute; top: 159px; left: 339px; cursor: pointer; color: rgba(255, 255, 255, 0); } .tymap { background-image: url(../images/map/tangyin.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 36%; height: 23%; opacity: 0; position: absolute; top: 221px; left: 288px; cursor: pointer; } .tymap:hover { background-image: url(../images/map_active/tangyin.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 36%; height: 23%; opacity: 1; position: absolute; top: 221px; left: 288px; cursor: pointer; color: rgba(255, 255, 255, 0); } .nhmap { background-image: url(../images/map/neihuang.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 30%; height: 45%; opacity: 0; position: absolute; top: 132px; right: 7px; cursor: pointer; } .nhmap:hover { background-image: url(../images/map_active/neihuang.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 30%; height: 45%; opacity: 1; position: absolute; top: 132px; right: 7px; cursor: pointer; color: rgba(255, 255, 255, 0); } .hxmap { background-image: url(../images/map/huaxian.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 46%; height: 43%; opacity: 0; position: absolute; top: 420px; right: -1px; cursor: pointer; } .hxmap:hover { background-image: url(../images/map_active/huaxian.png); background-size: 100% 100%; /* width: 43px; height: 33px; */ width: 46%; height: 43%; opacity: 1; position: absolute; top: 420px; right: -1px; cursor: pointer; color: rgba(255, 255, 255, 0); } .wrap { width: 180px; /* height: 200px; */ position: absolute; z-index: 100000; display: none; z-index: 1; } .dataCont { background-image: url(../images/reminder_box.png); background-size: 100% 100%; width: 100%; height: 130px; padding: 5px 10px; box-sizing: border-box; font-size: 12px; } .bar { width: 3px; height: 70px; margin: 0 auto; border-right: 2px dashed #ffe000; /* background-color: #005EFC; */ position: absolute; left: 82px; } .dataCont li { padding: 3px; } .dataCont li span { display: inline-block; } .lable { color: #fff; } .lable_num { color: #e4cc07; padding-right: 5px; } .bulletFrame{ display: none; position: absolute; top: 97px; left: 300px; width: 80%; height: 900px; z-index: 100000; padding: 10px 20px; box-sizing: border-box; /* background-color: #005EFC; */ background: url(../images/secondary_img/background.png) no-repeat; background-size:100% 100%; } .traffic_wrap{ width: 100%; } .head_name{ width: 100%; height: 80px; line-height: 80px; text-align: center; } .head_name h3{ display: inline-block; padding: 0 30px; color: #08fcff; font-size: 24px; font-weight: 700; } .data_info{ margin-bottom: 160px; } .traffic_wrap .data_info li{ background: url(../images/secondary_img/data_bac.png) no-repeat; background-size: 100% 100%; width: 16%; height: 125px; float: left; margin-left: 48px; padding: 5px 10px; box-sizing: border-box; } .traffic_wrap .data_info li h5{ padding: 10px; color: #fff; font-size: 14px; } .traffic_wrap .data_info li div span{ background: url(../images/secondary_img/num_bac.png) no-repeat; background-size: 100% 100%; display: inline-block; width: 19%; height: 62px; line-height: 65px; text-align: center; margin-left: 7px; color: #fff; font-weight: 600; font-size: 19px; } .close_icon{ position: absolute; top: 25px; right:25px; cursor: pointer; z-index: 1236; } .acceptance_wrap .data_info li{ width: 22%; height: 80px; line-height: 80px; float: left; margin-left: 41px; padding: 5px 10px; box-sizing: border-box; color: #fff; } .acceptance_wrap .data_info li span{ background: url(../images/secondary_img/num_bac2.png) no-repeat; background-size: 100% 100%; display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; margin-right: -10px; vertical-align: middle; } #channel{ position: absolute; top: -10px; left: 0; } .key_content,.pie_statistics{ padding: 20px; overflow: hidden; } .key_content .count-share { width: 500px; float: left; } .key_content .count-share{ background-color: #036372; padding: 24px 4px; } .key_content .count-share{ height: 750px; } .key_content .topRec_List dd{ background-color: #027c8e !important; } .key_content .topRec_List dd,.key_content .topRec_List li{ text-align: center; padding: 0 ; } .key_content .topRec_List li{ width: 90%; margin: 0 auto; height: 60px ; line-height: 60px !important; } .key_content .topRec_List dd{ width: 25% !important; height: 50px !important; line-height: 50px !important; } .key_content .topRec_List ul{ height: 750px; } .key_content .topRec_List ul li div{ width: 25% !important; height: 60px !important; line-height: 60px !important; padding: 0 ; } .pie_statistics{ margin-left: 520px; background-color:#036372; height: 750px; } .pie_statistics h3{ background: url(../images/secondary_img/titlt_icon.png) no-repeat; background-position: 50% 50%; width: 100%; text-align: center; font-size: 16px; font-weight: 600; color: #fff; } .time{ margin-top: 20px; } .time p{ float: left; margin-right: 20px; width: 45%; color: #fff; } .time p span{ color: #ffe000; } #keywordPie{ position: absolute; top: 75px; right: 0; }