feat: --

packages/base/src/constants.js

@@ -254,7 +254,7 @@ export const ANTIQUE_THREE = [
       },
       {
         label: "皮鞋（50年代）",
-        thumb: "/base/images/07-皮鞋（50年代）-右.jpg",
+        thumb: "/base/images/07-皮鞋（50年代）.jpg",
         link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy07",
         desc: "中华人民共和国韩练成将军皮鞋",
       },
@@ -296,7 +296,7 @@ export const ANTIQUE_THREE = [
       },
       {
         label: "单兴忠烈士挽联",
-        thumb: "/base/images/14-单兴忠烈士挽联jpg",
+        thumb: "/base/images/14-单兴忠烈士挽联.jpg",
         link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy14",
         desc: "单兴忠烈士挽联",
       },
@@ -312,7 +312,7 @@ export const ANTIQUE_TWO = [
       {
         label: "《对韩练成同志的甄别结论》",
         thumb: "/base/images/《对韩练成同志的甄别结论》-1.jpg",
-        imgs: ["/base/images/《对韩练成同志的甄别结论》.JPG"],
+        imgs: ["/base/images/《对韩练成同志的甄别结论》.jpg"],
         desc: "《对韩练成同志的甄别结论》",
       },
       {
@@ -320,8 +320,10 @@ export const ANTIQUE_TWO = [
           "1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀",
         thumb:
           "/base/images/1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀-1.jpg",
-        imgs: ["/base/images/xxx"],
-        desc: "1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀.jpg",
+        imgs: [
+          "/base/images/1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀.jpg",
+        ],
+        desc: "1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀",
       },
       {
         label: "1949年12月2日人民政府任命通知书",
@@ -413,62 +415,48 @@ export const ANTIQUE_TWO = [
 ];
 
 export const AUDIOS = [
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
+  // {
+  //   label: "这是一段音频",
+  //   content:
+  //     "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
+  //   thumb: "/base/xxxxx",
+  //   src: "/base/audios/xxxx",
+  // },
 ];
 
 export const VIDEOS = [
   {
     label: "隐形将军韩练成",
     content: "隐形将军韩练成",
-    thumb: "/base/videos",
+    thumb: "/base/images/videos/1.png",
     src: "/base/videos/隐形将军韩练成.mp4",
   },
   {
     label: "《身边的红色印记》 单家集",
     content: "《身边的红色印记》 单家集",
-    thumb: "/base/videos",
+    thumb: "/base/images/videos/2.png",
     src: "/base/videos/《身边的红色印记》 单家集.mp4",
   },
   {
     label: "《身边的红色印记》 六盘山",
     content: "《身边的红色印记》 六盘山",
-    thumb: "/base/videos",
+    thumb: "/base/images/videos/2.png",
     src: "/base/videos/《身边的红色印记》 六盘山.mp4",
   },
 ];
 
 export const IMAGES = [
-  {
-    label: "这是一张图片",
-    thumb: "/base/xxxxx",
-    imgs: ["/base/Images/xxxx"],
-  },
+  // {
+  //   label: "这是一张图片",
+  //   thumb: "/base/xxxxx",
+  //   imgs: ["/base/Images/xxxx"],
+  // },
 ];
 
 export const DOCS = [
-  {
-    label: "这是一个文献",
-    thumb: "/base/xxxxx",
-    src: "/base/docs/xxxx",
-  },
+  // {
+  //   label: "这是一个文献",
+  //   thumb: "/base/xxxxx",
+  //   src: "/base/docs/xxxx",
+  // },
 ];

packages/mobile/src/components/DetailPopup.vue

@@ -78,6 +78,7 @@ const show = computed({
   height: 100%;
 
   h3 {
+    padding-bottom: 20px;
     font-size: utils.vh-calc(32);
     font-weight: bold;
     color: #fcd97e;

packages/mobile/src/components/VideoPopup.vue

@@ -4,7 +4,7 @@
     :close-on-click-overlay="false"
     class="video-popup"
   >
-    <video controls autoplay :src="STATIC_URL + src" />
+    <video v-if="show" controls autoplay :src="STATIC_URL + src" />
 
     <img
       class="video-popup__close"

packages/mobile/src/views/History/index.scss

@@ -4,6 +4,11 @@
   overflow-y: auto;
   background: url("./images/bg2-min.jpg") no-repeat center / cover;
 
+  .empty {
+    padding: 300px 0;
+    text-align: center;
+    color: #999;
+  }
   &-back {
     position: absolute;
     top: 30px;

packages/mobile/src/views/History/index.vue

@@ -32,13 +32,15 @@
         </ul>
       </panel>
 
-      <panel v-else title="图片">
-        <ul class="image">
+      <panel v-else :title="TABS[activeTab].title">
+        <!-- <ul class="image">
           <li v-for="item in 10" :key="item" @click="detailVisible = true">
             <van-image src="" />
             <p class="limit-line">一级解放勋章</p>
           </li>
-        </ul>
+        </ul> -->
+
+        <p class="empty">暂无数据</p>
       </panel>
     </div>
   </div>
@@ -67,21 +69,25 @@ const TABS = [
     id: 0,
     img: Tab1Icon,
     img2: Tab1ActIcon,
+    title: "视频",
   },
   {
     id: 1,
     img: Tab2Icon,
     img2: Tab2ActIcon,
+    title: "图片",
   },
   {
     id: 2,
     img: Tab3Icon,
     img2: Tab3ActIcon,
+    title: "音频",
   },
   {
     id: 3,
     img: Tab4Icon,
     img2: Tab4ActIcon,
+    title: "文献",
   },
 ];
 

packages/pc/package.json

@@ -17,6 +17,7 @@
     "element-plus": "^2.9.0",
     "pinia": "^2.2.6",
     "postcss-px-to-viewport": "^1.1.1",
+    "smooth-signature": "^1.1.0",
     "swiper": "^11.1.15",
     "vue": "^3.5.13",
     "vue-qrcode": "^2.2.2",

packages/pc/src/router/index.js

@@ -33,6 +33,26 @@ const router = createRouter({
       name: "story",
       component: () => import("../views/Story/index.vue"),
     },
+    {
+      path: "/step/1/detail",
+      name: "step1Detail",
+      component: () => import("../views/Step1Detail/index.vue"),
+    },
+    {
+      path: "/step/3/detail",
+      name: "step3Detail",
+      component: () => import("../views/Step3Detail/index.vue"),
+    },
+    {
+      path: "/step/4/detail",
+      name: "step4Detail",
+      component: () => import("../views/Step4Detail/index.vue"),
+    },
+    {
+      path: "/biographies",
+      name: "biographies",
+      component: () => import("../views/Biographies/index.vue"),
+    },
   ],
 });
 

packages/pc/src/views/Biographies/index.scss

@@ -0,0 +1,84 @@
+@use "@/assets/utils.scss";
+
+.biographies {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  overflow: hidden;
+
+  &__close {
+    position: absolute;
+    top: utils.vh-calc(28);
+    left: utils.vw-calc(31);
+    width: utils.vw-calc(38);
+    height: utils.vw-calc(38);
+    cursor: pointer;
+    background: url("@/assets/images/back-min.png") no-repeat center / contain;
+    z-index: 9;
+  }
+  .sidebar {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 26px;
+    padding-top: 80px;
+    width: 455px;
+    height: 100%;
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.4);
+    background: url("./images/sidebar-bg-min.png") no-repeat center / cover;
+    z-index: 1;
+
+    img {
+      width: 399px;
+      height: 147px;
+    }
+    .menus {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 269px;
+      height: 401px;
+      background: url("./images/menu-bg-min.png") no-repeat center / contain;
+
+      li {
+        position: relative;
+        height: 54px;
+        line-height: 54px;
+        text-align: center;
+        font-size: 20px;
+        color: #fcd97e;
+        font-weight: bold;
+        cursor: pointer;
+
+        &:hover {
+          color: white;
+        }
+        &.active {
+          color: white;
+
+          span {
+            position: relative;
+            z-index: 1;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            left: -8px;
+            top: 50%;
+            right: -8px;
+            height: 66px;
+            background: url("./images/menu-hover-min.png") no-repeat center /
+              cover;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
+  }
+  .container {
+    position: relative;
+    flex: 1;
+    height: 100%;
+  }
+}

packages/pc/src/views/Biographies/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="biographies">
+    <i class="biographies__close" @click="$router.back" />
+
+    <div class="sidebar">
+      <img draggable="false" src="./images/title-min.png" />
+
+      <ul class="menus">
+        <li
+          v-for="(item, i) in MENUS"
+          :key="item.title"
+          :class="{ active: i === menuIndex }"
+          @click="menuIndex = i"
+        >
+          <span>{{ item.title }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="container">
+      <component :is="MENUS[menuIndex].comp" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Unit1 from "./unit1.vue";
+import Unit2 from "./unit2.vue";
+import Unit3 from "./unit3.vue";
+import Unit4 from "./unit4.vue";
+import Unit5 from "./unit5.vue";
+import Unit6 from "./unit6.vue";
+
+const MENUS = [
+  {
+    title: "前言",
+    comp: Unit1,
+  },
+  {
+    title: "少年从戎 历寻正道",
+    comp: Unit2,
+  },
+  {
+    title: "隐身敌营 屡建奇功",
+    comp: Unit3,
+  },
+  {
+    title: "淡泊名利 坚守信仰",
+    comp: Unit4,
+  },
+  {
+    title: "劲节长青 亲情永志",
+    comp: Unit5,
+  },
+  {
+    title: "结束语",
+    comp: Unit6,
+  },
+];
+const menuIndex = ref(0);
+</script>
+
+<style lang="scss" scoped>
+@use "./index.scss";
+</style>

packages/pc/src/views/Biographies/unit5.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-scrollbar class="unit5">
+    <div class="wrap">
+      <h3>劲节长青 亲情永志</h3>
+
+      <div class="one">
+        <div class="img">
+          <el-image
+            :src="Img37"
+            preview-teleported
+            :preview-src-list="[Img37]"
+          />
+          <p class="desc">图：1931年的汪萍</p>
+        </div>
+        <div class="right">
+          <p>
+            1931 年夏，韩练成与山东省青岛女子职业学校教员汪萍结婚。他们共生育 7
+            个孩子，其中 3 个夭折。
+          </p>
+          <p>
+            1948
+            年底，韩练成只身撤离国民党统治区后，汪萍一人带着孩子们留在南京。后经组织安排，由香港辗转回到解放区。
+          </p>
+          <p>
+            汪萍和韩练成结婚后，没有继续教书，也没有担任过公职，于1969
+            年冬病逝。1982 年，韩练成与广玉清再婚，无子。
+          </p>
+        </div>
+      </div>
+
+      <div class="two">
+        <div class="left">
+          <div class="box">
+            <div class="box-item">
+              <el-image
+                :src="Img38"
+                preview-teleported
+                :preview-src-list="[Img38]"
+              />
+              <p class="desc">图：1956 年，左起：韩兢、韩蓉、韩斗、韩英</p>
+            </div>
+            <div class="box-item">
+              <el-image
+                :src="Img39"
+                preview-teleported
+                :preview-src-list="[Img39]"
+              />
+              <p class="desc">图：韩练成将军家庭生活照</p>
+            </div>
+          </div>
+          <div class="box2">
+            <el-image
+              :src="Img40"
+              preview-teleported
+              :preview-src-list="[Img39]"
+            />
+            <p class="desc">图：1999 年 5 月， 韩兢看望习仲勋老前辈</p>
+            <p class="desc">
+              图：2000 年 1 月，韩兢夫妇（左右）看望罗长青夫妇（中间）
+            </p>
+            <p class="desc">
+              图：2008 年 7 月，韩兢看望李克农之子李力（中）、李伦
+            </p>
+          </div>
+
+          <el-image
+            :src="Img41"
+            preview-teleported
+            :preview-src-list="[Img41]"
+          />
+          <p class="desc" style="text-align: left">
+            图：2008年11月，韩兢全家和周恩来的侄子、侄女。<br />
+            前排左起：周秉宜、韩兢、周秉德、周秉华；后排左起：周秉建之子、周秉建、周秉和、韩兢之妻孔
+            汀宁、韩兢之女蕃璠、周秉华之妻
+          </p>
+        </div>
+        <div class="right">
+          <p>韩练成诗歌</p>
+          <p>莱芜战役后赠陈毅将军</p>
+          <p>下民之子好心肠，解把战场作道场。</p>
+          <p>前代史无今战例，后人难写此篇章。</p>
+          <p>高谋一着潜渊府，决战连年见远方。</p>
+          <p>我欲贺君君贺我，辉煌战果赖中央。</p>
+          <p>周恩来总理挽词</p>
+          <p>（一）</p>
+          <p>十年憔悴志雄才，望治生民抱怨哀。</p>
+          <p>此去安危谁据仗，几分天下费思猜。</p>
+          <p>匡时无力沉悲痛，医世何人继往来。</p>
+          <p>奠枕梦添忧国泪，神州剩有未消灾。</p>
+          <p>（二）</p>
+          <p>当年结识风尘际，正是民忧水火深。</p>
+          <p>指点迷途归大道，相携同党见知音。</p>
+          <p>而今直失先生面，终古难忘后死心。</p>
+          <p>风雨鸡鸣增百感，潸潸泪下满衣襟。</p>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import Img37 from "./images/37-min.jpg";
+import Img38 from "./images/38-min.jpg";
+import Img39 from "./images/39-min.jpg";
+import Img40 from "./images/40-min.jpg";
+import Img41 from "./images/41-min.jpg";
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/utils.scss";
+
+.unit5 {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  font-size: 18px;
+  line-height: 34px;
+  color: #161616;
+  background: url("./images/bg5-min.jpg") no-repeat center / cover;
+
+  .wrap {
+    position: relative;
+    padding: 20px 200px 20px;
+    z-index: 1;
+
+    > p {
+      margin-bottom: 20px;
+    }
+  }
+  h3 {
+    margin-bottom: 55px;
+    text-align: center;
+    font-size: 36px;
+    line-height: 50px;
+  }
+  .el-image {
+    display: block;
+    height: auto;
+  }
+  :deep(.swiper-pagination) {
+    --swiper-pagination-bottom: -10px;
+    --swiper-pagination-bullet-size: 8px;
+  }
+  .desc {
+    padding: 10px 0 20px;
+    text-align: center;
+    line-height: 16px;
+    font-size: 12px;
+    opacity: 0.6;
+  }
+  .one {
+    display: flex;
+    gap: 30px;
+
+    .img {
+      .el-image {
+        margin: 0 45px;
+        width: 253px;
+        height: 274px;
+      }
+    }
+    .right {
+      flex: 1;
+      padding-right: 30px;
+
+      p {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .two {
+    display: flex;
+    gap: 50px;
+
+    .left {
+      flex: 0 0 549px;
+    }
+    .right {
+      padding-top: 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 492px;
+      height: 828px;
+      font-size: 18px;
+      color: #610415;
+      font-weight: bold;
+      background: url("./images/bg5-2-min.jpg") no-repeat center / cover;
+
+      *:nth-child(6),
+      *:nth-child(12) {
+        margin-bottom: 50px;
+      }
+    }
+  }
+  .box {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+
+    &-item {
+      flex: 1;
+    }
+  }
+  .box2 {
+    position: relative;
+    margin: 20px 0 30px;
+    padding-bottom: 40px;
+
+    p {
+      position: absolute;
+      padding: 0;
+      width: 180px;
+      text-align: left;
+
+      &:nth-child(2) {
+        left: 0;
+        bottom: 0;
+      }
+      &:nth-child(3) {
+        left: 185px;
+        bottom: 0;
+      }
+      &:nth-child(4) {
+        left: 369px;
+        bottom: 0;
+      }
+    }
+  }
+}
+</style>

packages/pc/src/views/Biographies/unit6.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="unit6">
+    <div class="wrap">
+      <p class="title">劲节长青 亲情永志</p>
+
+      <p>追忆先烈 ，隐蔽战线建奇功 ；缅怀英雄，大智大勇求光明。</p>
+      <p>
+        将军英名，彪炳史册。无私无畏，勇于献身的革命精神激励后人
+        ，呼唤来者，人民不会忘记他为中国人民解放事业做出的贡献。
+      </p>
+      <p>
+        今天，一代又一代的六盘儿女正继承先烈遗志 ，大力弘扬“ 不到长城非好汉
+        ”的六盘山精神，团结奋进，自强不息，百折不挠，勇攀高峰，为建设美好新家园而努力奋斗！
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/assets/utils.scss";
+
+.unit6 {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  background: url("./images/bg6-min.jpg") no-repeat left bottom / cover;
+
+  .wrap {
+    margin: 247px 0 0 581px;
+    width: 684px;
+
+    .title {
+      margin-bottom: 50px;
+      font-size: 36px;
+      line-height: 50px;
+      font-weight: bold;
+    }
+    p {
+      margin-bottom: 20px;
+      line-height: 34px;
+    }
+  }
+}
+</style>

packages/pc/src/views/History/components/Audio.vue

@@ -13,6 +13,8 @@
         </div>
       </li>
     </ul>
+
+    <p v-if="!AUDIOS.length" class="empty">暂无数据</p>
   </Panel>
 </template>
 
@@ -24,6 +26,11 @@ import { AUDIOS } from "@guyuan/base";
 <style lang="scss" scoped>
 @use "@/assets/utils.scss";
 
+.empty {
+  padding: 100px 0;
+  text-align: center;
+  color: #999;
+}
 .audio {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

packages/pc/src/views/History/components/Doc.vue

@@ -7,6 +7,8 @@
         <p class="limit-line">{{ item.label }}</p>
       </li>
     </ul>
+
+    <p v-if="!DOCS.length" class="empty">暂无数据</p>
   </Panel>
 </template>
 
@@ -18,6 +20,11 @@ import { DOCS } from "@guyuan/base";
 <style lang="scss" scoped>
 @use "@/assets/utils.scss";
 
+.empty {
+  padding: 100px 0;
+  text-align: center;
+  color: #999;
+}
 .doc {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

packages/pc/src/views/History/components/Image.vue

@@ -1,23 +1,30 @@
 <template>
   <Panel title="图片">
     <ul class="image">
-      <li v-for="(item, index) in VIDEOS" :key="index" class="image-item">
+      <li v-for="(item, index) in IMAGES" :key="index" class="image-item">
         <el-image :src="item.thumb" />
 
         <p class="limit-line">{{ item.label }}</p>
       </li>
     </ul>
+
+    <p v-if="!IMAGES.length" class="empty">暂无数据</p>
   </Panel>
 </template>
 
 <script setup>
 import Panel from "./Panel.vue";
-import { VIDEOS } from "@guyuan/base";
+import { IMAGES } from "@guyuan/base";
 </script>
 
 <style lang="scss" scoped>
 @use "@/assets/utils.scss";
 
+.empty {
+  padding: 100px 0;
+  text-align: center;
+  color: #999;
+}
 .image {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

packages/pc/src/views/History/index.vue

@@ -12,7 +12,10 @@
     </div>
 
     <div class="history-main" ref="mainRef">
-      <!-- <AudioPanel /> -->
+      <div class="audio-panel" ref="audioPanel">
+        <AudioPanel />
+      </div>
+
       <div class="history-panel" ref="videoPanel">
         <VideoPanel />
       </div>
@@ -20,8 +23,10 @@
       <div class="history-panel" ref="imagePanel">
         <ImagePanel />
       </div>
-      <!-- <DocPanel /> -->
-      <div style="height: 100vh" />
+
+      <div class="history-panel" ref="docPanel">
+        <DocPanel />
+      </div>
     </div>
   </div>
 </template>
@@ -33,14 +38,21 @@ import VideoPanel from "./components/Video.vue";
 import ImagePanel from "./components/Image.vue";
 import DocPanel from "./components/Doc.vue";
 
-const TABS = ["video", "image"];
+const TABS = ["audio", "video", "image", "doc"];
 const tabIndex = ref(0);
 
 const mainRef = ref(null);
+const audioPanel = ref(null);
 const videoPanel = ref(null);
 const imagePanel = ref(null);
-
-const panelEls = () => [videoPanel.value, imagePanel.value];
+const docPanel = ref(null);
+
+const panelEls = () => [
+  audioPanel.value,
+  videoPanel.value,
+  imagePanel.value,
+  docPanel.value,
+];
 
 function scrollToPanel(index) {
   const el = panelEls()[index];

packages/pc/src/views/Home/components/Biographies/index.vue

@@ -16,7 +16,9 @@
         名利，“要党员，不要上将”，为建设 新中国默默奉献，始终保持共产党
         员的本色。 他被称为“隐形将军”。
       </p>
-      <el-button type="primary">进入</el-button>
+      <el-button type="primary" @click="$router.push({ name: 'biographies' })"
+        >进入</el-button
+      >
     </div>
   </div>
 </template>

packages/pc/src/views/Home/constants.js

@@ -23,7 +23,7 @@ export const MIMAGES = [
   {
     default: M1Img,
     active: M1ActImg,
-    href: "https://houseoss.4dkankan.com/project/guyuan/scene/index.html?m=SG-IDyBc0bleFF",
+    href: "https://houseoss.4dkankan.com/project/guyuan/scene/index.html?m=SG-H7glLFFd4dn",
   },
   {
     default: M2Img,

packages/pc/src/views/Home/index.scss

@@ -202,6 +202,12 @@
       background: url("./images/card-bg-min.png") no-repeat center / contain;
       z-index: -1;
 
+      &.has-btn {
+        .point-popup-scrollbar {
+          top: calc(50% - utils.vh-calc(20));
+          height: utils.vh-calc(100);
+        }
+      }
       &__title {
         display: block !important;
         position: absolute;
@@ -220,6 +226,22 @@
         line-height: utils.vh-calc(28);
         text-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);
       }
+      &__btn {
+        position: absolute;
+        left: utils.vh-calc(126);
+        bottom: utils.vh-calc(15);
+        width: utils.vh-calc(135);
+        height: utils.vh-calc(42);
+        line-height: utils.vh-calc(36);
+        text-align: center;
+        font-size: utils.vh-calc(15);
+        color: #ffffff;
+        font-weight: bold;
+        cursor: pointer;
+        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6);
+        background: url("@/assets/images/btn-bg-min.png") no-repeat center /
+          contain;
+      }
     }
   }
 }

packages/pc/src/views/Home/index.vue

@@ -26,7 +26,11 @@
         <img :src="item.img2" />
 
         <transition name="slide-fade">
-          <div v-if="pIndex === index" class="point-popup">
+          <div
+            v-if="pIndex === index"
+            class="point-popup"
+            :class="{ 'has-btn': index === 2 || index === 0 || index === 3 }"
+          >
             <img class="point-popup__title" :src="POINTS[pIndex].img" />
             <el-scrollbar scroll-y class="point-popup-scrollbar">
               <div
@@ -34,6 +38,28 @@
                 v-html="POINTS[pIndex].content"
               />
             </el-scrollbar>
+
+            <div
+              v-if="index === 3"
+              class="point-popup__btn"
+              @click="$router.push({ name: 'step4Detail' })"
+            >
+              小岔沟
+            </div>
+            <div
+              v-if="index === 2"
+              class="point-popup__btn"
+              @click="$router.push({ name: 'step3Detail' })"
+            >
+              青石嘴战役
+            </div>
+            <div
+              v-if="index === 0"
+              class="point-popup__btn"
+              @click="$router.push({ name: 'step1Detail' })"
+            >
+              单家集的灯火
+            </div>
           </div>
         </transition>
       </div>

packages/pc/src/views/Step1Detail/index.scss

@@ -0,0 +1,86 @@
+@use "@/assets/utils.scss";
+
+.step1-detail {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: url("./images/bg-min.jpg") no-repeat center / cover;
+
+  &__close {
+    position: absolute;
+    top: utils.vh-calc(28);
+    left: utils.vw-calc(31);
+    width: utils.vw-calc(38);
+    height: utils.vw-calc(38);
+    cursor: pointer;
+    background: url("@/assets/images/back-min.png") no-repeat center / contain;
+  }
+  &__title {
+    width: utils.vh-calc(166);
+    height: utils.vh-calc(31);
+  }
+  &-content {
+    position: relative;
+    margin-top: utils.vh-calc(30);
+    width: utils.vh-calc(1039);
+    height: utils.vh-calc(653);
+    background: url("./images/box-bg-min.png") no-repeat center / cover;
+
+    .img {
+      position: absolute;
+      top: utils.vh-calc(69);
+      left: 50%;
+      width: utils.vh-calc(857);
+      height: utils.vh-calc(481);
+      transform: translateX(-50%);
+    }
+    .point {
+      position: absolute;
+      top: utils.vh-calc(213);
+      left: utils.vh-calc(498);
+      width: utils.vh-calc(139);
+      height: utils.vh-calc(65);
+      cursor: pointer;
+      animation: step4-point-breath 1.4s ease-in-out infinite;
+    }
+  }
+  &-text {
+    margin-top: utils.vh-calc(20);
+    width: utils.vh-calc(870);
+    min-height: utils.vh-calc(220);
+    font-size: utils.vh-calc(18);
+    color: white;
+    line-height: utils.vh-calc(28);
+    white-space: pre-wrap;
+    transition: opacity 0.6s ease;
+  }
+}
+
+@keyframes step4-point-breath {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.6s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}