inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div class="app-list">
3     <a-list
4       :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
5       :dataSource="dataSource">
6       <a-list-item slot="renderItem" slot-scope="item">
7         <a-card :hoverable="true">
8           <a-card-meta>
9             <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
10             <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
11             <div class="meta-cardInfo" slot="description">
12               <div>
13                 <p>活跃用户</p>
14                 <p>
15                   <span>{{ item.activeUser }}<span>万</span></span>
16                 </p>
17               </div>
18               <div>
19                 <p>新增用户</p>
20                 <p>{{ item.newUser | NumberFormat }}</p>
21               </div>
22             </div>
23           </a-card-meta>
24           <template class="ant-card-actions" slot="actions">
25             <a>
26               <a-icon type="download"/>
27             </a>
28             <a>
29               <a-icon type="edit"/>
30             </a>
31             <a>
32               <a-icon type="share-alt"/>
33             </a>
34             <a>
35               <a-dropdown>
36                 <a class="ant-dropdown-link" href="javascript:;">
37                   <a-icon type="ellipsis"/>
38                 </a>
39                 <a-menu slot="overlay">
40                   <a-menu-item>
41                     <a href="javascript:;">1st menu item</a>
42                   </a-menu-item>
43                   <a-menu-item>
44                     <a href="javascript:;">2nd menu item</a>
45                   </a-menu-item>
46                   <a-menu-item>
47                     <a href="javascript:;">3rd menu item</a>
48                   </a-menu-item>
49                 </a-menu>
50               </a-dropdown>
51             </a>
52           </template>
53         </a-card>
54       </a-list-item>
55     </a-list>
56
57   </div>
58 </template>
59
60 <script>
61 const dataSource = []
62 for (let i = 0; i < 11; i++) {
63   dataSource.push({
64     title: 'Alipay',
65     avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
66     activeUser: 17,
67     newUser: 1700
68   })
69 }
70
71 export default {
72   name: 'Article',
73   components: {},
74   data () {
75     return {
76       dataSource
77     }
78   }
79 }
80 </script>
81
82 <style lang="less" scoped>
83
84   .app-list {
85
86     .meta-cardInfo {
87       zoom: 1;
88       margin-top: 16px;
89
90       > div {
91         position: relative;
92         text-align: left;
93         float: left;
94         width: 50%;
95
96         p {
97           line-height: 32px;
98           font-size: 24px;
99           margin: 0;
100
101           &:first-child {
102             color: rgba(0, 0, 0, .45);
103             font-size: 12px;
104             line-height: 20px;
105             margin-bottom: 4px;
106           }
107         }
108
109       }
110     }
111   }
112
113 </style>