fengxiang
2018-07-12 4b35f9a98f9431e17fc96d998c7cc9021776787b
src/app/routes/home-page/home-page/home-page.component.html
@@ -4,34 +4,61 @@
<div nz-row [nzGutter]="24" class="pt-lg">
  <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="text-align: center;">
        <div class="h2 mt0">123,456</div>
      <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
        <div style="height: 40px;" class="h2 mt0">{{ cardData.api }}</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="text-align: center;">
        <div class="h2 mt0">123,456</div>
      <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
        <div style="height: 40px;" class="h2 mt0">{{ cardData.temperature }} ℃</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="text-align: center;">
        <div class="h2 mt0">123,456</div>
      <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
        <div style="height: 40px;" class="h2 mt0">{{ cardData.windDirection }}</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-magenta rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">PM2.5</p>
    <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">{{ cardData.pm25 }} mg/m³</div>
        <p class="text-nowrap">PM2.5</p>
      </div>
    </div>
  </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
  <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
    <chart-card [title]="'运营活动效果'"
        total="78%"
        contentHeight="46px"
        [action]="action4"
        [footer]="footer4">
        <ng-template #action4>
            <nz-tooltip [nzTitle]="'指标说明'">
                <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
            </nz-tooltip>
        </ng-template>
        <mini-progress
            height="46"
            percent="78"
            strokeWidth="8"
            target="80"
            color="#13C2C2"></mini-progress>
        <ng-template #footer4>
            <div class="d-flex justify-content-between">
                <trend flag="up">周同比<span class="pl-sm">12%</span></trend>
                <trend flag="down">日环比<span class="pl-sm">11%</span></trend>
            </div>
        </ng-template>
    </chart-card>
</div>
</div>