antui-admin/src/components/map/style/index.less

admin ui for antd

#_amap_point{
  width: 100%;
  height: 100%;
}

#maps{
  .marker-slide-down{
    animation:slideDown .2s ease-in;
  }

  .marker-poi{
    position: absolute; 
    width: 25px; 
    height: 34px;
    cursor: pointer;
    color: #f34234;
    &:after{
      content: attr(data-content);
      width: 23PX;
      height: 12PX;
      line-height: 12PX;
      color: #fff;
      font-size: 12PX;
      text-align: center;
      position: absolute;
      top: 5PX;
    }
    &:hover{
      color: #3d93fd !important;
    }
    i{
      font-size: 34PX;
      width: 25PX;
      height: 34PX;
      line-height: 34PX;
      position: absolute;
      z-index: -1;
      margin-left: -5PX;
      text-shadow: 0PX 0PX 2PX #f9f9f9;
      -webkit-text-stroke: 1PX rgba(255,255,255,.7);
      &:after{
        position: absolute;
        content: "";
        width: 11PX;
        height: 6PX;
        background: rgba(0, 0, 0, 0.3);
        margin-top: -5PX;
        margin-left: 12PX;
        z-index: -2;
        border-radius: 50%;
        box-shadow: 0 0 2PX 1PX #ccc;
      }
    }
    &.hight-light{
      color: #3d93fd !important;
    }
    &.red{
      color: #f34234;
    }
    &.blue{
      color: #3d93fd;
    }
  }
}

// 弹出popup
.popup-content{
  pointer-events: auto;
  border-radius: 6PX;
  min-width: 100PX;
  box-shadow: 0 0 8PX 0 rgba(0,0,0,.4);
  padding: 0;
  animation:popupScale .2s linear;
  transform-origin: 50% 50% 0PX;
  background: #fff;

  &:hover {
    box-shadow: 0 0 8PX 0 rgba(0,0,0,.5);
  }
  .popup-top{
    position: relative;
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1PX solid #CCC;
    border-radius: 6PX;
    > div{
      display: inline-block;
      color: #333;
      font-size: 1.1em;
      font-weight: bold;
      padding: 6PX 30PX 6PX 10PX;
      i{
        font-weight: normal;
        color: #aaa;
      }
    }
    > img{
      position: absolute;
      cursor: pointer;
      top: 10PX;
      right: 10PX;
      transition-duration: 0.25s;
      &:hover {
        box-shadow: 0PX 0PX 5PX #000;
      }
    }
  }
  .popup-middle{
    line-height: 20PX;
    border-radius: 0 0 6PX 6PX;
  }
  .popup-bottom{
    background-color: #FFF;
    border-radius: 0 0 6PX 6PX;
    &:before{
      content: "";
      position: absolute;
      width: 10PX;
      height: 10PX;
      background: #FFF;
      left: 50%;
      margin-left: -5PX;
      bottom: -4PX;
      box-shadow: 2PX 2PX 2PX 0 rgba(0,0,0,.2);
      transform: rotate(45deg);
      z-index: -1;
    }
  }
}

// hack 高德地图从右弹出的问题会遮挡
.amap-info{
  > div{
    pointer-events: none;
  }
}

.slide-popup-content{
  pointer-events: auto;
  position: relative;
  left: 50%;
  margin-left: 20PX;
  border-radius: 3PX;
  min-width: 100PX;
  height: 38PX;
  line-height: 38PX;
  box-shadow: 0 0 8PX 0 rgba(0,0,0,.4);
  padding: 0;
  display: flex;
  animation:popupSlide .2s linear;

  &:hover {
    box-shadow: 0 0 8PX 0 rgba(0,0,0,.5);
  }
  .popup-top{
    > div, img {
      display: none;
    }
    &:after,&:before {
      content: '';
      width: 0;
      height: 0;
      top: 50%;
      margin-top: -7PX;
      left: 0;
      margin-left: -15PX;
      position: absolute;
      border: 7PX solid transparent;
      border-right: 8PX solid rgba(51,51,51,.2)
    }

    &:after {
      margin-left: -14PX;
      border: 7PX solid transparent;
      border-right: 8PX solid rgba(255,255,255,1)
    }
  }
  .popup-middle{
    flex: 1 auto;
    padding-left: 5PX;
    border-radius: 3PX;
  }
  .popup-bottom{
    border-radius: 3PX;
    background-color: #f8f8f8;
  }
}