blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <div class="ant-pro-pages-account-projects-cardList">
3     <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
4       <a-list-item slot="renderItem" slot-scope="item">
5         <a-card class="ant-pro-pages-account-projects-card" hoverable>
6           <img slot="cover" :src="item.cover" :alt="item.title" />
7           <a-card-meta :title="item.title">
8             <template slot="description">
9               <ellipsis :length="50">{{ item.description }}</ellipsis>
10             </template>
11           </a-card-meta>
12           <div class="cardItemContent">
13             <span>{{ item.updatedAt | fromNow }}</span>
14             <div class="avatarList">
15               <avatar-list size="mini">
16                 <avatar-list-item
17                   v-for="(member, i) in item.members"
18                   :key="`${item.id}-avatar-${i}`"
19                   :src="member.avatar"
20                   :tips="member.name"
21                 />
22               </avatar-list>
23             </div>
24           </div>
25         </a-card>
26       </a-list-item>
27     </a-list>
28   </div>
29 </template>
30
31 <script>
32 import moment from 'moment'
33 import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
34 const TagSelectOption = TagSelect.Option
35 const AvatarListItem = AvatarList.AvatarItem
36
37 export default {
38   name: 'Project',
39   components: {
40     AvatarList,
41     AvatarListItem,
42     Ellipsis,
43     TagSelect,
44     TagSelectOption,
45     StandardFormRow
46   },
47   data () {
48     return {
49       data: [],
50       form: this.$form.createForm(this),
51       loading: true
52     }
53   },
54   filters: {
55     fromNow (date) {
56       return moment(date).fromNow()
57     }
58   },
59   mounted () {
60     this.getList()
61   },
62   methods: {
63     handleChange (value) {
64       console.log(`selected ${value}`)
65     },
66     getList () {
67       this.data = [
68         {
69           id: '123',
70           cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
71           content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
72           message: '消息',
73           description: '小诺框架产品',
74           href: 'https://xiaonuo.vip',
75           title: '小诺',
76           updatedAt: '2021-05-01 12:00:00',
77           members: [
78             {
79               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
80               name: '曲丽丽',
81               id: 'member1'
82             },
83             {
84               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
85               name: '王昭君',
86               id: 'member2'
87             },
88             {
89               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
90               name: '董娜娜',
91               id: 'member3'
92             }
93           ]
94         },
95         {
96           id: '1234',
97           cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
98           content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
99           message: '消息',
100           description: '小诺框架产品',
101           href: 'https://xiaonuo.vip',
102           title: '小诺',
103           updatedAt: '2021-05-01 12:00:00',
104           members: [
105             {
106               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
107               name: '曲丽丽',
108               id: 'member1'
109             },
110             {
111               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
112               name: '王昭君',
113               id: 'member2'
114             },
115             {
116               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
117               name: '董娜娜',
118               id: 'member3'
119             }
120           ]
121         },
122         {
123           id: '12345',
124           cover: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
125           content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
126           message: '消息',
127           description: '小诺框架产品',
128           href: 'https://xiaonuo.vip',
129           title: '小诺',
130           updatedAt: '2021-05-01 12:00:00',
131           members: [
132             {
133               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
134               name: '曲丽丽',
135               id: 'member1'
136             },
137             {
138               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
139               name: '王昭君',
140               id: 'member2'
141             },
142             {
143               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
144               name: '董娜娜',
145               id: 'member3'
146             }
147           ]
148         },
149         {
150           id: '1236',
151           cover: 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
152           content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
153           message: '消息',
154           description: '小诺框架产品',
155           href: 'https://xiaonuo.vip',
156           title: '小诺',
157           updatedAt: '2021-05-01 12:00:00',
158           members: [
159             {
160               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
161               name: '曲丽丽',
162               id: 'member1'
163             },
164             {
165               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
166               name: '王昭君',
167               id: 'member2'
168             },
169             {
170               avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
171               name: '董娜娜',
172               id: 'member3'
173             }
174           ]
175         }
176       ]
177       this.loading = false
178     }
179   }
180 }
181 </script>
182
183 <style lang="less" scoped>
184   .ant-pro-pages-account-projects-cardList {
185     margin-top: 24px;
186
187     /deep/ .ant-card-meta-title {
188       margin-bottom: 4px;
189     }
190
191     /deep/ .ant-card-meta-description {
192       height: 44px;
193       overflow: hidden;
194       line-height: 22px;
195     }
196
197     .cardItemContent {
198       display: flex;
199       height: 20px;
200       margin-top: 16px;
201       margin-bottom: -4px;
202       line-height: 20px;
203
204       > span {
205         flex: 1 1;
206         color: rgba(0,0,0,.45);
207         font-size: 12px;
208       }
209
210       /deep/ .ant-pro-avatar-list {
211         flex: 0 1 auto;
212       }
213     }
214   }
215 </style>