|
|
|
|
.box{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #F2F4F6;
|
|
|
|
|
display: flex;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
.listbox{
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.topbox{
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 10px 22px 22px;
|
|
|
|
|
.add{
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.searchbox{
|
|
|
|
|
.inputbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 36px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
span{
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
select,input{
|
|
|
|
|
flex: 1;
|
|
|
|
|
background-color: #F2F4F6;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding:0 8px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.gray{
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
// input::-moz-placeholder {
|
|
|
|
|
// color: rgba(90, 83, 83, 0.89);
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
// input:-ms-input-placeholder {
|
|
|
|
|
// color: rgba(90, 83, 83, 0.89);;
|
|
|
|
|
// }
|
|
|
|
|
// input::-webkit-input-placeholder {
|
|
|
|
|
// color: rgba(90, 83, 83, 0.89);;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contantbox{
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.title{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 33px 0 22px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
span{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.waterList{
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
li{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
div{
|
|
|
|
|
float: left;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.address{
|
|
|
|
|
text-align: left;
|
|
|
|
|
width: 60%;
|
|
|
|
|
padding-left: 22px;
|
|
|
|
|
white-space:nowrap;
|
|
|
|
|
overflow:hidden;
|
|
|
|
|
text-overflow:ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.integrity{
|
|
|
|
|
height: 58%;
|
|
|
|
|
width: 32%;
|
|
|
|
|
position: relative;
|
|
|
|
|
background-color: #F2F4F6;
|
|
|
|
|
.integrityNum{
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
color: black;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
.integrityColorDiv{
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.deletebtn{
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: center;
|
|
|
|
|
mat-icon{
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
color: rgba(49, 46, 46, 0.144);
|
|
|
|
|
}
|
|
|
|
|
mat-icon:hover{
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
li:hover{
|
|
|
|
|
background-color: #b3d3ee;
|
|
|
|
|
}
|
|
|
|
|
.selectedLi{
|
|
|
|
|
background-color: #b3d3ee;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.paginator{
|
|
|
|
|
height: 56px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mapbox{
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.mapcheckbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
mat-checkbox{
|
|
|
|
|
margin-right:60px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
mat-checkbox:nth-child(1){
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#map{
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
#container{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.gistopbox{
|
|
|
|
|
position: absolute;
|
|
|
|
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
top: 3px;
|
|
|
|
|
width: 30%;
|
|
|
|
|
height:40px;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: default;;
|
|
|
|
|
.inputBox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
.positionInput{
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: 28px;
|
|
|
|
|
background: #F2F2F2;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.hidden{
|
|
|
|
|
opacity: 0;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
.show{
|
|
|
|
|
opacity: 1;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.detailsbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height:500px;
|
|
|
|
|
transition: height 0.5s;
|
|
|
|
|
position: relative;
|
|
|
|
|
.putDown{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -40px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.tabsbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
.tabs{
|
|
|
|
|
div{
|
|
|
|
|
float: left;
|
|
|
|
|
width: 120px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #000000;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
border-right: 1px solid #F2F4F6;
|
|
|
|
|
}
|
|
|
|
|
.selectedBtn{
|
|
|
|
|
background-color: #2196F3;
|
|
|
|
|
color: #fff;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btnbox{
|
|
|
|
|
span{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #2196F3;
|
|
|
|
|
mat-icon{
|
|
|
|
|
vertical-align: sub;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
span:hover{
|
|
|
|
|
// text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.state{
|
|
|
|
|
margin-right:30px;
|
|
|
|
|
}
|
|
|
|
|
.submitAudit{
|
|
|
|
|
margin-right:30px;
|
|
|
|
|
}
|
|
|
|
|
.close{
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contant{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height:480px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
p{
|
|
|
|
|
color: #2196F3;
|
|
|
|
|
background-color: #F2F4F6;
|
|
|
|
|
height: 33px;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
input,select{
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
width: 60%;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
border: 1px solid #EBEBEB;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
textarea{
|
|
|
|
|
width: 89%;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
height: 85%;
|
|
|
|
|
border: 1px solid #EBEBEB;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.longinput{
|
|
|
|
|
width: 74%;
|
|
|
|
|
}
|
|
|
|
|
.unitDiv{
|
|
|
|
|
width: 60%;
|
|
|
|
|
position: relative;
|
|
|
|
|
input,select{
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-right: 50px;
|
|
|
|
|
}
|
|
|
|
|
.unit{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 13px;
|
|
|
|
|
top: 4px;
|
|
|
|
|
color: #000000;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.setPositionBtn{
|
|
|
|
|
width:85px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.noHeight{
|
|
|
|
|
height: 0px;
|
|
|
|
|
transition: height 0.5s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.addWaterBox{
|
|
|
|
|
width: 260px;
|
|
|
|
|
height: 284px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.topbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
background-color: #2196F3;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.contant{
|
|
|
|
|
flex: 1;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
div{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #F2F4F6;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
img{
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.selectedDiv{
|
|
|
|
|
background-color: #2196F3;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px solid #2196F3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btnbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0px 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
button{
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width:1400px){
|
|
|
|
|
.box{
|
|
|
|
|
padding: 5px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
.listbox{
|
|
|
|
|
width: 310px;
|
|
|
|
|
.contantbox{
|
|
|
|
|
.waterList{
|
|
|
|
|
li{
|
|
|
|
|
.address{
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
.integrity{
|
|
|
|
|
width: 36%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mapbox{
|
|
|
|
|
.mapcheckbox{
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
#map{
|
|
|
|
|
.gistopbox{
|
|
|
|
|
width: 43%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.detailsbox{
|
|
|
|
|
height:338px;
|
|
|
|
|
transition: height 0.5s;
|
|
|
|
|
.tabsbox{
|
|
|
|
|
height: 38px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
.tabs{
|
|
|
|
|
div{
|
|
|
|
|
width: 90px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btnbox{
|
|
|
|
|
.state{
|
|
|
|
|
margin-right:22px;
|
|
|
|
|
}
|
|
|
|
|
.submitAudit{
|
|
|
|
|
margin-right:22px;
|
|
|
|
|
}
|
|
|
|
|
.close{
|
|
|
|
|
margin-right: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contant{
|
|
|
|
|
height:300px;
|
|
|
|
|
p{
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
input,select{
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
textarea{
|
|
|
|
|
width: 87%;
|
|
|
|
|
}
|
|
|
|
|
.longinput{
|
|
|
|
|
width: 66%;
|
|
|
|
|
}
|
|
|
|
|
.unitDiv{
|
|
|
|
|
width: 50%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.setPositionBtn{
|
|
|
|
|
width:85px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
mat-icon{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.noHeight{
|
|
|
|
|
height: 0px;
|
|
|
|
|
transition: height 0.5s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
