|
|
|
@ -1,4 +1,5 @@ |
|
|
|
@charset "utf-8"; |
|
|
|
|
|
|
|
/* CSS Document */ |
|
|
|
|
|
|
|
|
|
|
|
@ -7,38 +8,52 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
color: rgba(255, 255, 255, .8); |
|
|
|
font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
outline: none; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
a, a:focus { |
|
|
|
color: rgba(255, 255, 255, .8); |
|
|
|
} |
|
|
|
|
|
|
|
a:hover { |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
} |
|
|
|
|
|
|
|
ul, ol, li { |
|
|
|
list-style: outside none none; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
border: 0 none; |
|
|
|
} |
|
|
|
|
|
|
|
table { |
|
|
|
border-collapse: collapse; |
|
|
|
} |
|
|
|
|
|
|
|
hr { |
|
|
|
margin: 10px 0; |
|
|
|
border: 0; |
|
|
|
border-top: 1px solid #eee; |
|
|
|
height: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.clearfix::before, .clearfix::after { |
|
|
|
content: '.'; |
|
|
|
display: block; |
|
|
|
@ -50,12 +65,14 @@ hr { |
|
|
|
height: 0; |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
|
|
|
|
html, body { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
font-size: 14px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_all { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -64,37 +81,43 @@ html, body { |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_left, .wrap_right, .wrap_cent, .wrap_bottom { |
|
|
|
position: absolute; |
|
|
|
top: 1%; |
|
|
|
left: 0.5%; |
|
|
|
z-index: 99; |
|
|
|
margin: 0; |
|
|
|
height: 97%; |
|
|
|
height: 98%; |
|
|
|
width: 20.5%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_right { |
|
|
|
left: auto; |
|
|
|
right: 0.5%; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_cent { |
|
|
|
left: 20%; |
|
|
|
width: 60%; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_bottom { |
|
|
|
top: auto; |
|
|
|
bottom: 2%; |
|
|
|
bottom: 1%; |
|
|
|
left: 21.5%; |
|
|
|
width: 57%; |
|
|
|
height: 24%; |
|
|
|
height: 24.5%; |
|
|
|
} |
|
|
|
|
|
|
|
.cont_left { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(16, 46, 112, .3); |
|
|
|
background: rgba(11, 59, 145, .6); |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.select_set { |
|
|
|
float: left; |
|
|
|
margin: 0.5% 0.5% 0.6% 5%; |
|
|
|
@ -102,11 +125,13 @@ html, body { |
|
|
|
background: url(../images/icon_posit.png) no-repeat left; |
|
|
|
background-size: auto 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.select_item { |
|
|
|
margin: 0 0 0 5px; |
|
|
|
font-size: 1.2rem; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.select_item > label { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
@ -116,11 +141,13 @@ html, body { |
|
|
|
line-height: 1.75; |
|
|
|
font-weight: 500; |
|
|
|
background: rgba(59, 145, 253, 0.12); |
|
|
|
background: linear-gradient(to top, transparent 0, rgba(59, 145, 253, 0.4), rgba(59, 145, 253, 0.05)); |
|
|
|
letter-spacing: 0; |
|
|
|
text-align: center; |
|
|
|
border-radius: 6px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.select_item > label > a { |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
@ -128,6 +155,7 @@ html, body { |
|
|
|
width: 18px; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.select_item > label > a::after { |
|
|
|
position: absolute; |
|
|
|
top: 0.45rem; |
|
|
|
@ -140,6 +168,7 @@ html, body { |
|
|
|
font-family: "FontAwesome"; |
|
|
|
font-size: 1.25rem; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn { |
|
|
|
float: right; |
|
|
|
margin: 0.45% 5% 2%; |
|
|
|
@ -149,15 +178,18 @@ html, body { |
|
|
|
line-height: 2; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn a { |
|
|
|
position: relative; |
|
|
|
margin: 3% 3%; |
|
|
|
padding-left: 2rem; |
|
|
|
opacity: .8; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn a:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn a::before { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -168,10 +200,12 @@ html, body { |
|
|
|
background: url(../images/icon_dept50.png) no-repeat; |
|
|
|
background-size: 100% auto; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn a:last-child::before { |
|
|
|
background: url(../images/icon_dist50.png) no-repeat; |
|
|
|
background-size: 100% auto; |
|
|
|
} |
|
|
|
|
|
|
|
.link_btn a::after { |
|
|
|
position: absolute; |
|
|
|
top: -0.35rem; |
|
|
|
@ -182,6 +216,7 @@ html, body { |
|
|
|
font-size: 1.25rem; |
|
|
|
opacity: .75; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -189,11 +224,13 @@ html, body { |
|
|
|
height: 8rem; |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box .count_item { |
|
|
|
display: flex; |
|
|
|
min-width: 37.5%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box .count_item .count_tit { |
|
|
|
position: relative; |
|
|
|
width: 30%; |
|
|
|
@ -201,6 +238,7 @@ html, body { |
|
|
|
background: url(../images/icon_data2.png) no-repeat; |
|
|
|
background-size: auto 80%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box .count_tit label { |
|
|
|
position: absolute; |
|
|
|
top: 5.65rem; |
|
|
|
@ -215,8 +253,9 @@ html, body { |
|
|
|
font-size: 1.25rem; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.count_num_all { |
|
|
|
background-image: linear-gradient(to right, #f7fbfd, #26bef9); |
|
|
|
background-image: linear-gradient(to right, #d2f5ff, #0394f9); |
|
|
|
-webkit-background-clip: text; |
|
|
|
color: transparent; |
|
|
|
font-size: 3.15rem; |
|
|
|
@ -224,16 +263,19 @@ html, body { |
|
|
|
line-height: 1.75; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.count_num_sub { |
|
|
|
font-size: 1.25rem; |
|
|
|
text-align: center; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.count_num_sub span { |
|
|
|
margin: 0 10% 0 0; |
|
|
|
line-height: 1.75; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.count_num_sub span b { |
|
|
|
background-image: linear-gradient(to right, #f7fbfd, #26bef9); |
|
|
|
-webkit-background-clip: text; |
|
|
|
@ -243,27 +285,33 @@ html, body { |
|
|
|
line-height: 1.75; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box .count_item.non_admin .count_tit { |
|
|
|
background: url(../images/icon_data1.png) no-repeat; |
|
|
|
background-size: auto 80%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_box .count_item.admin .count_num { |
|
|
|
margin-left: -3.5%; |
|
|
|
} |
|
|
|
.count_box .count_item:last-child .count_num_all, .count_box .count_item:last-child .count_num_sub span b { |
|
|
|
background-image: linear-gradient(to right, #d2f5ff, #0394f9); |
|
|
|
|
|
|
|
.count_box .count_item.non_admin .count_num_all, .count_box .count_item.non_admin .count_num_sub span b { |
|
|
|
background-image: linear-gradient(to right, #f7fbfd, #2ba4b3); |
|
|
|
} |
|
|
|
|
|
|
|
.map_box { |
|
|
|
position: relative; |
|
|
|
top: -3.5%; |
|
|
|
top: 0; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.map_box > img.szmap { |
|
|
|
margin-top: 0; |
|
|
|
max-width: 100%; |
|
|
|
/* max-height: 100%; */ |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.label_wrap { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
@ -272,18 +320,24 @@ html, body { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.label_item { |
|
|
|
position: absolute; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.label_item > a { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.label_item > a > label { |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
font-size: 0.85rem; |
|
|
|
color: rgba(255, 255, 255, .9); |
|
|
|
font-size: 1.15rem; |
|
|
|
text-shadow: 0 0 5px #000; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
@keyframes blink { |
|
|
|
@keyframes |
|
|
|
blink { |
|
|
|
0%, 100% { |
|
|
|
opacity: 1; |
|
|
|
} /* 完全不透明 */ |
|
|
|
@ -291,16 +345,25 @@ opacity: 1; |
|
|
|
opacity: 0; |
|
|
|
} /* 完全透明 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 应用动画到元素 */ |
|
|
|
.label_item > a.active { |
|
|
|
animation: blink 1000ms infinite; /* 动画名称 持续时间 迭代次数 */ |
|
|
|
} |
|
|
|
/*.label_item > a.active { |
|
|
|
animation: blink 1000ms infinite; /* 动画名称 持续时间 迭代次数 |
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.admin_inspect { |
|
|
|
margin: -1.5rem 0 0 2.75rem; |
|
|
|
} |
|
|
|
|
|
|
|
.non_admin_inspect { |
|
|
|
margin: 0.5rem 0 0 2.75rem; |
|
|
|
} |
|
|
|
|
|
|
|
.admin_inspect span, .non_admin_inspect span { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
@ -309,9 +372,11 @@ opacity: 0; |
|
|
|
color: #2e90fd; |
|
|
|
font-size: 0.85rem;/* font-weight: 550; */ |
|
|
|
} |
|
|
|
|
|
|
|
.non_admin_inspect span { |
|
|
|
color: #04cafc; |
|
|
|
} |
|
|
|
|
|
|
|
.admin_inspect span::before, .non_admin_inspect span::before { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -323,112 +388,210 @@ opacity: 0; |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.admin_inspect span:last-child::before, .non_admin_inspect span:last-child::before { |
|
|
|
/*background: rgba(46, 97, 241, .8) url(../images/icon_qi.png) no-repeat center center; |
|
|
|
background-size: 90% auto;*/ |
|
|
|
content: "企"; |
|
|
|
} |
|
|
|
|
|
|
|
.non_admin_inspect span::before, .non_admin_inspect span:last-child::before { |
|
|
|
background-color: rgba(7, 147, 209, .8); |
|
|
|
} |
|
|
|
|
|
|
|
.fold_cont { |
|
|
|
display: none; |
|
|
|
position: absolute; |
|
|
|
top: -18rem; |
|
|
|
left: -13.5rem; |
|
|
|
top: -17.5rem; |
|
|
|
left: -15.25rem; |
|
|
|
z-index: 99; |
|
|
|
width: 23rem; |
|
|
|
min-width: 23rem; |
|
|
|
height: 17.5rem; |
|
|
|
background: url(../images/bg_tip.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.fold_cont::before { |
|
|
|
position: absolute; |
|
|
|
left: 43%; |
|
|
|
bottom: -4rem; |
|
|
|
left: 9.25rem; |
|
|
|
bottom: -3.65rem; |
|
|
|
z-index: -1; |
|
|
|
width: 6rem; |
|
|
|
height: 5rem; |
|
|
|
background: url(../images/bg_tip_line.png) no-repeat; |
|
|
|
background-size: auto 80%; |
|
|
|
background-position-y: -90%; |
|
|
|
content: ""; |
|
|
|
} |
|
|
|
|
|
|
|
#districtGM .fold_cont { |
|
|
|
left: -11rem; |
|
|
|
left: -12.75rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtGM .fold_cont::before { |
|
|
|
left: 30%; |
|
|
|
left: 6.75rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtBA .fold_cont { |
|
|
|
left: -6rem; |
|
|
|
left: -7.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtBA .fold_cont::before { |
|
|
|
left: 7.5%; |
|
|
|
left: 1.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtNS .fold_cont { |
|
|
|
left: -11rem; |
|
|
|
left: -12.85rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtNS .fold_cont::before { |
|
|
|
left: 30%; |
|
|
|
left: 6.75rem; |
|
|
|
} |
|
|
|
#districtSS .admin_inspect, #districtSS .non_admin_inspect { |
|
|
|
margin-left: 4.5rem; |
|
|
|
|
|
|
|
#districtSS .fold_cont { |
|
|
|
left: -25.25rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtSS .fold_cont::before { |
|
|
|
left: 19.25rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtDP .tab_inspect_item:last-child .inspect_count { |
|
|
|
left: 6rem; |
|
|
|
} |
|
|
|
|
|
|
|
#districtSS .tab_inspect_item:last-child .inspect_count { |
|
|
|
left: 9.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.pop_tit { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
position: absolute; |
|
|
|
top: 12%; |
|
|
|
left: 7.25%; |
|
|
|
right: 32%; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.pop_tit > h5 { |
|
|
|
font-size: 1.15rem; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.inspect_count { |
|
|
|
margin: 2% 0 3% -0.5rem; |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
} |
|
|
|
|
|
|
|
.inspect_count b { |
|
|
|
color: #06b8f8; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_switch { |
|
|
|
position: relative; |
|
|
|
/*position: relative; |
|
|
|
top: 12%; |
|
|
|
left: 10%; |
|
|
|
width: 65%; |
|
|
|
height: 1.75rem; |
|
|
|
left: 10%;*/ |
|
|
|
width: 35%; |
|
|
|
/*height: 1.75rem; |
|
|
|
background-color: rgba(25, 64, 88, .35); |
|
|
|
border-radius: 3rem; |
|
|
|
border-radius: 3rem;*/ |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_switch a { |
|
|
|
padding: 0 1.25rem; |
|
|
|
/*padding: 0 1.25rem; |
|
|
|
color: rgba(255, 255, 255, .5); |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.75; |
|
|
|
white-space: nowrap; |
|
|
|
text-align: center; |
|
|
|
text-align: center;*/ |
|
|
|
} |
|
|
|
|
|
|
|
.tab_switch a.active { |
|
|
|
/*background-color: #02a3ab;*/ |
|
|
|
/*background-color: #02a3ab; |
|
|
|
background-image: linear-gradient(to bottom, transparent, #26bef9); |
|
|
|
border-radius: 3rem; |
|
|
|
box-shadow: 0 0 5px #1ce9f3; |
|
|
|
color: #fff; |
|
|
|
color: #fff;*/ |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect { |
|
|
|
margin: 10% 10% 0; |
|
|
|
margin: 4rem 8% 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 8rem); |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item > ul > li { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
position: relative; |
|
|
|
margin: 3% 0; |
|
|
|
margin: 2.5% 0; |
|
|
|
padding: 0 0 0 1.25rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item:last-child > ul > li { |
|
|
|
margin: 5% 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item > ul > li::before { |
|
|
|
position: absolute; |
|
|
|
top: 0.25rem; |
|
|
|
top: 0.35rem; |
|
|
|
left: 0; |
|
|
|
content: "\f111"; |
|
|
|
color: #1ab5e0; |
|
|
|
color: #7ca9fb; |
|
|
|
font-family: "FontAwesome"; |
|
|
|
font-size: 0.85rem; |
|
|
|
font-size: 0.65rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item > ul > li > label { |
|
|
|
width: 40%; |
|
|
|
color: #92b3d3; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item > ul > li > span { |
|
|
|
width: 20%; |
|
|
|
color: #06b8f8; |
|
|
|
font-weight: 550; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item > ul > li > span:last-child { |
|
|
|
width: 20%; |
|
|
|
color: rgba(243, 153, 98, .9); |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item:last-child { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
position: relative; |
|
|
|
top: 0; |
|
|
|
left: -5%; |
|
|
|
width: 36rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item:last-child .inspect_count { |
|
|
|
position: absolute; |
|
|
|
top: 3%; |
|
|
|
left: 5rem; |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item:last-child > ul { |
|
|
|
margin: 6.5% 5% 0 -5%; |
|
|
|
width: 38%; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_inspect_item:last-child > ul > li > label { |
|
|
|
width: 30%; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -438,6 +601,7 @@ opacity: 0; |
|
|
|
min-width: 50%; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box label { |
|
|
|
position: relative; |
|
|
|
margin: 0 6.5% 0 0; |
|
|
|
@ -445,6 +609,7 @@ opacity: 0; |
|
|
|
color: rgba(255, 255, 255, .5); |
|
|
|
font-size: 0.85rem; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box label::before { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -456,9 +621,11 @@ opacity: 0; |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box label:nth-child(2)::before { |
|
|
|
content: "企"; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box label:nth-child(3)::before, .legend_box label:nth-child(4)::before { |
|
|
|
top: 0.1rem; |
|
|
|
height: 1rem; |
|
|
|
@ -467,9 +634,11 @@ opacity: 0; |
|
|
|
border: 0; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.legend_box label:nth-child(4)::before { |
|
|
|
background: #0882ae; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap_bottom h3 { |
|
|
|
margin: 1% 0 -3% 1%; |
|
|
|
height: 2.5rem; |
|
|
|
@ -478,6 +647,7 @@ opacity: 0; |
|
|
|
line-height: 2; |
|
|
|
text-shadow: 2px 1px 5px rgba(255, 255, 255, .5); |
|
|
|
} |
|
|
|
|
|
|
|
.tab_chart { |
|
|
|
position: relative; |
|
|
|
margin: 2% 1%; |
|
|
|
@ -486,10 +656,12 @@ opacity: 0; |
|
|
|
width: 98%; |
|
|
|
height: calc(96% - 3rem); |
|
|
|
} |
|
|
|
|
|
|
|
.chartbox { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.tab_tit { |
|
|
|
position: absolute; |
|
|
|
top: 8%; |
|
|
|
@ -497,15 +669,18 @@ opacity: 0; |
|
|
|
font-size: 1rem; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
.tab_tit a { |
|
|
|
margin: 0 5%; |
|
|
|
|
|
|
|
.tab_tit a, .tab_switch a { |
|
|
|
margin: 0 0.35rem; |
|
|
|
padding: 1% 2%; |
|
|
|
color: rgba(255, 255, 255, .5); |
|
|
|
} |
|
|
|
.tab_tit a.active { |
|
|
|
|
|
|
|
.tab_tit a.active, .tab_switch a.active { |
|
|
|
color: #2e82fd; |
|
|
|
border-bottom: 2px solid #2e82fd; |
|
|
|
} |
|
|
|
|
|
|
|
.block_tit { |
|
|
|
margin: 0 0 1% 0; |
|
|
|
padding: 0 0 0 4rem; |
|
|
|
@ -517,29 +692,42 @@ opacity: 0; |
|
|
|
line-height: 2; |
|
|
|
text-shadow: 2px 1px 5px rgba(255, 255, 255, .5); |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap { |
|
|
|
/* display: flex; */ |
|
|
|
/* flex-wrap: wrap; */ |
|
|
|
height: 100%; |
|
|
|
height: 45%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item { |
|
|
|
display: flex; |
|
|
|
float: left; |
|
|
|
position: relative; |
|
|
|
margin: 0.5% 5% 1.5%; |
|
|
|
margin: 2.5% 0 1.5% 3%; |
|
|
|
width: 45%; |
|
|
|
height: 15%; |
|
|
|
border-radius: 10px; |
|
|
|
height: 5rem; |
|
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(34, 125, 223, .35)); |
|
|
|
border: 1px solid rgba(26, 86, 151, .6); |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 1rem; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
/*.count_wrap .count_item:last-child { |
|
|
|
width: 90%; |
|
|
|
}*/ |
|
|
|
|
|
|
|
.count_wrap .count_item:nth-child(2), .count_wrap .count_item:nth-child(3), .count_wrap .count_item:nth-child(6), .count_wrap .count_item:nth-child(7) { |
|
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(20, 138, 156, .35)); |
|
|
|
border: 1px solid rgba(20, 103, 103, .6); |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item:first-child { |
|
|
|
width: 93%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item:nth-child(even) { |
|
|
|
margin-left: -5%; |
|
|
|
margin-left: 2.5%; |
|
|
|
} |
|
|
|
.count_wrap .count_item::before { |
|
|
|
|
|
|
|
/*.count_wrap .count_item::before { |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 30%; |
|
|
|
@ -559,71 +747,117 @@ opacity: 0; |
|
|
|
height: 35%; |
|
|
|
background: url(../images/line_vert.png) no-repeat right center; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.count_wrap .count_item:last-child::after { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item label { |
|
|
|
display: inline-flex; |
|
|
|
justify-content: center; |
|
|
|
margin: 7% 2% 0; |
|
|
|
width: 96%; |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
font-size: 1rem; |
|
|
|
display: inline-block; |
|
|
|
margin: 2% 2% 5%; |
|
|
|
width: 36%; |
|
|
|
color: rgba(255, 255, 255, .7); |
|
|
|
font-size: 0.85rem; |
|
|
|
line-height: 2.5; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item:first-child label { |
|
|
|
margin-top: 0; |
|
|
|
width: 45%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item label > img { |
|
|
|
display: block; |
|
|
|
margin: 20% auto 5%; |
|
|
|
width: auto; |
|
|
|
height: 40%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item:first-child label > img { |
|
|
|
margin: 10% auto 0; |
|
|
|
height: 45%; |
|
|
|
} |
|
|
|
|
|
|
|
.number_count { |
|
|
|
display: block; |
|
|
|
background-image: linear-gradient(to right, #f7fbfd, #26bef9); |
|
|
|
margin: 0 5%; |
|
|
|
background-image: linear-gradient(to right, #f7fbfd, #2ba4b3); |
|
|
|
-webkit-background-clip: text; |
|
|
|
color: transparent; |
|
|
|
font-size: 2.0rem; |
|
|
|
font-size: 1.65rem; |
|
|
|
font-weight: 550; |
|
|
|
line-height: 1.85; |
|
|
|
line-height: 3; |
|
|
|
} |
|
|
|
|
|
|
|
.count_wrap .count_item:first-child .number_count { |
|
|
|
margin: 0 0 0 5%; |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.number_percent { |
|
|
|
color: rgba(243, 153, 98, .8); |
|
|
|
font-size: 1.15rem; |
|
|
|
} |
|
|
|
|
|
|
|
.number_percent > i { |
|
|
|
margin-left: 2%; |
|
|
|
color: #f39962; |
|
|
|
font-size: 0.8rem; |
|
|
|
color: rgba(243, 153, 98, .75); |
|
|
|
font-size: 0.85rem; |
|
|
|
} |
|
|
|
|
|
|
|
.count_admin { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
margin: 5% 0 0; |
|
|
|
margin: 6% 0 0; |
|
|
|
width: 97%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_admin > label { |
|
|
|
width: 5rem; |
|
|
|
height: 5rem; |
|
|
|
width: 5.25rem; |
|
|
|
height: 5.25rem; |
|
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(20,138,156,.5)); |
|
|
|
border: 1px solid rgba(20, 103, 103, .6); |
|
|
|
border-radius: 5px; |
|
|
|
color: rgba(255, 255, 255, .6); |
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
font-size: 0.85rem; |
|
|
|
line-height: 2; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.count_admin:nth-child(2) > label { |
|
|
|
|
|
|
|
.count_admin:nth-child(odd) > label { |
|
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(34, 125, 223, .5)); |
|
|
|
border: 1px solid rgba(26, 86, 151, .6); |
|
|
|
} |
|
|
|
.count_admin:nth-child(3) > label { |
|
|
|
|
|
|
|
/*.count_admin:nth-child(3) > label { |
|
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(247, 125, 169, .5)); |
|
|
|
border: 1px solid rgba(103, 46, 43, .6); |
|
|
|
} |
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.count_admin > label > img { |
|
|
|
display: block; |
|
|
|
margin: 10% auto 5%; |
|
|
|
width: auto; |
|
|
|
height: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.count_admin_num { |
|
|
|
width: 35%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.count_admin_num > b { |
|
|
|
display: block; |
|
|
|
background-image: linear-gradient(to right, #d2f5ff, #0394f9); |
|
|
|
@ -633,37 +867,60 @@ opacity: 0; |
|
|
|
font-weight: 550; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin: 20% 3%; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag span { |
|
|
|
margin: 0 5%; |
|
|
|
color: rgba(255, 255, 255, .5); |
|
|
|
color: rgba(255, 255, 255, .75); |
|
|
|
font-size: 1.15rem; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag span.data-rise, .percent-tag span.data-fall { |
|
|
|
margin: 0.75% 2% 1% 0.5%; |
|
|
|
font-size: 1.0rem; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag span.data-rise i { |
|
|
|
color: #67dc53; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag span.data-fall i { |
|
|
|
color: #fd7c7c; |
|
|
|
} |
|
|
|
|
|
|
|
.percent-tag label { |
|
|
|
margin: 0 2% 0 10%; |
|
|
|
color: rgba(255, 255, 255, .5); |
|
|
|
color: rgba(255, 255, 255, .65); |
|
|
|
font-size: 0.85rem; |
|
|
|
} |
|
|
|
|
|
|
|
.yjlv .number_percent { |
|
|
|
color: rgba(243, 153, 98, .75); |
|
|
|
font-size: 1.65rem; |
|
|
|
} |
|
|
|
|
|
|
|
.yjlv .number_percent > i { |
|
|
|
font-size: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.percent_box { |
|
|
|
width: 25%; |
|
|
|
} |
|
|
|
|
|
|
|
.chartbox_right { |
|
|
|
margin: 15% 0 0; |
|
|
|
margin: 0; |
|
|
|
width: 100%; |
|
|
|
height: 35%; |
|
|
|
height: 45%; |
|
|
|
background: url("../images/bg_pie.png") no-repeat center; |
|
|
|
background-position-y: 50.5%; |
|
|
|
background-size: 48.5%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|