|   | 
| <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-calendar [nzLocale]="'zh-cn'" [nzFullScreen]="false" style="width: 290px; border: 1px solid rgb(217, 217, 217); border-radius: 4px;">                 | 
|             </nz-calendar> | 
|         </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> |