Página inicial Explorar Ajuda
Registrar Entrar
chenlei
/
hongze-lake-exhibition
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

feat: --

chenlei 8 meses atrás
pai
204fb01c4a
commit
efec5bb236
39 arquivos alterados com 883 adições e 23 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 4 4
      index.html
  2. 6 6
      src/assets/data.js
  3. 15 0
      src/router/index.js
  4. BIN
      src/views/Chapter2/images/bg-min.png
  5. BIN
      src/views/Chapter2/images/card-min.png
  6. BIN
      src/views/Chapter2/images/img1-min.png
  7. BIN
      src/views/Chapter2/images/img2-min.png
  8. BIN
      src/views/Chapter2/images/m-bg-min.png
  9. BIN
      src/views/Chapter2/images/m-card-min.png
  10. BIN
      src/views/Chapter2/images/title-min.png
  11. BIN
      src/views/Chapter2/images/unit-min.png
  12. 203 0
      src/views/Chapter2/index.scss
  13. 73 0
      src/views/Chapter2/index.vue
  14. BIN
      src/views/Chapter3/images/bg-min.jpg
  15. BIN
      src/views/Chapter3/images/card-min.png
  16. BIN
      src/views/Chapter3/images/img1-min.png
  17. BIN
      src/views/Chapter3/images/m-bg-min.jpg
  18. BIN
      src/views/Chapter3/images/m-card-min.png
  19. BIN
      src/views/Chapter3/images/title-min.png
  20. BIN
      src/views/Chapter3/images/unit-min.png
  21. 179 0
      src/views/Chapter3/index.scss
  22. 72 0
      src/views/Chapter3/index.vue
  23. BIN
      src/views/Chapter4/images/bg-min.jpg
  24. BIN
      src/views/Chapter4/images/card-min.png
  25. BIN
      src/views/Chapter4/images/img1-min.png
  26. BIN
      src/views/Chapter4/images/img2-min.png
  27. BIN
      src/views/Chapter4/images/img3-min.png
  28. BIN
      src/views/Chapter4/images/m-bg-min.jpg
  29. BIN
      src/views/Chapter4/images/m-card-min.png
  30. BIN
      src/views/Chapter4/images/title-min.png
  31. BIN
      src/views/Chapter4/images/unit-min.png
  32. 192 0
      src/views/Chapter4/index.scss
  33. 68 0
      src/views/Chapter4/index.vue
  34. 14 4
      src/views/Index/components/Chapter2/index.vue
  35. 11 2
      src/views/Index/components/Chapter3/index.scss
  36. 27 3
      src/views/Index/components/Chapter3/index.vue
  37. 10 2
      src/views/Index/components/Chapter4/index.vue
  38. 5 2
      src/views/Index/index.vue
  39. 4 0
      vite.config.js

+ 4 - 4
index.html
Ver arquivo 

@@ -1,10 +1,10 @@
 
 <!DOCTYPE html>
 
 <html lang="">
 
   <head>
 
-    <meta charset="UTF-8">
 
-    <link rel="icon" href="/favicon.ico">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>洪泽湖黑陶展</title>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" href="/favicon.ico" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>洪泽湖展</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 6 - 6
src/assets/data.js
Ver arquivo 

@@ -43,7 +43,7 @@ import Img42 from "@/assets/dataImages/42.jpg";
 
 import Img43 from "@/assets/dataImages/43.jpg";

 import Img44 from "@/assets/dataImages/44.jpg";

 import Img45 from "@/assets/dataImages/45.jpg";

-import Img46 from "@/assets/dataImages/45.jpg";

+import Img46 from "@/assets/dataImages/46.jpg";

 import Img47 from "@/assets/dataImages/47.jpg";

 import Img48 from "@/assets/dataImages/48.jpg";

 import Img49 from "@/assets/dataImages/49.jpg";

