feat: --

src/router/index.js

@@ -13,6 +13,11 @@ const router = createRouter({
       name: "index",
       component: () => import("../views/Index/index.vue"),
     },
+    {
+      path: "/chapter1/:index",
+      name: "chapter1",
+      component: () => import("../views/Chapter1/index.vue"),
+    },
   ],
 });
 

src/utils.ts

@@ -0,0 +1,20 @@
+import { ref, onMounted } from "vue";
+
+export function useMobile() {
+  const isMobile = ref(false);
+
+  const checkIsMobile = () => {
+    isMobile.value = Boolean(
+      navigator.userAgent.match(
+        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+      )
+    );
+  };
+
+  onMounted(() => {
+    checkIsMobile();
+    window.addEventListener("resize", checkIsMobile);
+  });
+
+  return { isMobile };
+}

src/views/Chapter1/index.scss

@@ -0,0 +1,246 @@
+@use "@/assets/utils.scss";
+
+.chapter1 {
+  position: relative;
+
+  &-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+  &__title {
+    position: absolute;
+    top: utils.vw-calc(73);
+    left: utils.vw-calc(89);
+    width: utils.vw-calc(544);
+    height: utils.vw-calc(640);
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    top: utils.vw-calc(116);
+    right: utils.vw-calc(81);
+    width: utils.vw-calc(189);
+    height: utils.vw-calc(25);
+    background: url("@/assets/images/unit1-min.png") no-repeat center / contain;
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    top: utils.vw-calc(588);
+    right: utils.vw-calc(81);
+    width: utils.vw-calc(72);
+    height: utils.vw-calc(72);
+    background: url("@/assets/images/unit-icon-min.png") no-repeat center /
+      contain;
+  }
+  &__bg {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+
+    &.lf {
+      left: 0;
+      width: utils.vw-calc(685);
+      height: utils.vw-calc(776);
+    }
+    &.rg {
+      right: 0;
+      width: utils.vw-calc(780);
+      height: utils.vw-calc(419);
+      z-index: 3;
+    }
+  }
+  &-card {
+    position: absolute;
+    top: utils.vw-calc(1182);
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: utils.vw-calc(100);
+    width: utils.vw-calc(1631);
+    height: utils.vw-calc(886);
+    transform: translateX(-50%);
+    background: url("./images/card-min.png") no-repeat center / contain;
+
+    h2 {
+      flex-shrink: 0;
+      margin-top: utils.vw-calc(-13);
+      font-family: "SourceHanSerifSC-Bold";
+      width: utils.vw-calc(819);
+      height: utils.vw-calc(107);
+      text-align: center;
+      line-height: utils.vw-calc(107);
+      font-size: utils.vw-calc(48);
+      background: url("./images/title-min.png") no-repeat center / contain;
+    }
+    &-inner {
+      flex: 1;
+      height: 0;
+      margin-top: utils.vw-calc(10);
+      padding: 0 utils.vw-calc(60);
+      width: utils.vw-calc(847);
+      box-sizing: content-box;
+      overflow: auto;
+      font-size: utils.vw-calc(24);
+      line-height: utils.vw-calc(36);
+      text-indent: 2em;
+
+      &::-webkit-scrollbar {
+        width: utils.vw-calc(7);
+      }
+      &::-webkit-scrollbar-track {
+        background: #50a88f;
+        border-radius: utils.vw-calc(7);
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #aed696;
+        border-radius: utils.vw-calc(7);
+      }
+    }
+    &__img {
+      position: relative;
+      margin-bottom: utils.vw-calc(28);
+      text-align: center;
+      text-indent: 0;
+
+      img {
+        max-width: utils.vw-calc(660);
+      }
+      p {
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: utils.vw-calc(16);
+        writing-mode: vertical-rl;
+        max-height: utils.vw-calc(311);
+        text-align: left;
+      }
+    }
+    &__content {
+      letter-spacing: utils.vw-calc(2);
+    }
+  }
+}
+
+.toggle-btn {
+  position: absolute;
+  top: 50%;
+  width: utils.vw-calc(87);
+  height: utils.vw-calc(88);
+  transform: translateY(-50%);
+  cursor: pointer;
+
+  &.left {
+    left: utils.vw-calc(-100);
+  }
+  &.right {
+    right: utils.vw-calc(-100);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .chapter1 {
+    &__title {
+      top: utils.vw-calc(52);
+      left: utils.vw-calc(21);
+      width: utils.vw-calc(272);
+      height: utils.vw-calc(320);
+    }
+    &::after {
+      top: utils.vw-calc(21);
+      right: utils.vw-calc(20);
+      width: utils.vw-calc(114);
+      height: utils.vw-calc(15);
+    }
+    &::before {
+      top: utils.vw-calc(304);
+      right: utils.vw-calc(21);
+      width: utils.vw-calc(43);
+      height: utils.vw-calc(43);
+    }
+
+    &__bg {
+      &.lf {
+        width: utils.vw-calc(430);
+        height: utils.vw-calc(485);
+      }
+      &.rg {
+        width: utils.vw-calc(479);
+        height: utils.vw-calc(258);
+      }
+    }
+    &-card {
+      top: utils.vw-calc(498);
+      padding-bottom: utils.vw-calc(188);
+      width: utils.vw-calc(562);
+      height: utils.vw-calc(1037);
+      background: url("./images/m-card-min.png") no-repeat center / contain;
+
+      h2 {
+        margin-top: utils.vw-calc(-13);
+        width: utils.vw-calc(405);
+        height: utils.vw-calc(53);
+        font-size: utils.vw-calc(30);
+        line-height: utils.vw-calc(53);
+      }
+      &-inner {
+        margin-top: utils.vw-calc(68);
+        padding: 0 utils.vw-calc(20);
+        width: utils.vw-calc(372);
+        font-size: utils.vw-calc(18);
+        line-height: utils.vw-calc(30);
+
+        &::-webkit-scrollbar {
+          width: utils.vw-calc(7);
+        }
+        &::-webkit-scrollbar-track {
+          background: #50a88f;
+          border-radius: utils.vw-calc(7);
+        }
+        &::-webkit-scrollbar-thumb {
+          background: #aed696;
+          border-radius: utils.vw-calc(7);
+        }
+      }
+      &__img {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        margin-bottom: utils.vw-calc(40);
+
+        img {
+          max-width: 100%;
+        }
+        p {
+          position: relative;
+          writing-mode: initial;
+          font-size: utils.vw-calc(14);
+          width: utils.vw-calc(269);
+          max-height: unset;
+          text-align: center;
+          line-height: utils.vw-calc(20);
+        }
+      }
+      &__content {
+        letter-spacing: utils.vw-calc(2);
+      }
+    }
+  }
+
+  .toggle-btn {
+    width: utils.vw-calc(78);
+    height: utils.vw-calc(80);
+
+    &.left {
+      left: utils.vw-calc(-70);
+    }
+    &.right {
+      right: utils.vw-calc(-70);
+    }
+  }
+}

src/views/Chapter1/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="chapter1">
+    <div class="chapter1-wrap">
+      <img
+        class="chapter1__title"
+        draggable="false"
+        src="@/assets/images/chapter1-min.png"
+      />
+
+      <div class="chapter1-card">
+        <h2>{{ detail?.label }}</h2>
+
+        <div class="chapter1-card-inner">
+          <div v-if="detail?.imgs" class="chapter1-card__img">
+            <p>
+              {{ detail?.imgs[0].description }}
+            </p>
+            <img :src="detail?.imgs[0].url" />
+          </div>
+
+          <div v-html="detail?.content" class="chapter1-card__content" />
+        </div>
+
+        <img
+          class="toggle-btn left"
+          src="@/assets/images/left-min.png"
+          @click="toggleDetail(-1)"
+        />
+        <img
+          class="toggle-btn right"
+          src="@/assets/images/right-min.png"
+          @click="toggleDetail(1)"
+        />
+      </div>
+    </div>
+
+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
+    <img class="chapter1__bg rg" src="./images/bg2-min.png" />
+    <img class="chapter1__bg lf" src="./images/bg3-min.png" />
+  </div>
+</template>
+
+<script setup>
+import { ref, 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.png";
+
+const { isMobile } = useMobile();
+const route = useRoute();
+const router = useRouter();
+const idx = ref(0);
+const detail = ref(null);
+
+onMounted(() => {
+  idx.value = Number(route.params.index);
+  detail.value = data.chapter1.list[idx.value];
+});
+
+const toggleDetail = (step) => {
+  const length = data.chapter1.list.length - 1;
+
+  idx.value = Math.min(Math.max(idx.value + step, 0), length);
+  detail.value = data.chapter1.list[idx.value];
+  router.replace({ name: "chapter1", params: { index: idx.value } });
+};
+</script>
+
+<style lang="scss" scoped>
+@use "./index.scss";
+</style>

src/views/Home/index.vue

@@ -21,19 +21,31 @@
       </div>
 
       <ul class="home-nav">
-        <li class="home-nav__item">
+        <li
+          class="home-nav__item"
+          @click="$router.push({ name: 'index', query: { index: '1' } })"
+        >
           <img draggable="false" src="@/assets/images/h1-min.png" />
           <span>因运而生</span>
         </li>
-        <li class="home-nav__item">
+        <li
+          class="home-nav__item"
+          @click="$router.push({ name: 'index', query: { index: '2' } })"
+        >
           <img draggable="false" src="@/assets/images/h2-min.png" />
           <span>碧波飞羽</span>
         </li>
-        <li class="home-nav__item">
+        <li
+          class="home-nav__item"
+          @click="$router.push({ name: 'index', query: { index: '3' } })"
+        >
           <img draggable="false" src="@/assets/images/h3-min.png" />
           <span>水域绿茵</span>
         </li>
-        <li class="home-nav__item">
+        <li
+          class="home-nav__item"
+          @click="$router.push({ name: 'index', query: { index: '4' } })"
+        >
           <img draggable="false" src="@/assets/images/h4-min.png" />
           <span>涟漪之下</span>
         </li>

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

@@ -73,3 +73,49 @@
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .chapter1 {
+    &__title {
+      top: utils.vw-calc(60);
+      left: utils.vw-calc(21);
+      width: utils.vw-calc(348);
+      height: utils.vw-calc(363);
+    }
+    &::after {
+      top: utils.vw-calc(65);
+      right: utils.vw-calc(25);
+      width: utils.vw-calc(114);
+      height: utils.vw-calc(358);
+    }
+    &-card {
+      top: utils.vw-calc(528);
+      width: utils.vw-calc(649);
+      height: utils.vw-calc(836);
+
+      &-info {
+        padding: utils.vw-calc(129) utils.vw-calc(38) utils.vw-calc(115);
+        gap: utils.vw-calc(4);
+        font-size: utils.vw-calc(18);
+        line-height: utils.vw-calc(28);
+
+        img {
+          width: utils.vw-calc(194);
+          height: utils.vw-calc(194);
+        }
+      }
+      &-nav {
+        gap: utils.vw-calc(7);
+
+        &-item {
+          padding-top: utils.vw-calc(28);
+          width: utils.vw-calc(138);
+          height: utils.vw-calc(317);
+          line-height: utils.vw-calc(174);
+          font-size: utils.vw-calc(20);
+          letter-spacing: utils.vw-calc(1.5);
+        }
+      }
+    }
+  }
+}

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

@@ -14,28 +14,29 @@
         </div>
 
         <div class="chapter1-card-nav">
-          <p class="chapter1-card-nav-item">
-            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
-          </p>
-          <p class="chapter1-card-nav-item">
-            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
-          </p>
-          <p class="chapter1-card-nav-item">
-            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
-          </p>
-          <p class="chapter1-card-nav-item">
-            炀帝南下&nbsp;&nbsp;&nbsp;&nbsp;洪泽初名
+          <p
+            v-for="(item, index) in data.chapter1.list"
+            :key="item.label"
+            class="chapter1-card-nav-item"
+            @click="$router.push({ name: 'chapter1', params: { index } })"
+          >
+            {{ item.label }}
           </p>
         </div>
       </div>
     </div>
 
-    <img class="chapter__bg" src="@/assets/images/bg/BG_02-min.jpg" />
+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
 <script setup>
-import data from "@/data.json";
+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";
+
+const { isMobile } = useMobile();
 </script>
 
 <style lang="scss" scoped>

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

@@ -54,4 +54,105 @@
       height: utils.vw-calc(595);
     }
   }
