FE-V2-PC/src/assets/styles/ZDmap.scss

.colorA{
  color:$lv4Danger;
}
.colorB{
  color:$lv3Danger;
}
.colorC{
  color:$lv2Danger;
}
.colorD{
  color:$lv1Danger;
}
.map-one-max-box{
  background :url("../ZDimages/icon_bj_syspmtcy_jinan.png");
  background-size:100%;
  overflow :hidden;
  position:relative;
  p{
    margin:0;
  }
  .map-min-box{
    overflow:hidden;
    cursor:pointer;
    display :inline-block;
    position :relative;
    p:nth-child(1){
      margin-top:40px;
      padding:0 4px;
      color:#333;
      font-size:13px;
      text-align :center;
    }
    p:nth-child(2){
      opacity: 0;
      background: rgba(0,0,0,0.7);
      color:#fff;
      position: absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
      line-height:123px;
      font-size:12px;
      text-align:center;
    }
    p:nth-child(2):hover{
      opacity: 1;
    }
  }
  .map-min-box:nth-child(1){
    margin:4px 102px 0 0;
    height:114px;
    width:115px;
  }
  .map-min-box:nth-child(2){
    margin: 4px 0 0 0;
    height: 114px;
    width: 72px;
  }
  .map-min-box:nth-child(3){
    margin: 4px 0 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(4){
    margin: 4px 0 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(5){
    margin: 4px 0 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(6){
    margin: 4px 0 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(7){
    margin: 4px 0 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(8){
    margin: 4px 60px 0 0;
    height: 114px;
    width: 71px;
  }
  .map-min-box:nth-child(9){
    margin: 63px 0 0 0;
    height: 171px;
    width: 65px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(10){
    margin: 63px 0 0 0;
    height: 171px;
    width: 76px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(11){
    margin: 63px 0 0 0;
    height: 171px;
    width: 76px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(12){
    margin: 63px 0 0 0;
    height: 171px;
    width: 72px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(13){
    margin: 63px 0 0 0;
    height: 171px;
    width: 71px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(14){
    margin: 63px 0 0 0;
    height: 171px;
    width: 71px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(15){
    margin: 63px 0 0 0;
    height: 171px;
    width: 71px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(16){
    margin: 63px 0 0 0;
    height: 171px;
    width: 71px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(17){
    margin: 63px 0 0 0;
    height: 171px;
    width: 72px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
  .map-min-box:nth-child(18){
    margin: 63px 35px 0 0;
    height: 171px;
    width: 71px;
    p:nth-child(1){
      margin-top:75px;
    }
  }
}