minnan-website/src/views/AboutView.vue

<template>
  <!-- 关于页 -->
  <div class="about main-background main-background-type0">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/about/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>


    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0">
      <div class="content news-list">
        <!-- 新闻列表 -->
        <SimplePageContentLoader :loader="newsLoader">
          <div 
            v-for="(item, k) in newsLoader.list.value"
            :key="item.id"
            class="item"
            @click="router.push({ name: 'news-detail', query: { id: item.id }})"
          >
            <img :src="item.image" alt="新闻图片" />
            <TitleDescBlock
              :title="item.title"
              :desc="item.desc || item.title"
              :date="DateUtils.formatDate(item.publish_at, DateUtils.FormatStrings.YearCommon)"
            />
          </div>
        </SimplePageContentLoader>
        <!-- 分页 -->
        <Pagination2
          v-model:currentPage="newsLoader.page.value"
          :totalPages="newsLoader.totalPages.value"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import Pagination2 from '@/components/controls/Pagination.vue';
import TitleDescBlock from '@/components/parts/TitleDescBlock.vue';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import DateUtils from '@/common/utils/DateUtils';
import { useRouter } from 'vue-router';

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}

const router = useRouter();

const newsLoader = useSimplePagerDataLoader(10, async (page, pageSize) => {
  const res = await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId([ 255, 256, 283, 284, ])
  , page, pageSize);
  return {
    data: res.list,
    total: res.total,
  };
});

onMounted(async () => {
  newsLoader.loadData(undefined, true);
})
</script>

<style lang="scss">


@media (max-width: 425px) {
  
}
</style>