+  &-list {
+    position: absolute;
+    top: utils.vw-calc(1092 + 1110 + 772);
+    left: 50%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: utils.vw-calc(197);
+    column-gap: utils.vw-calc(93);
+    padding: 0 utils.vw-calc(20);
+    width: 100%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+  }
+  &-item {
+    position: relative;
+    width: calc(33.3333% - utils.vw-calc(62));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+    }
+    span {
+      position: absolute;
+      top: utils.vw-calc(106);
+      left: 50%;
+      font-size: utils.vw-calc(30);
+      font-family: "SourceHanSerifSC-Bold";
+      transform: translateX(-50%);
+    }
+    &__btn {
+      position: absolute;
+      bottom: utils.vw-calc(-116);
+      left: 50%;
+      width: utils.vw-calc(229);
+      height: utils.vw-calc(234);
+      background: url("./images/chapter2-btn-min.png") no-repeat center /
+        contain;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .chapter2 {
+    font-size: utils.vw-calc(18);
+
+    &__title {
+      top: utils.vw-calc(50);
+      right: 0;
+      width: utils.vw-calc(353);
+      height: utils.vw-calc(368);
+    }
+    &::after {
+      top: utils.vw-calc(62);
+      left: utils.vw-calc(20);
+      width: utils.vw-calc(116);
+      height: utils.vw-calc(352);
+    }
+    &-card {
+      top: utils.vw-calc(445);
+      width: utils.vw-calc(463);
+      height: utils.vw-calc(1071);
+      transform: translateX(-50%);
+      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);
+        line-height: utils.vw-calc(26);
+      }
+      > img {
+        top: utils.vw-calc(181);
+        right: utils.vw-calc(30);
+        width: utils.vw-calc(402);
+        height: utils.vw-calc(339);
+      }
+    }
+    &-list {
+      top: utils.vw-calc(250+1071+445);
+      row-gap: utils.vw-calc(77);
+      column-gap: utils.vw-calc(27);
+      padding: 0 utils.vw-calc(20);
+    }
+    &-item {
+      width: calc(33.3333% - utils.vw-calc(18));
+
+      span {
+        display: none;
+      }
+      &__btn {
+        bottom: utils.vw-calc(-78);
+        width: utils.vw-calc(137);
+        height: utils.vw-calc(140);
+      }
+    }
+  }
 }

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

