<template>
|
<div class="app-list">
|
<a-list :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }" :dataSource="dataSource">
|
<a-list-item slot="renderItem" slot-scope="item, index">
|
<a-card :hoverable="true">
|
<a-card-meta>
|
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small" />
|
<div class="meta-cardInfo" slot="description">
|
<div>
|
<p>活跃用户</p>
|
<p>
|
<span>{{ item.activeUser }}<span>万</span></span>
|
</p>
|
</div>
|
<div>
|
<p>新增用户</p>
|
<p>{{ item.newUser | NumberFormat }}</p>
|
</div>
|
</div>
|
</a-card-meta>
|
<template class="ant-card-actions" slot="actions">
|
<a>
|
<a-icon type="download" />
|
</a>
|
<a>
|
<a-icon type="edit" />
|
</a>
|
<a>
|
<a-icon type="share-alt" />
|
</a>
|
<a>
|
<a-dropdown>
|
<a class="ant-dropdown-link" href="javascript:;">
|
<a-icon type="ellipsis" />
|
</a>
|
<a-menu slot="overlay" class="ant-dropdown-bordered">
|
<a-menu-item>
|
<a href="javascript:;">1st menu item</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;">2nd menu item</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;">3rd menu item</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</a>
|
</template>
|
</a-card>
|
</a-list-item>
|
</a-list>
|
</div>
|
</template>
|
|
<script>
|
const dataSource = []
|
for (let i = 0; i < 11; i++) {
|
dataSource.push({
|
title: 'Alipay',
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
activeUser: 17,
|
newUser: 1700
|
})
|
}
|
|
export default {
|
name: 'Article',
|
components: {},
|
data() {
|
return {
|
dataSource
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.app-list {
|
.meta-cardInfo {
|
zoom: 1;
|
margin-top: 16px;
|
|
> div {
|
position: relative;
|
text-align: left;
|
float: left;
|
width: 50%;
|
|
p {
|
line-height: 32px;
|
font-size: 24px;
|
margin: 0;
|
|
&:first-child {
|
color: rgba(0, 0, 0, 0.45);
|
font-size: 12px;
|
line-height: 20px;
|
margin-bottom: 4px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
