tntd/lib/page/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

.large-size > .ant-layout-content {
  .tntd-page.in-layout {
    height: calc(100vh - 60px);
  }
}
.tntd-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;

  &.in-layout {
    box-shadow: none;
    height: calc(100vh - 50px);
    .tntd-page-box,
    .tntd-page-box > .ant-card {
      height: 100%;
    }
    .tntd-page-content .tntd-page-box .ant-card .ant-card-body {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  &-box-white {
    z-index: 1;
    background: #f3f5f6;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 2px rgba(170, 182, 206, 0.2);

    .in-layout & {
      background: #fafbfc;
    }
  }

  &-box-gray {
    background: #e8ebed;
    box-shadow: 0 10px 12px 2px rgba(0, 0, 0, 0.1);

    .in-layout & {
      background: #f8f9fa;
      // box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
    }
  }

  &-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #f0f2f3;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 6px 0 rgba(170, 182, 206, 0.2);

    .in-layout & {
      background: #ffffff;
      box-shadow: none;
    }

    &-section {
      display: flex;
      align-items: center;
      &:nth-child(1) > * {
        margin-right: 10px;
      }
      &:nth-child(2) > * {
        margin: 0 5px;
      }
      &:nth-child(3) > * {
        margin-left: 10px;
      }
    }
  }

  &-content {
    height: calc(~'100% - 40px');
    flex-direction: row;
    width: 100%;
    position: relative;
    z-index: 0;
  }

  &-box {
    overflow: auto;
    .ant-card {
      background: inherit;
    }
  }

  &-box-card {
    background-color: transparent !important;
    .ant-card-head {
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 0;
      // height: 60px;
      .small & {
        height: 40px;
        line-height: 40px;
      }
      .ant-card-head-title {
        font-weight: normal;
      }
    }
    .ant-card-body {
      overflow: auto;
    }
  }
}

.page-header-section-back {
  position: relative;
  display: inline-block;
  margin-right: 40px !important;
  cursor: pointer;
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 16px;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #dcdfe6;
  }
  &:hover {
    &,
    i {
      color: #126bfb;
    }
  }
  i {
    font-size: 14px;
    margin-right: 6px;
    color: #4c4c4c;
  }
  span {
    font-size: 14px;
    font-weight: normal;
  }
}