@charset "utf-8"; /* 隔离作用域:所有规则限定在 .statistical-analysis 容器内,防止污染首页 */ /* 背景图路径通过 CSS 变量注入(由组件 :style 绑定 BASE_URL 前缀) */ .statistical-analysis { color: #4c4c4c; font-size: 14px; font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif; overflow: hidden; } .statistical-analysis * { margin: 0; padding: 0; font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif; box-sizing: border-box; } .statistical-analysis .wrap_all { width: 100%; height: 100%; background: var(--bg-body) no-repeat; background-size: cover; box-sizing: border-box; overflow: hidden; } .statistical-analysis .select_set { display: flex; margin: 0.5% 0.5% 0.6%; padding-left: 30px; background: var(--icon-scr) no-repeat left; background-size: auto 100%; } .statistical-analysis .select_item { margin: 0 0 0 5px; font-size: 1.2rem; white-space: nowrap; } .statistical-analysis .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; } .statistical-analysis .select_item > label > a { display: inline-block; position: absolute; right: 0; width: 18px; height: 100%; } .statistical-analysis .select_item > label > a::after { position: absolute; right: 0; width: 18px; height: 18px; content: "\f105"; color: #678dfe; font-family: "FontAwesome"; font-size: 1.25rem; } .statistical-analysis .select_item > label.active > a::after { position: absolute; top: 0.45rem; right: -0.2rem; transform: rotate(90deg); } .statistical-analysis .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; } .statistical-analysis .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; } .statistical-analysis .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"; } .statistical-analysis .fold_cont dd.selchk::before { content: "\f046"; color: #315efb; } .statistical-analysis .fold_cont > dd > i { width: 2rem; height: 2rem; color: #999; font-size: 1.15rem; line-height: 1.75; text-align: center; cursor: pointer; } .statistical-analysis .selnext { position: relative; width: calc(100% - 2rem); color: #fff; } .statistical-analysis .selnext::after { position: absolute; top: 0; left: -5%; z-index: -1; width: calc(100% + 1.5rem); height: 100%; background: #437afb; content: ""; } .statistical-analysis .fold_cont > dd.selnext > i, .statistical-analysis .fold_cont dd.selnext::before { color: #fff; } .statistical-analysis .data_cont { display: flex; margin: 0.5%; width: calc(99% - 2px); border-radius: 10px; box-shadow: 0 0 10px #ddd; background: #fff var(--bg-data-item) no-repeat; border: 1px solid rgba(126, 195, 241, .8); } .statistical-analysis .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%; } .statistical-analysis .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%); } .statistical-analysis .data_item:last-child::after { background: none; } .statistical-analysis .cont-title { margin: 2% 0; color: #666; font-size: 0.9rem; font-weight: 550; white-space: nowrap; } .statistical-analysis .panel-card-bottom .cont-title { margin: 2% 0; color: #333; font-size: 1.6rem; font-weight: 550; } .statistical-analysis .cont-total { display: flex; align-items: center; margin: 0 0 1%; color: #999; font-size: 1.25rem; } .statistical-analysis .cont-total b { margin-right: 1.5rem; color: #ff8400; font-size: 2.5rem; font-weight: 500; line-height: 1.5; } .statistical-analysis .percent-tag { display: flex; align-items: center; margin: 1% 3% 0 0; white-space: nowrap; } .statistical-analysis .percent-tag span { margin: 0; color: #333; font-size: 1.0rem; line-height: 1; } .statistical-analysis .percent-tag span.data-rise, .statistical-analysis .percent-tag span.data-fall { margin: 0.75% 2% 1% 0.5%; color: #67dc53; font-size: 1.0rem; } .statistical-analysis .percent-tag span.data-fall { color: #fd7c7c; } .statistical-analysis .percent-tag label { margin: 0 5% 0 1%; color: #999; font-size: 0.75rem; } .statistical-analysis .nece-data .percent-tag span { margin: 0 0 0 5%; color: #4767fe; font-size: 1.25rem; font-weight: 500; line-height: 1.25; } .statistical-analysis .echarts_box { position: relative; width: 100%; height: calc(85% - 3.75rem); overflow: hidden; } .statistical-analysis .inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin-bottom: 2%; height: 98%; overflow-x: hidden; overflow-y: scroll; } .statistical-analysis .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; } .statistical-analysis .twobox { margin: 0.25% 0.5% 0; padding: 0; width: 99%; min-height: 18rem; border: 0; box-sizing: border-box; } .statistical-analysis .echarts_mult { display: flex; flex-wrap: wrap; margin: 0.75% 0.5% 1%; padding-bottom: 5rem; width: 99%; } .statistical-analysis .chart_div { float: left; margin: 0 0 1% 1%; width: 32.25%; height: 32.25%; } .statistical-analysis .chart_tit { width: 100%; height: 1.5rem; font-size: 1.0rem; line-height: 1.5; margin-bottom: 10px; } .statistical-analysis .chart_box { margin: 0 1%; width: 98%; height: calc(100% - 2rem); } .statistical-analysis .threebox { position: relative; flex-wrap: wrap; float: left; margin: 0.5% 1.23% 0.85% 0; padding: 0.75% 1% 0.75%; width: 32.51%; height: 18rem; background: #fff none; border: 0; box-sizing: border-box; } .statistical-analysis .threebox:nth-child(3n) { margin-right: 0; } .statistical-analysis .twobox .threebox { height: 25rem; } .statistical-analysis .twobox .threebox:first-child { width: 66.25%; } .statistical-analysis .twobox .threebox:last-child { margin-right: 0; } .statistical-analysis .halfbox .threebox, .statistical-analysis .halfbox .threebox:first-child { width: 49.385%; height: 18rem; } .statistical-analysis .sel_rank { position: absolute; top: 12px; right: 20px; } .statistical-analysis .sel_rank select { height: 26px; border: 1px solid #ccc; border-radius: 3px; } .statistical-analysis .count_wrap { display: flex; flex-wrap: wrap; margin: -2% 0 0 0; width: 100%; } .statistical-analysis .count_item { float: left; position: relative; margin: -0.5% 0.5% 0.9% 0.5%; width: 19%; height: 9.25rem; background: var(--bg-analy-card) no-repeat; background-size: cover; border-radius: 10px; font-size: 1rem; text-align: center; box-sizing: border-box; } .statistical-analysis .count_item .count_lab { display: inline-flex; margin: 5.5% 5% 3%; width: 90%; color: #666; font-size: 0.9rem; text-align: left; } .statistical-analysis .count_div { display: flex; } .statistical-analysis .count_div img { display: inline-block; margin: 2% 2% 5%; width: 36%; } .statistical-analysis .count_div .count_cont { margin: 0 1% 0 -5%; width: 62%; } .statistical-analysis .number_count { display: block; color: #4767fe; font-size: 2.15rem; font-weight: 500; line-height: 2; } .statistical-analysis .number_percent { color: #666; font-size: 1rem; } .statistical-analysis .number_percent > i { margin-left: 2%; color: #999; font-size: 0.8rem; } .statistical-analysis .com_cate { margin-top: -6.5%; } .statistical-analysis .com_cate h3.chart_tit { margin-bottom: 0.5rem; } .statistical-analysis .com_cate .number_count { color: #f73b3b; } .statistical-analysis .com_cate .count_item { margin: -1% 0.5% 0 1.5%; width: 48%; background: var(--bg-analy-card-2) no-repeat; background-size: cover; } .statistical-analysis .com_cate .count_lab { margin: 4.5% 5% 3%; } .statistical-analysis .com_cate .count_div img { display: inline-block; margin: 2% 2% 5% 5%; width: 30%; } .statistical-analysis .key_area { justify-content: space-evenly; background: var(--bg-ring) no-repeat center center; background-size: cover; } .statistical-analysis .key_area .count_item { background: var(--bg-base) no-repeat center bottom; background-size: 96% auto; } .statistical-analysis .count_review { width: 96%; height: 90%; } .statistical-analysis .count_com { display: flex; align-items: center; width: 100%; } .statistical-analysis .count_com h4 { padding-top: 6.75rem; width: 35%; height: 10rem; background: var(--icon-com) no-repeat center; background-size: auto 100%; box-sizing: border-box; text-align: center; } .statistical-analysis .count_list { width: 75%; } .statistical-analysis .count_row { display: flex; align-items: center; justify-content: space-around; margin: 3% 3%; font-size: 1rem; } .statistical-analysis .count_list .count_row:first-child { margin: 3% 3% 5%; } .statistical-analysis .count_row > span { width: 30%; font-weight: 550; } .statistical-analysis .count_row span:nth-child(1) { width: 40%; font-weight: 500; } .statistical-analysis .count_row span.percent_ym { font-weight: normal; } .statistical-analysis .percent_ym .percent-tag { margin: 1% 3% 5% 0; } .statistical-analysis .percent_ym .percent-tag label { margin: 0 8% 0 1%; } .statistical-analysis .count_rev { margin-top: 2%; } .statistical-analysis .count_rev h4 { background: var(--icon-rev) no-repeat center; background-size: auto 100%; } .statistical-analysis .count_rev .count_row:first-child { margin: 3% 3%; } .statistical-analysis .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; overflow: hidden; } .statistical-analysis .poptit { padding: 0 80px 0 20px; height: 42px; background: #F8F8F8; color: #333; font-size: 16px; line-height: 42px; border: none; } .statistical-analysis .closet { position: absolute; top: 1%; right: 1%; width: 30px; height: 30px; color: #999; cursor: pointer; font-size: 24px; font-family: sans-serif; text-align: center; line-height: 25px; } .statistical-analysis .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; } .statistical-analysis .tablist { width: 100%; height: 100%; overflow: hidden; } .statistical-analysis .tabtit { display: flex; margin: 0 0 1% 0; width: 100%; border-bottom: 1px solid #f0f1f2; } .statistical-analysis .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; } .statistical-analysis .tabtit > span.active { border-bottom: 3px solid rgba(12, 94, 249, 1); color: rgb(12, 94, 249); } .statistical-analysis .tabcont { display: none; width: 100%; height: calc(100% - 50px); overflow: auto; } .statistical-analysis .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; } .statistical-analysis .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"; } .statistical-analysis .selcont a.selitem.active.selected::before { content: "\f046"; color: #315efb; } .statistical-analysis .deptcont { display: flex; flex-wrap: wrap; } .statistical-analysis .deptcont a.selitem { width: 20%; } .statistical-analysis .percent-tag span.percent-single { color: #666; font-size: 1.25rem; line-height: 2; } .statistical-analysis .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; } .statistical-analysis .link_btn a { position: relative; margin: 3% 3%; padding-left: 2rem; color: #666; font-size: 1.0rem; opacity: .8; text-decoration: none; } .statistical-analysis .link_btn a:hover { opacity: 1; } .statistical-analysis .link_btn a::before { position: absolute; left: 0; top: -2px; content: ""; width: 1.75rem; height: 1.75rem; background: var(--icon-dept32) no-repeat; background-size: 100% auto; } .statistical-analysis .link_btn a:last-child::before { background: var(--icon-dist32) no-repeat; background-size: 100% auto; } .statistical-analysis .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; } .statistical-analysis .cont_total .count_row { justify-content: flex-start; } .statistical-analysis .cont_total .count_row:first-child { margin: 3% 3% 5% 2%; } .statistical-analysis .cont_total .count_row span, .statistical-analysis .cont_total .count_row span:nth-child(1) { margin: 1% 2%; width: auto; } .statistical-analysis .cont_total .count_row span.percent_ym { display: flex; justify-content: space-around; width: 35%; } .statistical-analysis .cont_total .count_row span.percent_ym .percent-tag { margin: 1% 3% 1% 0; } .statistical-analysis .count_num { color: #fa6666; font-size: 1.5rem; } .statistical-analysis .chart_ring { background: #fff var(--bg-shadow) no-repeat center; background-position-y: 90%; } /** 滚动条样式(限定在容器内) **/ .statistical-analysis ::-webkit-scrollbar-track { background-color: #F5F5F5; } .statistical-analysis ::-webkit-scrollbar { width: 6px; height: 10px; background-color: #F5F5F5; } .statistical-analysis ::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #ccc; }