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