yjxp-web/src/components/Map/map.scss

:deep(.point-info) {
  border: 1px solid #2a81fc;
  padding: 2px 15px 15px;
  width: 350px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  background-color: #1c294c;
  color: #d5dde3;
  position: relative;
  .table-box {
    max-height: 175px;
    overflow-y: auto;
    width: 100%;
    &::-webkit-scrollbar {
      width: 1px;
    }
  }
  .table {
    border-top: 1px solid #3d66ae;
    border-right: 1px solid #3d66ae;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .tr {
      width: 100%;
      display: flex;
    }
  }
  .point-item {
    display: flex;
    width: 100%;
  }
  .point-item-hover {
    cursor: pointer;
    &:hover {
      background-color: #1a326e;
    }
  }
  .point-item2 {
    display: flex;
    width: 100%;
  }
  .td1 {
    width: 67px;
  }
  .td1, .td3 {
    background-color: #1a326e;
    padding: 8px 5px;
    color: #c6d1e6;
    border-bottom: 1px solid #3d66ae;
    border-left: 1px solid #3d66ae;
  }
  .td2, .td4 {
    padding: 8px 5px;
    border-bottom: 1px solid #3d66ae;
    border-left: 1px solid #3d66ae;
  }
  .td2, .td3, .td4 {
    flex: 1;
  }
  .close {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: url('@/assets/images/close2.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .title-box {
    width: 100%;
    height: 25px;
    position: relative;
    background: url('@/assets/images/line.png') no-repeat bottom left;
    background-size: 14px 6px;
    margin-bottom: 5px;
    &::before {
      content: "";
      width: 280px;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
      display: block;
      position: absolute;
      left: 16px;
      bottom: 2.5px;
    }
  }
  .gradient-text {
    font-size: 14px;
  }
  .icon1, .icon2, .icon3, .icon4 {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
    background: url('@/assets/images/inputIcon1.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon2 {
    left: unset;
    right: 10px;
    transform: rotate(90deg);
  }
  .icon3 {
    left: unset;
    top: unset;
    right: 10px;
    bottom: 10px;
    transform: rotate(180deg);
  }
  .icon4 {
    top: unset;
    bottom: 10px;
    transform: rotate(-90deg);
  }
  .flex {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -20px;
  }
}