@doreamonjs/page-detail/lib/index.less

detail page

@pageDetailPrefixCls: doreamonjs-design-page-detail;

.@{pageDetailPrefixCls}.page {
  background-color: #fff;
  padding: 10px 20px;

  .tab {
    min-height: 400px;
  }

  :global {
    .ant-descriptions-item-container {
      display: flex;
      // align-items: center;
    }
  }

  // @TODO 详情页面 tab 模块下嵌套的列表页，如果存在搜索表单，设置了一样式
  .tab {
    // 搜索表单
    .doreamonjs-design-form-table.container {
      padding-top: 16px !important;
      margin-bottom: 0 !important;
  
      .ant-legacy-form-item {
        margin-bottom: 0 !important;
      }

      // 搜索表单下的列表
      +.doreamonjs-design-table {
        padding-top: 0 !important;
      
        &>.table-header {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .@{pageDetailPrefixCls}.page {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    padding: 0;
    z-index: 1000;

    .ant-page-header-heading-left {
      flex: 1;

      .ant-page-header-heading-title span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
      }
    }

    .ant-descriptions-item {
      display: block;

      .ant-descriptions-item-label {
        width: 100px;
      }

      .ant-descriptions-item-content {
        text-align: left;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}