<div fxLayout="row wrap">
  <div fxFlex.gt-sm="50">
    <analysis-preference-field [data]="field_data"></analysis-preference-field>
  </div>
  <div fxFlex.gt-sm="50">
    <mat-card>
      <mat-card-title>人群应用偏好</mat-card-title>
      <mat-card-content class="fixedHeight">
        <table class="table">
          <tr>
            <th>排名</th>
            <th>领域</th>
            <th>覆盖</th>
            <th></th>
            <th>全部应用</th>
          </tr>
          <tr *ngFor="let coverRateListData of coverRateListDatas; index as i">
            <td width="60"><span class="num">{{i+1}}</span></td>
            <td width="32%"><a href="javascrip:;" data-id="{{coverRateListData.cateId}}">{{coverRateListData.categoryName}}</a>
            </td>
            <td>
              <div class="progress">
                <span class="progress-bar" [ngStyle]="{'width':coverRateListData.coverRate | percent:'1.1-2'}"></span>
              </div>
            </td>
            <td width="80">{{coverRateListData.coverRate | percent:'1.1-2'}}</td>
            <td width="100">偏好应用</td>
          </tr>
        </table>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<mat-card>
  <mat-card-title>人群应用偏好</mat-card-title>
  <mat-card-content>
    <table class="table">
      <tr>
        <th>排名</th>
        <th>应用</th>
        <th>领域</th>
        <th>开发商</th>
        <th>月活跃用户(万)</th>
        <th>人群活跃(万)</th>
        <th>人群应用TGI</th>
        <th>人群渗透率(%)</th>
        <th>人群占比(%)</th>
      </tr>
      <tr *ngFor="let activeData of activeDatas; index as i">
        <td><span class="num">{{i+1}}</span></td>
        <td><a href="javascrip:;">{{activeData.appName}}</a></td>
        <td><span *ngFor="let category of activeData.categorys">{{category.cateName}} </span></td>
        <td>{{activeData.devlopCompanyName}}</td>
        <td>{{activeData.activeNums}}</td>
        <td>{{activeData.crowdActiveNums}}</td>
        <td>{{activeData.tgi | number:'1.2-2'}}</td>
        <td>{{activeData.crowdRate | percent:'1.1-2' }}</td>
        <td>{{activeData.crowdPercent | percent:'1.1-2'}}</td>
      </tr>
    </table>
  </mat-card-content>
</mat-card>

:host {
  display: block;
  margin: 5px;
}

mat-card {
  margin: 5px;
  padding: 0;
}

mat-card-title {
  padding: 16px 24px;
}

mat-card-content {
  min-height: 400px;
}

.table {
  width: 100%;
  tr > td {
    text-align: center;
    padding: {
      top: 8px;
      bottom: 8px;
    }
  }
  a {
    color: #000;
    text-decoration: none;
  }
}

.fixedHeight {
  max-height: 400px;
  min-height: 400px;
  overflow: auto;
}
.num {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #26a6ff;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}

.progress {
  width: 100%;
  background: #f5f5f5;
  display: block;
  position: relative;
  height: 10px;
  border-radius: 10px;

  &-bar {
    position: absolute;
    left: 0;
    top: 0;
    background: #ff9f58;
    height: 10px;
    border-radius: 10px;
  }
}