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

@use "sass:math";
$vw_base: 4480;

@function vw($px) {
  @return math.div($px, $vw_base) * 100vw;
}

@function vw2($px1, $px2) {
  @return calc(#{$px1} - (#{$px2} / #{$vw_base}) * 100vw);
}

:deep(.point-info) {
  border: vw(7) solid #2a81fc;
  padding: vw(5) vw(32) vw(32);
  width: vw(1569);
  font-size: vw(38);
  display: flex;
  flex-wrap: wrap;
  background-color: #1c294c;
  color: #d5dde3;
  position: relative;
  .table-box {
    max-height: vw(800);
    overflow-y: auto;
    width: 100%;
    &::-webkit-scrollbar {
      width: vw(12);
    }
  }
  .table {
    border-top: vw(2) solid #3d66ae;
    border-right: vw(2) 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: vw(369);
  }
  .td1, .td3 {
    background-color: #1a326e;
    padding: vw(15) vw(20);
    color: #c6d1e6;
    border-bottom: vw(2) solid #3d66ae;
    border-left: vw(2) solid #3d66ae;
  }
  .td2, .td4 {
    padding: vw(15) vw(20);
    border-bottom: vw(1) solid #3d66ae;
    border-left: vw(1) solid #3d66ae;
  }
  .td2, .td3, .td4 {
    flex: 1;
  }
  .close {
    position: absolute;
    top: vw(20);
    right: vw(60);
    width: vw(32);
    height: vw(32);
    background: url('@/assets/images/common/close.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .title-box {
    width: vw(1354);
    height: vw(125);
    position: relative;
    background: url('@/assets/images/line.png') no-repeat;
    background-size: vw(163) vw(69);
    background-position: bottom left;
    padding-left: vw(25);
    &::before {
      content: "";
      width: vw(1309);
      height: vw(6.9);
      background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
      display: block;
      position: absolute;
      left: vw(180);
      bottom: vw(30);
    }
  }
  .gradient-text {
    font-size: vw(64);
  }
  .icon1, .icon2, .icon3, .icon4 {
    position: absolute;
    top: vw(10);
    left: vw(10);
    width: vw(12);
    height: vw(12);
    background: url('@/assets/images/inputIcon1.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon2 {
    left: unset;
    right: vw(10);
    transform: rotate(90deg);
  }
  .icon3 {
    left: unset;
    top: unset;
    right: vw(10);
    bottom: vw(10);
    transform: rotate(180deg);
  }
  .icon4 {
    top: unset;
    bottom: vw(10);
    transform: rotate(-90deg);
  }
  .flex {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: vw(-20);
  }
  .btn {
    width: vw(300);
    height:vw(120);
    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: vw(20);
    color: #edfaff;
    .video-icon {
      width: vw(41);
      height: vw(38);
      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
    }
  }
}