mingnan-website/src/views/CommunicateView.vue

<template>
  <!-- 传播交流页 -->
  <div class=" 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/communicate/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 传播交流 -->
    <section class="main-section">
      <div class="content">
        <div class="title">
          <h2>传播交流</h2>
        </div>

        <LeftRightBox 
          title="闽南地区文化交流"
          :desc="overviewsLoader.content.value?.[0]"
          :image="Image1"
          @moreClick="navTo('/communicate/fujian-and-taiwan')"
        />
        <LeftRightBox 
          class="mt-4"
          title="台港澳地区文化交流"
          :desc="overviewsLoader.content.value?.[1]"
          :image="Image2"
          left
          @moreClick="navTo('/communicate/hk-macao-and-taiwan')"
        />
        <LeftRightBox 
          class="mt-4"
          title="对外文化交流"
          :desc="overviewsLoader.content.value?.[2]"
          :image="Image3"
          @moreClick="navTo('/communicate/outside')"
        />
      
      </div>
    </section>


  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
import { usePageAction } from '@/composeable/PageAction';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import Image1 from '@/assets/images/communicate/Image1.jpg'
import Image2 from '@/assets/images/communicate/Image2.jpg'
import Image3 from '@/assets/images/communicate/Image3.jpg'
import LeftRightBox from '@/components/parts/LeftRightBox.vue';
import CommonContent, { GetColumListParams } from '@/api/CommonContent';
import CommunicateContent from '@/api/communicate/CommunicateContent';
import { NO_CONTENT_STRING } from '@/common/ConstStrings';

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

const { navTo } = usePageAction();

const overviewsLoader = useSimpleDataLoader(async () => {
  return [
    (await CommunicateContent.getColumList(
      new GetColumListParams().setMainBodyColumnId(260)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await CommunicateContent.getColumList(
      new GetColumListParams().setMainBodyColumnId(261)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await CommunicateContent.getColumList(
      new GetColumListParams().setMainBodyColumnId(262)
    )).list[0]?.overview || NO_CONTENT_STRING,
  ]
});

</script>

<style lang="scss">


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