|  |  |  | 
|---|
|  |  |  | <div nz-row [nzGutter]="24" class="pt-lg"> | 
|---|
|  |  |  | <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md"> | 
|---|
|  |  |  | <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md"> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;"> | 
|---|
|  |  |  | <div class="h2 mt0">123,456</div> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;"> | 
|---|
|  |  |  | <div style="height: 40px;" class="h2 mt0">{{ cardData.api }}</div> | 
|---|
|  |  |  | <p class="text-nowrap mb0">AQI</p> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md"> | 
|---|
|  |  |  | <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md"> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;"> | 
|---|
|  |  |  | <div class="h2 mt0">123,456</div> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;"> | 
|---|
|  |  |  | <div style="height: 40px;" class="h2 mt0">{{ cardData.temperature }} ℃</div> | 
|---|
|  |  |  | <p class="text-nowrap mb0">温度</p> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md"> | 
|---|
|  |  |  | <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md"> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;"> | 
|---|
|  |  |  | <div class="h2 mt0">123,456</div> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;"> | 
|---|
|  |  |  | <div style="height: 40px;" class="h2 mt0">{{ cardData.windDirection }}</div> | 
|---|
|  |  |  | <p class="text-nowrap mb0">风向</p> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md"> | 
|---|
|  |  |  | <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md"> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;"> | 
|---|
|  |  |  | <div class="h2 mt0">123,456</div> | 
|---|
|  |  |  | <p class="text-nowrap mb0">PM2.5</p> | 
|---|
|  |  |  | <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md"> | 
|---|
|  |  |  | <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;"> | 
|---|
|  |  |  | <div style="height: 40px;" class="h2 mt0">{{ cardData.pm25 }} mg/m³</div> | 
|---|
|  |  |  | <p class="text-nowrap">PM2.5</p> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div nz-row [nzGutter]="24" class="pt-lg"> | 
|---|
|  |  |  | <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8"> | 
|---|
|  |  |  | <chart-card [title]="'运营活动效果'" | 
|---|
|  |  |  | total="78%" | 
|---|
|  |  |  | contentHeight="46px" | 
|---|
|  |  |  | [action]="action4" | 
|---|
|  |  |  | [footer]="footer4"> | 
|---|
|  |  |  | <ng-template #action4> | 
|---|
|  |  |  | <nz-tooltip [nzTitle]="'指标说明'"> | 
|---|
|  |  |  | <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon> | 
|---|
|  |  |  | </nz-tooltip> | 
|---|
|  |  |  | </ng-template> | 
|---|
|  |  |  | <mini-progress | 
|---|
|  |  |  | height="46" | 
|---|
|  |  |  | percent="78" | 
|---|
|  |  |  | strokeWidth="8" | 
|---|
|  |  |  | target="80" | 
|---|
|  |  |  | color="#13C2C2"></mini-progress> | 
|---|
|  |  |  | <ng-template #footer4> | 
|---|
|  |  |  | <div class="d-flex justify-content-between"> | 
|---|
|  |  |  | <trend flag="up">周同比<span class="pl-sm">12%</span></trend> | 
|---|
|  |  |  | <trend flag="down">日环比<span class="pl-sm">11%</span></trend> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </ng-template> | 
|---|
|  |  |  | </chart-card> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|