* { padding: 0; margin: 0}
|
html, body { height: 100%; width: 100%;}
|
body { overflow: hidden; font-family: "微软雅黑"; font-size: 12px;}
|
@font-face {
|
font-family: pictos;
|
src: url('digifacewide.ttf');
|
}
|
|
.mCSB_scrollTools {
|
opacity: 0;
|
filter: "alpha(opacity=0)";
|
-ms-filter: "alpha(opacity=0)"
|
}
|
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
background-color: #22891e;
|
background-color: rgba(92, 182, 108, 0);
|
filter: "alpha(opacity=0)";
|
-ms-filter: "alpha(opacity=0)"
|
}
|
.tes {width: 100%; height: 100%; background-color: rgba(242, 242, 242, 0.5); position: fixed; left: 0; top: 0; text-align: center; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; display: none; z-index: 100000;}
|
.tes div img {margin-right: 5px;}
|
.tes div {font-size: 12px; color: #494A5F; word-wrap: break-word; position: absolute; top: 48%; left: 48%;}
|
|
.main-left{width:400px;height:calc(100% - 40px); position: absolute; top:16px; left:20px;}
|
.main-cen{width:calc(100% - 880px);height:calc(100% - 40px); position: absolute; top:16px; left:440px;}
|
.main-right{width:400px;height:calc(100% - 40px); position: absolute; top:16px;right:20px;}
|
|
@media (max-width: 1610px){
|
.main-left{width:390px;}
|
.main-cen{width:calc(100% - 860px); left:430px;}
|
.main-right{width:390px;}
|
}
|
|
@media (max-width: 1510px){
|
.main-left{width:380px;}
|
.main-cen{width:calc(100% - 840px); left:420px;}
|
.main-right{width:380px;}
|
}
|
@media (max-width: 1410px){
|
.main-left{width:370px;}
|
.main-cen{width:calc(100% - 820px); left:410px;}
|
.main-right{width:370px;}
|
}
|
@media (max-width: 1310px){
|
.main-left{width:360px;}
|
.main-cen{width:calc(100% - 800px); left:400px;}
|
.main-right{width:360px;}
|
}
|
|
.main-sketch-map{width:100%; border:1px solid #188488; position:relative; background:rgba(28, 47, 91, .1);}
|
.main-sketch-map:before, .main-sketch-map:after{content: ""; width:20px; height:20px; position: absolute; border-color:#1ad0ad; border-style: solid; border-width: 0px; border-top-width: 2px; top:-1px;}
|
.main-sketch-map:before{border-left-width:2px; left:-1px;}
|
.main-sketch-map:after{border-right-width:2px; right:-1px;}
|
|
.main-box{width:100%; border:1px solid #188488; position:relative; background:rgba(28, 47, 91, .1);}
|
.main-box:before, .main-box:after{content: ""; width:20px; height:20px; position: absolute; border-color:#1ad0ad; border-style: solid; border-width: 0px; border-top-width: 2px; top:-1px;}
|
.main-box:before{border-left-width:2px; left:-1px;}
|
.main-box:after{border-right-width:2px; right:-1px;}
|
|
/*.main-acreage{height:350px;}*/
|
.main-acreage{height:450px;}
|
/*.main-area-ratio{height:calc(100% - 378px);margin-top:26px;}*/
|
.main-area-ratio{height:calc(100% - 478px);margin-top:26px;}
|
.main-sketch-map{height:100%;}
|
.main-survey{height:calc(42% - 18px);}
|
.main-number{height:calc(25% - 18px);}
|
.main-proportion{height:calc(33% - 18px);}
|
.main-number, .main-proportion{margin-top:25px;}
|
|
@media (max-width: 1400px){
|
.main-acreage{height:calc(60% - 9px);}
|
.main-area-ratio{height:calc(40% - 18px);margin-top:25px;}
|
}
|
|
|
.main-title{ height: 29px; width: 130px; position: absolute; background-color: #065b86; border-top:1px solid #1ad0ad; border-bottom:1px solid #1ad0ad; top:-16px; left:50%; margin-left:-65px;}
|
.main-title span{width:100%; line-height:29px; color:#fff; text-align:center; display:block; position: absolute; z-index: 10;font-size: 14px;}
|
.main-title:after{ content: ''; position: absolute; background-color: #065b86; top: 4px; right: -11px; width: 20px;
|
height: 20px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-top: 1px solid #1ad0ad; border-right: 1px solid #1ad0ad;}
|
.main-title:before{content: ''; position: absolute; background-color: #065b86; top: 4px;left: -11px;width: 20px; height: 20px;
|
transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg);-o-transform: rotate(45deg); border-bottom: 1px solid #1ad0ad;border-left: 1px solid #1ad0ad;}
|
.main-acreage .main-title{width:220px;margin-left:-110px;}
|
.main-area-ratio .main-title{width:200px;margin-left:-100px;}
|
.main-survey .main-title{width:80px;margin-left:-40px;}
|
.main-number .main-title{width:100px;margin-left:-50px;}
|
.main-proportion .main-title{width:120px;margin-left:-60px;}
|
.main-title i{ font-style: normal; padding:0 5px; cursor: pointer;}
|
.main-title i.on{color:#0ecdae; font-weight: bold;}
|
|
.main-acreage-list{width:100%;height:calc(100% - 40px); margin-top:30px;}
|
.main-acreage-list ul{width:100%; height:100%;}
|
/*.main-acreage-list ul li{list-style: none;height:20px; width:100%;margin-bottom:9px;}*/
|
.main-acreage-list ul li{list-style: none;height:28px; width:100%;margin-bottom:9px;}
|
.main-acreage-list ul li:last-child{margin-bottom:0px;}
|
/*.main-acreage-list ul li b{width:26px; height:20px; display: block; float: left; text-align: center; line-height: 20px; background:rgba(40, 86, 116, .5); color:#fff; margin-left:10px; border-radius:4px;}*/
|
.main-acreage-list ul li b{width:26px; height:26px; display: block; float: left; text-align: center; line-height: 26px; background:rgba(40, 86, 116, .5); color:#fff; margin-left:10px; border-radius:4px;}
|
/*.main-acreage-list ul li label{width:60px; height:18px; display: block; float: left; text-align: center; line-height: 18px; color:#1ad0ad;}*/
|
.main-acreage-list ul li label{width:60px; height:25px; display: block; float: left; text-align: center; line-height: 25px; color:#1ad0ad; font-size: 14px;}
|
/*.main-acreage-list ul li .acreage-sdiler{width:170px;height:14px; margin-top:2px; display: block; float: left;}*/
|
.main-acreage-list ul li .acreage-sdiler{width:170px;height:24px; margin-top:2px; display: block; float: left;}
|
.main-acreage-list ul li span{width:100%; display:block; height:100%;}
|
.main-acreage-list ul li:nth-child(2) .acreage-sdiler{width:calc(72 * 1.7px);}
|
.main-acreage-list ul li:nth-child(3) .acreage-sdiler{width:calc(57 * 1.7px);}
|
.main-acreage-list ul li:nth-child(4) .acreage-sdiler{width:calc(27 * 1.7px);}
|
.main-acreage-list ul li:nth-child(5) .acreage-sdiler{width:calc(25 * 1.7px);}
|
.main-acreage-list ul li:nth-child(6) .acreage-sdiler{width:calc(24 * 1.7px);}
|
.main-acreage-list ul li:nth-child(7) .acreage-sdiler{width:calc(19 * 1.7px);}
|
.main-acreage-list ul li:nth-child(8) .acreage-sdiler{width:calc(6 * 1.7px);}
|
.main-acreage-list ul li:nth-child(9) .acreage-sdiler{width:calc(5 * 1.7px);}
|
.main-acreage-list ul li:nth-child(10) .acreage-sdiler{width:calc(4 * 1.7px);}
|
.main-acreage-list ul li:nth-child(11) .acreage-sdiler{width:calc(2 * 1.7px);}
|
/*.main-acreage-list ul li i{height:18px; float: left; line-height: 18px; color:#1f9292; margin-left:3px;font-style: normal;}*/
|
.main-acreage-list ul li i{height:25px; float: left; line-height: 25px; color:#1f9292; margin-left:3px;font-style: normal;font-size: 16px;}
|
@media only screen and (max-width: 1900px) {
|
.main-acreage-list ul li{height:25px;}
|
.main-acreage-list ul li b{height:25px; line-height: 25px;}
|
.main-acreage-list ul li label{height:22px;line-height: 22px;font-size: 12px;}
|
.main-acreage-list ul li .acreage-sdiler{height:18px;}
|
.main-acreage-list ul li i{height:22px;line-height: 22px;font-size: 12px;}
|
}
|
.main-acreage-list ul li .gradient{
|
background: -moz-linear-gradient(left, #0787de 0%, #62dce3 100%);
|
background: -webkit-gradient(linear, left, right, color-stop(0%,#0787de), color-stop(100%,#62dce3));
|
background: -webkit-linear-gradient(left, #0787de 0%,#62dce3 100%);
|
background: -o-linear-gradient(left, #0787de 0%,#62dce3 100%);
|
background: -ms-linear-gradient(left, #0787de 0%,#62dce3 100%);
|
background: linear-gradient(to right, #0787de 0%,#62dce3 100%);
|
}
|
.main-acreage-list ul li .gradient-all{
|
background: -moz-linear-gradient(left, #c31323 0%, #e4ab33 100%);
|
background: -webkit-gradient(linear, left, right, color-stop(0%,#c31323), color-stop(100%,#e4ab33));
|
background: -webkit-linear-gradient(left, #c31323 0%,#e4ab33 100%);
|
background: -o-linear-gradient(left, #c31323 0%,#e4ab33 100%);
|
background: -ms-linear-gradient(left, #c31323 0%,#e4ab33 100%);
|
background: linear-gradient(to right, #c31323 0%,#e4ab33 100%);
|
}
|
|
.main-area-ratio-con{width:100%; height:calc(100% - 12px); margin-top:12px;}
|
.main-survey-menu{width:98%; height:40px;float:left; padding-left:10px; position:absolute; top:10px; z-index: 100;}
|
.main-survey-echart{width:calc(100% - 0px); height:calc(100% - 20px); float:right; margin-top:20px;}
|
.main-survey-menu-spot{width:125px; height:20px; color:#fff; display:block;font-size: 12px;}
|
/*.main-survey-menu .main-survey-menu-spot:nth-child(1){float:left}
|
.main-survey-menu .main-survey-menu-spot:nth-child(2){float:right;}*/
|
.main-survey-menu-spot span{line-height: 34px; font-size: 12px;}
|
.main-survey-menu-spot span i{font-size: 12px;font-family: pictos; font-weight: bold; font-style: normal;}
|
.main-com{width:100%; height:100%;}
|
|
|
#areaRatio{display:none;}
|
/*#areaProportion{max-height:350px;}*/
|
|
.main-area-legend, .main-xy-legend{ margin-left:2%;margin-top:3%; color:#fff; overflow:hidden}
|
/*.main-area-legend{width:18%;}*/
|
/*.main-area-table{position:relative; width:100%; position: relative; top:50%; transform:translateY(-50%);margin-bottom:1px;}*/
|
.main-area-legend table{border:1px solid #89adb9; width:calc(100% - 2px); height:calc(100% - 2px); border-left:0px; border-bottom:0px; margin-left:2px; margin-top:2px;}
|
.main-area-legend table tr td{text-align: center; border-left:1px solid #89adb9; border-bottom:1px solid #89adb9; padding:2px 0px;}
|
.main-area-legend table span{width:8px; height:10px; display:inline-block;background:transparent; margin-right:2px;}
|
/*.main-xy-table{position:relative; width:100%;position: relative; top:50%; transform:translateY(-50%);margin-bottom:1px;}*/
|
.main-xy-legend table{border-top:1px solid #89adb9; border-right:1px solid #89adb9; width:100%;}
|
.main-xy-legend table tr td{text-align: center; border-left:1px solid #89adb9; border-bottom:1px solid #89adb9; padding:2px 0px;}
|
.main-xy-legend table span{width:8px; height:8px; display:inline-block;background:transparent; margin-right:2px;}
|
.areaProportion{
|
height:96%;
|
width:50%;
|
float:left;
|
margin-top:3%;
|
}
|
.main-area-legend{
|
margin-top: 6%;
|
}
|
#benefitEchart{
|
width: 100%;
|
}
|
/*.hp span{margin-left:-10px;}*/
|
.proportionBox{
|
float: right;
|
width: 50%;
|
transform: scale(0.88);
|
-moz-transform: scale(0.88);
|
}
|
@media only screen and (max-width: 1900px) {
|
.proportionBox{
|
transform: scale(0.88);
|
-moz-transform: scale(0.88);
|
}
|
.areaProportion{margin-top:4%;}
|
.main-area-legend{
|
margin-top: 5%;
|
}
|
}
|
@media only screen and (max-width: 1601px) {
|
.proportionBox{
|
transform: scale(0.68);
|
-moz-transform: scale(0.68);
|
}
|
.areaProportion{margin-top:1%;}
|
.main-area-legend{
|
margin-top: -6%;
|
}
|
}
|
@media only screen and (max-width: 1280px) {
|
.proportionBox{
|
transform: scale(0.84);
|
-moz-transform: scale(0.84);
|
}
|
.areaProportion{margin-top:3%;}
|
.main-area-legend{
|
margin-top: 3%;
|
}
|
}
|
.benefitBox{
|
position: absolute;
|
bottom: 205px;
|
transition: .2s linear;
|
display: none;
|
width: 250px;
|
background-color: #163f6c;
|
}
|
.benefitBox{
|
bottom: 22px;
|
background-color: #105671;
|
}
|
.benefitBox p{
|
text-align: right;
|
}
|
.benefitBox p img{
|
width: 30px;
|
cursor: pointer;
|
}
|
.benefitBox>div{
|
padding: 0 20px 20px 20px;
|
}
|
