parent
b104fcd73f
commit
69bfede44c
13 changed files with 918 additions and 219 deletions
@ -0,0 +1,578 @@ |
|||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.canvas { |
||||||
|
z-index: 0; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: .7; |
||||||
|
} |
||||||
|
.fl { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.fr { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
.table { |
||||||
|
margin-top: 25px; |
||||||
|
/deep/.el-table { |
||||||
|
&, tr, th { |
||||||
|
color: #fff; |
||||||
|
background-color: transparent !important; |
||||||
|
} |
||||||
|
tr:nth-child(even) { |
||||||
|
background-color: #072951; |
||||||
|
box-shadow: inset -10px 0 15px #2c58a6, inset 10px 0 15px #2c58a6; |
||||||
|
} |
||||||
|
tr:hover { |
||||||
|
background: transparent !important; |
||||||
|
td { |
||||||
|
background-color: transparent !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
width: 100%; |
||||||
|
padding-top: 30px; |
||||||
|
color:#333; |
||||||
|
background: url('../../assets/img/screen/screen1.jpg') no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
.full { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
top: 20px; |
||||||
|
right: 30px; |
||||||
|
cursor: pointer; |
||||||
|
transition: .5s; |
||||||
|
&:hover { |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.c-text { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
font-size: 60px; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
} |
||||||
|
.charts { |
||||||
|
display: flex; |
||||||
|
.chart { |
||||||
|
width: 50%; |
||||||
|
height: 220px; |
||||||
|
} |
||||||
|
} |
||||||
|
/*header开始*/ |
||||||
|
.header{ |
||||||
|
z-index: 2; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
padding:0 20px; |
||||||
|
} |
||||||
|
.bg_header{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
background: url(../../assets/img/screen/screen2.png) no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
.header>.header_logo{ |
||||||
|
padding:18px 10px 10px 0px; |
||||||
|
} |
||||||
|
.header>.header_logo>a{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header>.header_logo>a>img{ |
||||||
|
width:260px; |
||||||
|
} |
||||||
|
|
||||||
|
.header>.header_nav{ |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li{ |
||||||
|
float: left; |
||||||
|
margin-right: 6px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a{ |
||||||
|
display: block; |
||||||
|
height: 80px; |
||||||
|
padding:0 10px 0 30px; |
||||||
|
line-height: 80px; |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a:hover{ |
||||||
|
border-bottom: 4px solid #4b8df8; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>img{ |
||||||
|
float: left; |
||||||
|
position: absolute; |
||||||
|
top: 33px; |
||||||
|
left:10px; |
||||||
|
} |
||||||
|
.header>.header_nav>ul>li>a.nav_current{ |
||||||
|
border-bottom: 4px solid #4b8df8; |
||||||
|
} |
||||||
|
|
||||||
|
.header>.header_myself{ |
||||||
|
width: 90px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.header>.header_myself>p{ |
||||||
|
color:#fff; |
||||||
|
font-size: 13px; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.header>.header_myself>a{ |
||||||
|
color:#fff; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
/*content 开始*/ |
||||||
|
|
||||||
|
.content{ |
||||||
|
margin: 20px; |
||||||
|
width: calc(100% - 40px); |
||||||
|
} |
||||||
|
.content>.content_title{ |
||||||
|
width: 100%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #4b8df8; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.content>.content_title>p{ |
||||||
|
color:#fff; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.content>.content_title>img{ |
||||||
|
margin: 10px 10px 0px 10px; |
||||||
|
} |
||||||
|
.content>.content_main{ |
||||||
|
min-width: 1366px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div{ |
||||||
|
margin-right: 25px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div>label{ |
||||||
|
width: 80px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.content>.content_main>.content_search>div>select, |
||||||
|
.content>.content_main>.content_search>div>input |
||||||
|
{ |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table{ |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table>table{ |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_table>table th:nth-child(1), |
||||||
|
.content>.content_main>.content_table>table td:nth-child(1){ |
||||||
|
width: 50px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.content>.content_main>.content_page>span { |
||||||
|
font-size: 12.8px; |
||||||
|
margin-top: 7px; |
||||||
|
} |
||||||
|
.content>.content_main>.content_page>select{ |
||||||
|
width: 70px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
/*content 结束*/ |
||||||
|
|
||||||
|
.t_title{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
font-size: 2.5em; |
||||||
|
line-height: 80px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#chart_map{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.t_show{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
border-radius: 2px; |
||||||
|
background: #2C58A6; |
||||||
|
padding: 2px 5px; |
||||||
|
color: #fff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.linshi_zdy{ |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: 450px; |
||||||
|
} |
||||||
|
.linshi_zdy li{ |
||||||
|
width: 150px; |
||||||
|
font-size: 16px; |
||||||
|
padding: 3px 8px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.linshi_zdy span{ |
||||||
|
display: block; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
float: left; |
||||||
|
border-radius: 50%; |
||||||
|
margin-top: 3px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.linshi_zdy li:first-child{ |
||||||
|
color: #ff0000; |
||||||
|
} |
||||||
|
.linshi_zdy li:first-child span{ |
||||||
|
background: #ff0000; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(2){ |
||||||
|
color: #9cff00; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(2) span{ |
||||||
|
background: #9cff00; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(3){ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(3) span{ |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(4){ |
||||||
|
color: #f4a100; |
||||||
|
} |
||||||
|
.linshi_zdy li:nth-child(4) span{ |
||||||
|
background: #f4a100; |
||||||
|
} |
||||||
|
.data_content{ |
||||||
|
padding-top: 20px; |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
.data_content .data_time{ |
||||||
|
width: 340px; |
||||||
|
height: 35px; |
||||||
|
background-color: #2C58A6; |
||||||
|
line-height: 35px; |
||||||
|
color: #fff; |
||||||
|
font-size: 12.8px; |
||||||
|
position: relative; |
||||||
|
margin-bottom: 25px; |
||||||
|
margin-left: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.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: 40%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_1>.text_1{ |
||||||
|
width: calc(100% - 25px); |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info .info_2{ |
||||||
|
width: 31%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_2>.text_2{ |
||||||
|
width: calc(100% - 25px); |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info .info_3{ |
||||||
|
width: 29%; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
.data_content .data_info .info_3>.text_3{ |
||||||
|
width:100%; |
||||||
|
background-color: #034c6a; |
||||||
|
height: 110px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_info>div.info_1>.text_1>div{ |
||||||
|
width: 33.333%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2>div>div, |
||||||
|
.data_content .data_info>div.info_3>div>div{ |
||||||
|
width: 50%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.data_content .data_info img{ |
||||||
|
position: absolute; |
||||||
|
top: 35px; |
||||||
|
left: 15px; |
||||||
|
} |
||||||
|
.data_content .data_info>div>div>div>div{ |
||||||
|
margin-left:65px; |
||||||
|
margin-top: 23px; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2>div>div>div{ |
||||||
|
margin-left: 70px; |
||||||
|
margin-top: 23px; |
||||||
|
} |
||||||
|
.data_content .data_info p:nth-child(1){ |
||||||
|
color:#fff; |
||||||
|
font-size: 12.8px; |
||||||
|
} |
||||||
|
.data_content .data_info p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#ffff43; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_2 p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#25f3e6; |
||||||
|
} |
||||||
|
.data_content .data_info>div.info_3 p:nth-child(2){ |
||||||
|
font-weight: 600; |
||||||
|
font-size: 28px; |
||||||
|
color:#ff4e4e; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main{ |
||||||
|
width: calc(100% - 40px); |
||||||
|
margin-bottom: 40px; |
||||||
|
height: 615px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left{ |
||||||
|
width: 24%; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left>div{ |
||||||
|
width: 100%; |
||||||
|
height: 280px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_main .main_left div:nth-child(1){ |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
.main_title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 35px; |
||||||
|
line-height: 33px; |
||||||
|
background-color: #2C58A6; |
||||||
|
border-radius: 18px; |
||||||
|
position: absolute; |
||||||
|
top: -17px; |
||||||
|
left: 50%; |
||||||
|
color:#fff; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
white-space: nowrap; |
||||||
|
padding: 0 20px; |
||||||
|
z-index: 1000; |
||||||
|
text-align: center; |
||||||
|
transform: translateX(-50%); |
||||||
|
img { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_center{ |
||||||
|
width: 52%; |
||||||
|
height: 610px; |
||||||
|
|
||||||
|
} |
||||||
|
.data_content .data_main .main_center .center_text{ |
||||||
|
width: calc(100% - 50px); |
||||||
|
height: 350px; |
||||||
|
margin-left: 25px; |
||||||
|
margin-right: 25px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0px 0px 6px #2C58A6; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.l_t_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
left: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.t_l_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
left: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.t_line_box { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.t_line_box i{ |
||||||
|
background-color: #4788fb; |
||||||
|
box-shadow: 0px 0px 10px #4788fb; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.t_r_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
right: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.r_t_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
right: -3px; |
||||||
|
top: -3px; |
||||||
|
} |
||||||
|
.l_b_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
left: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.b_l_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
left: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.r_b_line{ |
||||||
|
width: 5px; |
||||||
|
height: 24px; |
||||||
|
right: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
.b_r_line{ |
||||||
|
height: 5px; |
||||||
|
width: 26px; |
||||||
|
right: -3px; |
||||||
|
bottom: -3px; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_right{ |
||||||
|
width: 24%; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right>div{ |
||||||
|
width: 100%; |
||||||
|
height: 280px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_1 .choice{ |
||||||
|
position: absolute; |
||||||
|
top: 25px; |
||||||
|
right: 30px; |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_1 .choice label{ |
||||||
|
color:#fff; |
||||||
|
} |
||||||
|
|
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text { |
||||||
|
width: 18%; |
||||||
|
color:#fff; |
||||||
|
text-align: center; |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p{ |
||||||
|
margin-top: 21px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p img{ |
||||||
|
margin-right: 5px; |
||||||
|
margin-top: -4px; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){ |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .text_sum{ |
||||||
|
text-align: center; |
||||||
|
color:#ffff43; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.data_content .data_main .main_right div:nth-child(1){ |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
.data_content .data_bottom{ |
||||||
|
width: calc(100% - 40px); |
||||||
|
height: 310px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_1{ |
||||||
|
width: 24%; |
||||||
|
height: 310px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_center{ |
||||||
|
width: 52%; |
||||||
|
height: 310px; |
||||||
|
padding: 0 25px; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_2{ |
||||||
|
width: 100%; |
||||||
|
height: 310px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_3{ |
||||||
|
width: calc(50% - 40px); |
||||||
|
height: 310px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
margin-left:25px; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
.data_content .data_bottom .bottom_4{ |
||||||
|
width: 24%; |
||||||
|
height: 310px; |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #2C58A6; |
||||||
|
box-shadow: 0 0 10px #2C58A6; |
||||||
|
} |
||||||
|
|
||||||
|
.t_btn8,.t_btn2,.t_btn3{ |
||||||
|
position: relative; |
||||||
|
z-index: 100; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.table_zdy a{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 387 B |
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 419 B |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 388 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 388 B |
|
After Width: | Height: | Size: 225 B |
Loading…
Reference in new issue