📦 保护传承

src/assets/scss/colors.scss

@@ -12,6 +12,7 @@ $text-content-second-color: rgba(101, 74, 56, 0.6);
 
 $selection-max-width: 1250px;
 
+$border-split-color:rgb(236, 236, 236);
 $border-grey-color: #b3b3b3;
 $border-default-color: $primary-dark-color;
 $border-active-color: $primary-color;

src/assets/scss/main.scss

@@ -127,6 +127,9 @@ $small-banner-height: 445px;
   &:hover {
     transform: scale(1.05);
   }
+  &:active {
+    transform: scale(0.95); 
+  }
 }
 
 //Boxs

src/components/parts/ImageTextSmallBlock.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="ImageTextSmallBlock">
+    <div>
+      <img class="image" :src="image" alt="image" />
+      <h3>{{ title }}</h3>
+    </div>
+    <div>
+      <span v-if="date" class="time">{{ date }}</span>
+      <img class="more" src="@/assets/images/IconArrowRight.png" alt="更多" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({	
+  title : String,
+  image: String,
+  date: String,
+})
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
+.ImageTextSmallBlock {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  background-color: $box-color;
+  border-radius: 5px;
+  overflow: hidden;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-split-color;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  h3 {
+    color: $text-content-color;
+    font-size: 1.2rem;
+    margin: 0;
+    margin-bottom: 8px;
+  }
+
+  .image {
+    width: 60px;
+    margin-right: 15px;
+  }
+
+  .time {
+    color: $text-content-second-color;
+    font-size: 0.85rem;
+    margin-right: 16px;
+  }
+
+  .more {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

src/router/index.ts

@@ -39,6 +39,16 @@ const router = createRouter({
       component: () => import('../views/ResearchView.vue'),
     },
     {
+      path: '/fusion',
+      name: 'fusion',
+      component: () => import('../views/FusionView.vue'),
+    },
+    {
+      path: '/inheritor',
+      name: 'inheritor',
+      component: () => import('../views/InheritorView.vue'),
+    },
+    {
       path: '/404',
       name: 'NotFound',
       component: NotFoundView

src/views/AboutView.vue

@@ -1,18 +1,52 @@
 <template>
-  <div>
-    <div class="nav-placeholder"></div>
-    <div class="about">
-      关于页
-    </div>
+  <!-- 关于页 -->
+  <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>
+
+      </div>
+    </section>
+
+
   </div>
 </template>
 
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
+<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/InheritorView.vue

@@ -0,0 +1,227 @@
+<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 pb-0">
+      <div class="content">
+        <div class="title">
+          <h2>非遗传承</h2>
+        </div>
+        <ThreeImageList :list="list1" />
+      </div>
+    </section>
+
+    <!-- 文物保护 -->
+    <section class="main-section pb-0">
+      <div class="content">
+        <div class="title">
+          <h2>文物保护</h2>
+        </div>
+        <ThreeImageList :list="list2" />
+      </div>
+    </section>
+
+    <!-- 自然遗产 -->
+    <section class="main-section pb-0">
+      <div class="content">
+        <div class="title">
+          <h2>自然遗产</h2>
+        </div>
+        <LeftRightBox 
+          title="自然遗产"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image9"
+        />
+      </div>
+    </section>
+
+    <!-- 重要相关历史风貌区 -->
+    <section class="main-section pb-0">
+      <div class="content">
+        <div class="title">
+          <h2>重要相关历史风貌区</h2>
+        </div>
+        <LeftRightBox 
+          title="历史风貌区"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image11"
+          left
+        />
+      </div>
+    </section>
+
+    <!-- 重要相关文物和古迹 -->
+    <section class="main-section pb-0">
+      <div class="content">
+        <div class="title">
+          <h2>重要相关文物和古迹</h2>
+        </div>
+        <LeftRightBox 
+          title="传统村落"
+          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :image="Image10"
+          left
+        />
+      </div>
+    </section>
+
+    <!-- 法律法规 -->
+    <section class="main-section pb-0">
+      <div class="content">
+        <div class="title left-right">
+          <h2>法律法规</h2>
+          <div class="small-more">
+            <span>更多信息</span>
+            <img src="@/assets/images/index/ButtonMore.png" alt="更多" />
+          </div>
+        </div>
+        <ImageTextSmallBlock
+          v-for="(item, index) in lawsData"
+          :key="index"
+          :title="item.title"
+          :image="item.image"
+          :date="item.date"
+        />
+      </div>
+    </section>
+
+    <!-- 申报入口 -->
+    <section class="main-section">
+      <div class="content">
+        <div class="title">
+          <h2>申报入口</h2>
+        </div>
+        <img class="main-clickable mt-4 w-100" src="@/assets/images/inheritor/SubmitButton.png" alt="申报入口按钮" />
+      </div>
+    </section>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+import { onMounted, ref } from 'vue';
+import LawsTest from '@/assets/images/inheritor/LawsTest.jpg'
+import Image1 from '@/assets/images/inheritor/Image1.jpg'
+import Image2 from '@/assets/images/inheritor/Image2.jpg'
+import Image3 from '@/assets/images/inheritor/Image3.jpg'
+import Image4 from '@/assets/images/inheritor/Image4.jpg'
+import Image5 from '@/assets/images/inheritor/Image5.jpg'
+import Image6 from '@/assets/images/inheritor/Image6.jpg'
+import Image7 from '@/assets/images/inheritor/Image7.jpg'
+import Image8 from '@/assets/images/inheritor/Image8.jpg'
+import Image9 from '@/assets/images/inheritor/Image9.jpg'
+import Image10 from '@/assets/images/inheritor/Image10.jpg'
+import Image11 from '@/assets/images/inheritor/Image11.jpg'
+import LeftRightBox from '@/components/parts/LeftRightBox.vue';
+import ThreeImageList from '@/components/parts/ThreeImageList.vue';
+import ImageTextSmallBlock from '@/components/parts/ImageTextSmallBlock.vue';
+
+const carouselConfig = {
+  itemsToShow: 1,
+  wrapAround: true,
+  autoPlay: 5000,
+}
+const list1 = [
+  {
+    title: '非遗项目',
+    desc: '让文化因传承而永存',
+    image: Image1,
+  },
+  {
+    title: '非遗传承人',
+    desc: '让文化因传承而永存',
+    image: Image2,
+  },
+  {
+    title: '非遗产品',
+    desc: '让文化因传承而永存',
+    image: Image3,
+  },
+  {
+    title: '非遗活动',
+    desc: '让文化因传承而永存',
+    image: Image4,
+  },
+  {
+    title: '非遗传习所',
+    desc: '让文化因传承而永存',
+    image: Image5,
+  },
+  {
+    title: '非遗管理',
+    desc: '让文化因传承而永存',
+    image: Image6,
+  }
+]
+const list2 = [
+  {
+    title: '不可移动文物',
+    desc: '让文化因传承而永存',
+    image: Image7,
+  },
+  {
+    title: '可移动文物',
+    desc: '让文化因传承而永存',
+    image: Image8,
+  },
+  {
+    title: '',
+    desc: '',
+    image: ''
+  },
+]
+
+const lawsData = [
+  {
+    title: '《中华人民共和国非遗法》',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+  {
+    title: '厦门市闽南文化生态保护区建设办法',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+  {
+    title: '《中华人民共和国非遗法》',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+  {
+    title: '厦门市闽南文化生态保护区建设办法',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+  {
+    title: '《中华人民共和国非遗法》',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+  {
+    title: '厦门市闽南文化生态保护区建设办法',
+    date: '2025-04-17',
+    image: LawsTest,
+  },
+]
+</script>
+
+<style lang="scss">
+
+
+@media (max-width: 425px) {
+  
+}
+</style>
+

src/views/IntrodView copy 4.vue

@@ -1,69 +0,0 @@
-<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>
-