@@ -392,7 +392,7 @@ export default {
 
             name: "银杏 Ginkgo biloba",

             tips: "国家一级保护野生植物",

             type: "银杏目Ginkgopsida  银杏科Ginkgoaceae",

-            imgs: [Img26][Img27],

+            imgs: [Img26, Img27],

             content: `

             <P>落叶乔木，高达40米。叶扇形，雌雄异株，花期4-5月，雄球花淡黄色，雌球花淡绿色。种子近球形，黄色，被白粉。为中生代孑遗的稀有树种，系中国特产。</P>

             <P>银杏为优良木材，供建筑、室内装饰等用。种子供食用（多食易中毒）及药用。叶可作药用和制杀虫剂，亦可作肥料。银杏树形优美，春夏季叶色嫩绿，秋季变成黄色，可作庭园树及行道树。</P>

@@ -402,7 +402,7 @@ export default {
 
             name: "水杉 Metasequoia glyptostroboides",

             tips: "国家一级保护野生植物",

             type: "柏目Cupressales  柏科Cupressaceae",

-            imgs: [Img28][Img29],

+            imgs: [Img28, Img29],

             content: `

             <P>落叶乔木，高达50米。侧生小枝排成羽状，叶、芽鳞、雄球花、雄蕊、珠鳞与种鳞均交互对生。叶线形，在侧枝上排成羽状。花期4-5月，因在浅水中生长而得名。</P>

             <P>水杉属于古老的孑遗植物，是植物中的活化石。水杉喜温暖湿润气候和深厚肥沃的酸性土，不耐旱。《中国中药资本志要》记载水杉叶、种子有清热解毒、消炎止痛之效，可用于痈疮肿痛、藓疮等症。</P>

@@ -412,7 +412,7 @@ export default {
 
             name: "落羽杉 Taxodium distichum",

             tips: "",

             type: "柏目Pinales  杉科Cupressaceae",

-            imgs: [Img30][Img31],

+            imgs: [Img30, Img31],

             content: `

             <P>落叶乔木，树干尖削度大，树皮棕色，裂成长条片。一年生小枝褐色，侧生短枝，叶线形。落羽杉叶在小枝上排列呈羽毛状，色翠绿，冬季连同小枝一齐脱落，因而得名“落羽”。</P>

             <P>强阳性树种，喜温暖、湿润和阳光充足的环境。入秋后树叶变为铜锈色，是良好的秋色观叶树种，木材重，结构较粗，是中国重要的用材树种。其种子是鸟雀、松鼠等野生动物喜食的饲料。</P>

@@ -472,7 +472,7 @@ export default {
 
             name: "萍蓬草 Nuphar pumila",

             tips: "",

             type: "睡莲目Nymphaeales  睡莲科Nymphaeaceae",

-            imgs: [Img36][Img37],

+            imgs: [Img36, Img37],

             content: `

               <P>水生草本，又名黄金莲、萍蓬莲，叶纸质，宽卵形或卵形，先端圆钝，基部具弯缺，心形，上面光亮无毛，下面密生柔毛，花萼片黄色；花瓣窄楔形，柱头淡黄色或带红色。</P>

               <P>性喜水湿温暖和阳光照射的环境，自然生在湖泊、沼泽之中。根状茎食用，又供药用，有强壮、净血作用。</P>

@@ -521,7 +521,7 @@ export default {
 
             `,

           },

           {

-            name: "圆顶珠蚌Unio douglasiae",

+            name: "圆顶珠蚌 Unio douglasiae",

             type: "真瓣鳃目Eulamellibranchia  蚌科Unionidae",

             imgs: [Img41],

             content: `

+ 15 - 0
src/router/index.js
Ver arquivo 

@@ -18,6 +18,21 @@ const router = createRouter({
 
       name: "chapter1",
 
       component: () => import("../views/Chapter1/index.vue"),
 
     },
 
+    {
 
+      path: "/chapter2/:type/:index",
 
+      name: "chapter2",
 
+      component: () => import("../views/Chapter2/index.vue"),
 
+    },
 
+    {
 
+      path: "/chapter3/:type/:index",
 
+      name: "chapter3",
 
+      component: () => import("../views/Chapter3/index.vue"),
 
+    },
 
+    {
 
+      path: "/chapter4/:type/:index",
 
+      name: "chapter4",
 
+      component: () => import("../views/Chapter4/index.vue"),
 
+    },
 
   ],
 
 });

BIN
src/views/Chapter2/images/bg-min.png
Ver arquivo


BIN
src/views/Chapter2/images/card-min.png
Ver arquivo


BIN
src/views/Chapter2/images/img1-min.png
Ver arquivo


BIN
src/views/Chapter2/images/img2-min.png
Ver arquivo


BIN
src/views/Chapter2/images/m-bg-min.png
Ver arquivo


BIN
src/views/Chapter2/images/m-card-min.png
Ver arquivo


BIN
src/views/Chapter2/images/title-min.png
Ver arquivo


BIN
src/views/Chapter2/images/unit-min.png
Ver arquivo


+ 203 - 0
src/views/Chapter2/index.scss
Ver arquivo 

@@ -0,0 +1,203 @@
 
+@use "@/assets/utils.scss";

+

+.chapter2 {

+  position: relative;

+  overflow: hidden;

+

+  &-wrap {

+    position: absolute;

+    top: 0;

+    left: 0;

+    right: 0;

+    bottom: 0;

+    z-index: 2;

+  }

+  &__title {

+    position: absolute;

+    top: utils.vw-calc(69);

+    right: utils.vw-calc(20);

+    width: utils.vw-calc(576);

+    height: utils.vw-calc(646);

+  }

+  &::after {

+    content: "";

+    position: absolute;

+    top: utils.vw-calc(99);

+    left: utils.vw-calc(106);

+    width: utils.vw-calc(193);

+    height: utils.vw-calc(25);

+    background: url("./images/unit-min.png") no-repeat center / contain;

+  }

+  &::before {

+    content: "";

+    position: absolute;

+    top: utils.vw-calc(571);

+    left: utils.vw-calc(106);

+    width: utils.vw-calc(72);

+    height: utils.vw-calc(72);

+    background: url("@/assets/images/unit-icon-min.png") no-repeat center /

+      contain;

+  }

+  &__bg1 {

+    position: absolute;

+    top: utils.vw-calc(483);

+    left: utils.vw-calc(248);

+    width: utils.vw-calc(896);

+    height: utils.vw-calc(505);

+    z-index: 1;

+  }

+  &__bg2 {

+    position: absolute;

+    left: 0;

+    bottom: utils.vw-calc(-70);

+    width: 100%;

+    z-index: 3;

+  }

+  &-card {

+    position: absolute;

+    top: utils.vw-calc(1267);

+    left: 50%;

+    padding: utils.vw-calc(160) utils.vw-calc(186) utils.vw-calc(160)

+      utils.vw-calc(172);

+    width: utils.vw-calc(1528);

+    height: utils.vw-calc(868);

+    font-size: utils.vw-calc(24);

+    transform: translateX(-50%);

+    background: url("./images/card-min.png") no-repeat center / contain;

+

+    h2 {

+      position: absolute;

+      top: utils.vw-calc(-59);

+      left: 50%;

+      letter-spacing: utils.vw-calc(6);

+      font-family: "SourceHanSerifSC-Bold";

+      width: utils.vw-calc(538);

+      height: utils.vw-calc(133);

+      text-align: center;

+      line-height: utils.vw-calc(133);

+      font-size: utils.vw-calc(48);

+      transform: translateX(-50%);

+      background: url("./images/title-min.png") no-repeat center / contain;

+    }

+    &-wrap {

+      display: flex;

+      align-items: center;

+      gap: utils.vw-calc(36);

+      height: 100%;

+

+      img {

+        flex-shrink: 0;

+        max-width: utils.vw-calc(465);

+      }

+    }

+    &-inner {

+      flex: 1;

+      line-height: utils.vw-calc(40);

+

+      div {

+        margin-top: utils.vw-calc(76);

+        text-indent: 2em;

+      }

+    }

+  }

+}

+

+.toggle-btn {

+  position: absolute;

+  top: utils.vw-calc(1637);

+  width: utils.vw-calc(87);

+  height: utils.vw-calc(88);

+  cursor: pointer;

+  z-index: 4;

+

+  &.left {

+    left: utils.vw-calc(80);

+  }

+  &.right {

+    right: utils.vw-calc(80);

+  }

+}

+

+@media screen and (max-width: 768px) {

+  .chapter2 {

+    &__title {

+      top: utils.vw-calc(52);

+      right: 0;

+      width: utils.vw-calc(284);

+      height: utils.vw-calc(323);

+    }

+    &::after {

+      top: utils.vw-calc(20);

+      left: utils.vw-calc(19);

+      width: utils.vw-calc(116);

+      height: utils.vw-calc(15);

+    }

+    &::before {

+      top: utils.vw-calc(304);

+      left: utils.vw-calc(19);

+      width: utils.vw-calc(43);

+      height: utils.vw-calc(43);

+    }

+    &__bg1 {

+      top: utils.vw-calc(323);

+      left: utils.vw-calc(51);

+      width: utils.vw-calc(485);

+      height: utils.vw-calc(273);

+    }

+    &__bg2 {

+      bottom: utils.vw-calc(9);

+    }

+    &-card {

+      top: utils.vw-calc(661);

+      padding: utils.vw-calc(63) utils.vw-calc(120) utils.vw-calc(42)

+        utils.vw-calc(120);

+      width: utils.vw-calc(653);

+      height: utils.vw-calc(826);

+      font-size: utils.vw-calc(18);

+      background: url("./images/m-card-min.png") no-repeat center / contain;

+

+      h2 {

+        top: utils.vw-calc(-36);

+        width: utils.vw-calc(363);

+        height: utils.vw-calc(89);

+        line-height: utils.vw-calc(89);

+        font-size: utils.vw-calc(30);

+      }

+      &-wrap {

+        display: flex;

+        flex-direction: column;

+        align-items: center;

+        justify-content: center;

+        gap: utils.vw-calc(23);

+

+        img {

+          flex-shrink: 0;

+          max-width: 100%;

+        }

+      }

+      &-inner {

+        height: 0;

+        overflow: auto;

+        line-height: utils.vw-calc(30);

+

+        div {

+          margin-top: utils.vw-calc(19);

+          text-indent: 2em;

+        }

+      }

+    }

+  }

+

+  .toggle-btn {

+    top: utils.vw-calc(971);

+    width: utils.vw-calc(78);

+    height: utils.vw-calc(80);

+

+    &.left {

+      left: utils.vw-calc(20);

+    }

+    &.right {

+      right: utils.vw-calc(20);

+    }

+  }

+}

+ 73 - 0
src/views/Chapter2/index.vue
Ver arquivo 

@@ -0,0 +1,73 @@
 
+<template>

+  <div class="chapter2">

+    <div class="chapter2-wrap">

+      <img

+        class="chapter2__title"

+        draggable="false"

+        src="@/views/Index/components/Chapter2/images/title2-min.png"

+      />

+

+      <div class="chapter2-card">

+        <h2>{{ detail?.name.split(" ")[0] }}</h2>

+

+        <div class="chapter2-card-wrap">

+          <img :src="detail?.imgs[0]" />

+

+          <div class="chapter2-card-inner">

+            <p>{{ detail?.name }}</p>

+            <p>{{ detail?.tips }}</p>

+            <p>{{ detail?.type }}</p>

+            <div v-html="detail?.content" />

+          </div>

+        </div>

+      </div>

+    </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)"

