📦 文化概况页面

src/assets/scss/colors.scss

@@ -1,9 +1,15 @@
 $primary-color: #bd4b36;
 $primary-dark-color: #aa6052;
+
 $text-color: #333;
 $text-color-light: #fff;
 $text-second-color: #6d6d6d;
 $text-second-color-light: #ddd;
+
+
+$text-content-color: #654A38;
+$text-content-second-color: rgba(101, 74, 56, 0.6);
+
 $selection-max-width: 1250px;
 
 $border-grey-color: #b3b3b3;

src/assets/scss/components.scss

@@ -19,4 +19,8 @@
     user-select: none;
     color: $primary-color;
   }
+}
+
+.left-right-grid {
+  
 }

src/assets/scss/main.scss

@@ -106,7 +106,7 @@ $small-banner-height: 445px;
   background-position: center top;
 
   &-type0 {
-    background-image: url('@/assets/images/BgLong.png');
+    background-image: url('@/assets/images/BgLong.jpg');
   }
   &-type1 {
     background-image: url('@/assets/images/Bg1.png');
@@ -118,54 +118,23 @@ $small-banner-height: 445px;
     background-image: url('@/assets/images/index/IntrodRight.png');
   }
 }
+.main-clickable {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: all 0.2s ease; 
 
-//Boxs
-
-.main-news-box {
-  position: relative;
-  padding: 24px;
-  background-color: #fff;
-  background-size: cover;
-  background-position: center;
-  width: 400px;
-  height: 270px;
-  margin-right: 24px;
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    height: 120px;
-    background: linear-gradient(
-      180deg,
-      rgba(#000, 0) 0%,
-      rgba(#000, 0.5) 100%
-    )
+  &:hover {
+    transform: scale(1.05);
   }
+}
 
-  .desc {
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 24px;
-    color: #fff;
+//Boxs
 
-    h5 {
-      font-family: SourceHanSerifCNBold;
-      font-size: 1.1rem;
-      margin-bottom: 5px;
-    }
-    p {
-      font-size: 0.8rem;
-      margin: 0;
-    }
-  }
+.main-box {
+  overflow: hidden;
+  background-color: $box-color;
+  border-radius: 5px;
 }
 
 //Section

src/components/NavBar.vue

@@ -12,8 +12,8 @@
       <RouterLink to="/inheritor">保护传承</RouterLink>
     </div>
     <div class="group center">
-      <div class="headerlogos" @click="goIndex">
-        <img src="@/assets/images/LogoIcon.png" />
+      <div class="headerlogos">
+        <img class="main-clickable" src="@/assets/images/LogoIcon.png" @click="goIndex" />
         <div>
           <p class="large">闽南文化生态保护区<span>(厦门市)</span></p>
           <p>Minnan Cultural Ecological Protection Area</p>

src/components/parts/ImageTitleBlock.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="ImageTitleBlock" :style="{ backgroundImage: `url('${image}')` }">
+    <div class="desc">
+      <h5>{{ title }}</h5>
+      <p>{{ desc }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({	
+  title: {
+    type: String,
+    default: '' 
+  },
+  desc: {
+    type: String,
+    default: '' ,
+  },
+  image: {
+    type: String,
+    default: '' 
+  },
+})
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
+.ImageTitleBlock  {
+  position: relative;
+  padding: 24px;
+  background-color: $box-color;
+  background-size: cover;
+  background-position: center;
+  width: 400px;
+  height: 270px;
+  margin-right: 24px;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    height: 120px;
+    background: linear-gradient(
+      180deg,
+      rgba(#000, 0) 0%,
+      rgba(#000, 0.7) 100%
+    )
+  }
+
+  .desc {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    color: #fff;
+
+    h5 {
+      font-family: SourceHanSerifCNBold;
+      font-size: 1.1rem;
+      margin-bottom: 5px;
+    }
+    p {
+      font-size: 0.8rem;
+      margin: 0;
+    }
+  }
+}
+</style>

src/components/parts/LeftRightBox.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="main-box main-left-right-box row">
+    <div class="col col-12 col-lg-6 col-md-6">
+      <img v-if="left" :src="image" alt="image" />
+      <TitleDescBlock 
+        v-else 
+        :title="title"
+        :desc="desc" 
+        :descLines="descLines"
+        more
+      />
+    </div>
+    <div class="col col-12 col-lg-6 col-md-6">
+      <TitleDescBlock 
+        v-if="left"
+        :title="title"
+        :desc="desc"
+        :descLines="descLines"
+        more
+      />
+      <img v-else :src="image" alt="image" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TitleDescBlock from './TitleDescBlock.vue';
+
+defineProps({	
+  title : String,
+  desc: String,
+  image: String,
+  descLines: Number,
+  left: Boolean,	
+})
+</script>
+
+<style lang="scss">
+.main-left-right-box {
+  .col {
+    position: relative;
+    padding: 0!important;
+  }
+  img {
+    max-width: 100%;
+  }
+  .TitleDescBlock {
+    padding: 25px;
+  }
+}
+</style>

src/components/parts/ThreeImageList.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="ThreeImageList d-flex flex-row flex-wrap th">
+    <ImageTitleBlock 
+      v-for="(item, index) in list"
+      :key="index"
+      :image="item.image"
+      :title="item.title"
+      :desc="item.desc"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import ImageTitleBlock from './ImageTitleBlock.vue';
+
+defineProps({	
+  list : {
+    type: Object as PropType<{title: string, image: string, desc: string}[]>,
+    default: () => [],
+  }	
+})
+</script>
+
+<style lang="scss">
+.ThreeImageList {
+  position: relative;
+  gap: 30px;
+
+  .ImageTitleBlock {
+    width: calc(33.33% - 20px);
+    margin-right: 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .ThreeImageList {
+    .ImageTitleBlock {
+      width: calc(50% - 15px);
+    }
+  }
+}
+@media (max-width: 600px) {
+  .ThreeImageList {
+    .ImageTitleBlock {
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/parts/TitleDescBlock.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="TitleDescBlock">
+    <h3>{{ title }}</h3>
+    <span v-if="date" class="time">{{ date }}</span>
+    <p>{{ desc }}</p>
+
+    <div v-if="more" class="more">
+      更多
+      <img src="@/assets/images/IconArrowRight.png" alt="更多" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({	
+  title : String,
+  desc: String,
+  descLines: {
+    type: Number,
+    default: 3,
+  },
+  more: Boolean,
+  date: String,
+})
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/colors.scss' as *;
+
+.TitleDescBlock {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h3 {
+    color: $text-content-color;
+    font-size: 1.2rem;
+    margin: 0;
+    margin-bottom: 8px;
+  }
+
+  p,
+  .time {
+    color: $text-content-second-color;
+    font-size: 0.85rem;
+  }
+
+  .time {
+    margin-bottom: 16px;
+  }
+  p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .more {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    color: $text-content-second-color;
+    font-size: 0.85rem;
+    margin-top: 25px;
+    cursor: pointer;
+
+    &:hover {
+      color: $primary-color;
+    }
+
+    img {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+}
+</style>

src/router/index.ts

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

src/views/HomeView.vue

@@ -32,12 +32,11 @@
 
         <Carousel ref="carousel2Ref" v-bind="carousel2Config">
           <Slide v-for="(item, index) in newsData" :key="index">
-            <div class="main-news-box" :style="{ backgroundImage: `url('${item.image}')` }">
-              <div class="desc">
-                <h5>{{ item.title }}</h5>
-                <p>{{ item.type }}</p>
-              </div>
-            </div>
+            <ImageTitleBlock 
+              :image="item.image"
+              :title="item.title"
+              :desc="item.type"
+            />
           </Slide>
         </Carousel>
 
@@ -97,6 +96,7 @@
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { onMounted, ref } from 'vue';
 import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
+import ImageTitleBlock from '@/components/parts/ImageTitleBlock.vue';
 
 const carouselConfig = {
   itemsToShow: 1,

src/views/IntrodView copy 2.vue

@@ -0,0 +1,50 @@
+<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 copy 3.vue

@@ -0,0 +1,50 @@
+<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 copy 4.vue

@@ -0,0 +1,50 @@
+<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 copy.vue

@@ -0,0 +1,50 @@
+<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/NewsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 首页 -->
+  <!-- 资讯动态页 -->
   <div class="main-background">
     <!-- 轮播 -->
     <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
@@ -56,11 +56,11 @@
           class="item"
         >
           <img :src="item.image" alt="新闻图片" />
-          <div>
-            <h3>{{ item.title }}</h3>
-            <span class="time">{{ item.date }}</span>
-            <p>{{ item.desc }}</p>
-          </div>
+          <TitleDescBlock
+            :title="item.title"
+            :desc="item.desc"
+            :date="item.date"
+          />
         </div>
         <!-- 分页 -->
         <Pagination2
@@ -82,6 +82,7 @@ import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
 import Dropdown from '@/components/controls/Dropdown.vue';
 import SimpleInput from '@/components/controls/SimpleInput.vue';
 import Pagination2 from '@/components/controls/Pagination.vue';
+import TitleDescBlock from '@/components/parts/TitleDescBlock.vue';
 
 const carouselConfig = {
   itemsToShow: 1,
@@ -192,37 +193,7 @@ const options = [
       margin-right: 25px;
     }
 
-    > div {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    h3 {
-      color: #654A38;
-      font-size: 1.2rem;
-      margin: 0;
-      margin-bottom: 8px;
-    }
-
-    p,
-    .time {
-      color: rgba(101, 74, 56, 0.6);
-      font-size: 0.85rem;
-    }
-
-    .time {
-      margin-bottom: 16px;
-    }
-    p {
-       display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+   
   }
 }