* { 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; } .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: #BCDEFF; -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 .25rem; height: .275rem; font-size: .15rem; text-align: center; color: #BCDEFF; line-height: .275rem; } .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; } .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; }