minnan-website/src/views/IntrodView copy 3.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="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
          :image="Image1"
        />
        <LeftRightBox 
          title="台港澳地区文化交流"
          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
          :image="Image2"
          left
        />
        <LeftRightBox 
          title="对外文化交流"
          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
          :image="Image3"
        />
      
      </div>
    </section>


  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
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';

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

</script>

<style lang="scss">


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