📦 理论研究

src/components/parts/ImageTitleBlock.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="ImageTitleBlock" :style="{ backgroundImage: `url('${image}')` }">
+  <div 
+    :class="[
+      'ImageTitleBlock',
+      title ? 'has-title' : '',
+    ]" 
+    :style="{ backgroundImage: `url('${image}')` }"
+  >
     <div class="desc">
       <h5>{{ title }}</h5>
       <p>{{ desc }}</p>
@@ -30,26 +36,27 @@ defineProps({
 .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%
-    )
+  &.has-title {
+    &::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 {

src/router/index.ts

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

src/views/IntrodView copy 2.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/ResearchView.vue

@@ -0,0 +1,85 @@
+<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/research/Banner.jpg" />
+      </Slide>
+      <template #addons>
+        <Navigation />
+        <Pagination />
+      </template>
+    </Carousel>
+
+    <!-- 理论研究 -->
+    <section class="main-section main-background">
+      <div class="content">
+        <div class="title">
+          <h2>理论研究</h2>
+        </div>
+        <ThreeImageList :list="list" />
+      </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/research/Image1.jpg';
+import Image2 from '@/assets/images/research/Image2.jpg';
+import Image3 from '@/assets/images/research/Image3.jpg';
+import Image4 from '@/assets/images/research/Image4.jpg';
+import Image5 from '@/assets/images/research/Image5.jpg';
+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: '',
+  }
+]
+</script>
+
+<style lang="scss">
+
+
+@media (max-width: 425px) {
+  
+}
+</style>
+