zcloud-gbs-emergencyRescue-react/src/pages/Container/BiRescue/index.less

.bi-rescue {
  --bi-rescue-page-height: max(720px, 100vh);
  --bi-rescue-header-height: 66px;
  --bi-rescue-gap: clamp(8px, 0.52vw, 10px);
  --bi-rescue-padding-x: clamp(8px, 0.52vw, 10px);
  --bi-rescue-padding-y: clamp(8px, 0.93vh, 10px);
  --bi-rescue-side-width: 360px;

  height: var(--bi-rescue-page-height);
  min-width: 1280px;
  min-height: 720px;
  overflow: auto;
  background-color: #E5EDFD;
  box-sizing: border-box;
  scrollbar-gutter: stable;

  * {
    box-sizing: border-box;
  }

  .command {
    height: 100%;
    margin: 0;
    overflow: hidden;

    .top {
      position: relative;
      height: var(--bi-rescue-header-height);
      line-height: var(--bi-rescue-header-height);
    }

    .cesium {
      height: 100%;
    }

    .cesium #map_container {
      height: 100% !important;
      min-height: 0;
    }

    .select-emergency-plan,
    .command-feedback-records,
    .non-contingency-instructions,
    .event-handling-records {
      width: 100%;
      box-sizing: border-box;
      border-color: rgba(255, 255, 255, 0.78);
      box-shadow: inset 0 0 0 1px rgba(80, 150, 220, 0.08);
    }

    .select-emergency-plan {
      flex: 0 0 200px;

      .container {
        height: 100%;
      }
    }

    .command-feedback-records,
    .event-handling-records {
      display: flex;
      flex-direction: column;
      min-height: 0;

      .container {
        flex: 1;
        min-height: 0;
      }
    }

    .command-feedback-records {
      flex: 1 1 auto;
      margin-top: var(--bi-rescue-gap);
      padding-bottom: 8px;
    }

    .non-contingency-instructions {
      flex: 0 0 185px;
    }

    .event-handling-records {
      flex: 1 1 auto;
      margin-top: var(--bi-rescue-gap);
    }

    .bi-rescue-feedback-list {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
      scrollbar-gutter: stable;
    }

    .bi-rescue-empty {
      height: 100%;
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5f7795;
    }

    .bi-rescue-feedback-list,
    .bi-rescue-side,
    .event-handling-records .container {
      scrollbar-width: thin;
      scrollbar-color: rgba(67, 115, 156, 0.65) rgba(210, 230, 250, 0.55);

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(210, 230, 250, 0.55);
        border-radius: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(67, 115, 156, 0.65);
        border-radius: 8px;
      }
    }
  }

  .bi-rescue-complete {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

  .bi-rescue-main {
    display: grid;
    grid-template-columns: var(--bi-rescue-side-width) minmax(0, 1fr) var(--bi-rescue-side-width);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--bi-rescue-gap);
    height: calc(var(--bi-rescue-page-height) - var(--bi-rescue-header-height));
    padding: var(--bi-rescue-padding-y) var(--bi-rescue-padding-x);
    overflow: hidden;
    box-sizing: border-box;
  }

  .bi-rescue-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .bi-rescue-map {
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}

@media (max-width: 1600px) {
  .bi-rescue {
    --bi-rescue-side-width: 330px;
  }
}

@media (max-height: 760px) {
  .bi-rescue {
    --bi-rescue-page-height: 760px;
  }
}

@media (max-width: 1440px) {
  .bi-rescue {
    --bi-rescue-side-width: 300px;
    --bi-rescue-gap: 8px;
    --bi-rescue-padding-x: 8px;
  }
}