卡片列表布局

 1 <template>
 2     <div>
 3         <!-- 平铺图片 -->
 4         <ui class="course-list">
 5             <!-- 设置图片宽度比例 -->
 6             <!-- 循环绑定数据 -->
 7             <li class="course-item" :data="tableData"  v-for="(item,index) in tableData" :key="item.Id">
 8 <!-- 控制图片相对大小，感觉设置内边距，就是实际图片的高度！！！！！！！ -->
 9                 <div   class="picture-swarper" > 
10                     <!-- 让图片顶格填充，不大也不小    -->
11                 <img
12                 class="item-picture"
13                   :src="`${item.attachmentPath}`" 
14                   > <img>    
15                 </div>
16             </li>
17         </ui>
18     </div>
19 </template>
20 
21 <script>
22   import * as wqApi from '@/api/class/class'
23   import * as apiTools from '@/utils/apiTools'
24   export default {
25     data() {
26       return {
27         tableData: []
28       }
29     },
30     created() {
31       this.initList()
32     },
33     methods: {
34       initList() {
35         this.loading = true
36         apiTools
37           .get(
38             this,
39             wqApi.initList,
40             {
41               pagenum: 1,
42               pagesize: 12,
43               type:1
44             },
45             "V1"
46           )
47           .then((res) => {
48             this.tableData = res.rows
49             this.total=res.total
50             this.loading = false
51           })
52           
53       }, 
54 
55     },
56 
57   }
58 </script>
59 
60 <style>
61 .course-list {
62     display: flex;
63     flex-wrap: wrap;
64     margin: 0.8rem -0.1rem 0;
65 }
66 .course-item {
67     width: 25%;
68     padding: 0.13rem 0.1rem;
69 }
70 .picture-swarper {
71     position: relative;
72     /* 感觉压缩图片用的 */
73     padding-top: 56.23%; 
74     /* overflow: hidden; */
75     border-radius: 0.03rem 0.03rem 0 0;
76 }
77 .item-picture {
78   position: absolute;
79   top: 0;
80   left: 0;
81   bottom: 0;
82   right: 0;
83   margin: auto;
84   width: 100%;
85   height: 100%;
86   transition: all 0.2s;
87   pointer-events: none;
88   object-fit: cover;
89   border-radius: 0.03rem 0.03rem 0 0;
90 }
91 </style>