<template>
<div class="list_wrap">
<ul class="list" >
<li v-for="(item, index) in 10" :key="index" >
<img src="https://img.yzcdn.cn/vant/leaf.jpg" alt="">
</li>
<li>
<div class="list_more">
<span class="iconfont icon-jia"></span>
</div>
</li>
<li>
<div class="list_more">
<span class="iconfont icon-jia"></span>
</div>
</li>
<!-- 占位符, 为了布局使用 -->
<li class="user-list-item" v-for="(i, idx) in 5" :key="idx + 10"></li>
</ul>
<div>文字测试</div>
</div>
</template>
<style lang="scss" scoped>
.list {
/* height: 300px; 根据需要设置高度 */
&_wrap{
padding: 0 15px;
}
display: flex;
flex-wrap: wrap;
background: #fff;
justify-content: space-between;
li {
margin:5px 0;
width: 80px;
height: 80px;
position: relative;
img{
width: 100%;
height: 100%;
}
.list_more {
color: #999999;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #ebebeb;
}
}
}
</style>