feat: --

package.json

@@ -14,7 +14,8 @@
     "pinia": "^2.2.6",
     "swiper": "^11.1.15",
     "vue": "^3.5.13",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue3-lazy": "1.0.0-alpha.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       vue-router:
         specifier: ^4.4.5
         version: 4.5.0(vue@3.5.13)
+      vue3-lazy:
+        specifier: 1.0.0-alpha.1
+        version: 1.0.0-alpha.1(vue@3.5.13)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
@@ -1308,6 +1311,12 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-lazy@1.0.0-alpha.1:
+    resolution: {integrity: sha512-dpjpKK4DC5q+wZVtS/VY3X6pYBJHxRmYanr20s39RB6o6fvbneQ/DNuz37bipYfEdrEvbSZ95Y2SCexuznQNrQ==}
+    engines: {node: '>=6.0.0'}
+    peerDependencies:
+      vue: ^3.0.0-alpha.9
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -2542,6 +2551,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13
 
+  vue3-lazy@1.0.0-alpha.1(vue@3.5.13):
+    dependencies:
+      vue: 3.5.13
+
   vue@3.5.13:
     dependencies:
       '@vue/compiler-dom': 3.5.13

src/assets/main.css

@@ -74,7 +74,7 @@ iframe {
 }
 @font-face {
   font-family: "timesi";
-  src: url("./fonts/timesi.ttf");
+  src: url("./fonts/times.ttf");
 }
 
 .timesi {

src/main.js

@@ -3,6 +3,7 @@ import "./assets/main.css";
 // import 'amfe-flexible'
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import VueLazyload from "vue3-lazy";
 
 import App from "./App.vue";
 import router from "./router";
@@ -11,5 +12,9 @@ const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(VueLazyload, {
+  loading: "",
+  error: "",
+});
 
 app.mount("#app");

src/views/Chapter1/index.vue

@@ -42,7 +42,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
     <img class="chapter1__bg rg" src="./images/bg2-min.png" />
     <img class="chapter1__bg lf" src="./images/bg3-min.png" />
   </div>

src/views/Chapter2/index.vue

@@ -22,7 +22,8 @@
               {{ title[0] }} <i>{{ title[1] }}</i>
             </p>
             <p>{{ detail?.tips }}</p>
-            <p v-html="typeStr" />
+            <p>{{ detail?.type }}</p>
+            <!-- <p v-html="typeStr" /> -->
             <div v-html="detail?.content" />
           </div>
         </div>
@@ -40,7 +41,7 @@
       @click="toggleDetail(1)"
     />
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
     <img class="chapter2__bg1" src="./images/img1-min.png" />
     <img class="chapter2__bg2" src="./images/img2-min.png" />
   </div>

src/views/Chapter3/index.vue

@@ -48,7 +48,7 @@
       @click="toggleDetail(1)"
     />
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
     <img class="chapter3__bg1" src="./images/img1-min.png" />
   </div>
 </template>

src/views/Chapter4/index.vue

@@ -38,7 +38,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 

src/views/Home/index.vue

@@ -20,8 +20,8 @@
         </p>
       </div>
 
-      <div class="home__btn" @click="$router.push({ name: 'index' })" />
-      <!-- <ul class="home-nav">
+      <!-- <div class="home__btn" @click="$router.push({ name: 'index' })" /> -->
+      <ul class="home-nav">
         <li
           class="home-nav__item"
           @click="$router.push({ name: 'index', query: { index: '1' } })"
@@ -50,7 +50,7 @@
           <img draggable="false" src="@/assets/images/h4-min.png" />
           <span>涟漪之下</span>
         </li>
-      </ul> -->
+      </ul>
     </div>
   </div>
 </template>

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

@@ -44,9 +44,9 @@
       align-items: center;
       padding: utils.vw-calc(134) utils.vw-calc(185) utils.vw-calc(107);
       gap: utils.vw-calc(82);
-      font-size: utils.vw-calc(36);
       text-indent: 2em;
-      line-height: utils.vw-calc(46);
+      line-height: utils.vw-calc(36);
+      font-size: utils.vw-calc(24);
 
       img {
         width: utils.vw-calc(701);
@@ -96,8 +96,8 @@
       &-info {
         padding: utils.vw-calc(54) utils.vw-calc(50) utils.vw-calc(40);
         gap: utils.vw-calc(10);
-        font-size: utils.vw-calc(22);
-        line-height: utils.vw-calc(30);
+        font-size: utils.vw-calc(18);
+        line-height: utils.vw-calc(36);
 
         img {
           width: utils.vw-calc(344);

src/views/Index/components/Chapter1/index.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="chapter1">
     <div class="chapter1-wrap">
-      <img
-        class="chapter1__title"
-        draggable="false"
-        src="@/assets/images/chapter1-min.png"
-      />
+      <img class="chapter1__title" draggable="false" v-lazy="TitleImg" />
 
       <div class="chapter1-card">
         <div class="chapter1-card-info">
-          <img draggable="false" src="@/assets/images/chapter-img-min.png" />
+          <img draggable="false" v-lazy="Img1" />
           <p v-html="data.chapter1.description" />
         </div>
 
@@ -26,7 +22,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
@@ -35,6 +31,8 @@ import data from "@/assets/data";
 import { useMobile } from "@/utils";
 import Bg from "@/assets/images/bg/BG_02-min.jpg";
 import MobileBg from "@/assets/images/bg/M_BG_02-min.jpg";
+import TitleImg from "@/assets/images/chapter1-min.png";
+import Img1 from "@/assets/images/chapter-img-min.png";
 
 const { isMobile } = useMobile();
 </script>

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

@@ -124,14 +124,15 @@
       background-image: url("./images/m-chapter2-card-bg-min.png");
 
       &__content {
-        top: utils.vw-calc(648);
-        left: utils.vw-calc(30);
-        width: utils.vw-calc(404);
+        top: utils.vw-calc(170);
+        left: 50%;
+        width: utils.vw-calc(360);
         line-height: utils.vw-calc(26);
+        transform: translateX(-50%);
       }
       > img {
-        top: utils.vw-calc(181);
-        right: utils.vw-calc(30);
+        top: utils.vw-calc(648);
+        left: utils.vw-calc(30);
         width: utils.vw-calc(402);
         height: utils.vw-calc(339);
       }

src/views/Index/components/Chapter2/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="chapter2">
     <div class="chapter2-wrap">
-      <img
-        class="chapter2__title"
-        draggable="false"
-        src="./images/title2-min.png"
-      />
+      <img class="chapter2__title" draggable="false" v-lazy="TitleImg" />
 
       <div class="chapter2-card">
         <div
@@ -31,12 +27,12 @@
           <span>{{ item.name }}</span>
           <div class="chapter2-item__btn" />
 
-          <img :src="item.bg" />
+          <img v-lazy="item.bg" />
         </div>
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
@@ -50,6 +46,7 @@ import Img2 from "./images/chapter2-img4-min.png";
 import Img3 from "./images/chapter2-img5-min.png";
 import Img4 from "./images/chapter2-img6-min.png";
 import Img5 from "./images/chapter2-img7-min.png";
+import TitleImg from "./images/title2-min.png";
 
 const { isMobile } = useMobile();
 

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

@@ -44,13 +44,11 @@
     border-radius: utils.vw-calc(56);
     overflow: hidden;
     cursor: pointer;
-    background: url("./images/1-min.png") no-repeat center / contain;
 
-    &:nth-child(2) {
-      background-image: url("./images/2-min.png");
-    }
-    &:nth-child(3) {
-      background-image: url("./images/3-min.png");
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
     &__footer {
       position: absolute;

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

@@ -1,11 +1,7 @@
 <template>
   <div class="chapter3">
     <div class="chapter3-wrap">
-      <img
-        class="chapter3__title"
-        draggable="false"
-        src="./images/title3-min.png"
-      />
+      <img class="chapter3__title" draggable="false" v-lazy="TitleImg" />
 
       <ul>
         <li
@@ -22,6 +18,8 @@
             }
           "
         >
+          <img v-lazy="IMGS[index]" />
+
           <div class="chapter3-item__footer" @click="goToDetail(index)">
             <span>{{ item.name }}</span>
             <span class="more">查看更多</span>
@@ -38,7 +36,7 @@
       </ul>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
@@ -49,10 +47,15 @@ import { useMobile } from "@/utils";
 import Bg from "@/assets/images/bg/BG_04-min.jpg";
 import MobileBg from "@/assets/images/bg/M_BG_04-min.jpg";
 import { useRouter } from "vue-router";
+import TitleImg from "./images/title3-min.png";
+import Img1 from "./images/1-min.png";
+import Img2 from "./images/2-min.png";
+import Img3 from "./images/3-min.png";
 
 const { isMobile } = useMobile();
 const router = useRouter();
 const showDescriptionIndex = ref(-1);
+const IMGS = [Img1, Img2, Img3];
 
 const goToDetail = (index) => {
   router.push({

src/views/Index/components/Chapter4/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chapter4">
     <div class="chapter4-wrap">
-      <img class="chapter4__title" draggable="false" src="./images/title.png" />
+      <img class="chapter4__title" draggable="false" v-lazy="TitleImg" />
 
       <div
         class="chapter4-card"
@@ -32,7 +32,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
@@ -44,6 +44,7 @@ import Bg from "@/assets/images/bg/BG_05-min.jpg";
 import MobileBg from "@/assets/images/bg/M_BG_05-min.jpg";
 import Img1 from "./images/img.png";
 import Img2 from "./images/img2.png";
+import TitleImg from "./images/title.png";
 
 const { isMobile } = useMobile();
 const LIST = [

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

@@ -33,12 +33,6 @@
       line-height: utils.vw-calc(36);
       font-size: utils.vw-calc(24);
       text-indent: 2em;
-
-      ::v-deep(p) {
-        &:not(:first-child) {
-          margin-top: utils.vw-calc(10);
-        }
-      }
     }
   }
 }
@@ -61,14 +55,8 @@
       }
       &__inner {
         margin-top: utils.vw-calc(10);
-        line-height: utils.vw-calc(18);
+        line-height: utils.vw-calc(36);
         font-size: utils.vw-calc(18);
-
-        ::v-deep(p) {
-          &:not(:first-child) {
-            margin-top: utils.vw-calc(5);
-          }
-        }
       }
     }
   }

src/views/Index/components/Epilogue/index.vue

@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 

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

@@ -60,13 +60,6 @@
     line-height: utils.vw-calc(36);
     text-indent: 2em;
     color: #0c0c0c;
-
-    ::v-deep(p:not(:first-child)) {
-      margin-top: utils.vw-calc(16);
-    }
-    > div:not(:first-child) {
-      margin-top: utils.vw-calc(16);
-    }
   }
 }
 
@@ -111,13 +104,6 @@
       width: unset;
       font-size: utils.vw-calc(18);
       line-height: utils.vw-calc(36);
-
-      ::v-deep(p:not(:first-child)) {
-        margin-top: utils.vw-calc(10);
-      }
-      > div:not(:first-child) {
-        margin-top: utils.vw-calc(10);
-      }
     }
   }
 }

