770 lines
15 KiB
CSS
770 lines
15 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-image: url(../images/02/bj\ 2.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* 导航栏 */
|
|
.header-navs {
|
|
height: 3.4737rem;
|
|
width: 100%;
|
|
background-image: url(../images/02/01headbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 1.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-left>h1 {
|
|
color: #1AB1FF;
|
|
font-size: 1.4737rem;
|
|
}
|
|
|
|
.nav-left>span {
|
|
margin-left: 1.0526rem;
|
|
margin-right: 1.0526rem;
|
|
display: inline-block;
|
|
width: 0.1053rem;
|
|
height: 3.4737rem;
|
|
background-image: url(../images/02/03line.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.nav-left>.selected {
|
|
padding: 0 1.0526rem;
|
|
color: #1AB1FF;
|
|
font-size: 0.7368rem;
|
|
background-image: url(../images/02/03select.png);
|
|
background-position: right;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.7368rem 0.4737rem;
|
|
cursor: pointer;
|
|
position: relative;
|
|
/* overflow: hidden; */
|
|
|
|
}
|
|
.nav-left>.selected>span{
|
|
display: inline-block;
|
|
max-width: 10rem;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
.nav-left>.selected>ul{
|
|
position: absolute;
|
|
top: 1.3684rem;
|
|
left: 0;
|
|
padding: 0.3158rem 1.0526rem;
|
|
background: rgba(32,72,146,0.3);
|
|
border: 1px solid #28559B;
|
|
z-index: 99999;
|
|
}
|
|
.nav-left>.selected>ul>li{
|
|
line-height: 1.2632rem;
|
|
color: #637DAB;
|
|
}
|
|
.nav-left>.selected>ul>li:hover{
|
|
line-height: 1.2632rem;
|
|
color: #ffffff;
|
|
}
|
|
.nav-center {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-center>.nav {
|
|
margin: 0 0.5263rem;
|
|
font-size: 0.7368rem;
|
|
color: #1AB1FF;
|
|
width: 5.0526rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
background-image: url(../images/02/02navbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.nav-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-right>.set {
|
|
margin: 0 0.5263rem;
|
|
color: #1AB1FF;
|
|
font-size: 0.6316rem;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
padding-left: 1.0526rem;
|
|
background-size: 0.7368rem 0.7368rem;
|
|
}
|
|
|
|
.nav-right>.icon1 {
|
|
background-image: url(../images/02/02icon1.png);
|
|
}
|
|
|
|
.nav-right>.icon2 {
|
|
background-image: url(../images/02/03icon1.png);
|
|
}
|
|
|
|
.nav-right>.icon3 {
|
|
background-image: url(../images/02/04icon2.png);
|
|
}
|
|
|
|
.nav-right>.icon4 {
|
|
background-image: url(../images/02/05icon-1.png);
|
|
}
|
|
|
|
.nav-right>.icon5 {
|
|
background-image: url(../images/02/06icon1.png);
|
|
}
|
|
|
|
/* 主要内容 */
|
|
#wrap {
|
|
padding: 1.5789rem 1.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
height: 52.7895rem
|
|
}
|
|
|
|
.left,
|
|
.right,
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#wrap .items {
|
|
height: 15.5789rem;
|
|
width: 23.9474rem;
|
|
background-image: url(../images/02/03itembg.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
#wrap .items1 {
|
|
height: 15.5789rem;
|
|
width: 48.9474rem;
|
|
background-image: url(../images/02/04bj02.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
#wrap .items>.title {
|
|
color: #00FFFF;
|
|
font-size: 0.8421rem;
|
|
text-align: center;
|
|
line-height: 1.4737rem;
|
|
}
|
|
|
|
#wrap .items1>.title {
|
|
color: #00FFFF;
|
|
font-size: 0.8421rem;
|
|
line-height: 1.4737rem;
|
|
position: absolute;
|
|
left: 21.2105rem;
|
|
}
|
|
|
|
/* 安全数据统计 */
|
|
.statistics {
|
|
padding: 1.0526rem;
|
|
}
|
|
|
|
.statistics>.statistics-label {
|
|
color: #7ECEF7;
|
|
font-size: 0.8421rem;
|
|
margin-bottom: 0.8421rem;
|
|
}
|
|
|
|
.statistics>.statistics-nub {
|
|
padding: 0 1.0526rem;
|
|
margin-bottom: 0.8421rem;
|
|
font-family: 'DIN';
|
|
text-align: center;
|
|
color: #7ECEF7;
|
|
font-size: 1.5789rem;
|
|
letter-spacing: 0.5263rem;
|
|
line-height: 2.5789rem;
|
|
background-image: url(../images/02/06bj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.statistics>.boxs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 4.7368rem;
|
|
}
|
|
|
|
.statistics>.boxs>.box {
|
|
flex: 1;
|
|
height: 10.7368rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.statistics>.boxs>.box>span:nth-of-type(1) {
|
|
color: #00FFFF;
|
|
font-size: 2.1053rem;
|
|
position: absolute;
|
|
top: -0.3158rem;
|
|
|
|
}
|
|
|
|
.statistics>.boxs>.box>span:nth-of-type(2) {
|
|
color: #1AB1FF;
|
|
font-size: 1.0368rem;
|
|
|
|
}
|
|
|
|
.statistics > .boxs > .box > img {
|
|
height: 8.6842rem;
|
|
width: 5.7368rem;
|
|
}
|
|
|
|
/* 风险分级 */
|
|
.risk {
|
|
height: calc(100% - 1.4737rem);
|
|
}
|
|
|
|
#riskMap {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 资质预计 */
|
|
.predict {
|
|
padding: 1.0526rem;
|
|
height: calc(100% - 1.4737rem);
|
|
background-image: url(../images/02/15yjbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.predict>.box {
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
|
|
.predict>.box>.box-item {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.predict>.box>.box-right {
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.predict>.box>.box-item>.item-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 0.5263rem;
|
|
}
|
|
|
|
.predict>.box>.box-item>.item-text>span:nth-of-type(1) {
|
|
color: #00FFFF;
|
|
font-size: 0.982rem;
|
|
margin-bottom: 0.03rem;
|
|
}
|
|
|
|
.predict>.box>.box-item>.item-text>span:nth-of-type(2) {
|
|
color: #1AB1FF;
|
|
}
|
|
|
|
/* 劳务数据 */
|
|
.service {
|
|
height: calc(100% - 1.4737rem);
|
|
padding: 1.0526rem;
|
|
}
|
|
|
|
.service>.boxs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.service>.boxs>.box {
|
|
width: 6.4211rem;
|
|
height: 3.2632rem;
|
|
background-image: url(../images/02/27lwbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.service>.boxs>.box>p:nth-of-type(1) {
|
|
color: #A9DDEE;
|
|
font-size: 0.7368rem;
|
|
text-align: center;
|
|
line-height: 1.3684rem;
|
|
}
|
|
|
|
.service>.boxs>.box>p:nth-of-type(2) {
|
|
color: #FFB260;
|
|
font-size: 1.2632rem;
|
|
text-align: center;
|
|
line-height: 1.5789rem;
|
|
}
|
|
|
|
#serviceMap {
|
|
height: calc(100% - 3.2632rem);
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* 环境监测 */
|
|
.env {
|
|
height: calc(100% - 1.4737rem);
|
|
padding: 1.0526rem;
|
|
}
|
|
|
|
.env>.boxs {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-image: url(../images/02/36bj.png), url(../images/02/29hjbj.png);
|
|
background-position: center, center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%, 11.0526rem 11.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.env>.boxs>.box-column {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.env>.boxs .box {
|
|
height: 2.7368rem;
|
|
width: 6.3158rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
padding-left: 0.625rem;
|
|
}
|
|
|
|
.env>.boxs .box>.left {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.env>.boxs .box>.left>p {
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
color: #68BAE5;
|
|
}
|
|
|
|
.env>.boxs .box>.left>p>span {
|
|
color: #2689BD;
|
|
}
|
|
|
|
.env>.boxs .box>.left>img {
|
|
height: 1.1875rem;
|
|
width: 1.1875rem;
|
|
}
|
|
|
|
.env>.boxs .box>.num {
|
|
margin-left: 1.25rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.env>.boxs>.box-column1 .box {
|
|
justify-content: flex-end;
|
|
padding-right: 0.625rem;
|
|
}
|
|
|
|
.env>.boxs .box-column1 .box>.left {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.env>.boxs .box>.num {
|
|
margin-right: 1.25rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.env .env_center{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.env .env_center>p{
|
|
font-size: 28px;
|
|
color: #31DDF3;
|
|
}
|
|
.env .env_center>.d{
|
|
font-size: 16px;
|
|
}
|
|
.env .env_center>p>span{
|
|
color: #5CB4E6;
|
|
font-size: 12px;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
.center .general {
|
|
height: calc(100% - 1.1579rem);
|
|
margin-top: 0.8947rem;
|
|
padding: 1.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.center .general>.general-i {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 0.5263rem;
|
|
}
|
|
|
|
.general>.general-i>ul {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.general>.general-i>ul>li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0.2105rem 0.4211rem;
|
|
}
|
|
|
|
.general>.general-i>ul>li:nth-child(2n -1) {
|
|
background-color: #191E53;
|
|
}
|
|
|
|
.general>.general-i>ul>li>.label {
|
|
color: #268ABD;
|
|
font-size: 0.7368rem;
|
|
}
|
|
|
|
.general>.general-i>ul>li>.val {
|
|
color: #68BAE5;
|
|
font-size: 0.6316rem;
|
|
padding-left: 0.5263rem;
|
|
}
|
|
|
|
.general>.general-i>.project {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.general>.general-i>.boxs {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box {
|
|
height: 30%;
|
|
width: 100%;
|
|
background-image: url(../images/02/17gcbk.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box {
|
|
padding: 0 1.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box>.box-label {
|
|
font-size: 0.7368rem;
|
|
font-weight: 700;
|
|
color: #1AB1FF;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box>.box-val>span {
|
|
color: #1AB1FF;
|
|
font-size: 0.7368rem;
|
|
margin-left: 0.3158rem;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box>.pact {
|
|
color: #6CEFF1;
|
|
font-size: 1.4737rem;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box>.time {
|
|
color: #FFA600;
|
|
font-size: 1.0526rem;
|
|
}
|
|
|
|
.general>.general-i>.boxs>.box>.residue {
|
|
color: #F24166;
|
|
font-size: 2.5263rem;
|
|
}
|
|
|
|
.quality{
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 1.0526rem;
|
|
padding-top: 2.5263rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.quality>.boxs{
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
.quality>.boxs>.boxs-label{
|
|
background-image: url(../images/02/18zlbj.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
line-height: 1.7895rem;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.quality>.boxs>.boxs-label>span:nth-of-type(1){
|
|
color: #1AB1FF ;
|
|
font-size: 0.7368rem;
|
|
}
|
|
.quality>.boxs>.boxs-label>span:nth-of-type(2){
|
|
font-size: 1.2632rem;
|
|
margin-left: 1.0526rem;
|
|
}
|
|
.quality>.boxs>.boxs-label>span:nth-of-type(3){
|
|
color: #1AB1FF;
|
|
font-size: 0.7368rem;
|
|
margin-left: 0.3158rem;
|
|
}
|
|
#issueMap,#finishMap,#unfinishedMap{
|
|
width: 100%;
|
|
height: calc(100% - 34px);
|
|
/* background-image: url(../images/02/29hjbj.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center; */
|
|
}
|
|
|
|
|
|
/* 智慧进度 */
|
|
|
|
.plan {
|
|
|
|
}
|
|
|
|
|
|
|
|
.plan .zlpxsj-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 14rem;
|
|
padding-bottom: .02083rem;
|
|
}
|
|
|
|
.plan .zlpxsj-wrap .zlpxsj {
|
|
width: 22.15625rem;
|
|
height: 13.19792rem;
|
|
background: url(../assets/image/index2/zlpxsj.png) center center/100% 100% no-repeat;
|
|
position: relative;
|
|
}
|
|
|
|
.plan .zlpxsj-wrap .zlpxsj .left {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 5.47917rem;
|
|
text-align: right;
|
|
color: #1AB1FF
|
|
}
|
|
|
|
.plan .zlpxsj-wrap .zlpxsj .right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 1.11979rem;
|
|
color: #1AB1FF
|
|
}
|
|
|
|
.plan .zlpxsj-wrap .zlpxsj .num {
|
|
color: #0FF;
|
|
font-size: 1.15625rem;
|
|
margin-bottom: .0625rem;
|
|
}
|
|
|
|
.plan.zlpxsj-wrap .zlpxsj .desc {
|
|
color: #FFF;
|
|
font-size: .07292rem;
|
|
}
|
|
|
|
|
|
|
|
.plan .sbrc-item {
|
|
height: 4.90625rem;
|
|
padding-top: .15625rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-bigTit {
|
|
color: #17F7FF;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 23.08333rem;
|
|
height: 5.65625rem;
|
|
background: url(../assets/image/index2/bigtit.png) center center/100% 100% no-repeat;
|
|
margin: 0 .15625rem 0 .26042rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-bigTit .sbig-left {
|
|
font-size: 0.9rem;
|
|
position: absolute;
|
|
left: 3.5rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-bigTit .sbig-left .first {
|
|
margin-bottom: .01563rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-bigTit .sbig-right {
|
|
font-size: 1.20833rem;
|
|
width: 1.40625rem;
|
|
margin-left: 10.67708rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 0;
|
|
margin-top: 1.20833rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-list .item {
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: .1875rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-list .item .item-c {
|
|
width: 4.50521rem;
|
|
height: 4.50521rem;
|
|
background: url(../assets/image/index2/hgzs.png) center center/100% 100% no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.18229rem 0 .07813rem;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-list .item .num {
|
|
font-size: 1.14583rem;
|
|
font-weight: 700;
|
|
color: #7ECEF7;
|
|
}
|
|
|
|
.plan .sbrc-item .sbrci-list .item .desc {
|
|
font-size: .07292rem;
|
|
color: #CDE7FF;
|
|
}
|
|
|
|
.plan.sbrc-item .sbrci-smallTit {
|
|
width: 2.5rem;
|
|
height: .19792rem;
|
|
background: url(../assets/image/index2/smalltit.png) center center/100% 100% no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7ECEF7;
|
|
font-size: .08333rem;
|
|
}
|
|
|
|
.plan .sbrc-item .pic {
|
|
width: 2.5rem;
|
|
margin-top: .15625rem;
|
|
height: 2.00521rem;
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
font-family: 'DIN';
|
|
/* src: url(../font/font.ttf); */
|
|
/* src: url(../font//DINCond-RegularAlternate.otf); */
|
|
src: url(../font/dinfont.ttf);
|
|
}
|
|
|
|
.right>.items>.video{
|
|
height: calc(100% - 1.1579rem);
|
|
width: 100%;
|
|
padding: 1.0526rem;
|
|
|
|
}
|
|
.right>.items>.video>video{
|
|
background-color: skyblue;
|
|
}
|