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