src/views/Index/components/Preface/index.vue

@@ -17,11 +17,7 @@
         </p>
       </div>
 
-      <img
-        class="preface__title"
-        draggable="false"
-        src="@/assets/images/title-min.png"
-      />
+      <img class="preface__title" draggable="false" v-lazy="TitleImg" />
 
       <div class="preface-content">
         <template v-for="item in data.preface.content">
@@ -30,7 +26,7 @@
       </div>
     </div>
 
-    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter__bg" v-lazy="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
@@ -39,6 +35,7 @@ import data from "@/assets/data";
 import { useMobile } from "@/utils";
 import Bg from "@/assets/images/bg/BG_01-min.jpg";
 import MobileBg from "@/assets/images/bg/M_BG_01-min.jpg";
+import TitleImg from "@/assets/images/title-min.png";
 
 const { isMobile } = useMobile();
 </script>

src/views/Index/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="index">
-    <Preface />
-    <Chapter1 />
-    <Chapter2 />
-    <Chapter3 />
-    <Chapter4 />
-    <Epilogue />
+    <Preface :style="{ height: heightList[0] + 'px' }" />
+    <Chapter1 :style="{ height: heightList[1] + 'px' }" />
+    <Chapter2 :style="{ height: heightList[2] + 'px' }" />
+    <Chapter3 :style="{ height: heightList[3] + 'px' }" />
+    <Chapter4 :style="{ height: heightList[4] + 'px' }" />
+    <Epilogue :style="{ height: heightList[5] + 'px' }" />
 
     <div class="index-footer">
       <span class="index__tips"
