<div nz-row [nzGutter]="24" class="pt-lg"> 
 | 
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8"> 
 | 
        <chart-card [title]="'API优良天数'" total="216天" 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="158天" 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="112天" 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]="nzTitle1" [nzBordered]="false"> 
 | 
            <ng-template #nzTitle1> 
 | 
                同期对比 
 | 
                <span class="text-md font-weight-normal" style="color:red">PM2.5</span> 
 | 
            </ng-template> 
 | 
            <timeline [data]="offlineChartData1" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '本月数据', y2: '上月同期' }"></timeline> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 | 
  
 | 
<div nz-row [nzGutter]="24"> 
 | 
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24"> 
 | 
        <nz-card [nzTitle]="nzTitle2" [nzBordered]="false"> 
 | 
            <ng-template #nzTitle2> 
 | 
                同期对比 
 | 
                <span class="text-md font-weight-normal" style="color:red">PM10</span> 
 | 
            </ng-template> 
 | 
            <timeline [data]="offlineChartData2" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '本月数据', y2: '上月同期' }"></timeline> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 |