+    />

+

+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />

+    <img class="chapter2__bg1" src="./images/img1-min.png" />

+    <img class="chapter2__bg2" src="./images/img2-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.png";

+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.chapter2.type[route.params.type].list[idx.value];

+});

+

+const toggleDetail = (step) => {

+  const length = data.chapter2.type[route.params.type].list.length - 1;

+

+  idx.value = Math.min(Math.max(idx.value + step, 0), length);

+  detail.value = data.chapter2.type[route.params.type].list[idx.value];

+  router.replace({ name: "chapter2", params: { index: idx.value } });

+};

+</script>

+

+<style lang="scss" scoped>

+@use "./index.scss";

+</style>

BIN
src/views/Chapter3/images/bg-min.jpg
Ver arquivo


BIN
src/views/Chapter3/images/card-min.png
Ver arquivo


BIN
src/views/Chapter3/images/img1-min.png
Ver arquivo


BIN
src/views/Chapter3/images/m-bg-min.jpg
Ver arquivo


BIN
src/views/Chapter3/images/m-card-min.png
Ver arquivo


BIN
src/views/Chapter3/images/title-min.png
Ver arquivo


BIN
src/views/Chapter3/images/unit-min.png
Ver arquivo


+ 179 - 0
src/views/Chapter3/index.scss
Ver arquivo 

