实现代码
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>
flex布局参考地址：https://blog.csdn.net/qq_39399050/article/details/98991664
标签：flex,res,卡片,apiTools,0.03,布局,列表,initList,rem From： https://www.cnblogs.com/ITjyLh/p/17717788.html