From 5de45a14dbbb8cf35aecaeec8385da87bd640ca6 Mon Sep 17 00:00:00 2001
From: "1054425342@qq.com" <1054425342@qq.com>
Date: Mon, 25 Aug 2025 14:21:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=85=E8=AF=BB=E4=BD=93=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bmzm/home/home.vue        | 321 +++++++--------
 components/BackButton.vue |  97 +++++
 pig/home/home.vue         |  31 +-
 xrcc/home/home.vue        | 295 ++++++++------
 xxdf/home/home.vue        | 810 ++++++++++++++++++++++----------------
 5 files changed, 908 insertions(+), 646 deletions(-)
 create mode 100644 components/BackButton.vue

diff --git a/bmzm/home/home.vue b/bmzm/home/home.vue
index fd6f2ed..fb40fc6 100644
--- a/bmzm/home/home.vue
+++ b/bmzm/home/home.vue
@@ -1,177 +1,190 @@
 <template>
-    <view>
-        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
-            <swiper-item v-for="(image, index) in swiperImages" :key="index">
-                <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
-                    <!-- 仅在第四张图片添加子模块 -->
-                    <template v-if="index === 3">
-                        <image 
-                            :src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${i + 1}.png`" 
-                            v-for="i in 4" 
-                            :key="i" 
-                            :class="'module'+(i+1)"
-                            :style="{ animationDelay: `${i * animationConfig.delay}s` }"
-                            @click="setStorage(i);gotoPath(`/bmzm/chapter1/index?index=${i + 1}`)"
-                        ></image>
-                    </template>
-                </view>
-            </swiper-item>
-        </swiper>
-		<MusicControl />
-		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
-    </view>
+  <view>
+    <BackButton />
+    <swiper
+      class="swiper"
+      :current="currentIndex"
+      :vertical="true"
+      @change="handleSwiperChange"
+    >
+      <swiper-item v-for="(image, index) in swiperImages" :key="index">
+        <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
+          <!-- 仅在第四张图片添加子模块 -->
+          <template v-if="index === 3">
+            <image
+              :src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${
+                i + 1
+              }.png`"
+              v-for="i in 4"
+              :key="i"
+              :class="'module' + (i + 1)"
+              :style="{ animationDelay: `${i * animationConfig.delay}s` }"
+              @click="
+                setStorage(i);
+                gotoPath(`/bmzm/chapter1/index?index=${i + 1}`);
+              "
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+    </swiper>
+    <MusicControl />
+    <NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
+  </view>
 </template>
 
 <script>
