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