-        >动植物图片来自江苏省泗洪洪泽湖湿地国家级自然保护区管理处</span
+        >动植物图片由江苏省泗洪洪泽湖湿地国家级自然保护区管理处提供</span
       >
       <img class="index__logo" src="@/assets/images/logo2-min.png" />
     </div>
@@ -17,9 +17,9 @@
 </template>
 
 <script setup>
-// import { ref, onMounted, nextTick } from "vue";
-// import { useRoute } from "vue-router";
-// import { useMobile } from "@/utils";
+import { ref, onMounted, nextTick } from "vue";
+import { useRoute } from "vue-router";
+import { useMobile } from "@/utils";
 import Preface from "./components/Preface/index.vue";
 import Chapter1 from "./components/Chapter1/index.vue";
 import Chapter2 from "./components/Chapter2/index.vue";
@@ -27,42 +27,50 @@ import Chapter3 from "./components/Chapter3/index.vue";
 import Chapter4 from "./components/Chapter4/index.vue";
 import Epilogue from "./components/Epilogue/index.vue";
 
-// const route = useRoute();
-// const { isMobile } = useMobile();
+const route = useRoute();
+const { isMobile } = useMobile();
 
-// const BG_HEIGHT = [2743, 3082, 4937, 3417, 2218, 1409];
-// const MOBILE_BG_HEIGHT = [2118, 1467, 2550, 1868, 1303, 663];
-// const heightList = ref([]);
+const BG_HEIGHT = [2743, 3082, 4937, 3417, 2218, 1409];
+const MOBILE_BG_HEIGHT = [2118, 1467, 2550, 1868, 1303, 663];
+const heightList = ref([]);
 