@@ -0,0 +1,179 @@
 
+@use "@/assets/utils.scss";

+

+.chapter3 {

+  position: relative;

+  overflow: hidden;

+

+  &__title {

+    position: absolute;

+    top: utils.vw-calc(74);

+    left: utils.vw-calc(80);

+    width: utils.vw-calc(589);

+    height: utils.vw-calc(632);

+  }

+  &::after {

+    content: "";

+    position: absolute;

+    top: utils.vw-calc(116);

+    right: utils.vw-calc(68);

+    width: utils.vw-calc(236);

+    height: utils.vw-calc(24);

+    background: url("./images/unit-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;

+  }

+  &__bg1 {

+    position: absolute;

+    left: 0;

+    bottom: 0;

+    width: 100%;

+    z-index: 3;

+  }

+  &-card {

+    position: absolute;

+    top: utils.vw-calc(1274);

+    left: 50%;

+    width: utils.vw-calc(1890);

+    height: utils.vw-calc(942);

+    font-size: utils.vw-calc(24);

+    transform: translateX(-50%);

+    background: url("./images/card-min.png") no-repeat center / contain;

+

+    h2 {

+      position: absolute;

+      top: utils.vw-calc(-35);

+      left: 50%;

+      letter-spacing: utils.vw-calc(6);

+      font-family: "SourceHanSerifSC-Bold";

+      width: utils.vw-calc(487);

+      height: utils.vw-calc(124);

+      text-align: center;

+      color: #ffd954;

+      line-height: utils.vw-calc(146);

+      font-size: utils.vw-calc(48);

+      transform: translateX(-50%);

+      background: url("./images/title-min.png") no-repeat center / contain;

+    }

+    &-wrap {

+      position: absolute;

+      top: utils.vw-calc(73);

+      left: utils.vw-calc(258);

+      width: utils.vw-calc(684);

+      height: utils.vw-calc(684);

+      border-radius: 50%;

+      overflow: hidden;

+

+      img {

+        width: 100%;

+        height: 100%;

+        object-fit: cover;

+      }

+    }

+    &-inner {

+      position: absolute;

+      top: utils.vw-calc(130);

+      right: utils.vw-calc(256);

+      width: utils.vw-calc(596);

+      line-height: utils.vw-calc(40);

+

+      div {

+        margin-top: utils.vw-calc(60);

+        text-indent: 2em;

+      }

+    }

+  }

+}

+

+.toggle-btn {

+  position: absolute;

+  top: utils.vw-calc(1637);

+  width: utils.vw-calc(87);

+  height: utils.vw-calc(88);

+  cursor: pointer;

+  z-index: 4;

+

+  &.left {

+    left: utils.vw-calc(70);

+  }

+  &.right {

+    right: utils.vw-calc(60);

+  }

+}

+

+@media screen and (max-width: 768px) {

+  .chapter3 {

+    &__title {

+      top: utils.vw-calc(52);

+      left: utils.vw-calc(16);

+      width: utils.vw-calc(277);

+      height: utils.vw-calc(333);

+    }

+    &::after {

+      top: utils.vw-calc(20);

+      right: utils.vw-calc(20);

+      width: utils.vw-calc(141);

+      height: utils.vw-calc(14);

+    }

+    &::before {

+      top: utils.vw-calc(304);

+      right: utils.vw-calc(21);

+      width: utils.vw-calc(43);

+      height: utils.vw-calc(43);

+    }

+    &-card {

+      top: utils.vw-calc(398);

+      width: utils.vw-calc(554);

+      height: utils.vw-calc(1184);

+      font-size: utils.vw-calc(18);

+      background: url("./images/m-card-min.png") no-repeat center / contain;

+

+      h2 {

+        margin-left: utils.vw-calc(25);

+        top: utils.vw-calc(63);

+        letter-spacing: utils.vw-calc(6);

+        width: utils.vw-calc(330);

+        height: utils.vw-calc(84);

+        line-height: utils.vw-calc(100);

+        font-size: utils.vw-calc(36);

+      }

+      &-wrap {

+        position: absolute;

+        top: utils.vw-calc(162);

+        left: utils.vw-calc(80);

+        width: utils.vw-calc(425);

+        height: utils.vw-calc(425);

+      }

+      &-inner {

+        top: utils.vw-calc(626);

+        right: utils.vw-calc(60);

+        width: utils.vw-calc(393);

+        line-height: utils.vw-calc(30);

+

+        div {

+          margin-top: utils.vw-calc(30);

+        }

+      }

+    }

+  }

+

+  .toggle-btn {

+    top: utils.vw-calc(971);

+    width: utils.vw-calc(78);

+    height: utils.vw-calc(80);

+

+    &.left {

+      left: utils.vw-calc(20);

+    }

+    &.right {

+      right: utils.vw-calc(20);

+    }

+  }

+}

+ 72 - 0
src/views/Chapter3/index.vue
Ver arquivo 

@@ -0,0 +1,72 @@
 
+<template>

+  <div class="chapter3">

+    <div class="chapter3-wrap">

+      <img

+        class="chapter3__title"

+        draggable="false"

+        src="@/views/Index/components/Chapter3/images/title3-min.png"

+      />

+

+      <div class="chapter3-card">

+        <h2>{{ detail?.name.split(" ")[0] }}</h2>

+

+        <div class="chapter3-card-wrap">

+          <img :src="detail?.imgs[0]" />

+        </div>

+

+        <div class="chapter3-card-inner">

+          <p>{{ detail?.name }}</p>

+          <p>{{ detail?.tips }}</p>

+          <p>{{ detail?.type }}</p>

+          <div v-html="detail?.content" />

+        </div>

+      </div>

+    </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)"

