@charset "utf-8"; /* CSS Document */ * { 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; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; clear: both; } html, body { width: 100%; height: 100%; font-size: 14px; overflow: hidden; } .wrap_all { width: 100%; height: 100%; background: url(../images/bg_homebody.jpg) no-repeat; background-size: cover; 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%; width: 20.5%; overflow: hidden; } .wrap_right { left: auto; right: 0.5%; } .wrap_cent { left: 20%; width: 60%; } .wrap_bottom { top: auto; bottom: 2%; left: 21.5%; width: 57%; height: 24%; } .cont_left { width: 100%; height: 100%; background: rgba(16, 46, 112, .3); border-radius: 5px; } .select_set { float: left; margin: 0.5% 0.5% 0.6% 5%; padding-left: 2.5rem; 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; margin: 0 5px 0 0; padding: 0 2.5rem 0 0.85rem; height: 2.15rem; line-height: 1.75; 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; top: 0.45rem; right: -0.2rem; transform: rotate(90deg); width: 18px; height: 18px; content: "\f105"; color: #678dfe; font-family: "FontAwesome"; font-size: 1.25rem; } .link_btn { float: right; margin: 0.45% 5% 2%; min-width: 31rem; height: 2rem; font-size: 1.2rem; 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; top: 0; content: ""; width: 1.75rem; height: 1.75rem; 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; right: -1.1rem; content: "\f105"; color: #1ab5e0; font-family: "FontAwesome"; font-size: 1.25rem; opacity: .75; } .count_box { display: flex; justify-content: space-between; margin: 2% 5%; 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%; height: 100%; background: url(../images/icon_data2.png) no-repeat; background-size: auto 80%; } .count_box .count_tit label { position: absolute; top: 5.65rem; left: 0; display: block; margin: 0; padding: 2% 5% 2% 18%; width: auto; background: url(../images/bg_tit3.png) no-repeat; background-size: auto 100%; color: rgba(255, 255, 255, .6); font-size: 1.25rem; white-space: nowrap; } .count_num_all { background-image: linear-gradient(to right, #f7fbfd, #26bef9); -webkit-background-clip: text; color: transparent; font-size: 3.15rem; font-weight: 550; 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; color: transparent; font-size: 1.25rem; font-weight: 550; 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); } .map_box { position: relative; top: -3.5%; width: 100%; } .map_box > img.szmap { margin-top: 0; max-width: 100%; /* max-height: 100%; */ height: auto; } .label_wrap { position: absolute; top: 0; left: 0; z-index: 10; 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; } @keyframes blink { 0%, 100% { opacity: 1; } /* 完全不透明 */ 50% { opacity: 0; } /* 完全透明 */ } /* 应用动画到元素 */ .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; margin: 5% 0; padding: 0 0 0 1.5rem; 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; width: 1.25rem; height: 1.25rem; background-color: rgba(46, 97, 241, .8); border-radius: 50%; content: "检"; 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; z-index: 99; 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; z-index: -1; width: 6rem; height: 5rem; background: url(../images/bg_tip_line.png) no-repeat; background-size: auto 80%; content: ""; } #districtGM .fold_cont { left: -11rem; } #districtGM .fold_cont::before { left: 30%; } #districtBA .fold_cont { left: -6rem; } #districtBA .fold_cont::before { left: 7.5%; } #districtNS .fold_cont { left: -11rem; } #districtNS .fold_cont::before { left: 30%; } #districtSS .admin_inspect, #districtSS .non_admin_inspect { margin-left: 4.5rem; } .tab_switch { position: relative; top: 12%; left: 10%; width: 65%; height: 1.75rem; background-color: rgba(25, 64, 88, .35); border-radius: 3rem; } .tab_switch a { padding: 0 1.25rem; color: rgba(255, 255, 255, .5); font-size: 1rem; line-height: 1.75; white-space: nowrap; text-align: center; } .tab_switch a.active { /*background-color: #02a3ab;*/ background-image: linear-gradient(to bottom, transparent, #26bef9); border-radius: 3rem; box-shadow: 0 0 5px #1ce9f3; color: #fff; } .tab_inspect { margin: 10% 10% 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; padding: 0 0 0 1.25rem; } .tab_inspect_item > ul > li::before { position: absolute; top: 0.25rem; left: 0; content: "\f111"; color: #1ab5e0; font-family: "FontAwesome"; font-size: 0.85rem; } .tab_inspect_item > ul > li > label { color: #92b3d3; } .tab_inspect_item > ul > li > span { color: #06b8f8; font-weight: 550; } .legend_box { display: flex; justify-content: center; position: absolute; left: 22%; bottom: 8%; min-width: 50%; white-space: nowrap; } .legend_box label { position: relative; margin: 0 6.5% 0 0; padding: 0 0 0 1.75rem; color: rgba(255, 255, 255, .5); font-size: 0.85rem; } .legend_box label::before { position: absolute; left: 0; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; content: "检"; 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; content: ""; background: #2e90fd; 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; font-size: 1.2rem; font-weight: 500; line-height: 2; text-shadow: 2px 1px 5px rgba(255, 255, 255, .5); } .tab_chart { position: relative; margin: 2% 1%; clear: both; overflow: auto; width: 98%; height: calc(96% - 3rem); } .chartbox { width: 100%; height: 100%; } .tab_tit { position: absolute; top: 8%; left: 10rem; font-size: 1rem; white-space: nowrap; } .tab_tit a { margin: 0 5%; padding: 1% 2%; color: rgba(255, 255, 255, .5); } .tab_tit a.active { color: #2e82fd; border-bottom: 2px solid #2e82fd; } .block_tit { margin: 0 0 1% 0; padding: 0 0 0 4rem; height: 2.5rem; background: url(../images/bg_tit.png) no-repeat; background-size: 100% 100%; font-size: 1.2rem; font-weight: 500; line-height: 2; text-shadow: 2px 1px 5px rgba(255, 255, 255, .5); } .count_wrap { /* display: flex; */ /* flex-wrap: wrap; */ height: 100%; width: 100%; } .count_wrap .count_item { float: left; position: relative; margin: 0.5% 5% 1.5%; width: 45%; height: 15%; border-radius: 10px; font-size: 1rem; text-align: center; } /*.count_wrap .count_item:last-child { width: 90%; }*/ .count_wrap .count_item:nth-child(even) { margin-left: -5%; } .count_wrap .count_item::before { display: block; position: absolute; top: 30%; right: 0; content: ""; width: 100%; height: 60%; background: linear-gradient(to bottom, transparent 50%, rgba(20,138,156,.3)); } .count_wrap .count_item:nth-child(odd)::after { display: inline-block; position: absolute; top: 30%; right: -2.5%; content: ""; width: 2px; 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; } .number_count { display: block; background-image: linear-gradient(to right, #f7fbfd, #26bef9); -webkit-background-clip: text; color: transparent; font-size: 2.0rem; font-weight: 550; line-height: 1.85; } .number_percent { color: rgba(243, 153, 98, .8); font-size: 1.15rem; } .number_percent > i { margin-left: 2%; color: #f39962; font-size: 0.8rem; } .count_admin { display: flex; align-items: center; justify-content: space-around; margin: 5% 0 0; width: 97%; } .count_admin > label { width: 5rem; height: 5rem; 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); font-size: 0.85rem; line-height: 2; text-align: center; } .count_admin:nth-child(2) > 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 { 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 { text-align: center; } .count_admin_num > b { display: block; background-image: linear-gradient(to right, #d2f5ff, #0394f9); -webkit-background-clip: text; color: transparent; font-size: 2.0rem; 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); 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); font-size: 0.85rem; } .chartbox_right { margin: 15% 0 0; width: 100%; height: 35%; } /** 滚动条样式 **/ ::-webkit-scrollbar { /*滚动条整体样式*/ width: 0.5rem; /*高宽分别对应横竖滚动条的尺寸*/ height: 0.5rem; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 0.5rem; background-color: #02206d; box-shadow: inset 0 0 10px rgba(5, 172, 254, 0.6); } ::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.15); }