* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Alibaba PuHuiTi"; user-select: none; -webkit-user-drag: none; } html, body { height: 13.5rem; width: 100%; } .container { height: 100%; width: 100%; background-image: url(../images/bj.jpg); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; } .body { height: 12.375rem; display: flex; flex-direction: row; padding: .25rem; } .side { height: 100%; width: 6.875rem; } .c-side { height: 100%; width: calc(100% - 13.75rem); } .site { margin-bottom: .25rem; background: linear-gradient(180deg, rgba(2, 17, 32, 0) 0%, rgba(14, 62, 111, 0.8) 100%); } .site > .label { height: .375rem; width: 100%; background-image: url(../images/06zbj.png); background-position: center; background-repeat: no-repeat; background-size: 100%; padding-top: .1rem; padding-left: .5rem; font-size: .175rem; font-weight: bolder; color: #FFFFFF; } .site > .main { height: calc(100% - .375rem); } .zg { height: 2.5rem; width: 100%; } .zg > .main { height: calc(100% - .375rem); display: flex; flex-direction: row; align-content: center; justify-content: space-around; align-items: center; } .zg > .main > .box { height: 1.175rem; width: 1.2rem; background-image: url(../images/zg05.png); background-position: center; background-repeat: no-repeat; background-size: 100% .625rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .zg > .main > .box > .label { color: #FFFFFF; font-size: .2rem; } .zg > .main > .box > .num { font-size: .35rem; } .zl { height: 4.125rem; } .zl .total, .p-ry > .total { width: 100%; padding: .25rem; display: flex; flex-direction: row; justify-content: space-between; } .zl .total > .glry { height: .55rem; width: 3rem; border-color: #245090; border-width: 1px; border-style: solid; border-left: none; border-right: none; padding: 0 .25rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .zl .total > .glry > .lab { color: #FFFFFF; font-size: .175rem; } .zl .total > .glry > .num { font-size: .3rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .zl .zl-maps { height: 2.7rem; display: flex; flex-direction: row; /* padding: 0 .25rem .25rem; */ } .zl .zl-maps > div { flex: 1; } .p-ry { height: 4.625rem; } .p-ry > .total > .rs { width: 1.975rem; height: .475rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-image: url(../images/14.png); background-position: center; background-repeat: no-repeat; background-size: 100%; } .p-ry > .total > .rs > .lab { color: #FFFFFF; font-size: .175rem; } .p-ry > .total > .rs > .num { font-size: .2rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } #ry-map { height: 3.275rem; width: 100%; } .zlzg { height: 3.25rem; } .zlzg > .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: .25rem; } .zlzg > .main > .total { width: 2.75rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .zlzg > .main > .total > .zg { height: .575rem; width: 100%; padding: 0 .125rem; background-image: url(../images/06.png); background-position: center; background-repeat: no-repeat; background-size: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .zlzg > .main > .total > .zg > .lab { font-size: .175rem; color: #FFFFFF; } .zlzg > .main > .total > .zg > .num { font-size: .3rem; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .zlzg > .main > .total > .zg > .num:nth-child(1) { background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); } .zlzg > .main > .total > .zg > .num:nth-child(2) { background-image: linear-gradient(180deg, #FFFFFF 40%, #12CDA2); } .zlzg > .main > .total > .zg > .num:nth-child(3) { background-image: linear-gradient(180deg, #FFFFFF 40%, #FFA602); } #zlzg { height: 100%; width: 2.75rem; background-image: url(../images/07.png), url(../images/08.png); background-position: left, right; background-repeat: no-repeat; /* background-size: .125rem 100%; */ } .jd { height: 4.125rem; } .cl { height: 3.875rem; } #jdqk { height: calc(100% - .375rem); width: 100%; } .c-site { height: 1.5rem; width: 100%; padding: 0 .5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } .c-site > .num-box { width: 1.5rem; height: 1.025rem; background-image: url(../images/15.png); background-position: center; background-repeat: no-repeat; background-size: 1.375rem .5rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .c-site > .num-box > .lab { font-size: .175rem; color: #FFFFFF; } .c-site > .num-box > .num { font-size: .325rem; color: #21FFAF; } #c-map { margin-top: .75rem; width: 100%; height: 6.875rem; } .c-site1 { height: 1.75rem; width: 100%; padding: 0 .75rem; background-image: url(../images/13.png); background-position: center; background-repeat: no-repeat; background-size: 9.125rem 2rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .c-site1 > .num-box { flex: 1; height: 1rem; display: flex; flex-direction: column; justify-content: space-around; align-content: flex-end; padding-right: .25rem; } .c-site1 > .num-box > .lab { text-align: right; color: #FFFFFF; font-size: .2rem; font-weight: bold; } .c-site1 > .num-box > .num { text-align: right; font-size: .325rem; background-image: linear-gradient(180deg, #FCEF03 40%, #FF7401); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .c-site1 > .num-box > .num > span { font-size: .15rem; margin-left: .05rem; color: #FDFDF9; } .c-site1 > .num-box:nth-child(1) { background-image: url(../images/10.png); background-position: left; background-size: .8rem; background-repeat: no-repeat; } .c-site1 > .num-box:nth-child(2) { background-image: url(../images/11.png); background-position: left; background-size: .8rem; background-repeat: no-repeat; } .c-site1 > .num-box:nth-child(3) { background-image: url(../images/12.png); background-position: left; background-size: .8rem; background-repeat: no-repeat; } .cl-tab { padding: .125rem 0; display: flex; flex-direction: row; justify-content: center; } .cl-tab > .cl-btn { padding: 0 .25rem; font-size: .175rem; color: #FFFFFF; } .cl-tab > .cl-btn-act { color: #00FFFF; } .jdtj-tab { padding: .125rem 0; display: flex; flex-direction: row; justify-content: center; } .jdtj-tab > .jdtj-btn { padding: 0 .25rem; font-size: .175rem; color: #FFFFFF; } .jdtj-tab > .jdtj-btn-act { color: #00FFFF; } .table { height: calc(100% - .5rem); border: 1px solid #1B538B; } .table > .row { height: .375rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; color: #FFFFFF; font-size: .175rem; background-color: #213771; } .table > .row > .th-p { flex: 1; text-align: center; } .table > .t-body { height: calc(100% - .375rem); overflow: hidden; overflow-y: scroll; } .table > .t-body > .row { height: .375rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; color: #FFFFFF; font-size: .175rem; } .table > .t-body > .row:nth-child(2n) { background-color: #213771; } .table > .t-body > .row > .th-p { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } *::-webkit-scrollbar { display: none; } @font-face { font-family: 'iconfont'; /* Project id 4582260 */ src: url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: .25rem; font-style: normal; color: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-yonghu:before { content: "\e624"; } .icon-bangzhu:before { content: "\e8a3"; } .icon-quanping_o:before { content: "\eb99"; } .icon-tuichu:before { content: "\e728"; } .icon-shezhi:before { content: "\e810"; } .header { height: 1.125rem; display: flex; flex-direction: row; align-items: center; } .nav-center { height: 1.125rem; width: 11.625rem; background-image: url(../images/01.png); background-position: center; background-repeat: no-repeat; background-size: 100% .875rem; } .nav-center > h1 { font-size: .375rem; text-align: center; margin-top: .25rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-left, .nav-right { width: calc((100% - 11.625rem) / 2); display: flex; flex-direction: column; } .t-btns { height: .5rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .t-btn-r { padding-right: .25rem; justify-content: flex-end; } .t-btn { width: .85rem; height: .275rem; border-radius: .1375rem; border: 1px solid #BCDEFF; color: #BCDEFF; font-size: .15rem; text-align: center; line-height: .275rem; margin-left: .25rem; } .t-btn1 { padding: 0 .125rem; } .t-btn1 > span { padding-left: .125rem; } .t-btns > .t-btn-act { background-color: #00FFFF; border-color: #00FFFF; color: #010E3B; } .n-btns-l { height: .625rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .n-btn-l { height: .375rem; width: 1.5rem; background-image: url(../images/02.png); background-position: center; background-repeat: no-repeat; background-size: 100%; color: #DEE4EF; line-height: .375rem; text-align: center; font-size: .175rem; } .n-btns-l > .n-btn-l-act { background-image: url(../images/03.png); } .n-btns-r { height: .625rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .n-btn-r { height: .375rem; width: 1.5rem; background-image: url(../images/04.png); background-position: center; background-repeat: no-repeat; background-size: 100%; color: #DEE4EF; line-height: .375rem; font-size: .175rem; text-align: center; } .n-btns-r > .n-btn-r-act { background-image: url(../images/05.png); } .fx { height: 4.25rem; } #fx-map { margin-left: .25rem; width: 2.05rem; height: 100%; } .fx > .main { display: flex; flex-direction: row; } .fx-box { width: calc(100% - 2.3rem); height: 100%; padding: .25rem; } .fx-box > .yj-bars { display: flex; flex-direction: row; } .fx-box > .yj-bars > .yj-bar { padding-left: .75rem; height: .725rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .fx-box > .yj-bars > .yj-bar > .lab { color: #8B98A5; font-size: .175rem; } .fx-box > .yj-bars > .yj-bar > .num { font-size: .3rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fx-box > .yj-bars > .yj-bar:nth-child(1) { background-image: url(../images/18.png); background-position: center left; background-repeat: no-repeat; } .fx-box > .yj-bars > .yj-bar:nth-child(2) { background-image: url(../images/19.png); background-position: center left; background-repeat: no-repeat; } .wd-box { padding-top: .25rem; } .wd-box > .tit { padding-left: .125rem; height: .3rem; font-size: .175rem; color: #FFFFFF; background-image: url(../images/20.png); background-position: center left; background-repeat: no-repeat; } .wd-box > .inner { display: flex; flex-direction: row; align-items: center; } .wd-box > .inner > .inner-box { height: .575rem; width: calc(100% - .825rem); margin-top: .25rem; display: flex; flex-direction: column; justify-content: space-between; } .wd-box > .inner > .inner-box > .lab { font-size: .15rem; color: #DADADA; } .wd-box > .inner > .inner-box > .num { font-size: .25rem; } .wd-box > .inner > .inner-box:nth-of-type(1) > .num { color: #1C92FF; } .wd-box > .inner > .inner-box:nth-of-type(2) > .num { color: #FEB185; } .wd-box > .inner > .inner-box:nth-of-type(3) > .num { color: #8E65FF; } .wd-box > .inner > .inner-box:nth-of-type(4) > .num { color: #12CDA2; } .wd-box > .inner > span { margin: 0 .125rem; display: inline-block; height: .5rem; width: .05rem; /* border-radius: 50%; */ background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff, rgba(255,255,255,0)); } .aqyh { width: 100%; padding: .375rem .5rem; } .aqyh > .an-boxs { display: flex; flex-direction: row; justify-content: space-around; } .aqyh > .an-boxs > div { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: .175rem; color: #DADADA; } .aqyh > .an-boxs > div > .dot { width: .15rem; height: .15rem; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; } .aqyh > .an-boxs > div > .dot > .dot-c { width: .125rem; height: .125rem; border-radius: 50%; background-color: #4F97F9; } .aqyh > .an-boxs > div > p:nth-of-type(1) { padding: 0 .125rem; font-size: .175rem; color: #DADADA; } .aqyh > .an-boxs > div > p:nth-of-type(2) { font-size: .25rem; } .aerial-view { width: 100%; padding: 0 .375rem; } .aerial-view > .swiper { height: 3.925rem; width: 100%; overflow: hidden; } .ht-boxs { margin-top: .125rem; display: flex; flex-direction: row; justify-content: space-between; } .ht-boxs > .ht-box { height: .875rem; width: 2.75rem; background-image: url(../images/17.png); background-position: center; background-repeat: no-repeat; padding: .125rem; display: flex; flex-direction: column; justify-content: space-between; } .ht-box > .label { color: #FFFFFF; font-size: .175rem; text-align: left; } .ht-box > .value { font-size: .3rem; text-align: right; font-weight: bold; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ht-box > .value > span { font-size: .175rem; color: #63CAFF; display: inline-block; margin-left: .125rem; } .aerial-view > .swiper .swiper-slide { position: relative; } .aerial-view > .swiper .swiper-slide > .detail-box { position: absolute; bottom: 0; left: 0; right: 0; height: 1.25rem; background: rgba(0,0,0,0.6); padding: .2rem .25rem; display: flex; flex-direction: column; justify-content: space-between; } .aerial-view > .swiper .swiper-slide > .detail-box > .title { color: #ffffff; font-size: .225rem; } .aerial-view > .swiper .swiper-slide > .detail-box > .det-row { display: flex; flex-direction: row; justify-content: space-between; } .aerial-view > .swiper .swiper-slide > .detail-box > .det-row > .col { width: 32%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; color: #FFFFFF; font-size: .175rem; white-space: nowrap; /* 确保文本在一行内显示 */ overflow: hidden; /* 隐藏超出容器的内容 */ text-overflow: ellipsis; } .aerial-view > .swiper .swiper-slide > .detail-box > p { color: #FFFFFF; font-size: .175rem; width: 100%; white-space: nowrap; /* 确保文本在一行内显示 */ overflow: hidden; /* 隐藏超出容器的内容 */ text-overflow: ellipsis; } .aqtj { margin-top: .375rem; height: 3.85rem; position: relative; background-image: none; padding: 0 .375rem; } .aqtj > .gjl { position: absolute; top: -0.125rem; right: .25rem; font-size: .175rem; text-align: right; padding-right: .125rem; color: #ffffff; } .aqtj > .gjl > span { color: #E9E931; font-size: .25rem; display: inline-block; padding-left: .25rem; } #aq-map { height: 100%; width: 100%; } .zy { height: 2.875rem; } .zy > .total { display: flex; flex-direction: row; justify-content: space-between; padding: .1875rem .25rem; } .zy > .total > .zyp { height: .475rem; width: 1.425rem; background-image: url(../images/14.png); background-position: center; background-repeat: no-repeat; background-size: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 .1rem; } .zy > .total > .zyp > .lab { font-size: .175rem; color: #ffffff; } .zy > .total > .zyp > .num { font-size: .2rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .zy > .zy-table { height: 1.5rem; width: 100%; padding: 0 .25rem .25rem; overflow: hidden; overflow-y: scroll; } .zy > .zy-table > .row { height: .45rem; line-height: .45rem; font-size: .175rem; color: #ffffff; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zy > .zy-table > .row:nth-child(2n-1) { background-color: #0D2A54; } .zy > .zy-table > .row > a { text-decoration: none; color: inherit; } .gz { height: 3.75rem; } .gz .total { margin-top: .25rem; display: flex; flex-direction: row; justify-content: space-between; padding: 0 .25rem; } .gz .total > .zg { width: 1.425rem; height: .475rem; background-image: url(../images/14.png); background-position: center; background-repeat: no-repeat; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 .1rem; } .gz .total > .zg > .lab { font-size: .175rem; color: #ffffff; } .gz .total > .zg > .num { font-weight: bold; font-size: .2rem; background-image: linear-gradient(180deg, #FFFFFF 40%, #00FFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gz ul { height: calc(100% - .975rem); padding: .25rem .25rem 0; color: #ffffff; font-size: .175rem; overflow: hidden; overflow-y: scroll; } .gz ul > li { line-height: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding-left: .25rem; } .gz ul > li:nth-child(2n-1) { background-color: #0D2A54; } ul, li { list-style: none; } .jd > .main > .total > .zg { width: 1.975rem; background-size: 100%; } .cltj { height: 3.875rem; } .cltj .table { max-height: calc(100% - .5rem); } .cltj .table > .row { height: .5rem; } .cltj .table > .row > .th-p { padding: 0; height: 100%; border-right: 1px solid #1B538B; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cltj .table > .row > .th-p:nth-child(1) { width: 10%; } .cltj .table > .row > .th-p:last-child { border: none; } .cltj .table > .row > .th-p > p { display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; } .cltj .table > .row > .th-p > p:last-child { border-top: 1px solid #1B538B; } .cltj .table > .row > .th-p > p > span { display: inline-block; width: 100%; padding: 0 .025rem; border-right: 1px solid #1B538B; } .cltj .table > .row > .th-p > p > span:last-child { border: none; } .cltj .table > .t-body { width: 100%; height: calc(100% - .5rem); } .cltj .table > .t-body > .row { width: 100%; height: .375rem; /* display: flex; flex-direction: row; justify-content: flex-start; align-items: center; */ } .cltj .table > .t-body > .row > .tr { flex: 1; font-size: .15rem; display: flex; flex-direction: column; justify-content: center; align-items: center; height: .375rem; border-right: 1px solid #1B538B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .05rem; overflow-x: scroll; } .cltj .table > .t-body > .row > .tr:last-child { border: none; } .cltj .table > .t-body > .row > .tr > p { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .cltj .table > .t-body > .row > .tr > p > span { flex: 1; height: 100%; border-right: 1px solid #1B538B; line-height: .375rem; overflow: hidden; /* text-overflow: ellipsis; */ white-space: nowrap; } .cltj .table > .t-body > .row > .tr > p > span:last-child { border: none; } .jdtj { height: 3.875rem; } .jdtj .table { max-height: calc(100% - .5rem); } .jdtj .table > .row { height: .5rem; } .jdtj .table > .row > .th-p { padding: 0; height: 100%; border-right: 1px solid #1B538B; display: flex; flex-direction: column; align-items: center; justify-content: center; } .jdtj .table > .row > .th-p:nth-child(1) { width: 10%; } .jdtj .table > .row > .th-p:last-child { border: none; } .jdtj .table > .row > .th-p > p { display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; } .jdtj .table > .row > .th-p > p:last-child { border-top: 1px solid #1B538B; } .jdtj .table > .row > .th-p > p > span { display: inline-block; width: 100%; padding: 0 .025rem; border-right: 1px solid #1B538B; } .jdtj .table > .row > .th-p > p > span:last-child { border: none; } .jdtj .table > .t-body { width: 100%; height: calc(100% - .5rem); } .jdtj .table > .t-body > .row { width: 100%; height: .375rem; /* display: flex; flex-direction: row; justify-content: flex-start; align-items: center; */ } .jdtj .table > .t-body > .row > .tr { flex: 1; font-size: .15rem; display: flex; flex-direction: column; justify-content: center; align-items: center; height: .375rem; border-right: 1px solid #1B538B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .05rem; overflow-x: scroll; } .jdtj .table > .t-body > .row > .tr:last-child { border: none; } .jdtj .table > .t-body > .row > .tr > p { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .jdtj .table > .t-body > .row > .tr > p > span { flex: 1; height: 100%; border-right: 1px solid #1B538B; line-height: .375rem; overflow: hidden; /* text-overflow: ellipsis; */ white-space: nowrap; } .jdtj .table > .t-body > .row > .tr > p > span:last-child { border: none; } .p-t-btns { justify-content: flex-end; position: relative; } .p-t-btn > .t-btn { width: auto; } .projectSelect { /* position: absolute; */ /* left: .25rem; */ width: 6.25rem; padding-left: .25rem; line-height: .5rem; color: #FFFFFF; font-size: .175rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: row; align-items: center; } .p-n-btn-l { width: 1.025rem; font-size: .15rem; } .c-n-btn-r { width: 1.025rem; font-size: .15rem; }