+    />

+

+    <img class="chapter__bg" :src="isMobile ? MobileBg : Bg" />

+    <img class="chapter3__bg1" src="./images/img1-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.jpg";

+

+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.chapter3.list[route.params.type].list[idx.value];

+});

+

+const toggleDetail = (step) => {

+  const length = data.chapter3.list[route.params.type].list.length - 1;

+

+  idx.value = Math.min(Math.max(idx.value + step, 0), length);

+  detail.value = data.chapter3.list[route.params.type].list[idx.value];

+  router.replace({ name: "chapter3", params: { index: idx.value } });

+};

+</script>

+

+<style lang="scss" scoped>

+@use "./index.scss";

+</style>

BIN
src/views/Chapter4/images/bg-min.jpg
Ver arquivo


BIN
src/views/Chapter4/images/card-min.png
Ver arquivo


BIN
src/views/Chapter4/images/img1-min.png
Ver arquivo


BIN
src/views/Chapter4/images/img2-min.png
Ver arquivo


BIN
src/views/Chapter4/images/img3-min.png
Ver arquivo


BIN
src/views/Chapter4/images/m-bg-min.jpg
Ver arquivo


BIN
src/views/Chapter4/images/m-card-min.png
Ver arquivo


BIN
src/views/Chapter4/images/title-min.png
Ver arquivo


