手机 适配

xufenglei

2018-08-03 ba26f3f66151ee19b0230c38fdbb989886e84c8c

 src/app/routes/forecasting-warning/forecasting-warning.component.html

@@ -1,13 +1,35 @@
<div class="content__title">
    <h1>空气质量预警预报</h1>
</div>
<nz-card [nzBordered]="false">
<div class="sales-type-radio">
   <nz-radio-group >
      <label nz-radio-button [nzValue]="'warning'"><span>预警</span></label>
      <label nz-radio-button [nzValue]="'forecasting'"><span>预报</span></label>
   </nz-radio-group>
</div>

</nz-card>
<nz-card [nzBordered]="false"></nz-card>
<div class="content__title">

    <h1>空气质量预警预报</h1>

</div>

<nz-card [nzBordered]="false">

   <div class="sales-type-radio">

      <nz-radio-group [(ngModel)]="type" (ngModelChange)="changeType($event)">

         <label nz-radio-button [nzValue]="'warning'"><span>预警</span></label>

         <label nz-radio-button [nzValue]="'forecasting'"><span>预报</span></label>

      </nz-radio-group>

   </div>



</nz-card>



<div nz-row [ngStyle]="{'display':isShow ? 'block' : 'none'}">

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_PM25" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_PM10" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_CO" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_NO2" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_O3" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_SO2" style="height: 300px; width: 100%"></div></div>

</div>



<div nz-row [ngStyle]="{'display':isShow ? 'none' : 'block'}">

   <!-- 24小时 -->

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_temp" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_humidity" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_pressure" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div>

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_wind" style="height: 300px; width: 100%"></div></div>



   <!-- 15天 -->

   <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_temp_day" style="height: 300px; width: 100%"></div></div>

   <!-- <div nz-col [nzSpan]="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div> -->



</div>