diff --git a/README.md b/README.md
index 5867c59..a609e00 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
 # EpicSoul
-
diff --git a/manifest.json b/manifest.json
index 72a4987..fd77f6a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name" : "EpicSoul",
-    "appid" : "__UNI__14D5937",
+    "appid" : "__UNI__3D606DD",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
diff --git a/pig/chapter1/chapter1.vue b/pig/chapter1/chapter1.vue
index 58345e6..9945e6d 100644
--- a/pig/chapter1/chapter1.vue
+++ b/pig/chapter1/chapter1.vue
@@ -16,7 +16,7 @@
               class="bg-image"
               :src="
                 showImg(
-                  '/uploads/20250802/e2e3e00841d713937d938ae45835d016.png'
+                  '/uploads/20250806/85e0256e5a5c8014c7ec2f321805fc8c.png'
                 )
               "
               :lazy-load="true"
@@ -80,7 +80,7 @@
           <image
             style="width: 100%; height: 100%"
             :src="
-              showImg('/uploads/20250802/dee49f1aa510d85c368aafc889e24cc0.png')
+              showImg('/uploads/20250804/d2a7c31d03d3ade96ae6a9abefb78869.png')
             "
             mode="aspectFill"
           ></image>
@@ -101,14 +101,21 @@
         </view>
       </swiper-item>
     </swiper>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="4" />
+	<MusicControl />
   </view>
 </template>
 
 <script>
 import TitleHeader from "@/components/TitleHeader.vue";
