📦 首页栏目推荐9个，增加保护区大事记栏目

src/assets/scss/main.scss

@@ -317,6 +317,10 @@ $small-banner-height: 445px;
       padding-top: 20px;
       padding-bottom: 20px;
     }
+
+    .content .title.left-right {
+      flex-direction: column;
+    }
   }
 }
 @media (max-width: 500px) {

src/components/parts/ImageTitleBlock.vue

@@ -5,7 +5,7 @@
       title ? 'has-title' : '',
       fit? 'fit' : ''
     ]" 
-    :style="{ backgroundImage: `url('${image}')` }"
+    :style="{ backgroundImage: `url('${image || ImageFailed}')` }"
     @click="$emit('click')"
   >
     <div class="desc">
@@ -16,6 +16,7 @@
 </template>
 
 <script setup lang="ts">
+import ImageFailed from '@/assets/images/ImageFailed.png';
 defineProps({	
   title: {
     type: String,

src/views/HomeView.vue

@@ -31,25 +31,17 @@
         </div>
 
         <SimplePageContentLoader :loader="recommend2Data">
-          <Carousel ref="carousel2Ref" v-bind="carousel2Config">
-            <Slide 
+          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
+            <ImageTitleBlock 
               v-for="(item, index) in recommend2Data.content.value"
               :key="index"
+              :image="item.image"
+              :title="item.title"
+              :desc="item.desc"
               @click="router.push({ name: 'news-detail', query: { id: item.id } })"
-            >
-              <ImageTitleBlock 
-                :image="item.image"
-                :title="item.title"
-                :desc="item.desc"
-              />
-            </Slide>
-          </Carousel>
+            />
+          </div>
         </SimplePageContentLoader>
-
-        <div class="simple-carousel2-left-right">
-          <div @click="carousel2Ref?.prev()">←</div>
-          <div @click="carousel2Ref?.next()">→</div>
-        </div>
       </div>
     </section>
 
@@ -61,25 +53,17 @@
         </div>
 
         <SimplePageContentLoader :loader="recommend1Data">
-          <Carousel ref="carousel5Ref" v-bind="carousel2Config">
-            <Slide 
+          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
+            <ImageTitleBlock 
               v-for="(item, index) in recommend1Data.content.value"
               :key="index"
+              :image="item.image"
+              :title="item.title"
+              :desc="item.desc"
               @click="router.push({ name: 'artifact-detail', query: { id: item.id } })"
-            >
-              <ImageTitleBlock 
-                :image="item.image"
-                :title="item.title"
-                :desc="item.desc"
-              />
-            </Slide>
-          </Carousel>
+            />
+          </div>
         </SimplePageContentLoader>
-
-        <div class="simple-carousel2-left-right">
-          <div @click="carousel5Ref?.prev()">←</div>
-          <div @click="carousel5Ref?.next()">→</div>
-        </div>
       </div>
     </section>
 
@@ -125,25 +109,17 @@
         </div>
 
         <SimplePageContentLoader :loader="newsData">
-          <Carousel ref="carousel2Ref" v-bind="carousel2Config">
-            <Slide 
+          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
+            <ImageTitleBlock
               v-for="(item, index) in newsData.content.value"
               :key="index"
-               @click="router.push({ name: 'news-detail', query: { id: item.id } })"
-            >
-              <ImageTitleBlock 
-                :image="item.image"
-                :title="item.title"
-                :desc="item.typeText"
-              />
-            </Slide>
-          </Carousel>
+              :image="item.image"
+              :title="item.title"
+              :desc="item.typeText"
+              @click="router.push({ name: 'news-detail', query: { id: item.id } })"
+            />
+          </div>
         </SimplePageContentLoader>
-
-        <div class="simple-carousel2-left-right">
-          <div @click="carousel2Ref?.prev()">←</div>
-          <div @click="carousel2Ref?.next()">→</div>
-        </div>
       </div>
     </section>
 
@@ -175,6 +151,37 @@
       </div>
     </section>
 
+    <!-- 保护区大事记 -->
+    <section class="main-section main-background main-background-type2">
+      <div class="content">
+        <div class="title">
+          <h2>保护区大事记</h2>
+        </div>
+
+        <SimplePageContentLoader :loader="recordData">
+          <div class="main-time-line">
+            <ScrollRect scroll="horizontal" containerClass="time-line-scroll">
+              <div 
+                v-for="(item, index) in recordData.content.value"
+                :key="index"
+                class="item"
+                :class="index % 2 === 0 ? 'top' : 'bottom'"
+                @click="router.push({ name: 'news-detail', query: { id: item.id } })"
+              >
+                <div class="time">
+                  {{ DataDateUtils.formatDate(item.publishAt, 'YYYY-MM') }}
+                </div>
+                <div class="box">
+                  <div class="title">{{ item.title }}</div>
+                  <div class="content">{{ item.desc }}</div>
+                </div>
+              </div>
+            </ScrollRect>
+          </div>
+        </SimplePageContentLoader>
+      </div>
+    </section>
+
     <!-- 介绍 -->
     <section class="main-introd main-section">
       <div class="main-introd-bg">
@@ -214,6 +221,8 @@ import ActivityContent from '@/api/inheritor/ActivityContent';
 import ProductContent from '@/api/fusion/ProductContent';
 import ProductsContent from '@/api/inheritor/ProductsContent';
 import ProjectsContent from '@/api/inheritor/ProjectsContent';
+import { DataDateUtils } from '@imengyu/js-request-transform';
+import { ScrollRect } from '@imengyu/vue-scroll-rect';
 
 const router = useRouter();
 
@@ -227,7 +236,6 @@ const carousel2Config = {
   mouseWheel: true,
   wrapAround: true
 }
-const carousel2Ref = ref<any>(null);
 const carousel3Config = ref({
   itemsToShow: 4,
   mouseWheel: true,
@@ -235,7 +243,6 @@ const carousel3Config = ref({
   autoplay: 3000,
 });
 const carousel3Ref = ref<any>(null);
-const carousel5Ref = ref<any>(null);
 const carousel6Ref = ref<any>(null);
 
 onMounted(() => {
@@ -257,10 +264,10 @@ const overviewData = useSimpleDataLoader(async () => {
   }))).list[0]?.overview || NO_CONTENT_STRING
 });
 const recommend1Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
-  return (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 8)).list;
+  return (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 9)).list;
 });
 const recommend2Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
