@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: 25%; } .cont_left { width: 100%; height: 100%; background: rgba(11, 59, 145, .6); 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); 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; right: 0; width: 18px; height: 100%; } .select_item > label::after, .select_item > .time_wrap::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; } .select_item > .time_wrap::after { position: absolute; top: 0.95rem; } .time_wrap { display: inline-block; position: relative; width: 18rem; height: 2.15rem; } .select_item > .time_wrap > input { position: relative; margin: 0 2px; padding: 0 0.5rem; width: 100%; height: 100%; color: rgba(255, 255, 255, .8); background: linear-gradient(to top, transparent 0, rgba(59, 145, 253, 0.3), rgba(59, 145, 253, 0.05)); border: 0 none; cursor: pointer; } .link_btn { float: right; margin: 0.45% 5% 2% 0; 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_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.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, #d2f5ff, #0394f9); -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.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%; 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, .9); font-size: 1.15rem; text-shadow: 0 0 5px #000; cursor: pointer; } @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: -17.5rem; left: -15.25rem; z-index: 99; min-width: 23rem; height: 17.5rem; background: url(../images/bg_tip.png) no-repeat; background-size: 100% 100%; } .fold_cont::before { position: absolute; 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: -12.75rem; } #districtGM .fold_cont::before { left: 6.75rem; } #districtBA .fold_cont { left: -7.5rem; } #districtBA .fold_cont::before { left: 1.5rem; } #districtNS .fold_cont { left: -12.85rem; } #districtNS .fold_cont::before { left: 6.75rem; } #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: 11%; left: 7.25%; right: 32%; z-index: 999; } .pop_tit > h5 { font-size: 1.15rem; font-weight: normal; } .inspect_count { margin: 4% 0 3% -0.5rem; color: rgba(255, 255, 255, .6); } .inspect_count b { color: #06b8f8; } .tab_switch { /*position: relative; top: 12%; left: 10%;*/ width: 35%; /*height: 1.75rem; background-color: rgba(25, 64, 88, .35); border-radius: 3rem;*/ white-space: nowrap; } .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: 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: 0; padding: 0 0 0 1.25rem; } .tab_inspect_item:last-child > ul > li { margin: 2% 0; } .tab_inspect_item > ul > li::before { position: absolute; top: 0.35rem; left: 0; content: "\f111"; color: #7ca9fb; font-family: "FontAwesome"; font-size: 0.65rem; } .tab_inspect_item > ul > li > label { width: 40%; color: #92b3d3; white-space: nowrap; } .tab_inspect_item > ul > li > span { width: 40%; color: #06b8f8; font-weight: 550; text-align: right; } .tab_inspect_item > ul > li > span:last-child { width: 35%; 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: 8% 5% 0 -5%; width: 38%; } .tab_inspect_item:last-child > ul > li > label { width: 30%; } .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, .tab_switch a { margin: 0 0.35rem; padding: 1% 2%; color: rgba(255, 255, 255, .5); } .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; 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: 46.65%; width: 100%; } .count_wrap .count_item { display: flex; float: left; position: relative; margin: 2.5% 0 1.5% 3%; width: 45%; 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: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: 2.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-block; margin: 2% 2% 5%; width: 36%; color: rgba(255, 255, 255, .7); font-size: 0.85rem; line-height: 2.5; white-space: nowrap; } .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; margin: 0 5%; width: 60%; background-image: linear-gradient(to right, #f7fbfd, #2ba4b3); -webkit-background-clip: text; color: transparent; font-size: 1.65rem; font-weight: 550; 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: rgba(243, 153, 98, .75); font-size: 0.85rem; } .count_admin { display: flex; align-items: center; justify-content: space-around; margin: 3.5% 0 0; width: 97%; } .count_admin > label { 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, 1); font-size: 0.85rem; line-height: 2; text-align: center; } .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 { 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); -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, .75); font-size: 1rem; 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 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: 0; width: 100%; height: 46%; background: url("../images/bg_pie.png") no-repeat center; background-position-y: 50.5%; background-size: 48.5%; } .wrap_right .chartbox_right { height: 47%; background-position-y: 30.5%; } /** 时间选择样式 **/ .layui-laydate, .layui-laydate-hint { box-shadow: 0 2px 4px rgba(11, 59, 145, .5) !important; background-color: rgba(5, 25, 62, .9) !important; border: 1px solid rgba(11, 59, 145, .8) !important; color: #fff !important; } .layui-laydate-header { border-bottom: 1px solid rgba(11, 59, 145, .8) !important; } .layui-laydate-footer { border-top: 1px solid rgba(11, 59, 145, .8) !important; } .layui-laydate-range .laydate-main-list-1 .layui-laydate-content { border-left: 1px solid rgba(11, 59, 145, .8) !important; } .layui-laydate-content td { color: rgba(255, 255, 255, .9) !important; } .layui-laydate-content .laydate-day-next, .layui-laydate-content .laydate-day-prev { color: rgba(255, 255, 255, .5) !important; } .layui-laydate-content tbody tr:nth-child(even) { background: transparent !important; } .layui-laydate-content th { color: #5494cd !important; } .layui-laydate-content td.laydate-selected { background-color: #016b66 !important; } .laydate-selected.laydate-day-next, .laydate-selected.laydate-day-prev { background-color: #323131 !important; } .laydate-footer-btns span { border: 1px solid #163a66 !important; background-color: #1852bb !important; } .layui-laydate-footer span:hover { color: #0be3fb !important; } .layui-laydate-list { background-color: rgba(0, 0, 0, .85) !important; } /** 滚动条样式 **/ ::-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); }