|   | 
| <div nz-row [nzGutter]="24" style="padding: 20px"> | 
|     <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="9"> | 
|         <div nz-form-control nz-col [nzSm]="20"> | 
|             <nz-datepicker></nz-datepicker> | 
|         </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> |