296 lines
7.1 KiB
CSS
296 lines
7.1 KiB
CSS
.data_content{
|
|
/*overflow-x: hidden;*/
|
|
min-width: 1366px;
|
|
background-color: #081832;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.data_content .data_time{
|
|
width: 130px;
|
|
height: 35px;
|
|
background-color: #04425f;
|
|
line-height: 35px;
|
|
color:#fff;
|
|
font-size: 12.8px;
|
|
position: relative;
|
|
padding-left: 45px;
|
|
margin-bottom: 25px;
|
|
margin-left: 20px;
|
|
}
|
|
.data_content .data_time img{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 15px;
|
|
}
|
|
.data_content .data_info{
|
|
width: calc(100% - 40px);
|
|
margin-bottom: 40px;
|
|
height: 110px;
|
|
margin-left: 20px;
|
|
}
|
|
.data_content .data_info .info_1{
|
|
width: calc(40% - 25px);
|
|
height: 110px;
|
|
background-color: #034c6a;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.data_content .data_info .info_2{
|
|
width: calc(31% - 25px);
|
|
height: 110px;
|
|
background-color: #034c6a;
|
|
|
|
}
|
|
|
|
.data_content .data_info .info_3{
|
|
width: calc(31% - 25px);
|
|
height: 110px;
|
|
background-color: #034c6a;
|
|
}
|
|
.data_content .data_info>div>div{
|
|
height: 110px;
|
|
position: relative;
|
|
}
|
|
.data_content .data_info>div.info_1>div{
|
|
width: 33.333%;
|
|
}
|
|
.data_content .data_info>div.info_2>div,
|
|
.data_content .data_info>div.info_3>div{
|
|
width: 50%;
|
|
}
|
|
.data_content .data_info>div>div>img{
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 15px;
|
|
}
|
|
.data_content .data_info>div>div>div{
|
|
margin-left:65px;
|
|
margin-top: 23px;
|
|
}
|
|
.data_content .data_info>div.info_2>div>div{
|
|
margin-left: 70px;
|
|
margin-top: 23px;
|
|
}
|
|
.data_content .data_info>div>div>div>p:nth-child(1){
|
|
color:#fff;
|
|
font-size: 12.8px;
|
|
/*font-weight: 600;*/
|
|
}
|
|
.data_content .data_info>div>div>div>p:nth-child(2){
|
|
font-weight: 600;
|
|
font-size: 28px;
|
|
color:#ffff43;
|
|
}
|
|
.data_content .data_info>div.info_2>div>div>p:nth-child(2){
|
|
font-weight: 600;
|
|
font-size: 28px;
|
|
color:#25f3e6;
|
|
}
|
|
.data_content .data_info>div.info_3>div>div>p:nth-child(2){
|
|
font-weight: 600;
|
|
font-size: 28px;
|
|
color:#ff4e4e;
|
|
}
|
|
|
|
.data_content .data_main{
|
|
width: calc(100% - 40px);
|
|
margin-bottom: 40px;
|
|
height: 625px;
|
|
margin-left: 20px;
|
|
}
|
|
.data_content .data_main .main_left{
|
|
width: calc(26% - 25px);
|
|
margin-right: 25px;
|
|
}
|
|
.data_content .data_main .main_left div{
|
|
width: 100%;
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
/*box-shadow: 0px 0px 10px #034c6a inset;*/
|
|
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
|
0px -10px 15px #034c6a inset, /*上边阴影*/
|
|
10px 0px 15px #034c6a inset, /*右边阴影*/
|
|
0px 10px 15px #034c6a inset;
|
|
position: relative;
|
|
}
|
|
.data_content .data_main .main_left div.left_1{
|
|
background: url("../img/chart_1.png") no-repeat center;
|
|
}
|
|
.data_content .data_main .main_left div.left_2{
|
|
background: url("../img/chart_2.png") no-repeat center;
|
|
}
|
|
.data_content .data_main .main_left div:nth-child(1){
|
|
margin-bottom: 50px;
|
|
}
|
|
.data_content .data_main .main_left div .main_title{
|
|
width: 180px;
|
|
height: 35px;
|
|
line-height: 33px;
|
|
background-color: #034c6a;
|
|
border-radius: 18px;
|
|
position: absolute;
|
|
top: -17px;
|
|
left:50%;
|
|
margin-left: -90px;
|
|
color:#fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
padding-left: 45px;
|
|
}
|
|
.data_content .data_main .main_left div .main_title img{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 20px;
|
|
}
|
|
|
|
|
|
.data_content .data_main .main_center{
|
|
width: calc(50% - 25px);
|
|
height: 610px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
|
0px -10px 15px #034c6a inset, /*上边阴影*/
|
|
10px 0px 15px #034c6a inset, /*右边阴影*/
|
|
0px 10px 15px #034c6a inset;
|
|
position: relative;
|
|
background: url("../img/chart_map.png") no-repeat ;
|
|
}
|
|
.data_content .data_main .main_center .main_title{
|
|
width: 180px;
|
|
height: 35px;
|
|
line-height: 33px;
|
|
background-color: #034c6a;
|
|
border-radius: 18px;
|
|
position: absolute;
|
|
top: -17px;
|
|
left:50%;
|
|
margin-left: -90px;
|
|
color:#fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
padding-left: 45px;
|
|
}
|
|
.data_content .data_main .main_center .main_title img{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 20px;
|
|
}
|
|
|
|
.data_content .data_main .main_right{
|
|
width: calc(25.5% - 25px);
|
|
height: 110px;
|
|
}
|
|
.data_content .data_main .main_right div{
|
|
width: 100%;
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
|
0px -10px 15px #034c6a inset, /*上边阴影*/
|
|
10px 0px 15px #034c6a inset, /*右边阴影*/
|
|
0px 10px 15px #034c6a inset;
|
|
position: relative;
|
|
}
|
|
.data_content .data_main .main_right div.right_1{
|
|
background: url("../img/chart_3.png") no-repeat center;
|
|
}
|
|
.data_content .data_main .main_right div.right_2{
|
|
background: url("../img/chart_4.png") no-repeat center;
|
|
}
|
|
.data_content .data_main .main_right div:nth-child(1){
|
|
margin-bottom: 50px;
|
|
}
|
|
.data_content .data_main .main_right div .main_title{
|
|
width: 180px;
|
|
height: 35px;
|
|
line-height: 33px;
|
|
background-color: #034c6a;
|
|
border-radius: 18px;
|
|
position: absolute;
|
|
top: -17px;
|
|
left:50%;
|
|
margin-left: -90px;
|
|
color:#fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
padding-left: 45px;
|
|
}
|
|
.data_content .data_main .main_right div .main_title img{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 20px;
|
|
}
|
|
|
|
|
|
.data_content .data_bottom{
|
|
width: calc(100% - 40px);
|
|
height: 280px;
|
|
margin-left: 20px;
|
|
/*background-color: yellowgreen;*/
|
|
}
|
|
.data_content .data_bottom div{
|
|
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
|
0px -10px 15px #034c6a inset, /*上边阴影*/
|
|
10px 0px 15px #034c6a inset, /*右边阴影*/
|
|
0px 10px 15px #034c6a inset;
|
|
position: relative;
|
|
}
|
|
.data_content .data_bottom .bottom_1{
|
|
width: calc(26% - 25px);
|
|
height: 280px;
|
|
margin-right: 25px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
background: url("../img/chart_5.png") no-repeat;
|
|
}
|
|
.data_content .data_bottom .bottom_2{
|
|
width: calc(24.9% - 25px);
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
margin-right: 28px;
|
|
background: url("../img/chart_6.png") no-repeat;
|
|
}
|
|
.data_content .data_bottom .bottom_3{
|
|
width: calc(24.9% - 25px);
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
margin-right: 25px;
|
|
background: url("../img/chart_7.png") no-repeat;
|
|
}
|
|
.data_content .data_bottom .bottom_4{
|
|
width: calc(25.3% - 25px);
|
|
height: 280px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #034c6a;
|
|
background: url("../img/chart_8.png") no-repeat;
|
|
}
|
|
.data_content .data_bottom div .main_title{
|
|
width: 220px;
|
|
height: 35px;
|
|
line-height: 33px;
|
|
background-color: #034c6a;
|
|
border-radius: 18px;
|
|
position: absolute;
|
|
top: -17px;
|
|
left:50%;
|
|
margin-left: -110px;
|
|
color:#fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
padding-left: 45px;
|
|
}
|
|
.data_content .data_bottom div .main_title img{
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 20px;
|
|
}
|
|
|