@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% 0.5% 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: 1.5rem; 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 5% 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:first-child { width: 66.25%; } .twobox .threebox:last-child { margin-right: 0; } .halfbox .threebox, .halfbox .threebox:first-child { width: 49.385%; height: 18rem; } .sel_rank { position: absolute; top: 12px; right: 20px; } .sel_rank select { height: 26px; border: 1px solid #ccc; border-radius: 3px; } .count_wrap { display: flex; flex-wrap: wrap; margin: -2% 0 0 0; width: 100%; } .count_item { float: left; position: relative; margin: -0.5% 0.5% 0.5% 0.5%; width: 19%; height: 9.25rem; background: url(../images/bg_analy_card.jpg) no-repeat; background-size: cover; border-radius: 10px; font-size: 1rem; text-align: center; } .count_item .count_lab { display: inline-flex; margin: 5.5% 5% 3%; width: 90%; color: #666; font-size: 0.9rem; text-align: left; } .count_div { display: flex; } .count_div img { display: inline-block; margin: 2% 2% 5%; width: 36%; } .count_div .count_cont { margin: 0 1% 0 -5%; width: 62%; } .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 { margin-top: -6.5%; } .com_cate h3.chart_tit { margin-bottom: 0.5rem; } .com_cate .number_count { color: #f73b3b; } .com_cate .count_item { margin: -1% 0.5% 0 1.5%; width: 48%; background: url(../images/bg_analy_card_2.jpg) no-repeat; background-size: cover; } .com_cate .count_lab { margin: 4.5% 5% 3%; } .com_cate .count_div img { display: inline-block; margin: 2% 2% 5% 5%; width: 30%; } .key_area { justify-content: space-evenly; background: url(../images/bg_ring.png) no-repeat center center; background-size: cover; } .key_area .count_item { background: url(../images/bg_base.png) no-repeat center bottom; background-size: 96% auto; } .count_review { /* float: left; */ width: 96%; 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; align-items: center; justify-content: space-around; margin: 3% 3%; font-size: 1rem; } .count_list .count_row:first-child { margin: 3% 3% 5%; } .count_row > span { width: 30%; font-weight: 550; } .count_row span:nth-child(1) { width: 40%; font-weight: 500; } .count_row span.percent_ym { font-weight: normal; } .percent_ym .percent-tag { margin: 1% 3% 5% 0; } .percent_ym .percent-tag label { margin: 0 8% 0 1%; } .count_rev { margin-top: 2%; } .count_rev h4 { background: url(../images/icon_rev.png) no-repeat center; background-size: auto 100%; } .count_rev .count_row:first-child { margin: 3% 3%; } .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%; } .percent-tag span.percent-single { color: #666; font-size: 1.25rem; line-height: 2; } .link_btn { position: absolute; top: 0; right: 0; margin: 0.5% 2% 0; height: 2rem; font-size: 1.2rem; line-height: 2; white-space: nowrap; } .link_btn a { position: relative; margin: 3% 3%; padding-left: 2rem; color: #666; font-size: 1.0rem; opacity: .8; text-decoration: none; } .link_btn a:hover { opacity: 1; } .link_btn a::before { position: absolute; left: 0; top: -2px; content: ""; width: 1.75rem; height: 1.75rem; background: url(../images/icon_dept32.png) no-repeat; background-size: 100% auto; } .link_btn a:last-child::before { background: url(../images/icon_dist32.png) no-repeat; background-size: 100% auto; } .link_btn a::after { position: absolute; top: -0.5rem; right: -1.1rem; content: "\f105"; color: #1ab5e0; font-family: "FontAwesome"; font-size: 1.25rem; opacity: .75; } .cont_total .count_row { justify-content: flex-start; } .cont_total .count_row:first-child { margin: 3% 3% 5% 2%; } .cont_total .count_row span, .cont_total .count_row span:nth-child(1) { margin: 1% 2%; width: auto; } .cont_total .count_row span.percent_ym { display: flex; justify-content: space-around; width: 35%; } .cont_total .count_row span.percent_ym .percent-tag { margin: 1% 3% 1% 0; } .count_num { color: #fa6666; font-size: 1.5rem; } .chart_ring { background: #fff url(../images/bg_shadow.png) no-repeat center; background-position-y: 90%; } /** 滚动条样式 **/ ::-webkit-scrollbar-track { background-color: #F5F5F5; } ::-webkit-scrollbar { width: 6px; height: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #ccc; }