1、html
<!-- 引用或者转发图文 -->
<view v-if="pOther[index].quote_info.photo_list"
:class="getImageClass(pOther[index].quote_info.photo_list.length)">
<view v-for="(j, ind) in pOther[index].quote_info.photo_list"
class="image-wrapper" :key="'photo'+ind">
<img :src="j" @click="ClickImage(pOther[index].quote_info.photo_list,j)" />
</view>
</view>
2、js
// 图片布局
getImageClass(total){
if (total === 4 ) {
return 'images';
}
return 'image';
},
3、css
.image {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.image .image-wrapper {
margin: 5px;
width: calc(33% - 10px);
}
.images{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 70%;
}
.images .image-wrapper{
margin: 5px;
width: calc(50% - 10px);
}
.image-wrapper img {
width: 100%;
padding: 0;
margin: 0;
height: 206rpx;
object-fit: cover;
}