<pro-header [title]="'卡片列表'">
|
<ng-template #extra>
|
<div style="margin-top: -60px; text-align: center; width: 195px;">
|
<img class="img-fluid" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png">
|
</div>
|
</ng-template>
|
<ng-template #content>
|
<p>段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</p>
|
<div class="d-flex pt-md">
|
<a class="d-flex pr-lg">
|
<img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />快速开始
|
</a>
|
<a class="d-flex pr-lg">
|
<img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />产品简介
|
</a>
|
<a class="d-flex">
|
<img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />产品文档
|
</a>
|
</div>
|
</ng-template>
|
</pro-header>
|
<nz-list [nzLoading]="loading" [nzDataSource]="list"
|
[nzGrid]="{gutter: 24, lg: 8, md: 12, sm: 24, xs: 24 }">
|
<ng-template #item let-item>
|
<nz-list-item>
|
<button *ngIf="item === null" nz-button (click)="msg.success('add')" [nzType]="'dashed'" style="width: 100%; height: 183px;">
|
<i class="anticon anticon-plus"></i><span>新增产品</span>
|
</button>
|
<nz-card nzHoverable *ngIf="item !== null">
|
<nz-card-action><a (click)="msg.success('操作一：' + item.id);">操作一</a></nz-card-action>
|
<nz-card-action><a (click)="msg.success('操作二：' + item.id);">操作二</a></nz-card-action>
|
<nz-card-meta
|
[nzAvatar]="item.avatar"
|
[nzTitle]="nzTitle"
|
[nzDescription]="nzDescription">
|
<ng-template #nzTitle><a (click)="msg.success('标题：' + item.id);">{{item.title}}</a></ng-template>
|
<ng-template #nzDescription>
|
<ellipsis>{{item.description}}</ellipsis>
|
</ng-template>
|
</nz-card-meta>
|
</nz-card>
|
</nz-list-item>
|
</ng-template>
|
</nz-list>
|