-  return (await ProjectsContent.getContentList(new GetContentListParams(), 1, 8)).list
+  return (await ProjectsContent.getContentList(new GetContentListParams(), 1, 9)).list
 });
 const recommend3Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
   return (await CommonContent.getContentList(new GetContentListParams()
@@ -270,7 +277,7 @@ const recommend3Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
 });
 const newsData = useSimpleDataLoader<GetContentListItem[]>(async () => {
   return (await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
-  }), 1, 6)).list
+  }), 1, 9)).list
 });
 const statsData = useSimpleDataLoader(async () => {
   const data = (await IndexContent.getStats());
@@ -340,10 +347,18 @@ const statsData = useSimpleDataLoader(async () => {
   ]
 
 });
+const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
+  return (await CommonContent.getContentList(new GetContentListParams()
+   .setModelId(18)
+   .setMainBodyColumnId(316)
+  , 1, 9)).list
+});
 </script>
 
 <style lang="scss">
 @use "sass:list";
+@use "sass:math";
+@use '@/assets/scss/colors.scss' as *;
 
 .main-card-box {
   position: relative;
@@ -445,8 +460,124 @@ const statsData = useSimpleDataLoader(async () => {
   }
 }
 
+.main-grid9 {
+  .ImageTitleBlock {
+    flex-basis: 33%;
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+}
+
+.main-time-line {
+
+  $height: 300px;
+
+  height: $height;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: $primary-color;
+  }
+  .time-line-scroll {
+    position: relative;
+    margin-top: 32px;
+    margin-bottom: 32px; 
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    height: $height;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    min-width: 300px;
+    height: $height; 
+    flex-shrink: 0;
+
+    &.top {
+      transform: translateY(math.div($height, -2));
+  
+      .time {
+        &::before {
+          content: '▲';
+        }
+      }
+    }
+    &.bottom {
+      transform: translateY(math.div($height, 2) - 50px);
+      flex-direction: column;
+
+      .time {
+        margin-bottom: 30px;
 
+        &::before {
+          content: '▼';
+        }
+      }
+    }
+
+    .time {
+      position: relative;
+      margin: 15px 0;
+      color: $primary-color;
+
+      &::before {
+        position: absolute;
+        font-size: 2rem;
+        top: calc(50% - 1rem + 15px);
+        left: calc(50% - 1rem);
+      }
+    }
+    .box {
+      background-color: $box-color;
+      padding: 10px;
+      border-radius: 5px;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      .title {
+        font-size: 1.1rem;
+        color: $text-content-color;
+        margin-bottom: 8px;
+      }
+      .content {
+        font-size: 0.8rem;
+        color: $text-content-color;
+      }
+    }
+  }
+}
+
+@media (max-width: 750px) {
+  .main-grid9 {
+    .ImageTitleBlock {
+      flex-basis: calc(50% - 10px);
+    }
+  }
+}
 @media (max-width: 425px) {
+  .main-grid9 {
+    .ImageTitleBlock {
+      flex-basis: 100%;
+    }
+  }
+  .main-time-line {
+    .item {
+      min-width: 200px;
+    }
+  }
   .main-card-box {
     width: auto;
     transform: translateX(20px);