minnan-website/src/views/ResearchView.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/research/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 理论研究 -->
    <section class="main-section main-background">
      <div class="content">
        <div class="title">
          <h2>理论研究</h2>
        </div>
        <ThreeImageList :list="list" />
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { usePageAction } from '@/composeable/PageAction';
import Image1 from '@/assets/images/research/Image1.jpg';
import Image2 from '@/assets/images/research/Image2.jpg';
import Image3 from '@/assets/images/research/Image3.jpg';
import Image4 from '@/assets/images/research/Image4.jpg';
import Image5 from '@/assets/images/research/Image5.jpg';
import ThreeImageList from '@/components/parts/ThreeImageList.vue';

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

const list = [
  {
    title: '研究团队',
    desc: '让文化因传承而永存',
    image: Image1,
    onClick: () => {
      navTo('/research/team');
    }
  },
  {
    title: '研究项目',
    desc: '让文化因传承而永存',
    image: Image2,
    onClick: () => {
      navTo('/research/projects');
    }
  },
  {
    title: '理论研讨',
    desc: '让文化因传承而永存',
    image: Image3,
    onClick: () => {
      navTo('/research/discuss');
    }
  },
  {
    title: '研究成果',
    desc: '让文化因传承而永存',
    image: Image4,
    onClick: () => {
      navTo('/research/result');
    }
  },
  {
    title: '专家学者',
    desc: '让文化因传承而永存',
    image: Image5,
    onClick: () => {
      navTo('/research/expert');
    }
  },
  {
    title: '',
    desc: '',
    image: '',
  }
]

const { navTo } = usePageAction();
</script>

<style lang="scss">


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