+import SideNav from "../components/SideNav.vue";
+import MusicControl from "@/components/MusicControl.vue";
 export default {
   components: {
     TitleHeader,
+    SideNav,
+	MusicControl
   },
   data() {
     return {
diff --git a/pig/chapter2/chapter2.vue b/pig/chapter2/chapter2.vue
index 165e061..e781848 100644
--- a/pig/chapter2/chapter2.vue
+++ b/pig/chapter2/chapter2.vue
@@ -118,14 +118,20 @@
         </view>
       </swiper-item>
     </swiper>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="5" />
+	<MusicControl></MusicControl>
   </view>
 </template>
 
 <script>
 import TitleHeader from "@/components/TitleHeader.vue";
+import SideNav from "../components/SideNav.vue";
+import MusicControl from "@/components/MusicControl.vue";
 export default {
   components: {
     TitleHeader,
+    SideNav,MusicControl
   },
   data() {
     return {
diff --git a/pig/chapter3/art.vue b/pig/chapter3/art.vue
index 0688a1a..7580eb5 100644
--- a/pig/chapter3/art.vue
+++ b/pig/chapter3/art.vue
@@ -14,10 +14,16 @@
           :src="showImg('/uploads/20250802/1f89c03f361dbcfe3f195f1cb14a92d3.png')"
           mode="aspectFill"
         ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {
       
diff --git a/pig/chapter3/brave.vue b/pig/chapter3/brave.vue
index 2501452..95b1df9 100644
--- a/pig/chapter3/brave.vue
+++ b/pig/chapter3/brave.vue
@@ -14,11 +14,17 @@
           :src="showImg('/uploads/20250802/aa1669fbcb9177b4be1c8eed12fb4de0.png')"
           mode="aspectFill"
         ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {
       
diff --git a/pig/chapter3/chapter3.vue b/pig/chapter3/chapter3.vue
index 168ce3b..df50399 100644
--- a/pig/chapter3/chapter3.vue
+++ b/pig/chapter3/chapter3.vue
@@ -155,14 +155,21 @@
 	    </view>
 	  </swiper-item>
     </swiper>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
+	<MusicControl></MusicControl>
   </view>
 </template>
 
 <script>
 import TitleHeader from "@/components/TitleHeader.vue";
+import SideNav from "../components/SideNav.vue";
+import MusicControl from "@/components/MusicControl.vue";
 export default {
   components: {
     TitleHeader,
+    SideNav,
+	MusicControl
   },
   data() {
     return {
diff --git a/pig/chapter3/humble.vue b/pig/chapter3/humble.vue
index ad8894a..823f352 100644
--- a/pig/chapter3/humble.vue
+++ b/pig/chapter3/humble.vue
@@ -14,10 +14,16 @@
           :src="showImg('/uploads/20250802/4acd9c894c2a464100ef21dae4d85652.png')"
           mode="aspectFill"
         ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {
       
diff --git a/pig/chapter3/sacred.vue b/pig/chapter3/sacred.vue
index da7de4a..63da967 100644
--- a/pig/chapter3/sacred.vue
+++ b/pig/chapter3/sacred.vue
@@ -9,27 +9,31 @@
         ></image>
       </view>
     </view>
-        <image
-          class="tag-image"
-          :src="showImg('/uploads/20250802/590d1fc5594c8c2700eaf9e901af2cad.png')"
-          mode="aspectFill"
-        ></image>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/590d1fc5594c8c2700eaf9e901af2cad.png')"
+      mode="aspectFill"
+    ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
-    return {
-      
-    }
+    return {};
   },
   methods: {
     goBack() {
-      uni.navigateBack()
-    }
-  }
-}
+      uni.navigateBack();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -81,4 +85,4 @@ export default {
   color: white;
   line-height: 1.6;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pig/chapter3/smart.vue b/pig/chapter3/smart.vue
index f0724ab..49104bc 100644
--- a/pig/chapter3/smart.vue
+++ b/pig/chapter3/smart.vue
@@ -14,10 +14,16 @@
           :src="showImg('/uploads/20250802/1459fab5f195fa3ed6b17be8591a592d.png')"
           mode="aspectFill"
         ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {
       
diff --git a/pig/chapter3/stupid.vue b/pig/chapter3/stupid.vue
index 410bf22..50902b9 100644
--- a/pig/chapter3/stupid.vue
+++ b/pig/chapter3/stupid.vue
@@ -9,26 +9,30 @@
         ></image>
       </view>
     </view>
-        <image
-          class="tag-image"
-          :src="showImg('/uploads/20250802/c3d19d8a0b35d6acbcfd0a9748806951.png')"
-          mode="aspectFill"
-        ></image>
+    <image
+      class="tag-image"
+      :src="showImg('/uploads/20250802/c3d19d8a0b35d6acbcfd0a9748806951.png')"
+      mode="aspectFill"
+    ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="6" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
-    return {
-      
-    }
+    return {};
   },
   methods: {
     goBack() {
-      uni.navigateBack()
-    }
-  }
-}
+      uni.navigateBack();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -80,4 +84,4 @@ export default {
   color: white;
   line-height: 1.6;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pig/chapter4/chapter4.vue b/pig/chapter4/chapter4.vue
index ffe34af..841ba4a 100644
--- a/pig/chapter4/chapter4.vue
+++ b/pig/chapter4/chapter4.vue
@@ -48,7 +48,7 @@
                 }"
                 :src="
                   showImg(
-                    '/uploads/20250802/70cb6f2efde536bdde781ae387529a5c.png'
+                    '/uploads/20250804/6c06d6b668450c7837970e5f8d3ed0c7.gif'
                   )
                 "
                 :lazy-load="true"
@@ -186,6 +186,20 @@
                 :lazy-load="true"
                 mode="widthFix"
               ></image>
+			  <image
+			    class="layer-img7"
+			    :class="{
+			      hidden: !animationStates[7],
+			      'fade-in': animationStates[7],
+			    }"
+			    :src="
+			      showImg(
+			        '/uploads/20250806/b8aa4923d2994836bee0ebed5dc255a6.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
             </view>
           </template>
         </view>
@@ -233,6 +247,20 @@
                 :lazy-load="true"
                 mode="widthFix"
               ></image>
+			  <image
+			    class="layer-img7"
+			    :class="{
+			      hidden: !animationStates[7],
+			      'fade-in': animationStates[7],
+			    }"
+			    :src="
+			      showImg(
+			        '/uploads/20250806/b8aa4923d2994836bee0ebed5dc255a6.png'
+			      )
+			    "
+			    :lazy-load="true"
+			    mode="widthFix"
+			  ></image>
             </view>
           </template>
         </view>
@@ -367,15 +395,53 @@
           </template>
         </view>
       </swiper-item>
+	  <swiper-item>
+	    <view class="page-container">
+	      <image
+	        style="width: 100%; height: 100%"
+	        :src="
+	          showImg('/uploads/20250802/bb670192ddcc2bf81aad4eb030ca6cbf.png')
+	        "
+	        mode="aspectFill"
+	      ></image>
+	    </view>
+	  </swiper-item>
+	  
+	  <swiper-item>
+	    <view class="page-container home-page">
+	      <template>
+	        <image
+	          class="bg-image"
+	          src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
+	          :lazy-load="true"
+	          mode="aspectFill"
+	        ></image>
+	        <image
+	          class="qrCode-image"
+	          src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
+	          :lazy-load="true"
+	          mode="widthFix"
+	          :show-menu-by-longpress="true"
+	        ></image>
+	      </template>
+	    </view>
+	  </swiper-item>
     </swiper>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
+	<MusicControl></MusicControl>
   </view>
 </template>
 
 <script>
 import TitleHeader from "@/components/TitleHeader.vue";
+import SideNav from "../components/SideNav.vue";
+import MusicControl from "@/components/MusicControl.vue";
 export default {
   components: {
     TitleHeader,
+    SideNav,
+	MusicControl
   },
   data() {
     return {
@@ -495,15 +561,6 @@ export default {
   margin-top: 50rpx;
 }
 
-.layer-img2 {
-  z-index: 2;
-  position: absolute;
-  bottom: 18%;
-  left: 0;
-  width: 100%;
-  height: 350rpx;
-}
-
 .content-layer {
   margin: 130rpx 0;
   width: 100%;
@@ -526,7 +583,7 @@ export default {
   height: 302rpx;
   z-index: 2;
   position: absolute;
-  top: 200rpx;
+  bottom: 0;
   left: 35rpx;
 }
 
@@ -534,10 +591,19 @@ export default {
   z-index: 2;
   width: 530rpx;
   height: 409rpx;
-  bottom: 130rpx;
+  bottom: 230rpx;
   left: 91rpx;
   position: absolute;
 }
+	
+.layer-img7{
+	z-index: 2;
+	width: 530rpx;
+	
+	bottom: 40rpx;
+	left: 91rpx;
+	position: absolute;
+}
 
 .layer-img5 {
   z-index: 2;
@@ -551,7 +617,7 @@ export default {
 .layer-img6 {
   z-index: 2;
   position: absolute;
-  bottom: 163rpx;
+  bottom: 263rpx;
   left: 95rpx;
   width: 261rpx;
   height: 268rpx;
@@ -640,5 +706,13 @@ export default {
   100% {
     opacity: 1;
   }
+}.qrCode-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 192rpx;
+  margin: 0 auto;
+  z-index: 2;
+  width: 30vw;
 }
 </style>
diff --git a/pig/chapter4/first.vue b/pig/chapter4/first.vue
index c7bd40d..b3e65d5 100644
--- a/pig/chapter4/first.vue
+++ b/pig/chapter4/first.vue
@@ -37,10 +37,16 @@
       :src="showImg('/uploads/20250802/bc8c6d0f121669388d93ccf5494c7f47.png')"
       mode="widthFix"
     ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {};
   },
diff --git a/pig/chapter4/fourth.vue b/pig/chapter4/fourth.vue
index c367f38..b7d3a1e 100644
--- a/pig/chapter4/fourth.vue
+++ b/pig/chapter4/fourth.vue
@@ -37,10 +37,16 @@
       :src="showImg('/uploads/20250802/a0c7c45de62ec0d5bd6163b30932e1e3.png')"
       mode="widthFix"
     ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {};
   },
diff --git a/pig/chapter4/secBuy.vue b/pig/chapter4/secBuy.vue
index 14d1762..6622c98 100644
--- a/pig/chapter4/secBuy.vue
+++ b/pig/chapter4/secBuy.vue
@@ -26,6 +26,17 @@
       :src="showImg(imgMap[type].title)"
       mode="widthFix"
     ></image>
+	<image
+	  v-if="type"
+	  style="position: absolute; z-index: 9; bottom: 340rpx"
+	  :style="{
+	    width: imgMap[type].width,
+	    left: imgMap[type].left,
+	  }"
+	  :src="showImg('/uploads/20250806/b8aa4923d2994836bee0ebed5dc255a6.png')"
+	  mode="widthFix"
+	></image>
+	
     <image
       style="
         position: absolute;
@@ -51,10 +62,16 @@
       :src="showImg('/uploads/20250802/b458d05790345ec9ae9a3bea23495b46.png')"
       mode="aspectFill"
     ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {
       type: 1,
diff --git a/pig/chapter4/second.vue b/pig/chapter4/second.vue
index 54a1abb..961db29 100644
--- a/pig/chapter4/second.vue
+++ b/pig/chapter4/second.vue
@@ -37,10 +37,16 @@
       :src="showImg('/uploads/20250802/92779fd82f7c0c0358ca453fd3071e7b.png')"
       mode="widthFix"
     ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {};
   },
diff --git a/pig/chapter4/third.vue b/pig/chapter4/third.vue
index 61effa3..e09929e 100644
--- a/pig/chapter4/third.vue
+++ b/pig/chapter4/third.vue
@@ -37,10 +37,16 @@
       :src="showImg('/uploads/20250802/bc5905a9ddebeb3833429c95b9b0d967.png')"
       mode="widthFix"
     ></image>
+    <!-- 侧边导航组件 -->
+    <SideNav :currentIndex="7" />
   </view>
 </template>
 <script>
+import SideNav from "../components/SideNav.vue";
 export default {
+  components: {
+    SideNav,
+  },
   data() {
     return {};
   },
diff --git a/pig/components/SideNav.vue b/pig/components/SideNav.vue
new file mode 100644
index 0000000..c8a6b99
--- /dev/null
+++ b/pig/components/SideNav.vue
@@ -0,0 +1,251 @@
+<template>
+  <view>
+    <!-- 遮罩层 -->
+    <view class="overlay" v-if="showMenu" @click="closeMenu"></view>
+
+    <!-- 固定导航按钮 -->
+    <view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu">
+      <image
+        class="nav-icon"
+        :class="{ rotated: iconRotated, 'bounce-back': iconBounceBack }"
+        src="https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png"
+        mode="aspectFill"
+      ></image>
+    </view>
+
+    <!-- 侧边导航菜单 -->
+    <view class="nav-menu" :class="{ show: showMenu }">
+      <view
+        class="nav-item"
+        :class="{ 'item-active': isItemActive(item) }"
+        v-for="item in menuItems"
+        :key="item.targetIndex"
+        @click="() => jumpToPage(item.targetIndex)"
+      >
+        <view v-if="item.text.includes('#Chapter')" class="chapter-text">
+          <text class="chapter-title">#Chapter</text>
+          <text :class="{ active: isItemActive(item) }" class="chapter-number">
+            {{ item.text.replace("#Chapter", "") }}
+          </text>
+        </view>
+        <text v-else :class="{ active: isItemActive(item) }">{{
+          item.text
+        }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "SideNav",
+  props: {
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      showMenu: false,
+      iconRotated: false,
+      iconBounceBack: false,
+      menuItems: [
+        {
+          text: "序章",
+          targetIndex: 0,
+          path: "/pig/home/home",
+        },
+        {
+          text: "第一章猪的起源",
+          targetIndex: 4,
+          path: "/pig/chapter1/chapter1",
+        },
+        {
+          text: "第二章驯为良伴",
+          targetIndex: 5,
+          path: "/pig/chapter2/chapter2",
+        },
+        {
+          text: "第三章身份之谜",
+          targetIndex: 6,
+          path: "/pig/chapter3/chapter3",
+        },
+        {
+          text: "第四章 东方之猪",
+          targetIndex: 7,
+          path: "/pig/chapter4/chapter4",
+        },
+      ],
+    };
+  },
+  methods: {
+    showNavMenu() {
+      this.iconRotated = true;
+      setTimeout(() => {
+        this.showMenu = true;
+      }, 300);
+    },
+    closeMenu() {
+      this.showMenu = false;
+      setTimeout(() => {
+        this.iconBounceBack = true;
+        this.iconRotated = false;
+        setTimeout(() => {
+          this.iconBounceBack = false;
+        }, 500);
+      }, 300);
+    },
+    jumpToPage(targetIndex) {
+      const menuItem = this.menuItems.find(
+        (item) => item.targetIndex === targetIndex
+      );
+      if (menuItem) {
+        // 如果有path属性，进行页面跳转
+        if (menuItem.path) {
+          uni.navigateTo({
+            url:
+              menuItem.path +
+              (targetIndex > 0 ? `?targetIndex=${targetIndex}` : ""),
+          });
+        } else {
+          // 否则触发事件让父组件处理
+          this.$emit("navigate", targetIndex);
+        }
+      }
+      this.closeMenu();
+    },
+    isItemActive(item) {
+      return this.currentIndex === item.targetIndex;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+
+.fixed-nav {
+  width: 80rpx;
+  height: 80rpx;
+  background-color: rgb(0 0 0 / 0.7);
+  border-radius: 10rpx 0 0 10rpx;
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.fixed-nav.hidden {
+  transform: translateX(100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.nav-icon {
+  width: 35rpx;
+  height: 35rpx;
+  transition: transform 0.3s ease;
+}
+
+.nav-icon.rotated {
+  transform: rotate(180deg);
+}
+
+.nav-icon.bounce-back {
+  animation: bounceRotation 0.5s ease;
+}
+
+@keyframes bounceRotation {
+  0% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(-20deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.nav-menu {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translate(100%, -50%);
+  z-index: 11;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 16rpx 0 0 16rpx;
+  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.nav-menu.show {
+  transform: translate(0, -50%);
+}
+
+.nav-item {
+  padding: 20rpx;
+  text-align: center;
+
+  text {
+    color: #333;
+    opacity: 0.7;
+    font-size: 28rpx;
+  }
+}
+
+.item-active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.nav-item .active {
+  color: #333;
+  opacity: 1;
+}
+
+.chapter-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.3;
+}
+
+.chapter-title {
+  color: #333;
+  opacity: 0.7;
+  font-size: 24rpx;
+}
+
+.chapter-number {
+  color: #333;
+  opacity: 0.7;
+  font-size: 28rpx;
+  margin-top: 8rpx;
+}
+
+.item-active .chapter-title,
+.item-active .chapter-number.active {
+  opacity: 1;
+}
+</style>
diff --git a/pig/home/home.vue b/pig/home/home.vue
index c8043a4..970860d 100644
--- a/pig/home/home.vue
+++ b/pig/home/home.vue
@@ -16,7 +16,7 @@
               class="bg-image"
               :src="
                 showImg(
-                  '/uploads/20250801/fe2e7779e0c438ea36308390cba55ef1.png'
+                  '/uploads/20250804/1830fb1be82f44d6405d35cebd70b78a.gif'
                 )
               "
               :lazy-load="true"
@@ -43,7 +43,7 @@
         </view>
       </swiper-item>
       <swiper-item>
-        <view class="page-container">
+        <view class="page-container" style="background-color: #EFEFEF;">
           <template v-if="loadedPages[1]">
             <image
               v-show="shouldShowContent(1)"
@@ -54,7 +54,7 @@
                 )
               "
               :lazy-load="true"
-              mode="aspectFill"
+              mode="aspectFit"
             ></image>
           </template>
         </view>
@@ -63,29 +63,12 @@
         <view class="page-container">
           <template v-if="loadedPages[2]">
             <image
-              v-show="shouldShowContent(2)"
-              style="
-                position: absolute;
-                width: 32.67%;
-                height: 4.2%;
-                top: 33.73%;
-                left: 16%;
-                z-index: 9999;
-              "
-              :src="
-                showImg(
-                  '/uploads/20250801/01f02fc938da66f4da5019da6f98a664.png'
-                )
-              "
-              :lazy-load="true"
-              mode="aspectFill"
-            ></image>
-            <image
+              @click="nextIndex"
               v-show="shouldShowContent(2)"
               class="bg-image"
               :src="
                 showImg(
-                  '/uploads/20250801/d4efcdff86a15f7feb28d3662ee055ca.png'
+                  '/uploads/20250804/5e9bdcff219f92fd6bc33444d670b807.png'
                 )
               "
               :lazy-load="true"
@@ -115,14 +98,44 @@
                 style="position: absolute; top: 375rpx; left: 100rpx"
               >
                 <image
-                  style="width: 286rpx"
+                  style="width: 590rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250804/071658650e402f55ac2cbf87cf7ce0e5.png'
+                    )
+                  "
+                  mode="widthFix"
+                  @click="showPopupImage(1)"
+                ></image>
+                <image
+                  style="width: 590rpx; margin-top: 175rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250804/418af80ee3c09def1768da53b5c8760a.png'
+                    )
+                  "
+                  mode="widthFix"
+                  @click="showPopupImage(2)"
+                ></image>
+                <image
+                  style="width: 590rpx; margin-top: 160rpx"
+                  :src="
+                    showImg(
+                      '/uploads/20250804/c82764802f8022eb14d40d222a29fcd3.png'
+                    )
+                  "
+                  mode="widthFix"
+                  @click="showPopupImage(3)"
+                ></image>
+                <image
+                  style="width: 590rpx; margin-top: 160rpx"
                   :src="
                     showImg(
-                      '/uploads/20250802/4eaea258b31e3d7a62a9b2511465261f.png'
+                      '/uploads/20250804/da9b9a28af4dcaac683d9a5af53a7667.png'
                     )
                   "
                   mode="widthFix"
-                  @click="showPopupImage"
+                  @click="showPopupImage(4)"
                 ></image>
               </view>
             </view>
@@ -159,7 +172,7 @@
           <image
             style="width: 100%; height: 100%"
             :src="
-              showImg('/uploads/20250802/dee49f1aa510d85c368aafc889e24cc0.png')
+              showImg('/uploads/20250804/d2a7c31d03d3ade96ae6a9abefb78869.png')
             "
             mode="aspectFill"
           ></image>
@@ -229,37 +242,6 @@
           ></image>
         </view>
       </swiper-item>
-      <swiper-item>
-        <view class="page-container">
-          <image
-            style="width: 100%; height: 100%"
-            :src="
-              showImg('/uploads/20250802/bb670192ddcc2bf81aad4eb030ca6cbf.png')
-            "
-            mode="aspectFill"
-          ></image>
-        </view>
-      </swiper-item>
-
-      <swiper-item>
-        <view class="page-container home-page">
-          <template>
-            <image
-              class="bg-image"
-              src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
-              :lazy-load="true"
-              mode="aspectFill"
-            ></image>
-            <image
-              class="qrCode-image"
-              src="https://static.ticket.sz-trip.com/epicSoul/qrCode.png"
-              :lazy-load="true"
-              mode="widthFix"
-              :show-menu-by-longpress="true"
-            ></image>
-          </template>
-        </view>
-      </swiper-item>
     </swiper>
     <view class="overlay" v-if="showMenu" @click="closeMenu"></view>
     <view class="fixed-nav" :class="{ hidden: showMenu }" @click="showNavMenu">
@@ -302,6 +284,7 @@
       <view class="image-popup-container" @click.stop>
         <image
           class="popup-image"
+          v-if="currentTagImg == 1"
           :src="
             showImg('/uploads/20250802/a2245bbeba155410fd765439a18774f7.png')
           "
@@ -309,6 +292,7 @@
         ></image>
         <image
           class="popup-image"
+          v-if="currentTagImg == 2"
           :src="
             showImg('/uploads/20250802/6a740ec7fc10dd0f6ddcc65faca3b3c8.png')
           "
@@ -316,12 +300,14 @@
         ></image>
         <image
           class="popup-image"
+          v-if="currentTagImg == 3"
           :src="
             showImg('/uploads/20250802/4e89bbb52de311cfae7ef1b59ee2f2c8.png')
           "
           mode="widthFix"
         ></image>
         <image
+          v-if="currentTagImg == 4"
           class="popup-image"
           :src="
             showImg('/uploads/20250802/76b84f3dd91bfebaec35aadc086410b8.png')
@@ -353,6 +339,7 @@ export default {
   },
   data() {
     return {
+      currentTagImg: 1,
       currentIndex: 0,
       loadedPages: {
         0: false,
@@ -387,23 +374,23 @@ export default {
       showImagePopup: false,
       menuItems: [
         {
-          text: "Intro序曲",
+          text: "序章",
           targetIndex: 0,
         },
         {
-          text: "#Chapter 壹",
+          text: "第一章猪的起源",
           targetIndex: 4,
         },
         {
-          text: "#Chapter 贰",
+          text: "第二章驯为良伴",
           targetIndex: 5,
         },
         {
-          text: "#Chapter 叁",
+          text: "第三章身份之谜",
           targetIndex: 6,
         },
         {
-          text: "#Chapter 肆",
+          text: "第四章 东方之猪",
           targetIndex: 7,
         },
         // {
@@ -439,6 +426,10 @@ export default {
     },
   },
   methods: {
+    nextIndex() {
+      console.log("---");
+      this.currentIndex = this.currentIndex + 1;
+    },
     handleSwiperChange(e) {
       const newIndex = e.detail.current;
       this.currentIndex = newIndex;
@@ -486,8 +477,9 @@ export default {
     isItemActive(item) {
       return this.currentIndex === item.targetIndex;
     },
-    showPopupImage() {
+    showPopupImage(index) {
       this.showImagePopup = true;
+      this.currentTagImg = index;
     },
     hidePopupImage() {
       this.showImagePopup = false;
@@ -497,9 +489,7 @@ export default {
     this.titleHeight = uni.getStorageSync("titleHeight");
     console.log(this.titleHeight);
     const app = getApp();
-    app.updateMusicSrc(
-      "https://static.ticket.sz-trip.com/epicSoul/taozi/bg.m4a"
-    );
+    app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/zdmx.MP3");
     app.initBackgroundMusic(); // 初始化背景音乐
     uni.$bgMusic.play(); // 播放音乐
     for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
@@ -535,19 +525,19 @@ export default {
   // #ifdef MP-WEIXIN
   onShareAppMessage() {
     return {
-      title: "三个桃子·时间里的约定｜「Epic Soul」阅读体 issue01",
+      title: "猪的美学进化史｜「Epic Soul」阅读体 issue04",
       mpId: "wx8954209bb3ad489e",
-      path: "/taozi/home/home",
+      path: "/pig/home/home",
       imageUrl:
-        "https://static.ticket.sz-trip.com/epicSoul/taozi/home/taoziShare.png",
+        "https://epic.js-dyyj.com/uploads/20250805/4a90a8f7de19b0c465ff30e1b8e0c35c.png",
     };
   },
   onShareTimeline() {
     return {
-      title: "三个桃子·时间里的约定｜「Epic Soul」阅读体 issue01",
-      query: "",
+      title: "猪的美学进化史｜「Epic Soul」阅读体 issue04",
+      path: "/pig/home/home",
       imageUrl:
-        "https://static.ticket.sz-trip.com/epicSoul/taozi/home/taoziShare.png",
+        "https://epic.js-dyyj.com/uploads/20250805/4a90a8f7de19b0c465ff30e1b8e0c35c.png",
     };
   },
   // #endif
@@ -786,7 +776,7 @@ export default {
   right: 0;
   transform: translate(100%, -50%);
   z-index: 11;
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgba(255, 255, 255, 0.95);
   border-radius: 16rpx 0 0 16rpx;
   box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
@@ -801,18 +791,18 @@ export default {
   text-align: center;
 
   text {
-    color: #fff;
+    color: #333;
     opacity: 0.7;
     font-size: 28rpx;
   }
 }
 
 .item-active {
-  background-color: rgba(0, 0, 0, 0.718);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .nav-item .active {
-  color: #fff;
+  color: #333;
   opacity: 1;
 }
 
@@ -824,13 +814,13 @@ export default {
 }
 
 .chapter-title {
-  color: #fff;
+  color: #333;
   opacity: 0.7;
   font-size: 24rpx;
 }
 
 .chapter-number {
-  color: #fff;
+  color: #333;
   opacity: 0.7;
   font-size: 28rpx;
   margin-top: 8rpx;