-import MusicControl from '@/components/MusicControl.vue';
-import NavMenu from '../components/NavMenu.vue';
+import MusicControl from "@/components/MusicControl.vue";
+import NavMenu from "../components/NavMenu.vue";
+import BackButton from "@/components/BackButton.vue";
 export default {
-	components: {
-	    MusicControl,
-		NavMenu
-	},
-    data() {
-        return {
-            currentIndex: 0,
-            swiperImages: [
-                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif',
-                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png',
-                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png',
-                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png'
-            ],
-            animationConfig: {
-                delay: 0.5,
-                duration: 3,
-                keyframes: {
-                    start: 1,
-                    first: 0.8,
-                    second: 1.2,
-                    third: 0.9,
-                    end: 1.1
-                }
-            }
-        };
-    },
-	onShow() {
-		uni.removeStorageSync('answerObj');
-		const app = getApp();
-		app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3');
-		app.initBackgroundMusic(); // 初始化背景音乐
-		uni.$bgMusic.play(); // 播放音乐
-	},
-    methods: {
-        handleSwiperChange(e) {
-            this.currentIndex = e.detail.current;
+  components: {
+    MusicControl,
+    NavMenu,
+    BackButton,
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      swiperImages: [
+        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif",
+        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png",
+        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png",
+        "https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png",
+      ],
+      animationConfig: {
+        delay: 0.5,
+        duration: 3,
+        keyframes: {
+          start: 1,
+          first: 0.8,
+          second: 1.2,
+          third: 0.9,
+          end: 1.1,
         },
-		// 存储答案，供后面使用
-		setStorage(i) {
-			let text = ''
-			switch (i){
-				case 0:
-					text = '月光白'
-					break;
-				case 1:
-					text = '黎明青'
-					break;
-				case 2:
-					text = '玄天黑'
-					break;
-				case 3:
-					text = '胭脂红'
-					break;
-				default:
-					break;
-			}
-			this.appendToStorage('answerObj', { answer1: text });
-		}
+      },
+    };
+  },
+  onShow() {
+    uni.removeStorageSync("answerObj");
+    const app = getApp();
+    app.updateMusicSrc("https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3");
+    app.initBackgroundMusic(); // 初始化背景音乐
+    uni.$bgMusic.play(); // 播放音乐
+  },
+  methods: {
+    handleSwiperChange(e) {
+      this.currentIndex = e.detail.current;
+    },
+    // 存储答案，供后面使用
+    setStorage(i) {
+      let text = "";
+      switch (i) {
+        case 0:
+          text = "月光白";
+          break;
+        case 1:
+          text = "黎明青";
+          break;
+        case 2:
+          text = "玄天黑";
+          break;
+        case 3:
+          text = "胭脂红";
+          break;
+        default:
+          break;
+      }
+      this.appendToStorage("answerObj", { answer1: text });
     },
-	// 微信分享配置
-	// #ifdef MP-WEIXIN
-	onShareAppMessage() {
-	    return {
-	        title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03',
-	        mpId: 'wx8954209bb3ad489e',
-	        path: '/bmzm/home/home',
-	        imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg'
-	    };
-	},
-	onShareTimeline() {
-	    return {
-	        title: '不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03',
-	        query: '',
-	        imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg'
-	    };
-	}
-	// #endif
+  },
+  // 微信分享配置
+  // #ifdef MP-WEIXIN
+  onShareAppMessage() {
+    return {
+      title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
+      mpId: "wx8954209bb3ad489e",
+      path: "/bmzm/home/home",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
+    };
+  },
+  onShareTimeline() {
+    return {
+      title: "不眠之夜·Endless Dream｜「Epic Soul」阅读体 issue03",
+      query: "",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/bmzm/share.jpg",
+    };
+  },
+  // #endif
 };
 </script>
 
 <style lang="scss" scoped>
 .swiper {
-    width: 100vw;
-    height: 100vh;
+  width: 100vw;
+  height: 100vh;
 }
 
 .swiper-item {
-    width: 100vw;
-    height: 100vh;
-    background-size: 100% 100%;
-    position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  position: relative;
 
-    .module1 {
-        position: absolute;
-        width: 345.97rpx;
-        height: 323.42rpx;
-        top: 154rpx;
-        left: 48rpx;
-        animation: randomSize 3s infinite alternate;
-    }
-    .module2 {
-        position: absolute;
-        width: 271.11rpx;
-        height: 293.67rpx;
-        top: 276rpx;
-        right: 36rpx;
-        animation: randomSize 3s infinite alternate;
-    }
-    .module3 {
-        position: absolute;
-        width: 245.2rpx;
-        height: 232.25rpx;
-        top: 746rpx;
-        left: 71rpx;
-        animation: randomSize 3s infinite alternate;
-    }
-    .module4 {
-        position: absolute;
-        width: 293.19rpx;
-        height: 270.15rpx;
-        top: 605rpx;
-        right: 115rpx;
-        animation: randomSize 3s infinite alternate;
-    }
+  .module1 {
+    position: absolute;
+    width: 345.97rpx;
+    height: 323.42rpx;
+    top: 154rpx;
+    left: 48rpx;
+    animation: randomSize 3s infinite alternate;
+  }
+  .module2 {
+    position: absolute;
+    width: 271.11rpx;
+    height: 293.67rpx;
+    top: 276rpx;
+    right: 36rpx;
+    animation: randomSize 3s infinite alternate;
+  }
+  .module3 {
+    position: absolute;
+    width: 245.2rpx;
+    height: 232.25rpx;
+    top: 746rpx;
+    left: 71rpx;
+    animation: randomSize 3s infinite alternate;
+  }
+  .module4 {
+    position: absolute;
+    width: 293.19rpx;
+    height: 270.15rpx;
+    top: 605rpx;
+    right: 115rpx;
+    animation: randomSize 3s infinite alternate;
+  }
 }
 
 .swiper-img {
-    width: 100vw;
-    height: 100vh;
+  width: 100vw;
+  height: 100vh;
 }
 
 @keyframes randomSize {
-    0% {
-        transform: scale(1);
-    }
-    25% {
-        transform: scale(0.8);
-    }
-    50% {
-        transform: scale(1.2);
-    }
-    75% {
-        transform: scale(0.9);
-    }
-    100% {
-        transform: scale(1.1);
-    }
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  75% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1.1);
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/BackButton.vue b/components/BackButton.vue
new file mode 100644
index 0000000..4109767
--- /dev/null
+++ b/components/BackButton.vue
@@ -0,0 +1,97 @@
+<template>
+  <view
+    class="back-button-container"
+    :style="{ paddingTop: statusBarHeight + 'px' }"
+  >
+    <view @click="handleBack" class="back-btn">
+      <image class="back-icon" :src="iconSrc" mode="aspectFill"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "BackButton",
+  props: {
+    // 自定义图标路径
+    iconSrc: {
+      type: String,
+      default: "https://static.ticket.sz-trip.com/epicSoul/taozi/back.png",
+    },
+    // 自定义返回逻辑
+    customBack: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+    };
+  },
+  mounted() {
+    this.setStatusBarHeight();
+  },
+  methods: {
+    setStatusBarHeight() {
+      try {
+        const systemInfo = uni.getSystemInfoSync();
+        this.statusBarHeight = systemInfo.statusBarHeight || 0;
+      } catch (e) {
+        // 开发工具或获取失败时使用默认值
+        this.statusBarHeight = 0;
+      }
+    },
+    handleBack() {
+      if (this.customBack) {
+        // 使用自定义返回逻辑
+        this.customBack();
+      } else {
+        // 默认返回逻辑
+        uni.navigateBack({
+          delta: 1,
+          fail: () => {
+            // 如果返回失败，跳转到首页
+            uni.switchTab({
+              url: "/pages/index/index",
+            });
+          },
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.back-button-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  padding-left: 20rpx;
+  padding-bottom: 20rpx;
+}
+
+.back-btn {
+  width: 80rpx;
+  height: 80rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10rpx);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.95);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+</style>
diff --git a/pig/home/home.vue b/pig/home/home.vue
index 1fd718f..26f084a 100644
--- a/pig/home/home.vue
+++ b/pig/home/home.vue
@@ -1,5 +1,6 @@
 <template>
   <view>
+    <BackButton />
     <swiper
       class="main-swiper"
       :vertical="true"
@@ -270,18 +271,12 @@
           item.text
         }}</text>
       </view>
-	  <view
-	    class="nav-item"
-	    @click="toBuy"
-	  >
-	    <text >
-	      点击购买
-	    </text>
-	  </view>
-	  <view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
-	  	<text>购物车</text>
-	  </view>
-	 
+      <view class="nav-item" @click="toBuy">
+        <text> 点击购买 </text>
+      </view>
+      <view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
+        <text>购物车</text>
+      </view>
     </view>
     <!-- <BuyPeaches /> -->
     <!-- <BackgroundMusic /> -->
@@ -339,6 +334,7 @@ import messagePop from "@/components/messagePop.vue";
 import messageBoard from "@/components/messageBoard.vue";
 import MusicControl from "@/components/MusicControl.vue";
 import TitleHeader from "@/components/TitleHeader.vue";
+import BackButton from "@/components/BackButton.vue";
 
 export default {
   components: {
@@ -348,6 +344,7 @@ export default {
     messageBoard,
     MusicControl,
     TitleHeader,
+    BackButton,
   },
   data() {
     return {
@@ -467,11 +464,11 @@ export default {
         this.showMenu = true;
       }, 300);
     },
-	toBuy(){
-		uni.navigateTo({
-			url:'/subPackages/techan/detail?id=38'
-		})
-	},
+    toBuy() {
+      uni.navigateTo({
+        url: "/subPackages/techan/detail?id=38",
+      });
+    },
     closeMenu() {
       this.showMenu = false;
       setTimeout(() => {
diff --git a/xrcc/home/home.vue b/xrcc/home/home.vue
index bd3ffe3..63f365f 100644
--- a/xrcc/home/home.vue
+++ b/xrcc/home/home.vue
@@ -1,148 +1,181 @@
 <template>
-	<view style="width: 100vw;">
-		<!-- <SinglePlayGif
+  <view style="width: 100vw">
+    <BackButton />
+    <!-- <SinglePlayGif
 			gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif"
 			staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png"
 			duration="5000"
 		/> -->
 
-		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
-			<swiper-item v-for="(image, index) in swiperImages" :key="index">
-				<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
-					<template v-if="index == 0">
-						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png" mode="widthFix" class="img1-text"></image>
-					</template>
-					<template v-if="index == 1">
-						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png" mode="widthFix" class="img1-text" style="width: 115.85rpx;"></image>
-					</template>
-					<template v-if="index == 2">
-						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png" mode="widthFix" class="img1-text" style="width: 577.23rpx;"></image>
-					</template>
-					<template v-if="index == 3">
-						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png" mode="widthFix" class="img4-text"></image>
-						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" class="btn-img" @click="gotoPath('/xrcc/chapter1/index')"></image>
-					</template>
-				</view>
-			</swiper-item>
-		</swiper>
+    <swiper
+      class="swiper"
+      :current="currentIndex"
+      :vertical="true"
+      @change="handleSwiperChange"
+    >
+      <swiper-item v-for="(image, index) in swiperImages" :key="index">
+        <view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
+          <template v-if="index == 0">
+            <image
+              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png"
+              mode="widthFix"
+              class="img1-text"
+            ></image>
+          </template>
+          <template v-if="index == 1">
+            <image
+              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png"
+              mode="widthFix"
+              class="img1-text"
+              style="width: 115.85rpx"
+            ></image>
+          </template>
+          <template v-if="index == 2">
+            <image
+              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png"
+              mode="widthFix"
+              class="img1-text"
+              style="width: 577.23rpx"
+            ></image>
+          </template>
+          <template v-if="index == 3">
+            <image
+              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png"
+              mode="widthFix"
+              class="img4-text"
+            ></image>
+            <image
+              src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png"
+              mode="widthFix"
+              class="btn-img"
+              @click="gotoPath('/xrcc/chapter1/index')"
+            ></image>
+          </template>
+        </view>
+      </swiper-item>
+    </swiper>
 
-		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+    <NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
 
-		<MusicControl />
-	</view>
+    <MusicControl />
+  </view>
 </template>
 
 <script>
-	import MusicControl from '@/components/MusicControl.vue';
-	import SinglePlayGif from '../components/SinglePlayGif.vue';
-	import NavMenu from '../components/NavMenu.vue';
-	export default {
-		components: {
-			MusicControl,
-			SinglePlayGif,
-			NavMenu
-		},
-		data() {
-			return {
-				isPlaying: false,
-				playTimer: null,
-				duration: 5000,
-				currentIndex: 0,
-				navIndex: 0,
-				swiperImages: [
-					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif',
-					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif',
-					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif',
-					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif'
-				]
-			}
-		},
-		onLoad(option) {
-			this.currentIndex = option.currentIndex || 0
-			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
-		},
-		onShow() {
-			const app = getApp();
-			app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3');
-			app.initBackgroundMusic(); // 初始化背景音乐
-			uni.$bgMusic.play(); // 播放音乐
-		},
-		methods: {
-			handleJumpToPage(idx) {
-				this.navIndex = idx
-				if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
-			},
-			handleSwiperChange(e) {
-			    this.currentIndex = e.detail.current;
-				if (this.currentIndex == this.swiperImages.length - 1) {
-					this.navIndex = 1;
-				}else {
-					this.navIndex = 0
-				}
-			},
-		},
-		// 微信分享配置
-		// #ifdef MP-WEIXIN
-		onShareAppMessage() {
-			return {
-				title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
-				mpId: 'wx8954209bb3ad489e',
-				path: '/xrcc/home/home',
-				imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
-			};
-		},
-		onShareTimeline() {
-			return {
-				title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
-				query: '',
-				imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
-			};
-		}
-		// #endif
-	}
+import MusicControl from "@/components/MusicControl.vue";
+import SinglePlayGif from "../components/SinglePlayGif.vue";
+import NavMenu from "../components/NavMenu.vue";
+import BackButton from "@/components/BackButton.vue";
+export default {
+  components: {
+    MusicControl,
+    SinglePlayGif,
+    NavMenu,
+    BackButton,
+  },
+  data() {
+    return {
+      isPlaying: false,
+      playTimer: null,
+      duration: 5000,
+      currentIndex: 0,
+      navIndex: 0,
+      swiperImages: [
+        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif",
+        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif",
+        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif",
+        "https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif",
+      ],
+    };
+  },
+  onLoad(option) {
+    this.currentIndex = option.currentIndex || 0;
+    if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+  },
+  onShow() {
+    const app = getApp();
+    app.updateMusicSrc(
+      "https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3"
+    );
+    app.initBackgroundMusic(); // 初始化背景音乐
+    uni.$bgMusic.play(); // 播放音乐
+  },
+  methods: {
+    handleJumpToPage(idx) {
+      this.navIndex = idx;
+      if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1;
+    },
+    handleSwiperChange(e) {
+      this.currentIndex = e.detail.current;
+      if (this.currentIndex == this.swiperImages.length - 1) {
+        this.navIndex = 1;
+      } else {
+        this.navIndex = 0;
+      }
+    },
+  },
+  // 微信分享配置
+  // #ifdef MP-WEIXIN
+  onShareAppMessage() {
+    return {
+      title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
+      mpId: "wx8954209bb3ad489e",
+      path: "/xrcc/home/home",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
+    };
+  },
+  onShareTimeline() {
+    return {
+      title: "今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05",
+      query: "",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png",
+    };
+  },
+  // #endif
+};
 </script>
 
 <style lang="scss" scoped>
-	.swiper {
-		width: 100vw;
-		height: 100vh;
-	}
+.swiper {
+  width: 100vw;
+  height: 100vh;
+}
 
-	.swiper-item {
-		width: 100vw;
-		height: 100vh;
-		background-size: 100% auto;
-		background-position: center center;
-		background-color: #000;
-		background-repeat: no-repeat;
-		position: relative;
+.swiper-item {
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% auto;
+  background-position: center center;
+  background-color: #000;
+  background-repeat: no-repeat;
+  position: relative;
 
-		.img1-text {
-			position: absolute;
-			width: 632.16rpx;
-			top: 170rpx;
-			left: 0;
-			right: 0;
-			margin: 0 auto;
-		}
-		
-		.img4-text {
-			position: absolute;
-			width: 476.36rpx;
-			top: 170rpx;
-			left: 84rpx;
-		}
-		
-		.btn-img {
-			position: absolute;
-			width: 149.8rpx;
-			bottom: 290rpx;
-			left: 84rpx;
-		}
-	}
+  .img1-text {
+    position: absolute;
+    width: 632.16rpx;
+    top: 170rpx;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
 
-	.swiper-img {
-		width: 100vw;
-		height: 100vh;
-	}
-</style>
\ No newline at end of file
+  .img4-text {
+    position: absolute;
+    width: 476.36rpx;
+    top: 170rpx;
+    left: 84rpx;
+  }
+
+  .btn-img {
+    position: absolute;
+    width: 149.8rpx;
+    bottom: 290rpx;
+    left: 84rpx;
+  }
+}
+
+.swiper-img {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
diff --git a/xxdf/home/home.vue b/xxdf/home/home.vue
index 47c0839..f9d021e 100644
--- a/xxdf/home/home.vue
+++ b/xxdf/home/home.vue
@@ -1,456 +1,578 @@
 <!-- pages/home/home.vue -->
 <template>
-    <view>
-        <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-            <!-- 首页内容 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
-                    <template v-if="loadedPages[0]">
-                        <image v-show="shouldShowContent(0)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/index.gif" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(0)" class="content-layer">
-                            <image class="layer-img" src="https://static.ticket.sz-trip.com/epicSoul/home1.png" :lazy-load="true" mode="widthFix"></image>
-                            <view class="arrow-content">
-                                <image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 序章 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[1]">
-                        <image v-show="shouldShowContent(1)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/prologue-bg.png" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(1)" class="content-layer">
-                            <view class="layer-text">
-                                <view class="">
-                                    在此我们邀请你
-                                </view>
-                                <view class="">
-                                    以指尖触发一场直抵情绪与美学的共生实验
-                                </view>
-                            </view>
-                            <view class="arrow-content">
-                                <image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 第一章封面 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[2]">
-                        <image v-show="shouldShowContent(2)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/covers.png" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(2)" class="content-layer">
-                            <image class="layer-img2" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png" :lazy-load="true" mode="widthFix">
-                            </image>
-                            <view class="arrow-content">
-                                <image @click="navigateToChapter1" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 第二章封面 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[3]">
-                        <image v-show="shouldShowContent(3)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover.png" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(3)" class="content-layer">
-                            <image class="chapter2-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/bg-txt.png" :lazy-load="true" mode=""></image>
-                            <view class="arrow-content chapter2-btn">
-                                <image @click="navigateToChapter2" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/button.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 第三章封面 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[4]">
-                        <image v-show="shouldShowContent(4)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/cover.png" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(4)" class="content-layer">
-                            <image class="chapter3-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/bg-txt.png" :lazy-load="true" mode=""></image>
-                            <view class="arrow-content chapter3-btn">
-                                <image @click="navigateToChapter3" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 第四章封面 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[5]">
-                        <image v-show="shouldShowContent(5)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/covers.png" :lazy-load="true" mode="aspectFill"></image>
-                        <view v-show="shouldShowContent(5)" class="content-layer">
-                            <!-- <image class="chapter4-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/bg-txt.png" :lazy-load="true" mode="widthFix"></image> -->
-                            <view class="chapter4-btn-content">
-                                <image @click="ShareMoments" class="chapter4-btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn.png" :lazy-load="true" mode=""></image>
-                                <image @click="navigateToChapter4" class="chapter4-btn chapter4-btn2" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn2.png" :lazy-load="true" mode=""></image>
-                            </view>
-                        </view>
-                    </template>
-                </view>
-            </swiper-item>
-
-            <!-- 页脚1 -->
-            <swiper-item>
-                <view class="page-container home-page">
-                    <template v-if="loadedPages[6]">
-                        <image v-show="shouldShowContent(6)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/footers.png" :lazy-load="true" mode="aspectFill"></image>
-						<image v-show="shouldShowContent(6)" 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>
-        <MusicControl />
-        <ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
-		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
-    </view>
+  <view>
+    <BackButton />
+    <swiper
+      class="main-swiper"
+      :vertical="true"
+      :current="currentIndex"
+      @change="handleSwiperChange"
+      :duration="300"
+    >
+      <!-- 首页内容 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <!-- 使用loadedPages确定是否已加载，v-show控制显示/隐藏 -->
+          <template v-if="loadedPages[0]">
+            <image
+              v-show="shouldShowContent(0)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/index.gif"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(0)" class="content-layer">
+              <image
+                class="layer-img"
+                src="https://static.ticket.sz-trip.com/epicSoul/home1.png"
+                :lazy-load="true"
+                mode="widthFix"
+              ></image>
+              <view class="arrow-content">
+                <image
+                  class="arrow-down"
+                  src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 序章 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[1]">
+            <image
+              v-show="shouldShowContent(1)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/prologue-bg.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(1)" class="content-layer">
+              <view class="layer-text">
+                <view class=""> 在此我们邀请你 </view>
+                <view class=""> 以指尖触发一场直抵情绪与美学的共生实验 </view>
+              </view>
+              <view class="arrow-content">
+                <image
+                  class="arrow-down"
+                  src="https://static.ticket.sz-trip.com/epicSoul/arrow-icons.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 第一章封面 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[2]">
+            <image
+              v-show="shouldShowContent(2)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/covers.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(2)" class="content-layer">
+              <image
+                class="layer-img2"
+                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/bg-txts.png"
+                :lazy-load="true"
+                mode="widthFix"
+              >
+              </image>
+              <view class="arrow-content">
+                <image
+                  @click="navigateToChapter1"
+                  class="btn"
+                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/buttons.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 第二章封面 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[3]">
+            <image
+              v-show="shouldShowContent(3)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(3)" class="content-layer">
+              <image
+                class="chapter2-bg-txt"
+                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/bg-txt.png"
+                :lazy-load="true"
+                mode=""
+              ></image>
+              <view class="arrow-content chapter2-btn">
+                <image
+                  @click="navigateToChapter2"
+                  class="btn"
+                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/button.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 第三章封面 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[4]">
+            <image
+              v-show="shouldShowContent(4)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/cover.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(4)" class="content-layer">
+              <image
+                class="chapter3-bg-txt"
+                src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/bg-txt.png"
+                :lazy-load="true"
+                mode=""
+              ></image>
+              <view class="arrow-content chapter3-btn">
+                <image
+                  @click="navigateToChapter3"
+                  class="btn"
+                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/button.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 第四章封面 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[5]">
+            <image
+              v-show="shouldShowContent(5)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/covers.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <view v-show="shouldShowContent(5)" class="content-layer">
+              <!-- <image class="chapter4-bg-txt" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/bg-txt.png" :lazy-load="true" mode="widthFix"></image> -->
+              <view class="chapter4-btn-content">
+                <image
+                  @click="ShareMoments"
+                  class="chapter4-btn"
+                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+                <image
+                  @click="navigateToChapter4"
+                  class="chapter4-btn chapter4-btn2"
+                  src="https://static.ticket.sz-trip.com/epicSoul/image/chapter4/chapter4-btn2.png"
+                  :lazy-load="true"
+                  mode=""
+                ></image>
+              </view>
+            </view>
+          </template>
+        </view>
+      </swiper-item>
+
+      <!-- 页脚1 -->
+      <swiper-item>
+        <view class="page-container home-page">
+          <template v-if="loadedPages[6]">
+            <image
+              v-show="shouldShowContent(6)"
+              class="bg-image"
+              src="https://static.ticket.sz-trip.com/epicSoul/footers.png"
+              :lazy-load="true"
+              mode="aspectFill"
+            ></image>
+            <image
+              v-show="shouldShowContent(6)"
+              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>
+    <MusicControl />
+    <ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
+    <NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
+  </view>
 </template>
 
 <script>
-import ShareGuide from '@/components/ShareGuide.vue';
-import MusicControl from '@/components/MusicControl.vue';
-import NavMenu from '../components/NavMenu.vue';
+import ShareGuide from "@/components/ShareGuide.vue";
+import MusicControl from "@/components/MusicControl.vue";
+import NavMenu from "../components/NavMenu.vue";
+import BackButton from "@/components/BackButton.vue";
 export default {
-    components: {
-        ShareGuide,
-        MusicControl,
-		NavMenu
+  components: {
+    ShareGuide,
+    MusicControl,
+    NavMenu,
+    BackButton,
+  },
+  data() {
+    return {
+      showShareGuide: false,
+      currentIndex: 0,
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+        4: false,
+        5: false,
+        6: false,
+      },
+      preloadBuffer: 1,
+    };
+  },
+  methods: {
+    ShareMoments() {
+      this.showShareGuide = true;
     },
-    data() {
-        return {
-            showShareGuide: false,
-            currentIndex: 0,
-            loadedPages: {
-                0: false,
-                1: false,
-                2: false,
-                3: false,
-                4: false,
-                5: false,
-                6: false
-            },
-            preloadBuffer: 1
-        };
+    onShareGuideClose() {
+      console.log("分享引导已关闭");
     },
-    methods: {
-        ShareMoments() {
-            this.showShareGuide = true;
-        },
-        onShareGuideClose() {
-            console.log('分享引导已关闭');
-        },
-        shouldShowContent(index) {
-            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
-        },
-        handleSwiperChange(e) {
-            this.currentIndex = e.detail.current;
-        },
-        navigateToChapter1() {
-            uni.navigateTo({
-                url: '/xxdf/chapter1/cover1'
-            });
-        },
-        navigateToChapter2() {
-            uni.navigateTo({
-                url: '/xxdf/chapter2/cover'
-            });
-        },
-        navigateToChapter3() {
-            uni.navigateTo({
-                url: '/xxdf/chapter3/cover'
-            });
-        },
-        navigateToChapter4() {
-            uni.navigateTo({
-                url: '/xxdf/chapter4/cover'
-            });
-        }
+    shouldShowContent(index) {
+      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
     },
-    watch: {
-        currentIndex(newIndex) {
-            for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(6, newIndex + this.preloadBuffer); i++) {
-                this.loadedPages[i] = true;
-            }
-        }
+    handleSwiperChange(e) {
+      this.currentIndex = e.detail.current;
     },
-    mounted() {
-        const app = getApp();
-		app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/comfort.mp3');
-        app.initBackgroundMusic(); // 初始化背景音乐
-		uni.$bgMusic.play(); // 播放音乐
-        for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
-            this.loadedPages[i] = true;
-        }
+    navigateToChapter1() {
+      uni.navigateTo({
+        url: "/xxdf/chapter1/cover1",
+      });
     },
-    onUnload() {
-        uni.$bgMusic.pause(); // 停止音乐
+    navigateToChapter2() {
+      uni.navigateTo({
+        url: "/xxdf/chapter2/cover",
+      });
     },
-    onShow() {
-        try {
-            const app = getApp();
-            if (app.globalData && app.globalData.mainSliderIndex!== undefined && app.globalData.mainSliderIndex!== 0) {
-                const newIndex = app.globalData.mainSliderIndex;
-                setTimeout(() => {
-                    this.currentIndex = newIndex;
-                    app.globalData.mainSliderIndex = 0; // 重置
-                }, 100);
-            }
-        } catch (error) {
-            console.error('获取globalData失败:', error);
-        }
+    navigateToChapter3() {
+      uni.navigateTo({
+        url: "/xxdf/chapter3/cover",
+      });
     },
-    // 微信分享配置
-    // #ifdef MP-WEIXIN
-    onShareAppMessage() {
-        return {
-            title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02',
-            mpId: 'wx8954209bb3ad489e',
-            path: '/xxdf/home/home',
-            imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
-        };
+    navigateToChapter4() {
+      uni.navigateTo({
+        url: "/xxdf/chapter4/cover",
+      });
     },
-    onShareTimeline() {
-        return {
-            title: '细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02',
-            query: '',
-            imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/share-img.jpg'
-        };
+  },
+  watch: {
+    currentIndex(newIndex) {
+      for (
+        let i = Math.max(0, newIndex - this.preloadBuffer);
+        i <= Math.min(6, newIndex + this.preloadBuffer);
+        i++
+      ) {
+        this.loadedPages[i] = true;
+      }
+    },
+  },
+  mounted() {
+    const app = getApp();
+    app.updateMusicSrc(
+      "https://static.ticket.sz-trip.com/epicSoul/comfort.mp3"
+    );
+    app.initBackgroundMusic(); // 初始化背景音乐
+    uni.$bgMusic.play(); // 播放音乐
+    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 6); i++) {
+      this.loadedPages[i] = true;
+    }
+  },
+  onUnload() {
+    uni.$bgMusic.pause(); // 停止音乐
+  },
+  onShow() {
+    try {
+      const app = getApp();
+      if (
+        app.globalData &&
+        app.globalData.mainSliderIndex !== undefined &&
+        app.globalData.mainSliderIndex !== 0
+      ) {
+        const newIndex = app.globalData.mainSliderIndex;
+        setTimeout(() => {
+          this.currentIndex = newIndex;
+          app.globalData.mainSliderIndex = 0; // 重置
+        }, 100);
+      }
+    } catch (error) {
+      console.error("获取globalData失败:", error);
     }
-    // #endif
+  },
+  // 微信分享配置
+  // #ifdef MP-WEIXIN
+  onShareAppMessage() {
+    return {
+      title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
+      mpId: "wx8954209bb3ad489e",
+      path: "/xxdf/home/home",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
+    };
+  },
+  onShareTimeline() {
+    return {
+      title: "细嗅东方·Out Of Space｜「Epic Soul」阅读体 issue02",
+      query: "",
+      imageUrl: "https://static.ticket.sz-trip.com/epicSoul/share-img.jpg",
+    };
+  },
+  // #endif
 };
 </script>
 
 <style scoped>
 .main-swiper {
-    width: 100%;
-    height: 100vh;
+  width: 100%;
+  height: 100vh;
 }
 
 .page-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
 }
 
 .home-page {
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  overflow: hidden;
 }
 
 .bg-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .qrCode-image {
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 192rpx;
-	margin: 0 auto;
-	z-index: 2;
-	width: 30vw;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 192rpx;
+  margin: 0 auto;
+  z-index: 2;
+  width: 30vw;
 }
 
 /* 内容层样式 */
 .content-layer {
-    position: relative;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .layer-img {
-    width: 100%;
-    /* height: 80%; */
+  width: 100%;
+  /* height: 80%; */
 }
 
 .layer-img2 {
-    width: 90%;
-    /* height: 88%; */
-    margin-top: 18%;
+  width: 90%;
+  /* height: 88%; */
+  margin-top: 18%;
 }
 
 .chapter2-bg-txt {
-    width: 85%;
-    height: 70%;
-    margin-top: 24%;
+  width: 85%;
+  height: 70%;
+  margin-top: 24%;
 }
 
 .chapter3-bg-txt {
-    width: 88%;
-    height: 88%;
-    margin-top: 16%;
+  width: 88%;
+  height: 88%;
+  margin-top: 16%;
 }
 
 .chapter4-bg-txt {
-    width: 75%;
-    /* height: 25%; */
-    margin-top: 18%;
+  width: 75%;
+  /* height: 25%; */
+  margin-top: 18%;
 }
 
 .layer-text {
-    width: 100%;
-    position: absolute;
-    top: 65%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    font-size: 30rpx;
-    color: #FFFFFF;
+  width: 100%;
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-size: 30rpx;
+  color: #ffffff;
 }
 
 .layer-text view:last-child {
-    margin-top: 20rpx;
+  margin-top: 20rpx;
 }
 
-
 .prologue-page {
-    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
+  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 }
 
 .chapter-cover {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .title {
-    font-size: 48rpx;
-    font-weight: bold;
-    margin-bottom: 32rpx;
-    text-align: center;
+  font-size: 48rpx;
+  font-weight: bold;
+  margin-bottom: 32rpx;
+  text-align: center;
 }
 
 .subtitle {
-    font-size: 32rpx;
-    color: #666;
-    margin-bottom: 80rpx;
-    text-align: center;
+  font-size: 32rpx;
+  color: #666;
+  margin-bottom: 80rpx;
+  text-align: center;
 }
 
 .chapter-num {
-    font-size: 36rpx;
-    color: #666;
-    margin-bottom: 16rpx;
+  font-size: 36rpx;
+  color: #666;
+  margin-bottom: 16rpx;
 }
 
 .chapter-title {
-    font-size: 48rpx;
-    font-weight: bold;
-    margin-bottom: 60rpx;
-    text-align: center;
+  font-size: 48rpx;
+  font-weight: bold;
+  margin-bottom: 60rpx;
+  text-align: center;
 }
 
 .content {
-    font-size: 32rpx;
-    line-height: 1.6;
-    text-align: center;
-    margin-bottom: 60rpx;
-    max-width: 80%;
+  font-size: 32rpx;
+  line-height: 1.6;
+  text-align: center;
+  margin-bottom: 60rpx;
+  max-width: 80%;
 }
 
 .btn-container {
-    margin-bottom: 60rpx;
+  margin-bottom: 60rpx;
 }
 
 .enter-btn {
-    background-color: #007AFF;
-    color: #FFFFFF;
-    padding: 20rpx 60rpx;
-    border-radius: 100rpx;
-    font-size: 32rpx;
+  background-color: #007aff;
+  color: #ffffff;
+  padding: 20rpx 60rpx;
+  border-radius: 100rpx;
+  font-size: 32rpx;
 }
 
 .arrow-content {
-    width: 100%;
-    position: absolute;
-    top: 85%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  position: absolute;
+  top: 85%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .chapter2-btn {
-    top: 75% !important;
+  top: 75% !important;
 }
 
 .chapter3-btn {
-    top: 48% !important;
+  top: 48% !important;
 }
 
 .chapter4-btn-content {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    position: absolute;
-    bottom: 10%;
-    left: 50%;
-    transform: translate(-50%, 0);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translate(-50%, 0);
 }
 
 .chapter4-btn {
-    width: 280rpx;
-    height: 60rpx;
+  width: 280rpx;
+  height: 60rpx;
 }
 
 .chapter4-btn2 {
-    margin-top: 20rpx;
+  margin-top: 20rpx;
 }
 
 .btn {
-    width: 280rpx;
-    height: 60rpx;
+  width: 280rpx;
+  height: 60rpx;
 }
 
 .arrow-down {
-    width: 200rpx;
-    height: 40rpx;
-    animation: bounce 1.5s infinite;
+  width: 200rpx;
+  height: 40rpx;
+  animation: bounce 1.5s infinite;
 }
 
 @keyframes bounce {
-    0%,
-    20%,
-    50%,
-    80%,
-    100% {
-        transform: translateY(0);
-    }
-
-    40% {
-        transform: translateY(-20rpx);
-    }
-
-    60% {
-        transform: translateY(-10rpx);
-    }
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-20rpx);
+  }
+
+  60% {
+    transform: translateY(-10rpx);
+  }
 }
-</style>
\ No newline at end of file
+</style>