.fx-page-detail {
  --header-height: 60px;
  --star-width: calc(var(--xxs) * 2.5);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  &.has-required {
    .content {
      margin-left: var(--star-width);
      &.has-map {
        .left-form {
          .form-scrollbar {
            padding-left: var(--star-width);
            margin-left: calc(-1 * var(--star-width));
          }
        }
      }
    }
  }
  &.readonly {
    .hl-form {
      .form-label {
        color: #8A8A8A;
      }
      .form-content {
        font-size: 14px;
        color: #4B4B4B;
        line-height: 20px;
      }
    }
  }
  .hl-form {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    .form-label {
      color: #4B4B4B;
      line-height: 20px;
      > * {
        padding: 0;
        padding-bottom: 10px;
        font-size: 14px;
      }
    }
  }
  .header {
    height: var(--header-height);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      display: flex;
      align-items: center;
      .line {
        width: 4px;
        height: 14px;
        background: #36A4FF;
      }
      .txt {
        margin-left: 8px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #4B4B4B;
        line-height: 20px;
      }
    }
  }
  .content {
    height: calc(100% - var(--header-height));
    padding: 20px;
    padding-top: 0;
    overflow-y: hidden;
    &.has-map {
      display: flex;
      column-gap: var(--lg);
      .left-form {
        --form-gap: var(--lg);
        flex: 1;
        .form-scrollbar {
          overflow-y: auto;
          // padding-left: var(--star-width);
          // margin-left: calc(-1 * var(--star-width));
          height: 100%;
        }
      }
      .right-map {
        flex: 2
      }
    }
    .page-form {
      --row-gap-y: var(--lg);
      --row-gap-x: calc(var(--xxs) * 7.5);
    }
  }
}