lijun
1 year ago
4 changed files with 175 additions and 660 deletions
@ -1,647 +0,0 @@ |
|||||
@charset "utf-8"; |
|
||||
|
|
||||
/* CSS Document */ |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
* { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif; |
|
||||
} |
|
||||
|
|
||||
html { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
color: #4c4c4c; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
|
|
||||
.wrap_all { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background: url(../images/bg_body.jpg) no-repeat; |
|
||||
background-size: cover; |
|
||||
box-sizing: border-box; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.select_set { |
|
||||
display: flex; |
|
||||
margin: 0.5% 0.5% 0.6%; |
|
||||
padding-left: 30px; |
|
||||
background: url(../images/icon_scr.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; |
|
||||
margin: 0 5px 0 0; |
|
||||
padding: 0 25px 0 10px; |
|
||||
height: 28px; |
|
||||
line-height: 28px; |
|
||||
color: #315EFB; |
|
||||
font-weight: 500; |
|
||||
background: rgba(59, 145, 253, 0.12); |
|
||||
letter-spacing: 0; |
|
||||
text-align: center; |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.select_item > label > a { |
|
||||
display: inline-block; |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
width: 18px; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.select_item > label > a::after { |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
width: 18px; |
|
||||
height: 18px; |
|
||||
content: "\f105"; |
|
||||
color: #678dfe; |
|
||||
font-family: "FontAwesome"; |
|
||||
font-size: 1.25rem; |
|
||||
} |
|
||||
|
|
||||
.select_item > label.active > a::after { |
|
||||
position: absolute; |
|
||||
top: 0.45rem; |
|
||||
right: -0.2rem; |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
|
|
||||
.fold_cont { |
|
||||
display: none; |
|
||||
position: absolute; |
|
||||
top: 3rem; |
|
||||
left: 2%; |
|
||||
z-index: 100; |
|
||||
padding: 0.5rem 1rem 1rem 0.5rem; |
|
||||
min-width: 10rem; |
|
||||
background: rgba(255, 255, 255, .9); |
|
||||
border-radius: 0.5rem; |
|
||||
box-shadow: 0 0 0.5rem #b1c9d7; |
|
||||
} |
|
||||
|
|
||||
.fold_cont dd { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
position: relative; |
|
||||
padding: 0 0 0 2rem; |
|
||||
font-size: 1.0rem; |
|
||||
line-height: 2; |
|
||||
} |
|
||||
|
|
||||
.fold_cont dd::before { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0.5rem; |
|
||||
width: 1.5rem; |
|
||||
content: "\f096"; |
|
||||
color: rgba(0, 0, 0, .4); |
|
||||
font-size: 1.1rem; |
|
||||
font-family: "FontAwesome"; |
|
||||
} |
|
||||
|
|
||||
.fold_cont dd.selchk::before { |
|
||||
content: "\f046"; |
|
||||
color: #315efb; |
|
||||
} |
|
||||
|
|
||||
.fold_cont > dd > i { |
|
||||
width: 2rem; |
|
||||
height: 2rem; |
|
||||
color: #999; |
|
||||
font-size: 1.15rem; |
|
||||
line-height: 1.75; |
|
||||
text-align: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.selnext { |
|
||||
position: relative; |
|
||||
width: calc(100% - 2rem); |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.selnext::after { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: -5%; |
|
||||
z-index: -1; |
|
||||
width: calc(100% + 1.5rem); |
|
||||
height: 100%; |
|
||||
background: #437afb; |
|
||||
content: ""; |
|
||||
} |
|
||||
|
|
||||
.fold_cont > dd.selnext > i, .fold_cont dd.selnext::before { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.data_cont { |
|
||||
display: flex; |
|
||||
margin: 0.5%; |
|
||||
width: calc(99% - 2px); |
|
||||
border-radius: 10px; |
|
||||
box-shadow: 0 0 10px #ddd; |
|
||||
background: #fff url(../images/bg_data_item.jpg) no-repeat; |
|
||||
border: 1px solid rgba(126, 195, 241, .8); |
|
||||
} |
|
||||
|
|
||||
.data_item { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
flex-wrap: nowrap; |
|
||||
justify-content: space-around; |
|
||||
margin: 0.5% 1.5%; |
|
||||
width: 22%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.data_item::after { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
content: ""; |
|
||||
width: 1px; |
|
||||
height: 90%; |
|
||||
background: linear-gradient(to bottom,transparent 15%, #e1dede 50%, transparent 100%); |
|
||||
} |
|
||||
|
|
||||
.data_item:last-child::after { |
|
||||
background: none; |
|
||||
} |
|
||||
|
|
||||
.cont-title { |
|
||||
margin: 2% 0; |
|
||||
color: #666; |
|
||||
font-size: 0.9rem; |
|
||||
font-weight: 550; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
|
|
||||
.panel-card-bottom .cont-title { |
|
||||
margin: 2% 0; |
|
||||
color: #333; |
|
||||
font-size: 1.6rem; |
|
||||
font-weight: 550; |
|
||||
} |
|
||||
|
|
||||
.cont-total { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin: 0 0 1%; |
|
||||
color: #999; |
|
||||
font-size: 1.25rem; |
|
||||
} |
|
||||
|
|
||||
.cont-total b { |
|
||||
margin-right: 1rem; |
|
||||
color: #ff8400; |
|
||||
font-size: 2.5rem; |
|
||||
font-weight: 500; |
|
||||
line-height: 1.5; |
|
||||
} |
|
||||
|
|
||||
.percent-tag { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin: 1% 3% 0 0; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
|
|
||||
.percent-tag span { |
|
||||
margin: 0; |
|
||||
color: #333; |
|
||||
font-size: 1.0rem; |
|
||||
line-height: 1; |
|
||||
} |
|
||||
|
|
||||
.percent-tag span.data-rise, .percent-tag span.data-fall { |
|
||||
margin: 0.75% 2% 1% 0.5%; |
|
||||
color: #67dc53; |
|
||||
font-size: 1.0rem; |
|
||||
} |
|
||||
|
|
||||
.percent-tag span.data-fall { |
|
||||
color: #fd7c7c; |
|
||||
} |
|
||||
|
|
||||
.percent-tag label { |
|
||||
margin: 0 2% 0 1%; |
|
||||
color: #999; |
|
||||
font-size: 0.75rem; |
|
||||
} |
|
||||
|
|
||||
.nece-data .percent-tag span { |
|
||||
margin: 0 0 0 5%; |
|
||||
color: #4767fe; |
|
||||
font-size: 1.25rem; |
|
||||
font-weight: 500; |
|
||||
line-height: 1.25; |
|
||||
} |
|
||||
|
|
||||
.echarts_box { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: calc(85% - 3.75rem); |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.inner { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
margin-bottom: 2%; |
|
||||
height: 98%; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: scroll; |
|
||||
} |
|
||||
|
|
||||
.onebox { |
|
||||
flex-wrap: wrap; |
|
||||
margin: 0.5% 0.5% 0.5%; |
|
||||
padding: 0.75% 1% 0.25%; |
|
||||
width: 99%; |
|
||||
height: 18rem; |
|
||||
background: #fff none; |
|
||||
border: 0; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.twobox { |
|
||||
margin: 0.25% 0.5% 0; |
|
||||
padding: 0; |
|
||||
width: 99%; |
|
||||
min-height: 18rem; |
|
||||
border: 0; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.echarts_mult { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
margin: 0.75% 0.5% 1%; |
|
||||
padding-bottom: 5rem; |
|
||||
width: 99%; |
|
||||
height: calc(100% - 25rem); |
|
||||
} |
|
||||
|
|
||||
.chart_div { |
|
||||
float: left; |
|
||||
margin: 0 0 1% 1%; |
|
||||
width: 32.25%; |
|
||||
height: 32.25%; |
|
||||
} |
|
||||
|
|
||||
.chart_tit { |
|
||||
width: 100%; |
|
||||
height: 1.5rem; |
|
||||
font-size: 1.0rem; |
|
||||
line-height: 1.5; |
|
||||
} |
|
||||
|
|
||||
.chart_box { |
|
||||
margin: 0 1%; |
|
||||
width: 98%; |
|
||||
height: calc(100% - 2rem); |
|
||||
} |
|
||||
|
|
||||
.threebox { |
|
||||
position: relative; |
|
||||
flex-wrap: wrap; |
|
||||
float: left; |
|
||||
margin: 0.5% 1.23% 0.85% 0; |
|
||||
padding: 0.75% 1% 0.25%; |
|
||||
width: 32.51%; |
|
||||
height: 18rem; |
|
||||
background: #fff none; |
|
||||
border: 0; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.threebox:nth-child(3n) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.twobox .threebox { |
|
||||
height: 25rem; |
|
||||
} |
|
||||
|
|
||||
.twobox .threebox:last-child { |
|
||||
margin-right: 0; |
|
||||
width: 66.25%; |
|
||||
} |
|
||||
|
|
||||
.sel_rank { |
|
||||
position: absolute; |
|
||||
right: 20px; |
|
||||
} |
|
||||
|
|
||||
.sel_rank select { |
|
||||
height: 26px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 3px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.count_wrap { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.count_item { |
|
||||
float: left; |
|
||||
position: relative; |
|
||||
margin: 0 1% 1.5% 1.5%; |
|
||||
width: 30.5%; |
|
||||
height: 10rem; |
|
||||
background: url(../images/bg_analy_card.jpg) no-repeat; |
|
||||
background-size: cover; |
|
||||
border-radius: 10px; |
|
||||
font-size: 1rem; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.count_item label { |
|
||||
display: inline-flex; |
|
||||
margin: 5.5% 5% 5%; |
|
||||
width: 90%; |
|
||||
color: #666; |
|
||||
font-size: 0.9rem; |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.number_count { |
|
||||
display: block; |
|
||||
color: #4767fe; |
|
||||
font-size: 2.15rem; |
|
||||
font-weight: 500; |
|
||||
line-height: 2; |
|
||||
} |
|
||||
|
|
||||
.number_percent { |
|
||||
color: #666; |
|
||||
font-size: 1rem; |
|
||||
} |
|
||||
|
|
||||
.number_percent > i { |
|
||||
margin-left: 2%; |
|
||||
color: #999; |
|
||||
font-size: 0.8rem; |
|
||||
} |
|
||||
|
|
||||
.com_cate { |
|
||||
float: right; |
|
||||
margin: -2rem 0 0 1%; |
|
||||
width: 45%; |
|
||||
} |
|
||||
|
|
||||
.com_cate h3.chart_tit { |
|
||||
margin-bottom: 0.5rem; |
|
||||
} |
|
||||
|
|
||||
.com_cate .number_count { |
|
||||
color: #f73b3b; |
|
||||
} |
|
||||
|
|
||||
.com_cate .count_item { |
|
||||
background: url(../images/bg_analy_card_2.jpg) no-repeat; |
|
||||
background-size: cover; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.count_review { |
|
||||
float: left; |
|
||||
width: 54%; |
|
||||
height: 90%; |
|
||||
} |
|
||||
|
|
||||
.count_com { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.count_com h4 { |
|
||||
padding-top: 6.75rem; |
|
||||
width: 35%; |
|
||||
height: 10rem; |
|
||||
background: url(../images/icon_com.png) no-repeat center; |
|
||||
background-size: auto 100%; |
|
||||
box-sizing: border-box; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.count_list { |
|
||||
width: 75%; |
|
||||
} |
|
||||
|
|
||||
.count_row { |
|
||||
display: flex; |
|
||||
justify-content: space-around; |
|
||||
margin: 3% 3%; |
|
||||
font-size: 1rem; |
|
||||
} |
|
||||
|
|
||||
.count_row span { |
|
||||
width: 30%; |
|
||||
font-weight: 550; |
|
||||
} |
|
||||
|
|
||||
.count_row span:nth-child(1) { |
|
||||
width: 40%; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.count_rev { |
|
||||
margin-top: 2%; |
|
||||
} |
|
||||
|
|
||||
.count_rev h4 { |
|
||||
background: url(../images/icon_rev.png) no-repeat center; |
|
||||
background-size: auto 100%; |
|
||||
} |
|
||||
|
|
||||
.popbox { |
|
||||
display: none; |
|
||||
position: absolute; |
|
||||
z-index: 999; |
|
||||
top: 3rem; |
|
||||
left: 250px; |
|
||||
zoom: 1; |
|
||||
width: 60%; |
|
||||
height: 70%; |
|
||||
background: rgba(255, 255, 255, .9); |
|
||||
border-radius: 0.5rem; |
|
||||
box-shadow: 0 0 0.5rem #b1c9d7; |
|
||||
/*transform: translateY(-50%);*/ |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.poptit { |
|
||||
padding: 0 80px 0 20px; |
|
||||
height: 42px; |
|
||||
background: #F8F8F8; |
|
||||
color: #333; |
|
||||
font-size: 16px; |
|
||||
line-height: 42px; |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
.closet { |
|
||||
position: absolute; |
|
||||
top: 1%; |
|
||||
right: 1%; |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
/*background-color: #fff;*/ |
|
||||
color: #999; |
|
||||
cursor: pointer; |
|
||||
font-size: 24px; |
|
||||
font-family: sans-serif; |
|
||||
/*border-radius: 50%; |
|
||||
box-shadow: 0 0 5px #999;*/ |
|
||||
text-align: center; |
|
||||
line-height: 25px; |
|
||||
} |
|
||||
|
|
||||
.box_content { |
|
||||
width: 100%; |
|
||||
height: calc(100% - 50px); |
|
||||
background-color: #ffffff; |
|
||||
color: inherit; |
|
||||
padding: 15px 20px 10px 20px; |
|
||||
border-color: #e7eaec; |
|
||||
-webkit-border-image: none; |
|
||||
-o-border-image: none; |
|
||||
border-image: none; |
|
||||
border-style: solid solid none; |
|
||||
border-width: 1px 0px; |
|
||||
box-sizing: border-box; |
|
||||
overflow-x: hidden; |
|
||||
} |
|
||||
|
|
||||
.tablist { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.tabtit { |
|
||||
display: flex; |
|
||||
margin: 0 0 1% 0; |
|
||||
width: 100%; |
|
||||
border-bottom: 1px solid #f0f1f2; |
|
||||
} |
|
||||
|
|
||||
.tabtit > span { |
|
||||
display: inline-block; |
|
||||
margin: 1% 3.5% 0 0; |
|
||||
min-width: 4.5%; |
|
||||
height: 1.75rem; |
|
||||
line-height: 1.75; |
|
||||
color: rgba(0, 0, 0, 0.4); |
|
||||
font-size: 1.1rem; |
|
||||
font-weight: 600; |
|
||||
text-align: center; |
|
||||
white-space: nowrap; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.tabtit > span.active { |
|
||||
border-bottom: 3px solid rgba(12, 94, 249, 1); |
|
||||
color: rgb(12, 94, 249); |
|
||||
} |
|
||||
|
|
||||
.tabcont { |
|
||||
display: none; |
|
||||
width: 100%; |
|
||||
height: calc(100% - 50px); |
|
||||
overflow: auto; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.selcont a.selitem { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
position: relative; |
|
||||
margin: 2% 1% 0; |
|
||||
padding: 0 0 0 2rem; |
|
||||
font-size: 1.0rem; |
|
||||
line-height: 2; |
|
||||
} |
|
||||
|
|
||||
.selcont a.selitem::before { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0.5rem; |
|
||||
width: 1.5rem; |
|
||||
content: "\f096"; |
|
||||
color: rgba(0, 0, 0, .4); |
|
||||
font-size: 1.1rem; |
|
||||
font-family: "FontAwesome"; |
|
||||
} |
|
||||
|
|
||||
.selcont a.selitem.active.selected::before { |
|
||||
content: "\f046"; |
|
||||
color: #315efb; |
|
||||
} |
|
||||
|
|
||||
.deptcont { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
|
|
||||
.deptcont a.selitem { |
|
||||
width: 20%; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/** 滚动条样式 **/ |
|
||||
::-webkit-scrollbar-track { |
|
||||
background-color: #F5F5F5; |
|
||||
} |
|
||||
|
|
||||
::-webkit-scrollbar { |
|
||||
width: 6px; |
|
||||
height: 10px; |
|
||||
background-color: #F5F5F5; |
|
||||
} |
|
||||
|
|
||||
::-webkit-scrollbar-thumb { |
|
||||
border-radius: 6px; |
|
||||
background-color: #ccc; |
|
||||
} |
|
||||
Loading…
Reference in new issue