<div nz-row [nzGutter]="24" class="pt-lg"> 
 | 
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8"> 
 | 
        <chart-card [title]="'AQI优良天数'" total="112天" contentHeight="46px"> 
 | 
            <mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress> 
 | 
        </chart-card> 
 | 
    </div> 
 | 
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8"> 
 | 
        <chart-card [title]="'PM2.5优良天数'" total="148天" contentHeight="46px"> 
 | 
            <mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress> 
 | 
        </chart-card> 
 | 
    </div> 
 | 
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8"> 
 | 
        <chart-card [title]="'PM10优良天数'" total="156天" contentHeight="46px"> 
 | 
            <mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress> 
 | 
        </chart-card> 
 | 
    </div> 
 | 
</div> 
 | 
  
 | 
<div nz-row [nzGutter]="24"> 
 | 
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24"> 
 | 
        <nz-card [nzTitle]="nzTitle" [nzBordered]="false"> 
 | 
            <ng-template #nzTitle> 
 | 
                同期对比 
 | 
                <small class="text-sm font-weight-normal"></small> 
 | 
            </ng-template> 
 | 
            <timeline [data]="offlineChartData" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '本月数据', y2: '上月同期' }"></timeline> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 |