<div fxFlex class="manage-sidenav-content">
  <div class="header">
    <button mat-raised-button color="primary">
      <mat-icon>add</mat-icon> 上传</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>share</mat-icon> 分享</button>
    <button mat-raised-button *ngIf="fileSelected.length" (click)="onDeleteTrigger()">
      <mat-icon>delete</mat-icon> 删除</button>
    <button mat-raised-button *ngIf="fileSelected.length">
      <mat-icon>file_download</mat-icon> 下载</button>
  </div>


  <div class="stbui-table-main mat-elevation-z2">
    <div class="stbui-table-toolbar" fxLayout="row" fxLayoutAlign="start center">
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
        <span>
          <mat-checkbox (change)="onCheckBoxAllTrigger($event)"></mat-checkbox>
        </span>
      </div>
      <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>名称</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>类型</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>提供者</span>
      </div>
      <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <span>大小</span>
      </div>
      <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
        <span>修改时间</span>
      </div>
    </div>

    <div class="stbui-table-list">
      <div class="stbui-table" fxLayout="row" *ngFor="let file of files">
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="50px">
          <mat-checkbox [checked]="checked" (change)="onCheckBoxTrigger($event, file)"></mat-checkbox>
        </div>

        <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <mat-icon>folder</mat-icon> {{ file.name }}
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.type }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.provide }}</span>
        </div>

        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>{{ file.size | fileSize }}</span>
        </div>

        <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
          <span>{{ file.lastModifiedDate | date:"yyyy/MM/dd" }}</span>
        </div>
      </div>
    </div>
  </div>

</div>

./file-manager.component.scss

$color__inactive: #616161;
$color__primary: #3f51b5;
$color__read: #9f9f9f;
$color__checkbox__star: #616161;

$prefix: 'stbui-table';

:host {
  display: block;
  height: 100%;
}

.#{$prefix} {
  position: relative;
  min-height: 60px;
  max-height: 60px;
  padding: 8px 24px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: $color__inactive;
  transition: background 0.1s ease-in-out;
  border-bottom: 1px solid #eee;
  cursor: pointer;

  &.read {
    color: $color__read;
    font-weight: normal;
  }

  &:hover {
    background: #eee;
  }
}

.#{$prefix}-main {
  margin-top: 10px;
  max-height: 480px;
  overflow-x: hidden;
  overflow-y: auto;
}

.#{$prefix}-toolbar {
  box-sizing: border-box;
  min-height: 60px;
  max-height: 60px;
  border-bottom: 1px solid #eee;
  padding: 8px 24px;
  color: $color__inactive;
}

.start-wrapper {
  padding-right: 8px;

  .checkbox {
    margin: 0 8px 0 0;
    color: $color__checkbox__star;
  }
}

.content-wrapper {
  white-space: nowrap;
}

.end-wrapper {
  margin-left: 16px;
}

.header {
  position: relative;
  height: 200px;
  background: linear-gradient(90deg, #fc0, #ffa100);
  padding: 16px;

  > button {
    margin-right: 16px;
  }
}

.file-uploader {
  position: absolute;
  left: 30px;
  bottom: -20px;
}