wenlv-huli-player/src/views/ListView.vue

<script setup lang="ts">
import { GetContentListParams } from '@/api/CommonContent';
import ProjectsContent from '@/api/inherit/ProjectsContent';
import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
import SimplePageListContentPager from '@/components/SimplePageListContentPager.vue';
import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const newsData = useSimplePagerDataLoader(6, async (p, s) => 
  await ProjectsContent.getContentList(new GetContentListParams()
    .setMainBodyColumnId(
      route.query.id ? parseInt(route.query.id as string) : ProjectsContent.mainBodyColumnId!
    )
    .setModelId(
      route.query.modelId ? parseInt(route.query.modelId as string) : ProjectsContent.modelId!
    )
  , p, s)
);
</script>

<template>
  <main class="main-bg main-bg2 d-flex flex-col align-center justify-center">
    <img class="main-image-button back" src="@/assets/images/Back.png" alt="" @click="router.back()">
    <div class="main-box2 d-flex flex-row align-center">
      <div class="d-flex flex-col align-center flex-one gap-base padding-top-ll">
        <img class="main-image-button fill" src="@/assets/images/PlayList/Button1.png" @click="router.push('/')" alt="">
        <img class="main-image-button fill disabled" src="@/assets/images/PlayList/Button2.png" alt="">
      </div>
      <div class="d-flex flex-col align-center margin-left-ll flex-six h-100">
        <SimplePageListContentLoader :loader="newsData" class="main-list">
          <div 
            v-for="(value, k) in newsData.list.value"
            class="main-list-box1"
            @click="router.push({ name: 'Player', query: { id: value.id } })"
          >
            <div>
              <img :src="value.image" />
            </div>
            <h6>{{ value.title }}</h6>
          </div>
          <div 
            v-for="v of (newsData.list.value.length % 6)"
            class="main-list-box1"
          />
        </SimplePageListContentLoader>
        <SimplePageListContentPager :loader="newsData" />
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>


.main-list {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}
.main-list-box1 {
  position: relative;
  height: 48%;
  width: 30%;
  margin-bottom: 2vh;
  cursor: pointer;

  &:active {
    transform: scale(0.95);
  }

  > div {
    height: 75%;
    background-size: 100% 100%;
    background-position: center;
    background-image: url('@/assets/images/PlayList/Box.png');
    padding: 7px 10px;

    img {
      border-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  h6 {
    margin-top: 1.5vh;
    margin-bottom: 0;
    text-align: center;
    color: #d75b4d;
    font-size: 20px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

}

</style>