BIN
src/views/Chapter4/images/unit-min.png
Ver arquivo


+ 192 - 0
src/views/Chapter4/index.scss
Ver arquivo 

@@ -0,0 +1,192 @@
 
+@use "@/assets/utils.scss";

+

+.chapter4 {

+  position: relative;

+

+  &__title {

+    position: absolute;

+    top: utils.vw-calc(101);

+    right: utils.vw-calc(91);

+    width: utils.vw-calc(568);

+    height: utils.vw-calc(654);

+  }

+  &::after {

+    content: "";

+    position: absolute;

+    top: utils.vw-calc(99);

+    left: utils.vw-calc(106);

+    width: utils.vw-calc(215);

+    height: utils.vw-calc(544);

+    background: url("./images/unit-min.png") no-repeat center / contain;

+  }

+  &::before {

+    content: "";

+    position: absolute;

+    top: utils.vw-calc(619);

+    left: utils.vw-calc(649);

+    width: utils.vw-calc(443);

+    height: utils.vw-calc(417);

+    background: url("./images/img1-min.png") no-repeat center / contain;

+  }

+  &-card {

+    position: absolute;

+    top: utils.vw-calc(1236);

+    left: 50%;

+    width: utils.vw-calc(1578);

+    height: utils.vw-calc(889);

+    font-size: utils.vw-calc(24);

+    transform: translateX(-50%);

+    background: url("./images/card-min.png") no-repeat center / contain;

+

+    h2 {

+      position: absolute;

+      top: utils.vw-calc(-57);

+      left: 50%;

+      padding-right: utils.vw-calc(20);

+      letter-spacing: utils.vw-calc(6);

+      font-family: "SourceHanSerifSC-Bold";

+      width: utils.vw-calc(729);

+      height: utils.vw-calc(160);

+      text-align: center;

+      color: #eed4a9;

+      line-height: utils.vw-calc(180);

+      font-size: utils.vw-calc(48);

+      transform: translateX(-50%);

+      background: url("./images/title-min.png") no-repeat center / contain;

+    }

+    &__img {

+      position: absolute;

+      top: utils.vw-calc(214);

+      left: utils.vw-calc(131);

+      width: utils.vw-calc(649);

+    }

+    &-inner {

+      position: absolute;

+      top: utils.vw-calc(231);

+      right: utils.vw-calc(124);

+      width: utils.vw-calc(623);

+      line-height: utils.vw-calc(40);

+

+      div {

+        margin-top: utils.vw-calc(30);

+        text-indent: 2em;

+      }

+    }

+    &::after {

+      content: "";

+      position: absolute;

+      left: utils.vw-calc(-95);

+      bottom: utils.vw-calc(-93);

+      width: utils.vw-calc(432);

+      height: utils.vw-calc(561);

+      background: url("./images/img3-min.png") no-repeat center / contain;

+    }

+    &::before {

+      content: "";

+      position: absolute;

+      right: utils.vw-calc(-14);

+      bottom: utils.vw-calc(-38);

+      width: utils.vw-calc(210);

+      height: utils.vw-calc(178);

+      background: url("./images/img2-min.png") no-repeat center / contain;

+    }

+  }

+}

+

+.toggle-btn {

+  position: absolute;

+  top: 50%;

+  width: utils.vw-calc(87);

+  height: utils.vw-calc(88);

+  cursor: pointer;

+  transform: translateY(-50%);

+  z-index: 4;

+

+  &.left {

+    left: utils.vw-calc(-120);

+  }

+  &.right {

+    right: utils.vw-calc(-120);

+  }

+}

