📦 传播交流

src/router/index.ts

@@ -29,6 +29,11 @@ const router = createRouter({
       component: () => import('../views/IntrodView.vue'),
     },
     {
+      path: '/communicate',
+      name: 'communicate',
+      component: () => import('../views/CommunicateView.vue'),
+    },
+    {
       path: '/404',
       name: 'NotFound',
       component: NotFoundView

src/views/CommunicateView.vue

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

src/views/IntrodView copy 3.vue

@@ -1,10 +1,10 @@
 <template>
-  <!-- 文化概况页 -->
-  <div class="main-background">
+  <!-- 传播交流页 -->
+  <div class=" main-background main-background-type0">
     <!-- 轮播 -->
-    <Carousel v-bind="carouselConfig" class="main-header-box carousel-light">
-      <Slide class="main-header-box">
-        <img src="@/assets/images/introduction/Bammer.jpg" />
+    <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 />
@@ -12,13 +12,29 @@
       </template>
     </Carousel>
 
-    <!-- 历史和地理背景 -->
-    <section class="main-section main-background main-background-type1">
+    <!-- 传播交流 -->
+    <section class="main-section">
       <div class="content">
         <div class="title">
-          <h2>历史和地理背景</h2>
+          <h2>传播交流</h2>
         </div>
 
+        <LeftRightBox 
+          title="闽南地区文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image1"
+        />
+        <LeftRightBox 
+          title="台港澳地区文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image2"
+          left
+        />
+        <LeftRightBox 
+          title="对外文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image3"
+        />
       
       </div>
     </section>
@@ -30,7 +46,10 @@
 <script setup lang="ts">
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { onMounted, ref } from 'vue';
-import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
+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,

src/views/IntrodView copy 4.vue

@@ -1,10 +1,10 @@
 <template>
-  <!-- 文化概况页 -->
-  <div class="main-background">
+  <!-- 传播交流页 -->
+  <div class=" main-background main-background-type0">
     <!-- 轮播 -->
-    <Carousel v-bind="carouselConfig" class="main-header-box carousel-light">
-      <Slide class="main-header-box">
-        <img src="@/assets/images/introduction/Bammer.jpg" />
+    <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 />
@@ -12,13 +12,29 @@
       </template>
     </Carousel>
 
-    <!-- 历史和地理背景 -->
-    <section class="main-section main-background main-background-type1">
+    <!-- 传播交流 -->
+    <section class="main-section">
       <div class="content">
         <div class="title">
-          <h2>历史和地理背景</h2>
+          <h2>传播交流</h2>
         </div>
 
+        <LeftRightBox 
+          title="闽南地区文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image1"
+        />
+        <LeftRightBox 
+          title="台港澳地区文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image2"
+          left
+        />
+        <LeftRightBox 
+          title="对外文化交流"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image3"
+        />
       
       </div>
     </section>
@@ -30,7 +46,10 @@
 <script setup lang="ts">
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { onMounted, ref } from 'vue';
-import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
+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,

src/views/IntrodView copy.vue

@@ -1,50 +0,0 @@
-<template>
-  <!-- 文化概况页 -->
-  <div class="main-background">
-    <!-- 轮播 -->
-    <Carousel v-bind="carouselConfig" class="main-header-box carousel-light">
-      <Slide class="main-header-box">
-        <img src="@/assets/images/introduction/Bammer.jpg" />
-      </Slide>
-      <template #addons>
-        <Navigation />
-        <Pagination />
-      </template>
-    </Carousel>
-
-    <!-- 历史和地理背景 -->
-    <section class="main-section main-background main-background-type1">
-      <div class="content">
-        <div class="title">
-          <h2>历史和地理背景</h2>
-        </div>
-
-      
-      </div>
-    </section>
-
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
-import { onMounted, ref } from 'vue';
-import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
-
-const carouselConfig = {
-  itemsToShow: 1,
-  wrapAround: true,
-  autoPlay: 5000,
-}
-
-</script>
-
-<style lang="scss">
-
-
-@media (max-width: 425px) {
-  
-}
-</style>
-

src/views/IntrodView.vue

@@ -111,11 +111,3 @@ const list = [
 
 </script>
 
-<style lang="scss">
-
-
-@media (max-width: 425px) {
-
-}
-</style>
-