-// onMounted(() => {
-//   const height = [];
+onMounted(() => {
+  const height = [];
 
-//   (isMobile.value ? MOBILE_BG_HEIGHT : BG_HEIGHT).forEach((h) =>
-//     height.push(
-//       (Math.round((h / (isMobile.value ? 750 : 1920)) * 1000) / 1000) *
-//         document.documentElement.clientWidth
-//     )
-//   );
+  (isMobile.value ? MOBILE_BG_HEIGHT : BG_HEIGHT).forEach((h) =>
+    height.push(
+      (Math.round((h / (isMobile.value ? 750 : 1920)) * 1000) / 1000) *
+        document.documentElement.clientWidth
+    )
+  );
 
-//   heightList.value = height;
+  heightList.value = height;
 
-//   if (route.query.index) {
-//     let top = 0;
-//     let i = Number(route.query.index);
+  if (route.query.index) {
+    let top = 0;
+    let i = Number(route.query.index);
 
-//     while (i > 0) {
-//       i--;
-//       top += height[i];
-//     }
+    if (i === 1) {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+      return;
+    }
+
+    while (i > 0) {
+      i--;
+      top += height[i];
+    }
 
-//     nextTick(() => {
-//       window.scrollTo({
-//         top,
-//         behavior: "smooth",
-//       });
-//     });
-//   }
-// });
+    nextTick(() => {
+      window.scrollTo({
+        top,
+        behavior: "smooth",
+      });
+    });
+  }
+});
 </script>
 
 <style lang="scss" scoped>