| | |
| | | <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> |