#wrap { height: 100%; background-image: url(../images/01/01bj.png); padding-top: .3125rem; } .container { height: 100%; padding: 1.0417rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .container > .site { height: 100%; } .side { display: flex; flex-direction: column; justify-content: space-between; } #chinaMap { height: 36.5625rem; } .center-bottom { width: 100%; height: 12.1875rem; background-image: url(../images/01/02.png); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; /* display: flex; flex-direction: column; */ } .center-bottom .imgbox { height: calc(100% - 0rem); padding: 1.0417rem; } .center-bottom .imgbox > img { width: 100%; height: 100%; } .side > .block { height: 49%; width: 27.0833rem; background-image: url(../images/01/02.png); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; display: flex; flex-direction: column; } .block > .blockTitle { text-align: center; line-height: 1.875rem; font-family: PingFangSC-Medium, PingFang SC; color: #ffffff; background-image: url(../images/01/01.png); background-repeat: no-repeat; background-position: center top; display: flex; flex-direction: column; } .side > .block > .block-container { height: calc(100% - 1.875rem); width: 100%; } .side > .block > .subTitle { height: 5rem; width: 100%; background-image: url(../images/01/03.png); background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; } .side > .block > ul { overflow:hidden; } .side > .block ul > li { font-size: .7292rem; font-family: PingFang-SC-Regular, PingFang-SC; font-weight: 400; color: #7FB9FF; margin-top:10px; white-space: nowrap; text-overflow: ellipsis; white-space: normal; word-break: break-all; word-wrap: break-word; } .side > .block > .hb { background-image: url(../images/01/04.png); } .side > .block > .subTitle > span { margin-left: 4.1667rem; } .wd-container { height: calc(100% - 1.875rem - 5rem); width: 100%; padding: .5208rem 1.5625rem 1.5625rem; overflow: hidden; } .wd-container .scroll::-webkit-scrollbar { display: none; } .wd-container .scroll { width: 100%; height: 100%; overflow-y: scroll; } .wd-container ul { height: 100%; /* padding:1.5625rem; */ } .wd-container ul > li { font-size: .7292rem; font-family: PingFang-SC-Regular, PingFang-SC; font-weight: 400; color: #7FB9FF; line-height: 1.875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #hiddenDanger { padding: 1.5625rem; } #chinaMap { height: 30.7292rem; width: 100%; } .zaijian { position: absolute; top: 1.5625rem; color: #ffffff; height: 3.125rem; width: 15.625rem; background-image: url(../images/01/b2.png); background-repeat: no-repeat; background-position: center; display: flex; flex-direction: row; align-items: center; } .fengxian { display: flex; flex-direction: column; align-items: center; padding: 0 1.0417rem; } .aq { margin-top: .5208rem; width: 25rem; height: 2.6042rem; background-image: url(../images/01/b2.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .aq > .label { font-size: .8333rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; } .aq > .val { padding-left: 1.0417rem; font-size: 1.3542rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #66FAFF; } .chl { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .chl > .box { width: 100%; padding-bottom: .7813rem; height: calc(100% - 1.0417rem); display: flex; flex-direction: row; } .mapbox { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #riskMap { height: 100%; width: 100%; } .chl > .box > .boxNUm { display: flex; flex-direction: column; justify-content: space-between; } .chl > .box > .boxNUm > .dot { background-image: url(../images/01/leftbj.png); background-repeat: no-repeat; background-position: center; background-size: 100%; width: 12.5rem; height: 5.4688rem; display: flex; flex-direction: column; align-items: center; padding: .5208rem 0; } .chl > .box > .boxNUm > .dot > .dot-tit { font-size: .7292rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #7FB9FF; } .chl > .box > .boxNUm > .dot > .dot-val { margin-top: .5208rem; width: 100%; display: flex; flex-direction: row; justify-content: space-around; } .chl > .box > .boxNUm > .dot > .dot-val > .val { display: flex; flex-direction: column; align-items: center; font-size: .8333rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ffffff; } .chl > .label { margin: .5208rem 0 .5208rem 0; font-size: .7292rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #F9F9F9; } .chl > p { font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #7FB9FF; } .zaijian > .row { flex: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; } .zaijian > .row > .label { font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; } .zaijian > .row > .val { margin-left: .5208rem; font-size: 26px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; } .container > .center-site { display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; } /* 地图tooltip 样式*/ .item3 { width: 13.5417rem; /* background: rgba(7, 44, 89, 0.7); */ background-image: url(../images/01/b4.png); background-repeat: no-repeat; background-size: 100%; background-position: center; /* border: 1px solid rgba(7, 166, 255, 0.76); */ } .item3 > .item3-title { width: 11.5625rem; padding: 0 1.0417rem; color: #FFFFFF; line-height: 1.5917rem; font-size: .7292rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .item3 > .main { height: calc(100% - 2.2917rem); width: 100%; padding: .0208rem 1.0417rem 0; /* padding: 1.0417rem 1.5625rem 0; */ display: flex; flex-direction: row; } .item3 > .main > .boxs { flex: 1; } .item3 > .main > .boxs > .box > .label { color: #ffffff; font-size: .7292rem; } .item3 > .main > .boxs > .box { display: flex; flex-direction: row; align-items: center; } .item3 > .main > .boxs > .box > .val { color: #f2f2f2; font-size: .7292rem; padding-left: 1.0417rem; }