inleft
2022-01-16 aab8119ad66583d65d517e2eb8e574b8794180c9
commit | author | age
56a4b8 1 <template>
aab811 2     <div class="holdHeight">
I 3         <a-row type="flex" justify="center" >
4             <a-col v-for="temp in [1,2,1,1,1,1,1]">
5                 <div class="myCard"  style="height: 200px;width: 220px; border-radius: 20px;">
6                     <a-card :hoverable="true" size="small">
7                         <template slot="cover">
8                             <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" />
9                         </template>
56a4b8 10
aab811 11                         <template slot="actions" class="ant-card-actions">
I 12                             <a-icon key="arrowDown" type="arrow-down" />
13                             <a-icon key="edit" type="edit" />
14                             <a-icon key="ellipsis" type="ellipsis" />
15                         </template>
56a4b8 16
aab811 17                         <a-card-meta title="这世界那么多人" description="吉他谱 莫文蔚">
I 18                         </a-card-meta>
19                     </a-card>
56a4b8 20                 </div>
aab811 21             </a-col>
56a4b8 22
aab811 23         </a-row>
I 24         <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
25             :total="total" />
56a4b8 26
I 27     </div>
28
29 </template>
30
31 <script>
32     export default {
33         name: "box",
34         data() {
35             return {
aab811 36                 data: [],
I 37                 loading: false,
38                 busy: false,
39                 size: "small",
40                 total: 50,
41                 pageSize: 10,
42                 current: 4,
56a4b8 43             }
I 44         }
45     }
46 </script>
47
48 </script>
49
50 <style lang="less">
aab811 51     .holdHeight {
I 52         // background-color: beige;
53         
54     }
56a4b8 55
aab811 56     .myCard {
I 57         padding: 10px 10px;
58     }
59
60     .myCardCover {
61         object-fit: scale-down
62     }
56a4b8 63 </style>