<template>
  <div class="w-60 h-60 rounded-full overflow-hidden flex justify-start">
    <!-- v-for="(item, index) in list :key="index"" -->
    <div class="" v-for="(item, index) in 6" :key="index">
      <img class="w-full h-full object-cover" :src="H5_default" alt="" />
    </div>
  </div>
</template>

<script setup>
import H5_default from '../../assets/img/comment/H5_default.png'
defineProps({
  list: {
    type: Array || String,
    default: []
  }
})

onMounted(() => {
  // list = [H5_default, H5_default, H5_default, H5_default]
  // console.log(list, 'list')
})
</script>

<style lang="scss" scoped>
.avatar-list {
  display: grid;

  grid-auto-flow: dense; /* 确保项目会填充所有的网格单元 */
  grid-gap: 1px;
}

.one {
  grid-template-columns: repeat(2, 1fr);
  .item__child {
    grid-column: span 2;
  }
}

.two {
  grid-template-columns: repeat(2, 1fr);
  .item__child {
    grid-column: span 2;
  }
}
.three {
  grid-template-columns: repeat(3, 1fr);
  .item__child {
    width: 17px;
    height: 17px;
    grid-column: span 3;
  }
}
</style>
