平均分布从左到右 从上到下

 

<script setup lang="ts">
import { ref } from 'vue';

const list = ref([{}]);
const queryParams = ref({
  currentPage: 1,
  pageSize: 15,
  totalPage: 100,
});
function onChangePage(page: number, pageSize: number) {
  queryParams.value.currentPage = page;
  queryParams.value.pageSize = pageSize;
  // getTaskList();
}
</script>

<template>
  <!-- 图片墙 -->
  <div>
    <div v-if="list && list.length" class="make_img_box grid justify-between  w-full grid-cols-5">
      <div v-for="item, index in 12" :key="index" class="prcItem">
        <a-image src="https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" />
      </div>
    </div>
    <div v-else class="no-data">
      <a-empty />
    </div>
    <div class="pagination-box">
      <a-pagination v-model:current="queryParams.currentPage" v-model:page-size="queryParams.pageSize"
        :show-size-changer="true" :total="queryParams.totalPage" :show-quick-jumper="true"
        :show-total="(total) => `共${total}条`" @change="onChangePage" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.make_img_box {
  // width: calc(100% + 32px);
  // display: grid;
  // grid-template-columns: repeat(auto-fit, minmax(277px, 1fr));
  min-height: 500px;
  margin-top: 16px;

  .prcItem {
    // width: 300px;
    height: 156px;
    margin: 0 10px 20px 10px;
    overflow: hidden;
  }
}

.pagination-box {
  margin-top: 10px;
  margin-right: 32px;
  text-align: right;
}

:deep(.ant-image) {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>