<div class="content__title">
|
<h1>
|
Dashboard
|
<small class="text-sm hidden-xs">Welcome !</small>
|
</h1>
|
</div>
|
<div class="quick-menu" [class.show]="quickMenu" (click)="quickMenu=!quickMenu">
|
<div class="quick-menu-inner">
|
<div class="settings-ctrl">
|
<i class="anticon anticon-question-circle-o"></i>
|
</div>
|
<div class="list-group list-group-flush">
|
<a (click)="msg.info('item 1')" class="list-group-item">How do i create account?</a>
|
<a (click)="msg.info('item 2')" class="list-group-item">How do i create account?</a>
|
<a (click)="msg.info('item 3')" class="list-group-item">How do i create account?</a>
|
<a (click)="msg.info('item 4')" class="list-group-item">How do i create account?</a>
|
<a (click)="msg.info('item 5')" class="list-group-item">How do i create account?</a>
|
</div>
|
</div>
|
</div>
|
<div nz-row nzGutter="16">
|
<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="12" class="p-md text-white">
|
<div class="h2 mt0">123,456</div>
|
<p class="text-nowrap">Website Traffics</p>
|
</div>
|
<div nz-col nzSpan="12">
|
<mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></mini-bar>
|
</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="12" class="p-md text-white">
|
<div class="h2 mt0">234,567K</div>
|
<p class="text-nowrap">Website Impressions</p>
|
</div>
|
<div nz-col nzSpan="12">
|
<mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></mini-bar>
|
</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="12" class="p-md text-white">
|
<div class="h2 mt0">$458,778</div>
|
<p class="text-nowrap">Total Sales</p>
|
</div>
|
<div nz-col nzSpan="12">
|
<mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></mini-bar>
|
</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="12" class="p-md text-white">
|
<div class="h2 mt0">456</div>
|
<p class="text-nowrap">Support Tickets</p>
|
</div>
|
<div nz-col nzSpan="12">
|
<mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]" [data]="webSite"></mini-bar>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row nzGutter="16">
|
<div nz-col nzXs="24" nzMd="12">
|
<nz-card [nzBordered]="false">
|
<ng-template #title>
|
Sales Statistics
|
<small class="text-sm font-weight-normal">Business Expectations & Retail Sales Statistics</small>
|
</ng-template>
|
<bar
|
height="275"
|
[data]="salesData"></bar>
|
</nz-card>
|
</div>
|
<div nz-col nzXs="24" nzMd="12">
|
<nz-card [nzTitle]="nzTitle" [nzBordered]="false">
|
<ng-template #nzTitle>
|
Growth Rate
|
<small class="text-sm font-weight-normal">Business Expectations & Retail Sales Statistics</small>
|
</ng-template>
|
<timeline [data]="offlineChartData" [height]="239" [padding]="[0, 0, 0, 0]"
|
[titleMap]="{ y1: '客流量', y2: '支付笔数' }"></timeline>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row nzGutter="16">
|
<div nz-col nzXs="24" nzMd="12">
|
<nz-card [nzBordered]="false" class="ant-card__img">
|
<img class="img" src="//os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png">
|
<div class="p-md">
|
<h3>ANT DESIGN</h3>
|
<p class="text-grey">A UI Design Language</p>
|
<ol class="list-styled text-lg pt-md">
|
<li>Designed by experienced team, and showcase dozens of inspiring projects.</li>
|
<li>Provide solutions for usual problems that may be encountered while developing enterprise-like complex UIs.</li>
|
<li>Dozens of flexible and practical reusable components that increase your productivity.</li>
|
</ol>
|
<p class="pt-md">
|
<a class="text-grey" href="//ng.ant.design" target="_blank">View Site...</a>
|
</p>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col nzXs="24" nzMd="12">
|
<nz-card [nzTitle]="nzTitle" [nzBordered]="false" nzNoPadding>
|
<ng-template #nzTitle>
|
Recent Posts
|
<small class="text-sm font-weight-normal">Venenatis portauam Inceptos ameteiam</small>
|
</ng-template>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="py-sm bg-grey-lighter-h point"
|
*ngFor="let item of todoData">
|
<div nz-col [nzSpan]="4" class="text-center">
|
<nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
|
</div>
|
<div nz-col [nzSpan]="20">
|
<strong>{{item.name}}</strong>
|
<p>{{item.content}}</p>
|
</div>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col nzXs="24" nzMd="12">
|
<nz-card nzTitle="Todo lists" [nzBordered]="false" nzNoPadding>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="py-sm bg-grey-lighter-h point"
|
*ngFor="let item of todoData">
|
<div nz-col [nzSpan]="4" class="text-center">
|
<nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
|
</div>
|
<div nz-col [nzSpan]="18">
|
<strong>{{item.name}}</strong>
|
<p [class.text-deleted]="item.completed">{{item.content}}</p>
|
</div>
|
<div nz-col [nzSpan]="2" class="text-right pr-md">
|
<nz-dropdown [nzPlacement]="'topRight'">
|
<i nz-dropdown class="icon-options-vertical"></i>
|
<ul nz-menu>
|
<li nz-menu-item *ngIf="item.completed" (click)="item.completed=false">Active</li>
|
<li nz-menu-item *ngIf="!item.completed" (click)="item.completed=true">Completed</li>
|
<li nz-menu-item (click)="todoData.splice(todoData.indexOf(item), 1)">Delted</li>
|
</ul>
|
</nz-dropdown>
|
</div>
|
</div>
|
</nz-card>
|
</div>
|
</div>
|
