346 lines
7.2 KiB
CSS
346 lines
7.2 KiB
CSS
/* 顶部 */
|
|
.block_top_ld {
|
|
width: 1920px;
|
|
height: 94px;
|
|
background: url(/public/svg/topbackLD.svg) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
opacity: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.block_top_title {
|
|
width: 651px;
|
|
height: 77px;
|
|
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 18px;
|
|
}
|
|
.block_top_time {
|
|
position:absolute;
|
|
right:22px;
|
|
top:54px;
|
|
color:#fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
.block_top_time .time-title {
|
|
display:inline-block;
|
|
width:113px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
font-size: 42px;
|
|
text-align: center;
|
|
}
|
|
.block_top_time .time-content {
|
|
display:inline-block;
|
|
font-size: 18px;
|
|
width:95px;
|
|
height: 42px;
|
|
padding-left:12px;
|
|
}
|
|
/* 中部 */
|
|
.block_bottom {
|
|
width: 1920px;
|
|
height: 966px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.group_left {
|
|
width: 402px;
|
|
height: 966px;
|
|
margin: 0 0 0 24px;
|
|
}
|
|
|
|
.group_center {
|
|
width: 1041px;
|
|
height: 966px;
|
|
margin: 0 0 0 15px;
|
|
}
|
|
|
|
.group_right {
|
|
width: 401px;
|
|
height: 966px;
|
|
margin-left: 15px;
|
|
}
|
|
.ld_left_up {
|
|
width: 402px;
|
|
height: 599px;
|
|
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
}
|
|
.ld_left_up_inner {
|
|
width: 360px;
|
|
height: 236px;
|
|
background: url(../../../public/png/rect/ld_left_up_innerbox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin:0 auto;
|
|
}
|
|
.ld_left_up_inner .num_contrast {
|
|
height:113px;
|
|
padding:20px 18px 0px 29px;
|
|
color:#fff;
|
|
}
|
|
.ld_left_up_inner .num_contrast p{
|
|
margin: 0px;
|
|
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
|
}
|
|
.ld_left_up_inner .num_contrast .num_contrast_right {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.ld_left_down {
|
|
width: 402px;
|
|
height: 332px;
|
|
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-top: 14px;
|
|
position: relative;
|
|
}
|
|
.ld_left_down .top_legend {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
position: absolute;
|
|
left:120px;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon1{
|
|
margin-right: 10px;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon2{
|
|
margin-right: 14px;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon1:before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 5px;
|
|
border-radius: 2px;
|
|
background: #73F8E0;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon2:before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 5px;
|
|
border-radius: 2px;
|
|
background: #497EFF;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon3 {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-right: 8px;
|
|
border-radius: 4px;
|
|
background: #73F8E0;
|
|
position:relative;
|
|
}
|
|
.ld_left_down .top_legend .chart_legend_icon3:before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 16px;
|
|
height:2px;
|
|
background: #73F8E0;
|
|
position:absolute;
|
|
top:3px;
|
|
left:-4px;
|
|
}
|
|
.ld_center_up {
|
|
width: 1041px;
|
|
height: 599px;
|
|
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
}
|
|
.ld_center_down {
|
|
width: 1041px;
|
|
height: 332px;
|
|
margin-top: 17px;
|
|
}
|
|
.ld_center_down_inner {
|
|
width: 337px;
|
|
height: 329px;
|
|
background: url(../../../public/png/rect/ld_center_down.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
}
|
|
.ld_center_down .ld_left-box, .ld_center_down .ld_center-box {
|
|
margin-right: 15px;
|
|
position: relative;
|
|
}
|
|
.ld_right_up {
|
|
width: 402px;
|
|
height: 599px;
|
|
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
}
|
|
.ld_right_down {
|
|
width: 402px;
|
|
height: 332px;
|
|
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin-top: 14px;
|
|
position: relative;
|
|
}
|
|
.ld_right_up .ld_right_up_box {
|
|
width: 358px;
|
|
height:160px;
|
|
background: url(../../../public/png/rect/ld_left_up_innerbox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
margin:0 auto 20px;
|
|
}
|
|
.ld_right_up .ld_right_up_box .ld_right_up_box1 {
|
|
width:100%;
|
|
height: 80px;
|
|
color: #fff;
|
|
padding:12px 20px;
|
|
}
|
|
.ld_right_up .ld_right_up_box .ld_right_up_box1 p {
|
|
margin:0;
|
|
letter-spacing:2px;
|
|
font-size:20px;
|
|
}
|
|
.ld_right_up_img {
|
|
position:relative;
|
|
left:2px;
|
|
top:2px;
|
|
}
|
|
/* 三维页面部分 */
|
|
.ld_center_up .model_name {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
z-index: 1000;
|
|
}
|
|
.ld_center_up .model_info {
|
|
position: absolute;
|
|
left: 100px;
|
|
bottom: 0px;
|
|
z-index: 1000;
|
|
width: 841px;
|
|
height: 62px;
|
|
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.ld_center_up .model_info .reset_btn {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 40px;
|
|
width: 140px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.ld_center_up .model_info .title {
|
|
display: inline-block;
|
|
width: 361px;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
color: #fff;
|
|
letter-spacing: 5px;
|
|
position: absolute;
|
|
left: 241px;
|
|
bottom: 10px;
|
|
}
|
|
.ld_center_up .eq_detail_info {
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
z-index: 1002;
|
|
width: 240px;
|
|
height: 180px;
|
|
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
padding: 15px 0 0 15px;
|
|
}
|
|
.ld_center_up .eq_detail_info .left_name {
|
|
display: inline-block;
|
|
width: 95px;
|
|
height: 28px;
|
|
text-align: right;
|
|
font-size: 18px;
|
|
}
|
|
.ld_center_up .eq_detail_info .right_value {
|
|
display: inline-block;
|
|
height: 28px;
|
|
font-size: 18px;
|
|
}
|
|
.ld_center_up .eq_info {
|
|
position: absolute;
|
|
z-index: 1002;
|
|
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
padding: 10px 15px;
|
|
}
|
|
.ld_center_up .eq_info .eq_info_inner {
|
|
height: 24px;
|
|
font-size: 17px;
|
|
white-space: nowrap;
|
|
}
|
|
.ld_center_up .model_top_container {
|
|
width:936px;
|
|
height:100px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 45px;
|
|
z-index: 1002;
|
|
text-align: center;
|
|
}
|
|
.ld_center_up .model_top_container .model_top_style1 {
|
|
display: inline-block;
|
|
width:203px;
|
|
}
|
|
.model_top_style1 .model_top_num {
|
|
width:100%;
|
|
height:65px;
|
|
line-height: 65px;
|
|
font-size: 38px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
background: url(./../assets/blue-box.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
.model_top_style2 .model_top_num {
|
|
width:100%;
|
|
height:65px;
|
|
line-height: 65px;
|
|
font-size: 38px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
background: url(./../assets/yellow-box.png) 100% no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
.model_top_style1 .model_top_text {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #00C8F7;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
}
|
|
.model_top_style2 .model_top_text {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #FFB625;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
|
|
}
|
|
.ld_center_up .model_top_container .model_top_style2 {
|
|
display: inline-block;
|
|
width:261px;
|
|
} |