feat: --

package.json

@@ -12,6 +12,7 @@
     "amfe-flexible": "^2.2.1",
     "element-plus": "^2.9.0",
     "pinia": "^2.2.6",
+    "swiper": "^11.1.15",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       pinia:
         specifier: ^2.2.6
         version: 2.3.0(vue@3.5.13)
+      swiper:
+        specifier: ^11.1.15
+        version: 11.1.15
       vue:
         specifier: ^3.5.13
         version: 3.5.13
@@ -1162,6 +1165,10 @@ packages:
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
+  swiper@11.1.15:
+    resolution: {integrity: sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==}
+    engines: {node: '>= 4.7.0'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2388,6 +2395,8 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
+  swiper@11.1.15: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0

src/views/Chapter1/index.scss

@@ -123,6 +123,10 @@
     }
     &__content {
       letter-spacing: utils.vw-calc(2);
+
+      &.content2 {
+        margin-bottom: utils.vw-calc(28);
+      }
     }
   }
 }
@@ -228,6 +232,10 @@
       }
       &__content {
         letter-spacing: utils.vw-calc(2);
+
+        &.content2 {
+          margin-bottom: utils.vw-calc(40);
+        }
       }
     }
   }

src/views/Chapter1/index.vue

@@ -11,10 +11,14 @@
         <h2>{{ detail?.label }}</h2>
 
         <div class="chapter1-card-inner">
+          <div
+            v-if="detail?.preface"
+            v-html="detail?.preface"
+            class="chapter1-card__content content2"
+          />
+
           <div v-if="detail?.imgs" class="chapter1-card__img">
-            <p>
-              {{ detail?.imgs[0].description }}
-            </p>
+            <p v-html="detail?.imgs[0].description" />
             <ElImage
               :src="detail?.imgs[0].url"
               preview-teleported

src/views/Chapter3/index.scss

@@ -1,6 +1,8 @@
 @use "@/assets/utils.scss";
 
 .chapter3 {
+  --swiper-theme-color: white;
+  --swiper-pagination-bullet-inactive-color: white;
   position: relative;
   overflow: hidden;
 
@@ -64,12 +66,13 @@
     }
     &-wrap {
       position: absolute;
-      top: utils.vw-calc(73);
+      top: utils.vw-calc(1347);
       left: utils.vw-calc(258);
       width: utils.vw-calc(684);
       height: utils.vw-calc(684);
       border-radius: 50%;
       overflow: hidden;
+      z-index: 9;
 
       ::v-deep(.el-carousel__container) {
         height: 100%;
@@ -149,8 +152,8 @@
       }
       &-wrap {
         position: absolute;
-        top: utils.vw-calc(162);
-        left: utils.vw-calc(80);
+        top: utils.vw-calc(560);
+        left: utils.vw-calc(178);
         width: utils.vw-calc(425);
         height: utils.vw-calc(425);
       }

src/views/Chapter3/index.vue

@@ -7,21 +7,25 @@
         src="@/views/Index/components/Chapter3/images/title3-min.png"
       />
 
+      <Swiper
+        class="chapter3-card-wrap"
+        :pagination="{ clickable: true }"
+        :modules="[Pagination]"
+      >
+        <SwiperSlide v-for="(img, index) in detail?.imgs" :key="img">
+          <ElImage
+            :src="img"
+            :autoplay="false"
+            :initial-index="index"
+            preview-teleported
+            :preview-src-list="detail?.imgs"
+          />
+        </SwiperSlide>
+      </Swiper>
+
       <div class="chapter3-card">
         <h2>{{ detail?.name.split(" ")[0] }}</h2>
 
-        <ElCarousel class="chapter3-card-wrap">
-          <ElCarouselItem v-for="(img, index) in detail?.imgs" :key="img">
-            <ElImage
-              :src="img"
-              :autoplay="false"
-              :initial-index="index"
-              preview-teleported
-              :preview-src-list="detail?.imgs"
-            />
-          </ElCarouselItem>
-        </ElCarousel>
-
         <div class="chapter3-card-inner">
           <p v-if="title">
             {{ title[0] }} <i>{{ title[1] }}</i>
@@ -50,12 +54,16 @@
 </template>
 
 <script setup>
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Pagination } from "swiper/modules";
 import { ref, computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import data from "@/assets/data";
 import { useMobile } from "@/utils";
 import Bg from "./images/bg-min.jpg";
 import MobileBg from "./images/m-bg-min.jpg";
+import "swiper/css";
+import "swiper/css/pagination";
 
 const { isMobile } = useMobile();
 const route = useRoute();

src/views/Index/components/Chapter3/index.scss

@@ -77,6 +77,7 @@
       font-size: utils.vw-calc(36);
       line-height: utils.vw-calc(61);
       opacity: 0;
+      text-indent: 2em;
       transition: opacity linear 0.2s;
       background: rgba($color: #000000, $alpha: 0.6);
       z-index: 1;

src/views/Index/index.vue

@@ -9,7 +9,7 @@
 
     <div class="index-footer">
       <span class="index__tips"
-        >植物图片来自江苏省泗洪洪泽湖湿地国家级自然保护区管理处</span
+        >动植物图片来自江苏省泗洪洪泽湖湿地国家级自然保护区管理处</span
       >
       <img class="index__logo" src="@/assets/images/logo2-min.png" />
     </div>