@@ -15,14 +15,61 @@
 
         <img src="./images/chapter2-img2-min.png" />
       </div>
+
+      <div class="chapter2-list">
+        <div v-for="item in CHAPTER2_LIST" :key="item.id" class="chapter2-item">
+          <span>{{ item.name }}</span>
+          <div class="chapter2-item__btn" />
+
+          <img :src="item.bg" />
+        </div>
+      </div>
     </div>
 
-    <img class="chapter__bg" src="@/assets/images/bg/BG_03-min.jpg" />
+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
 <script setup>
-import data from "@/data.json";
+import data from "@/assets/data";
+import { useMobile } from "@/utils";
+import Bg from "@/assets/images/bg/BG_03-min.jpg";
+import MobileBg from "@/assets/images/bg/M_BG_03-min.jpg";
+import Img1 from "./images/chapter2-img3-min.png";
+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";
+
+const { isMobile } = useMobile();
+
+const CHAPTER2_LIST = [
+  {
+    id: 0,
+    name: "游禽类",
+    bg: Img1,
+  },
+  {
+    id: 1,
+    name: "鸣禽类",
+    bg: Img2,
+  },
+  {
+    id: 2,
+    name: "涉禽类",
+    bg: Img3,
+  },
+  {
+    id: 3,
+    name: "猛禽类",
+    bg: Img4,
+  },
+  {
+    id: 4,
+    name: "攀禽类",
+    bg: Img5,
+  },
+];
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,4 +1,9 @@
+@use "@/assets/utils.scss";
+
 .chapter3 {
+  position: relative;
+  font-size: utils.vw-calc(24);
+
   &-wrap {
     position: absolute;
     top: 0;
@@ -7,4 +12,119 @@
     bottom: 0;
     z-index: 1;
   }
+  &__title {
+    position: absolute;
+    top: utils.vw-calc(170);
+    left: utils.vw-calc(74);
+    width: utils.vw-calc(589);
+    height: utils.vw-calc(632);
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    top: utils.vw-calc(205);
+    right: utils.vw-calc(87);
+    width: utils.vw-calc(241);
+    height: utils.vw-calc(597);
+    background: url("./images/subtitle-min.png") no-repeat center / contain;
+  }
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: utils.vw-calc(16);
+    position: absolute;
+    top: utils.vw-calc(60 + 632 + 170);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &-item {
+    position: relative;
+    width: utils.vw-calc(1317);
+    height: utils.vw-calc(724);
+    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");
+    }
+    &__footer {
+      position: absolute;
+      left: utils.vw-calc(76);
+      right: utils.vw-calc(84);
+      bottom: utils.vw-calc(44);
+      display: flex;
+      justify-content: space-between;
+      color: white;
+      font-family: "SourceHanSerifSC-Bold";
+      font-size: utils.vw-calc(30);
+    }
+    &__cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0 utils.vw-calc(140);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: utils.vw-calc(36);
+      line-height: utils.vw-calc(61);
+      opacity: 0;
+      transition: opacity linear 0.2s;
+      background: rgba($color: #000000, $alpha: 0.6);
+      z-index: 1;
+    }
+    &:hover {
+      .chapter3-item__cover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .chapter3 {
+    font-size: utils.vw-calc(24);
+
+    &__title {
+      top: utils.vw-calc(20);
+      left: utils.vw-calc(24);
+      width: utils.vw-calc(353);
+      height: utils.vw-calc(380);
+    }
+    &::after {
+      top: utils.vw-calc(41);
+      right: utils.vw-calc(15);
+      width: utils.vw-calc(145);
+      height: utils.vw-calc(359);
+    }
+    ul {
+      gap: utils.vw-calc(8);
+      top: utils.vw-calc(98 + 380 + 20);
+    }
+    &-item {
+      width: utils.vw-calc(658);
+      height: utils.vw-calc(362);
+      border-radius: utils.vw-calc(30);
+
+      &__footer {
+        left: utils.vw-calc(45);
+        right: utils.vw-calc(45);
+        bottom: utils.vw-calc(30);
+        font-size: utils.vw-calc(24);
+      }
+      &__cover {
+        padding: 0 utils.vw-calc(40);
+        font-size: utils.vw-calc(28);
+        line-height: utils.vw-calc(40);
+      }
+    }
+  }
 }

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

@@ -1,11 +1,43 @@
 <template>
   <div class="chapter3">
-    <div class="chapter3-wrap"></div>
+    <div class="chapter3-wrap">
+      <img
+        class="chapter3__title"
+        draggable="false"
+        src="./images/title3-min.png"
+      />
 
-    <img class="chapter__bg" src="@/assets/images/bg/BG_04-min.jpg" />
+      <ul>
+        <li
+          v-for="(item, index) in data.chapter3.list"
+          :key="index"
+          class="chapter3-item"
+        >
+          <div class="chapter3-item__footer">
+            <span>{{ item.name }}</span>
+            <span class="more">查看更多</span>
+          </div>
+
+          <div class="chapter3-item__cover">
+            {{ item.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
+<script setup>
+import data from "@/assets/data";
+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";
+
+const { isMobile } = useMobile();
+</script>
+
 <style lang="scss" scoped>
 @use "./index.scss";
 </style>

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

@@ -1,4 +1,9 @@
+@use "@/assets/utils.scss";
+
 .chapter4 {
+  position: relative;
+  font-size: utils.vw-calc(24);
+
   &-wrap {
     position: absolute;
     top: 0;
@@ -7,4 +12,162 @@
     bottom: 0;
     z-index: 1;
   }
+  &__title {
+    position: absolute;
+    top: utils.vw-calc(110);
+    left: utils.vw-calc(84);
+    width: utils.vw-calc(579);
+    height: utils.vw-calc(682);
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    top: utils.vw-calc(195);
+    right: utils.vw-calc(89);
+    width: utils.vw-calc(216);
+    height: utils.vw-calc(597);
+    background: url("./images/subtitle.png") no-repeat center / contain;
+  }
+  &-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: utils.vw-calc(290 + 682+110);
+    left: 50%;
+    padding: 0 utils.vw-calc(214);
+    width: utils.vw-calc(1578);
+    height: utils.vw-calc(889);
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    background: url("./images/card-bg.png") no-repeat center / contain;
+
+    &-nav {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 utils.vw-calc(20);
+      margin-top: utils.vw-calc(104);
+      width: utils.vw-calc(658);
+      height: utils.vw-calc(104);
+      background: url("./images/nav-bg.png") no-repeat center / contain;
+
+      &__item {
+        position: relative;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: rgba(0, 0, 0, 0.6);
+        font-size: utils.vw-calc(36);
+        font-family: "SourceHanSerifSC-Bold";
+        cursor: pointer;
+        z-index: 1;
+
+        &.active {
+          position: relative;
+          color: black;
+
+          &:nth-child(1) {
+            left: utils.vw-calc(20);
+          }
+          &:nth-child(2) {
+            left: utils.vw-calc(-20);
+          }
+        }
+      }
+      &__item-bg {
+        position: absolute;
+        bottom: utils.vw-calc(-26);
+        left: utils.vw-calc(-4);
+        width: utils.vw-calc(404);
+        height: utils.vw-calc(136);
+        transition: margin linear 0.2s;
+        background: url("./images/tab-bg.png") no-repeat center / contain;
+
+        &.i1 {
+          margin-left: utils.vw-calc(264);
+        }
+      }
+    }
+    &-content {
+      margin: utils.vw-calc(83) 0 utils.vw-calc(117);
+      line-height: utils.vw-calc(36);
+    }
+    &__img {
+      width: 100%;
+    }
+    &__btn {
+      position: absolute;
+      left: 50%;
+      bottom: utils.vw-calc(90);
+      width: utils.vw-calc(161);
+      cursor: pointer;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .chapter4 {
+    font-size: utils.vw-calc(18);
+
+    &__title {
+      top: utils.vw-calc(74);
+      left: utils.vw-calc(20);
+      width: utils.vw-calc(347);
+      height: utils.vw-calc(410);
+    }
+    &::after {
+      top: utils.vw-calc(130);
+      right: utils.vw-calc(27);
+      width: utils.vw-calc(129);
+      height: utils.vw-calc(358);
+    }
+    &-card {
+      top: utils.vw-calc(99 + 410+74);
+      padding: 0 utils.vw-calc(77);
+      width: utils.vw-calc(722);
+      height: utils.vw-calc(407);
+
+      &-nav {
+        flex-shrink: 0;
+        margin-top: utils.vw-calc(38);
+        padding: 0;
+        width: utils.vw-calc(306);
+        height: utils.vw-calc(48);
+
+        &__item {
+          font-size: utils.vw-calc(24);
+
+          &.active {
+            &:nth-child(1) {
+              left: utils.vw-calc(10);
+            }
+            &:nth-child(2) {
+              left: utils.vw-calc(-10);
+            }
+          }
+        }
+        &__item-bg {
+          bottom: utils.vw-calc(-12);
+          left: utils.vw-calc(-2);
+          width: utils.vw-calc(187);
+          height: utils.vw-calc(63);
+
+          &.i1 {
+            margin-left: utils.vw-calc(124);
+          }
+        }
+      }
+      &-content {
+        margin: utils.vw-calc(31) 0 utils.vw-calc(19);
+        line-height: utils.vw-calc(30);
+      }
+      &__btn {
+        display: none;
+      }
+    }
+  }
 }

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

@@ -1,11 +1,60 @@
 <template>
   <div class="chapter4">
-    <div class="chapter4-wrap"></div>
+    <div class="chapter4-wrap">
+      <img class="chapter4__title" draggable="false" src="./images/title.png" />
 
-    <img class="chapter__bg" src="@/assets/images/bg/BG_05-min.jpg" />
+      <div class="chapter4-card">
+        <div class="chapter4-card-nav">
+          <div
+            v-for="(item, index) in LIST"
+            :key="item"
+            :class="[
+              'chapter4-card-nav__item',
+              { active: index === currentTab },
+            ]"
+            @click="currentTab = index"
+          >
+            {{ item.title }}
+          </div>
+          <div :class="`i${currentTab} chapter4-card-nav__item-bg`" />
+        </div>
+        <div class="chapter4-card-content">
+          {{ LIST[currentTab].content }}
+        </div>
+        <img class="chapter4-card__img" :src="LIST[currentTab].img" />
+        <img class="chapter4-card__btn" src="./images/btn.png" />
+      </div>
+    </div>
+
+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />
   </div>
 </template>
 
+<script setup>
+import { ref } from "vue";
+import data from "@/assets/data";
+import { useMobile } from "@/utils";
+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";
+
+const { isMobile } = useMobile();
+const LIST = [
+  {
+    title: "底栖动物",
+    img: Img1,
+    content: data.chapter4.list[0].description,
+  },
+  {
+    title: "鱼类",
+    img: Img2,
+    content: data.chapter4.list[1].description,
+  },
+];
+const currentTab = ref(0);
+</script>
+
 <style lang="scss" scoped>
 @use "./index.scss";
 </style>

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

@@ -1,4 +1,8 @@
+@use "@/assets/utils.scss";
+
 .epilogue {
+  position: relative;
+
   &-wrap {
     position: absolute;
     top: 0;
@@ -7,4 +11,64 @@
     bottom: 0;
     z-index: 1;
   }
+  &__title {
+    position: absolute;
+    top: utils.vw-calc(290);
+    left: utils.vw-calc(323);
+    width: utils.vw-calc(279);
+    height: utils.vw-calc(293);
+  }
+  &-content {
+    position: absolute;
+    top: utils.vw-calc(260);
+    right: utils.vw-calc(278);
+    width: utils.vw-calc(800);
+
+    h3 {
+      font-family: "SourceHanSerifSC-Bold";
+      font-size: utils.vw-calc(56);
+    }
+    &__inner {
+      margin-top: utils.vw-calc(20);
+      line-height: utils.vw-calc(36);
+      font-size: utils.vw-calc(24);
+
+      ::v-deep(p) {
+        &:not(:first-child) {
+          margin-top: utils.vw-calc(10);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .epilogue {
+    &__title {
+      top: utils.vw-calc(70);
+      left: utils.vw-calc(92);
+      width: utils.vw-calc(153);
+      height: utils.vw-calc(162);
+    }
+    &-content {
+      top: utils.vw-calc(94);
+      right: utils.vw-calc(67);
+      width: utils.vw-calc(392);
+
+      h3 {
+        font-size: utils.vw-calc(35);
+      }
+      &__inner {
+        margin-top: utils.vw-calc(10);
+        line-height: utils.vw-calc(18);
+        font-size: utils.vw-calc(18);
+
+        ::v-deep(p) {
+          &:not(:first-child) {
+            margin-top: utils.vw-calc(5);
+          }
+        }
+      }
+    }
+  }
 }