左右固定，flex布局 固定的图片个数 中间距离自适应

      <div class="bookView" v-loading="state.bookViewLoading">
        <div class="bookEle" v-for="(item, index) in state.bookViewData" :key="item.id">
          <el-image @click="toDetail(item)" :src="item.imageUrl" lazy>
            <template #error>
              <div class="image-slot">
                <img
                  @click="toDetail(item)"
                  src="@/assets/image/dashboard/noPicture.png"
                  style="width: 100%; height: 100%"
                  alt=""
                />
              </div>
            </template>
          </el-image>
          <div class="iaIcon" v-show="item.isAI">AI</div>
          <p @click="toDetail(item)">{{ item.bookName }}</p>
        </div>
      </div>

// // 动态计算每行放几个图片，及每个图片之间的自适应间距
const adjustImageSpacing = () => {
  const container = document.querySelector('.bookView')
  // 获取容器宽度并减去padding
  const containerWidth1 = container.offsetWidth
  const containerWidth = Math.floor(container.getBoundingClientRect().width)
  nextTick(() => {
    // 计算每行最多可放置的图片数量
    // const maxImagesPerRow = Math.floor(containerWidth / (159 + 28))
    // 计算每个图片之间的间距
    const gap = Math.floor((containerWidth - 6 * 159) / (6 - 1))
    // 设置图片间距，第一个和最后一个图片除外
    for (let i = 0; i < state.bookViewData.length; i++) {
      if ((i + 1) % 6 !== 0 && (i + 1) % 6 !== 1) {
        container.children[i].style.marginRight = `${gap}px`
      } else if ((i + 1) % 6 === 0) {
        container.children[i].style.marginRight = '0'
      } else if ((i + 1) % 6 === 1) {
        container.children[i].style.marginRight = `${gap}px`
      }
    }
  })
}