lcoco/pages/common/img/img-three.vue

<template>
  <view class="img-box">
    <view class="img-item" v-for="(fileItem,fileIndex) in fileList">
      <image :class="{'image-two':type===2}" :src="fileItem" @click.stop="previewImage(fileIndex)" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "img-three",
  components: {},
  props: {
    fileList:{
      default:[]
    },
    type:{
      default:1
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {
    previewImage(index){
      uni.previewImage({
        urls: this.fileList,
        current:index
      });
    }
  }
}
</script>

<style scoped lang="scss">
.img-box{
  height: auto;
  display: flex;
  flex-wrap: wrap;
  .img-item{
    display: inline-block;
    margin-right:12rpx;
    image{
      width: calc((100vw - 214rpx)/3);
      height: calc((100vw - 214rpx)/3);
      border-radius: 16rpx;
    }
    .image-two{
      width: calc((100vw - 288rpx)/3);
      height: calc((100vw - 288rpx)/3);
    }
  }
  .img-item:nth-of-type(3n+0){
    margin-right:0;
  }
  .img-item:nth-of-type(n+4){
    margin-top:10rpx;
  }

}
</style>