<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"> <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, .45); font-size: 12px; line-height: 20px; margin-bottom: 4px; } } } } } </style>