+

+@media screen and (max-width: 768px) {

+  .chapter4 {

+    &__title {

+      top: utils.vw-calc(51);

+      right: utils.vw-calc(20);

+      width: utils.vw-calc(284);

+      height: utils.vw-calc(327);

+    }

+    &::after {

+      top: utils.vw-calc(19);

+      left: utils.vw-calc(19);

+      width: utils.vw-calc(129);

+      height: utils.vw-calc(326);

+    }

+    &::before {

+      top: utils.vw-calc(324);

+      left: utils.vw-calc(160);

+      width: utils.vw-calc(301);

+      height: utils.vw-calc(281);

+    }

+    &-card {

+      top: utils.vw-calc(607);

+      width: utils.vw-calc(589);

+      height: utils.vw-calc(923);

+      font-size: utils.vw-calc(18);

+      background: url("./images/m-card-min.png") no-repeat center / contain;

+

+      h2 {

+        margin-left: utils.vw-calc(30);

+        top: utils.vw-calc(-35);

+        padding-right: utils.vw-calc(20);

+        letter-spacing: utils.vw-calc(6);

+        width: utils.vw-calc(476);

+        height: utils.vw-calc(104);

+        line-height: utils.vw-calc(120);

+        font-size: utils.vw-calc(30);

+      }

+      &__img {

+        top: utils.vw-calc(118);

+        left: utils.vw-calc(67);

+        width: utils.vw-calc(456);

+      }

+      &-inner {

+        top: utils.vw-calc(465);

+        right: utils.vw-calc(50);

+        width: utils.vw-calc(458);

+        line-height: utils.vw-calc(40);

+        z-index: 4;

+

+        div {

+          margin-top: utils.vw-calc(30);

+        }

+      }

+      &::after {

+        left: utils.vw-calc(-78);

+        bottom: utils.vw-calc(-60);

+        width: utils.vw-calc(269);

+        height: utils.vw-calc(354);

+      }

+      &::before {

+        right: utils.vw-calc(-13);

+        bottom: utils.vw-calc(-29);

+        width: utils.vw-calc(132);

+        height: utils.vw-calc(112);

+      }

+    }

+  }

+

+  .toggle-btn {

+    width: utils.vw-calc(78);

+    height: utils.vw-calc(80);

+

+    &.left {

+      left: utils.vw-calc(-60);

+    }

+    &.right {

+      right: utils.vw-calc(-60);

+    }

+  }

+}

+ 68 - 0
src/views/Chapter4/index.vue
Ver arquivo 

@@ -0,0 +1,68 @@
 
+<template>

+  <div class="chapter4">

+    <div class="chapter4-wrap">

+      <img

+        class="chapter4__title"

+        draggable="false"

+        src="@/views/Index/components/Chapter4/images/title.png"

+      />

+

+      <div class="chapter4-card">

+        <h2>{{ detail?.name.split(" ")[0] }}</h2>

+

+        <img class="chapter4-card__img" :src="detail?.imgs[0]" />

+

+        <div class="chapter4-card-inner">

+          <p>{{ detail?.name }}</p>

+          <p>{{ detail?.type }}</p>

+          <div v-html="detail?.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" />

+  </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.jpg";

+

+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.chapter4.list[route.params.type].list[idx.value];

+});

+

+const toggleDetail = (step) => {

+  const length = data.chapter4.list[route.params.type].list.length - 1;

+

+  idx.value = Math.min(Math.max(idx.value + step, 0), length);

+  detail.value = data.chapter4.list[route.params.type].list[idx.value];

+  router.replace({ name: "chapter4", params: { index: idx.value } });

+};

+</script>

+

+<style lang="scss" scoped>

+@use "./index.scss";

+</style>

+ 14 - 4
src/views/Index/components/Chapter2/index.vue
Ver arquivo 

@@ -17,7 +17,17 @@
 
       </div>

 

       <div class="chapter2-list">

-        <div v-for="item in CHAPTER2_LIST" :key="item.id" class="chapter2-item">

+        <div

+          v-for="item in CHAPTER2_LIST"

+          :key="item.id"

+          class="chapter2-item"

+          @click="

+            $router.push({

+              name: 'chapter2',

+              params: { type: item.id, index: 0 },

+            })

+          "

+        >

           <span>{{ item.name }}</span>

           <div class="chapter2-item__btn" />

 

