📦 文旅融合

src/assets/scss/colors.scss

@@ -23,3 +23,4 @@ $box-dark-trans-color: rgba(#000, 0.55);
 $box-color: #fff;
 $box-inset-color: rgba(#FFFDF9, 0.33);
 $box-hover-color: rgba(#FFFDF9, 0.88);
+$box-primary-color: rgba($primary-color, 0.38);

src/components/parts/ImageTitleDescBlock.vue

@@ -0,0 +1,47 @@
+<template>
+  <div 
+    :class="[
+      'ImageTitleDescBlock',
+    ]"
+  >
+    <img :src="image" />
+    <TitleDescBlock 
+      :title="title"
+      :desc="desc"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TitleDescBlock from './TitleDescBlock.vue';
+
+defineProps({	
+  title: {
+    type: String,
+    default: '' 
+  },
+  desc: {
+    type: String,
+    default: '' ,
+  },
+  image: {
+    type: String,
+    default: '' 
+  },
+})
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
+.ImageTitleDescBlock  {
+  display: flex;
+  flex-direction: row;
+  padding: 24px;
+
+  img {
+    width: 18%;
+    margin-right: 24px;
+  }
+}
+</style>

src/views/FusionView.vue

@@ -4,7 +4,7 @@
     <!-- 轮播 -->
     <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
       <Slide class="main-header-box small">
-        <img src="@/assets/images/communicate/Banner.jpg" />
+        <img src="@/assets/images/fusion/Banner.jpg" />
       </Slide>
       <template #addons>
         <Navigation />
@@ -12,30 +12,51 @@
       </template>
     </Carousel>
 
-    <!-- 传播交流 -->
-    <section class="main-section">
+    <!-- 闽南节庆日历 -->
+    <section class="main-section pb-0">
       <div class="content">
         <div class="title">
-          <h2>传播交流</h2>
+          <h2>闽南节庆日历</h2>
+        </div>
+        <div class="calandar row">
+          <div class="col col-12 col-lg-6 col-xl-6 p-0">
+            <h3 class="month-title">1月</h3>
+            <ImageTitleDescBlock
+              v-for="(item, index) in daysData"
+              :key="index"
+              :title="item.title"
+              :image="item.image"
+              :desc="item.desc"
+            />
+          </div>
+          <div class="month-grid col-12 col-lg-6 col-xl-6 p-0">
+            <div 
+              v-for="(month, k) in monthData"
+              :key="k"
+              :class="[ monthSelected === month.month ? 'active' : '' ]"
+            >
+              <h3>{{ month.month }}月</h3>
+              <div class="tags">
+                <span
+                  v-for="(holiday, index) in month.holidays"
+                  :key="index"
+                >
+                  {{ holiday }}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
+    </section>
 
-        <LeftRightBox 
-          title="闽南地区文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
-          :image="Image1"
-        />
-        <LeftRightBox 
-          title="台港澳地区文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
-          :image="Image2"
-          left
-        />
-        <LeftRightBox 
-          title="对外文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
-          :image="Image3"
-        />
-      
+    <!-- 文旅融合 -->
+    <section class="main-section">
+      <div class="content">
+        <div class="title">
+          <h2>文旅融合</h2>
+        </div>
+        <ThreeImageList :list="list" />
       </div>
     </section>
 
@@ -46,24 +67,168 @@
 <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 Image1 from '@/assets/images/fusion/Image1.jpg'
+import Image2 from '@/assets/images/fusion/Image2.jpg'
+import Image3 from '@/assets/images/fusion/Image3.jpg'
+import Image4 from '@/assets/images/fusion/Image4.jpg'
+import Image5 from '@/assets/images/fusion/Image5.jpg'
 import LeftRightBox from '@/components/parts/LeftRightBox.vue';
+import ImageTitleDescBlock from '@/components/parts/ImageTitleDescBlock.vue';
+import ThreeImageList from '@/components/parts/ThreeImageList.vue';
 
 const carouselConfig = {
   itemsToShow: 1,
   wrapAround: true,
   autoPlay: 5000,
 }
+const list = [
+  {
+    title: '闽南文化景区',
+    desc: '让文化因传承而永存',
+    image: Image1,
+  },
+  {
+    title: '文化旅游路线',
+    desc: '让文化因传承而永存',
+    image: Image2,
+  },
+  {
+    title: '文化产品',
+    desc: '让文化因传承而永存',
+    image: Image3,
+  },
+  {
+    title: '文旅融合示范点',
+    desc: '让文化因传承而永存',
+    image: Image4,
+  },
+  {
+    title: '闽南时尚',
+    desc: '让文化因传承而永存',
+    image: Image5,
+  },
+  {
+    title: '',
+    desc: '',
+    image: '',
+  }
+]
+const daysData = [
+  {
+    title: '除夕',
+    desc: '闽南人视这一天为最高神天公的生日，非常重视。临近节日，家家户户都要打扫卫生、制作龟粿、发粿等，作为供品。红龟粿呈龟红色，打龟甲印，象征长寿。',
+    image: Image1,
+  },
+  {
+    title: '除夕',
+    desc: '闽南人视这一天为最高神天公的生日，非常重视。临近节日，家家户户都要打扫卫生、制作龟粿、发粿等，作为供品。红龟粿呈龟红色，打龟甲印，象征长寿。',
+    image: Image1,
+  },
+  {
+    title: '除夕',
+    desc: '闽南人视这一天为最高神天公的生日，非常重视。临近节日，家家户户都要打扫卫生、制作龟粿、发粿等，作为供品。红龟粿呈龟红色，打龟甲印，象征长寿。',
+    image: Image1,
+  },
+]
+const monthSelected = ref(1)
+const monthData = [
+  {
+    month: 1,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 2,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 3,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 4,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 5,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 6,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 7,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 8,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 9,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 10,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 11,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+  {
+    month: 12,
+    holidays: [ '除夕', '元旦', '春节' ]
+  },
+]
 
 </script>
 
 <style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
+.calandar {
+  background-color: $box-color;
+
+  .month-title {
+    margin: 24px 24px 0 24px;
+  }
+  .month-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      background-color: $text-color-light;
+      padding: 12px ;
+      border: 1px solid $border-split-color;
+
+      h3 {
+        font-size: 18px;
+      }
+      .tags {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
 
+        > span {
+          font-size: 13px;
+          margin-right: 8px;
+          margin-top: 8px;
+          padding: 4px 8px;
+          border-radius: 12px;
+          background-color: rgba(#FF961B, 0.1);
+        }
+      }
 
-@media (max-width: 425px) {
-  
+      &.active {
+        background-color: $primary-color;
+        color: $text-color-light;
+      }
+    }
+  }
 }
 </style>