zcloud-gbs-bi-react/src/pages/Container/Map/components/Content/index.less

.map_content_container {
  // 定义循环混合宏
  .loop (@i: 1) when (@i <= 5) {
    .line-@{i} {
      // 第1行：单行省略
      & when (@i = 1) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      // 第2-5行：多行省略
      & when not (@i = 1) {
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: @i;
        -webkit-box-orient: vertical !important;
      }
    }
    // 递归调用
    .loop(@i + 1);
  }

  // 执行循环
  .loop();

  &__content {
    width: 430px;
    position: absolute;

    &.port {
      top: 75px;
      max-height: calc(100vh - 75px);
    }

    &.branch_office {
      top: 70px;
      max-height: calc(100vh - 70px);
    }
  }

  .collapse_menu {
    position: absolute;
    top: calc(50vh - 44.5px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    &.left {
      left: 465px;

      &.active {
        left: 0;

        img {
          transform: translate(-50%, -50%) rotate(180deg);
        }
      }

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
      }

      &.port {
        width: 30px;
        height: 89px;

        img {
          width: 10px;
          height: 17px;
        }
      }

      &.branch_office {
        width: 33px;
        height: 116px;

        img {
          width: 13px;
          height: 34px;
        }
      }
    }

    &.right {
      right: 465px;

      &.active {
        right: 0;

        img {
          transform: translate(-50%, -50%) rotate(180deg);
        }
      }

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
      }

      &.port {
        width: 30px;
        height: 89px;
        transform: rotate(180deg);

        img {
          width: 10px;
          height: 17px;
        }
      }

      &.branch_office {
        width: 33px;
        height: 116px;
        transform: rotate(180deg);

        img {
          width: 13px;
          height: 34px;
        }
      }
    }
  }
}