|
<div nz-row [nzGutter]="24" style="padding: 20px">
|
<div nz-col nzXs="24" nzMd="24">
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-card [nzBordered]="false">
|
<nz-calendar [nzLocale]="'zh-cn'" >
|
<ng-template #dateCell let-day>
|
<div *ngIf="!isExpire(day.date)" style="width: 80px;height: 80px;display: block;position: absolute;" (click)="calendarClick(day.date)">
|
<nz-badge [nzStatus]="calendarDayCells[day.date|date:'dd']['status']" [nzText]="calendarDayCells[day.date|date:'dd']['statusName']" ></nz-badge>
|
<!-- <nz-badge [nzStatus]="'success'" [nzText]="'Sunday'" *ngIf="(day.date|date:'EEE')==='Sun'"></nz-badge>
|
{{day.date|date:'EEE'}}
|
{{day.date|date:'dd'}}
|
{{calendarDayCells[day.date|date:'dd']['status']}} -->
|
</div>
|
</ng-template>
|
</nz-calendar>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="15">
|
<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="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">100</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="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">30 ℃</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="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">2.5</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-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">78 mg/m³</div>
|
<p class="text-nowrap">PM2.5</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-primary 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">100</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="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">30 ℃</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="height: 90px;text-align: center;">
|
<div style="height: 40px;" class="h2 mt0">2.5</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-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">78 mg/m³</div>
|
<p class="text-nowrap">PM2.5</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