@@ -45,17 +55,17 @@ const { isMobile } = useMobile();
 
 

 const CHAPTER2_LIST = [

   {

-    id: 0,

+    id: 1,

     name: "游禽类",

     bg: Img1,

   },

   {

-    id: 1,

+    id: 2,

     name: "鸣禽类",

     bg: Img2,

   },

   {

-    id: 2,

+    id: 0,

     name: "涉禽类",

     bg: Img3,

   },

+ 11 - 2
src/views/Index/components/Chapter3/index.scss
Ver arquivo 

@@ -119,11 +119,20 @@
 
         right: utils.vw-calc(45);

         bottom: utils.vw-calc(30);

         font-size: utils.vw-calc(24);

+        z-index: 2;

       }

       &__cover {

-        padding: 0 utils.vw-calc(40);

-        font-size: utils.vw-calc(28);

+        align-items: start;

+        padding: utils.vw-calc(30) 0 utils.vw-calc(100);

+        font-size: utils.vw-calc(24);

         line-height: utils.vw-calc(40);

+        opacity: 1;

+

+        p {

+          padding: 0 utils.vw-calc(40);

+          height: 100%;

+          overflow: auto;

+        }

       }

     }

   }

+ 27 - 3
src/views/Index/components/Chapter3/index.vue
Ver arquivo 

@@ -12,14 +12,27 @@
 
           v-for="(item, index) in data.chapter3.list"

           :key="index"

           class="chapter3-item"

+          @click="

+            () => {

+              if (isMobile) {

+                showDescriptionIndex = index;

+                return;

+              }

+              goToDetail(index);

+            }

+          "

         >

-          <div class="chapter3-item__footer">

+          <div class="chapter3-item__footer" @click="goToDetail(index)">

             <span>{{ item.name }}</span>

             <span class="more">查看更多</span>

           </div>

 

-          <div class="chapter3-item__cover">

-            {{ item.description }}

+          <div

+            v-if="!isMobile || showDescriptionIndex === index"

+            class="chapter3-item__cover"

+            @click="goToDetail(index)"

+          >

+            <p>{{ item.description }}</p>

           </div>

         </li>

       </ul>

@@ -30,12 +43,23 @@
 
 </template>

 

 <script setup>

+import { ref } from "vue";

 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";

+import { useRouter } from "vue-router";

 

 const { isMobile } = useMobile();

+const router = useRouter();

+const showDescriptionIndex = ref(-1);

+

+const goToDetail = (index) => {

+  router.push({

+    name: "chapter3",

+    params: { type: index, index: 0 },

+  });

+};

 </script>

 

 <style lang="scss" scoped>

+ 10 - 2
src/views/Index/components/Chapter4/index.vue
Ver arquivo 

@@ -3,7 +3,15 @@
 
     <div class="chapter4-wrap">

       <img class="chapter4__title" draggable="false" src="./images/title.png" />

 

-      <div class="chapter4-card">

+      <div

+        class="chapter4-card"

+        @click="

+          $router.push({

+            name: 'chapter4',

+            params: { type: currentTab, index: 0 },

+          })

+        "

+      >

         <div class="chapter4-card-nav">

           <div

             v-for="(item, index) in LIST"

@@ -12,7 +20,7 @@
 
               'chapter4-card-nav__item',

               { active: index === currentTab },

             ]"

-            @click="currentTab = index"

+            @click.stop="currentTab = index"

           >

             {{ item.title }}

           </div>

+ 5 - 2
src/views/Index/index.vue
Ver arquivo 

@@ -12,6 +12,7 @@
 
 <script setup>

 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";

@@ -20,16 +21,18 @@ import Chapter4 from "./components/Chapter4/index.vue";
 
 import Epilogue from "./components/Epilogue/index.vue";

 

 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([]);

 

 onMounted(() => {

   const height = [];

 

-  BG_HEIGHT.forEach((h) =>

+  (isMobile.value ? MOBILE_BG_HEIGHT : BG_HEIGHT).forEach((h) =>

     height.push(

-      (Math.round((h / 1920) * 1000) / 1000) *

+      (Math.round((h / (isMobile.value ? 750 : 1920)) * 1000) / 1000) *

         document.documentElement.clientWidth

     )

   );

+ 4 - 0
vite.config.js
Ver arquivo 

@@ -6,7 +6,11 @@ import vue from "@vitejs/plugin-vue";
 
 
 // https://vite.dev/config/
 
 export default defineConfig({
 
+  base: "./",
 
   plugins: [vue()],
 
+  server: {
 
+    host: "0.0.0.0",
 
+  },
 
   // css: {
 
   //   postcss: {
 
   //     plugins: [