From 0f3f792c8def97417d9c7abffaa34657a0d77a8a Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Tue, 1 Jul 2025 17:02:18 +0800
Subject: [PATCH] 1

---
 components/MusicControl.vue |   1 +
 pages.json                  |   4 +-
 xxdf/chapter1/cover1.vue    | 254 ++++++++++----------
 xxdf/chapter1/detail1.vue   | 356 ++++++++++++++--------------
 xxdf/chapter1/detail2.vue   | 354 ++++++++++++++--------------
 xxdf/chapter1/detail3.vue   | 345 +++++++++++++--------------
 xxdf/chapter1/detail4.vue   | 450 ++++++++++++++++++------------------
 xxdf/chapter1/detail5.vue   | 343 +++++++++++++--------------
 xxdf/home/home.vue          |  10 +-
 9 files changed, 1028 insertions(+), 1089 deletions(-)

diff --git a/components/MusicControl.vue b/components/MusicControl.vue
index c17dc07..99ecfe0 100644
--- a/components/MusicControl.vue
+++ b/components/MusicControl.vue
@@ -15,6 +15,7 @@ export default {
     }
   },
   mounted() {
+	  console.log('初始化')
     // 组件挂载时同步音乐状态
     this.syncMusicState();
     
diff --git a/pages.json b/pages.json
index e8c83e9..2288882 100644
--- a/pages.json
+++ b/pages.json
@@ -167,9 +167,9 @@
 			]
 		},
 		{
-			"root": "xxdf",
+			"root": "xxdf/home",
 			"pages": [{
-				"path": "home/home",
+				"path": "home",
 				"style": {
 					"navigationBarTitleText": "",
 					"navigationStyle": "custom"
diff --git a/xxdf/chapter1/cover1.vue b/xxdf/chapter1/cover1.vue
index 1a26084..2a1560a 100644
--- a/xxdf/chapter1/cover1.vue
+++ b/xxdf/chapter1/cover1.vue
@@ -1,133 +1,147 @@
 <template>
-	<view class="chapter-cover">
-		<image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image>
-		<view class="five-senses-content" @click="goFeel">
-			<view class="box1"></view>
-			<view class="senses-txt">
-				触觉
-			</view>
-		</view>
-		<view class="five-senses-content vision" @click="goVision">
-			<view class="box1"></view>
-			<view class="senses-txt">
-				视觉
-			</view>
-		</view>
-		<view class="five-senses-content hearing" @click="goHearing">
-			<view class="box1"></view>
-			<view class="senses-txt">
-				听觉
-			</view>
-		</view>
-		<view class="five-senses-content olfactory" @click="goOlfactory">
-			<view class="box1"></view>
-			<view class="senses-txt">
-				嗅觉
-			</view>
-		</view>
-		<view class="five-senses-content gustation" @click="goGustation">
-			<view class="box1"></view>
-			<view class="senses-txt">
-				味觉
-			</view>
-		</view>
-		<image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image>
+	<view>
+    <view class="chapter-cover">
+        <image class="cover-img" src="/static/images/chapter1/cover2.png" mode=""></image>
+        <view class="five-senses-content" @click="goFeel">
+            <view class="box1"></view>
+            <view class="senses-txt">
+                触觉
+            </view>
+        </view>
+        <view class="five-senses-content vision" @click="goVision">
+            <view class="box1"></view>
+            <view class="senses-txt">
+                视觉
+            </view>
+        </view>
+        <view class="five-senses-content hearing" @click="goHearing">
+            <view class="box1"></view>
+            <view class="senses-txt">
+                听觉
+            </view>
+        </view>
+        <view class="five-senses-content olfactory" @click="goOlfactory">
+            <view class="box1"></view>
+            <view class="senses-txt">
+                嗅觉
+            </view>
+        </view>
+        <view class="five-senses-content gustation" @click="goGustation">
+            <view class="box1"></view>
+            <view class="senses-txt">
+                味觉
+            </view>
+        </view>
+        <image @click="goback" class="btn" src="/static/images/chapter1/abandon-btn.png" mode=""></image>
+    </view>
+    <MusicControl />
 	</view>
-	<MusicControl />
 </template>
 
-<script setup>
-const goback = ()=>{
-	uni.navigateBack({
-		delta:1
-	})
+<script>
+export default {
+    methods: {
+        goback() {
+            uni.navigateBack({
+                delta: 1
+            });
+        },
+        goFeel() {
+            uni.navigateTo({
+                url: '/xxdf/chapter1/detail1'
+            });
+        },
+        goVision() {
+            uni.navigateTo({
+                url: '/xxdf/chapter1/detail2'
+            });
+        },
+        goHearing() {
+            uni.navigateTo({
+                url: '/xxdf/chapter1/detail3'
+            });
+        },
+        goOlfactory() {
+            uni.navigateTo({
+                url: '/xxdf/chapter1/detail4'
+            });
+        },
+        goGustation() {
+            uni.navigateTo({
+                url: '/xxdf/chapter1/detail5'
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.chapter-cover {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
+
+.cover-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.five-senses-content {
+    position: absolute;
+    top: 32%;
+    right: 28%;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
-const goFeel = ()=>{
-	uni.navigateTo({
-		url:'/pages/chapter1/detail1'
-	})
+
+.vision {
+    top: 54% !important;
+    right: 47% !important;
 }
-const goVision = ()=>{
-	uni.navigateTo({
-		url:'/pages/chapter1/detail2'
-	})
+
+.hearing {
+    top: 62% !important;
+    right: 8% !important;
 }
-const goHearing = ()=>{
-	uni.navigateTo({
-		url:'/pages/chapter1/detail3'
-	})
+
+.olfactory {
+    top: 64% !important;
+    right: 76% !important;
 }
-const goOlfactory = ()=>{
-	uni.navigateTo({
-		url:'/pages/chapter1/detail4'
-	})
+
+.gustation {
+    top: 73% !important;
+    right: 86% !important;
 }
-const goGustation = ()=>{
-	uni.navigateTo({
-		url:'/pages/chapter1/detail5'
-	})
+
+.box1 {
+    background: #fff;
+    border-radius: 50%;
+    opacity: 0.4;
+    width: 40rpx;
+    height: 40rpx;
 }
-</script>
 
-<style scoped>
-	.chapter-cover {
-		width: 100%;
-		height: 100vh;
-		position: relative;
-	}
+.senses-txt {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 20rpx;
+}
 
-	.cover-img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-	.five-senses-content{
-		position: absolute;
-		top: 32%;
-		right: 28%;
-		z-index: 2;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	.vision{
-		top: 54% !important;
-		right: 47% !important;
-	}
-	.hearing{
-		top: 62% !important;
-		right: 8% !important;
-	}
-	.olfactory{
-		top: 64% !important;
-		right: 76% !important;
-	}
-	.gustation{
-		top: 73% !important;
-		right: 86% !important;
-	}
-	.box1{
-		background: #fff;
-		border-radius: 50%;
-		opacity: 0.4;
-		width: 40rpx;
-		height: 40rpx;
-	}
-	.senses-txt{
-		font-size: 24rpx;
-		color: rgba(255, 255, 255, 0.8);
-		margin-top: 20rpx;
-	}
-	.btn{
-		position: absolute;
-		left: 50%;
-		bottom: 11%;
-		transform: translate(-50%,-50%);
-		z-index: 2;
-		width: 280rpx;
-		height: 60rpx;
-	}
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 11%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 280rpx;
+    height: 60rpx;
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter1/detail1.vue b/xxdf/chapter1/detail1.vue
index ab87a78..0f8fa60 100644
--- a/xxdf/chapter1/detail1.vue
+++ b/xxdf/chapter1/detail1.vue
@@ -1,193 +1,177 @@
 <template>
-	<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-		<swiper-item>
-			<view class="page-container home-page">
-				<template v-if="loadedPages[0]">
-					<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/feel.png" mode=""
-						:lazy-load="true"></image>
-					<view v-show="shouldShowContent(0)" class="arrow-content">
-						<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
-					</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="/static/images/chapter1/feel2.png"
-						mode="" :lazy-load="true"></image>
-					<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
-						<image class="feel2-img" src="/static/images/chapter1/feel2-img.png" mode="" :lazy-load="true">
-						</image>
-					</view>
-					<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png"
-						mode="" :lazy-load="true"></image>
-				</template>
-			</view>
-		</swiper-item>
-	</swiper>
-	<MusicControl />
+	<view>
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item>
+            <view class="page-container home-page">
+                <template v-if="loadedPages[0]">
+                    <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/feel.png" mode=""
+                           :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(0)" class="arrow-content">
+                        <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/feel2.png"
+                           mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
+                        <image class="feel2-img" src="/static/images/chapter1/feel2-img.png" mode="" :lazy-load="true">
+                        </image>
+                    </view>
+                    <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png"
+                           mode="" :lazy-load="true"></image>
+                </template>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-	import {
-		ref,
-		reactive,
-		onMounted,
-		onUnmounted,
-		watch
-	} from 'vue';
-
-	const isVisible = ref(false);
-	const currentIndex = ref(0);
-
-	// 记录哪些页面已经加载过
-	const loadedPages = reactive({
-		0: false,
-		1: false
-	});
-
-	// 加载预缓冲区大小
-	const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
-
-	// 决定是否应该显示特定页面的内容
-	const shouldShowContent = (index) => {
-		// 显示当前页和前后各preloadBuffer页
-		return Math.abs(index - currentIndex.value) <= preloadBuffer;
-	};
-
-	// 监听currentIndex变化，更新已加载页面状态
-	watch(currentIndex, (newIndex) => {
-		// 标记当前页面和前后buffer页为已加载
-		for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
-			loadedPages[i] = true;
-		}
-
-		// 更新动画状态
-		isVisible.value = newIndex === 1;
-	}, {
-		immediate: true
-	});
-
-	const handleSwiperChange = (e) => {
-		currentIndex.value = e.detail.current;
-	};
-
-	const goback = () => {
-		uni.navigateBack({
-			delta: 1
-		});
-	};
-
-	onMounted(() => {
-		// 初始化时标记第一页和相邻页为已加载
-		loadedPages[0] = true;
-		// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载
-		if (preloadBuffer >= 1) {
-			loadedPages[1] = true;
-		}
-	});
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+export default {
+	components: {MusicControl},
+    data() {
+        return {
+            isVisible: false,
+            currentIndex: 0,
+            loadedPages: {
+                0: false,
+                1: false
+            },
+            preloadBuffer: 1
+        };
+    },
+    methods: {
+        shouldShowContent(index) {
+            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+        },
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+        },
+        goback() {
+            uni.navigateBack({
+                delta: 1
+            });
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newIndex) {
+                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
+                    this.loadedPages[i] = true;
+                }
+                this.isVisible = newIndex === 1;
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.loadedPages[0] = true;
+        if (this.preloadBuffer >= 1) {
+            this.loadedPages[1] = true;
+        }
+    }
+};
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-
-
-	.animate-content {
-		position: absolute;
-		left: 0;
-		top: 18%;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		z-index: 2;
-		opacity: 0;
-		transform: scale(0.9);
-		filter: blur(5px);
-		transition: opacity 0.6s ease-out 0.2s,
-			transform 0.6s ease-out 0.2s,
-			filter 0.6s ease-out 0.2s;
-	}
-
-	.animate-visible {
-		opacity: 1;
-		transform: scale(1);
-		filter: blur(0px);
-	}
-
-
-	.feel2-img {
-		width: 89%;
-		height: 248rpx;
-	}
-
-	.arrow-content {
-		width: 100%;
-		position: absolute;
-		bottom: 5%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2;
-	}
-
-	.arrow-down {
-		width: 200rpx;
-		height: 40rpx;
-		animation: bounce 1.5s infinite;
-	}
-
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 180rpx;
-		height: 56rpx;
-	}
-
-	@keyframes bounce {
-
-		0%,
-		20%,
-		50%,
-		80%,
-		100% {
-			transform: translateY(0);
-		}
-
-		40% {
-			transform: translateY(-20rpx);
-		}
-
-		60% {
-			transform: translateY(-10rpx);
-		}
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
+
+.page-container {
+    height: 100vh;
+}
+
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.animate-content {
+    position: absolute;
+    left: 0;
+    top: 18%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(5px);
+    transition: opacity 0.6s ease-out 0.2s,
+    transform 0.6s ease-out 0.2s,
+    filter 0.6s ease-out 0.2s;
+}
+
+.animate-visible {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+}
+
+.feel2-img {
+    width: 89%;
+    height: 248rpx;
+}
+
+.arrow-content {
+    width: 100%;
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.arrow-down {
+    width: 200rpx;
+    height: 40rpx;
+    animation: bounce 1.5s infinite;
+}
+
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 12%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 180rpx;
+    height: 56rpx;
+}
+
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20rpx);
+    }
+    60% {
+        transform: translateY(-10rpx);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter1/detail2.vue b/xxdf/chapter1/detail2.vue
index ac631a1..a804da8 100644
--- a/xxdf/chapter1/detail2.vue
+++ b/xxdf/chapter1/detail2.vue
@@ -1,193 +1,175 @@
 <template>
-	<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-		<swiper-item>
-			<view class="page-container home-page">
-				<template v-if="loadedPages[0]">
-					<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/vision.png"
-						mode="" :lazy-load="true"></image>
-					<view v-show="shouldShowContent(0)" class="arrow-content">
-						<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
-					</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="/static/images/chapter1/vision2.png"
-						mode="" :lazy-load="true"></image>
-					<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
-						<image class="feel2-img" src="/static/images/chapter1/vision2-img.png" mode=""
-							:lazy-load="true"></image>
-					</view>
-					<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png"
-						mode="" :lazy-load="true"></image>
-				</template>
-			</view>
-		</swiper-item>
-	</swiper>
-	<MusicControl />
+	<view>
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item>
+            <view class="page-container home-page">
+                <template v-if="loadedPages[0]">
+                    <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/vision.png"
+                           mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(0)" class="arrow-content">
+                        <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/vision2.png"
+                           mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
+                        <image class="feel2-img" src="/static/images/chapter1/vision2-img.png" mode=""
+                               :lazy-load="true"></image>
+                    </view>
+                    <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png"
+                           mode="" :lazy-load="true"></image>
+                </template>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-	import {
-		ref,
-		reactive,
-		onMounted,
-		onUnmounted,
-		watch
-	} from 'vue';
-
-	const isVisible = ref(false);
-	const currentIndex = ref(0);
-
-	// 记录哪些页面已经加载过
-	const loadedPages = reactive({
-		0: false,
-		1: false
-	});
-
-	// 加载预缓冲区大小
-	const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了
-
-	// 决定是否应该显示特定页面的内容
-	const shouldShowContent = (index) => {
-		// 显示当前页和前后各preloadBuffer页
-		return Math.abs(index - currentIndex.value) <= preloadBuffer;
-	};
-
-	// 监听currentIndex变化，更新已加载页面状态
-	watch(currentIndex, (newIndex) => {
-		// 标记当前页面和前后buffer页为已加载
-		for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
-			loadedPages[i] = true;
-		}
-
-		// 更新动画状态
-		isVisible.value = newIndex === 1;
-	}, {
-		immediate: true
-	});
-
-	const handleSwiperChange = (e) => {
-		currentIndex.value = e.detail.current;
-	};
-
-	const goback = () => {
-		uni.navigateBack({
-			delta: 1
-		});
-	};
-
-	onMounted(() => {
-		// 初始化时标记第一页和相邻页为已加载
-		loadedPages[0] = true;
-		// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载
-		if (preloadBuffer >= 1) {
-			loadedPages[1] = true;
-		}
-	});
+<script>
+export default {
+    data() {
+        return {
+            isVisible: false,
+            currentIndex: 0,
+            loadedPages: {
+                0: false,
+                1: false
+            },
+            preloadBuffer: 1
+        };
+    },
+    methods: {
+        shouldShowContent(index) {
+            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+        },
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+        },
+        goback() {
+            uni.navigateBack({
+                delta: 1
+            });
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newIndex) {
+                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
+                    this.loadedPages[i] = true;
+                }
+                this.isVisible = newIndex === 1;
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.loadedPages[0] = true;
+        if (this.preloadBuffer >= 1) {
+            this.loadedPages[1] = true;
+        }
+    }
+};
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-
-
-	.animate-content {
-		position: absolute;
-		left: 0;
-		top: 16%;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		z-index: 2;
-		opacity: 0;
-		transform: scale(0.9);
-		filter: blur(5px);
-		transition: opacity 0.6s ease-out 0.2s,
-			transform 0.6s ease-out 0.2s,
-			filter 0.6s ease-out 0.2s;
-	}
-
-	.animate-visible {
-		opacity: 1;
-		transform: scale(1);
-		filter: blur(0px);
-	}
-
-
-	.feel2-img {
-		width: 89%;
-		height: 248rpx;
-	}
-
-	.arrow-content {
-		width: 100%;
-		position: absolute;
-		bottom: 5%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2;
-	}
-
-	.arrow-down {
-		width: 200rpx;
-		height: 40rpx;
-		animation: bounce 1.5s infinite;
-	}
-
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 180rpx;
-		height: 56rpx;
-	}
-
-	@keyframes bounce {
-
-		0%,
-		20%,
-		50%,
-		80%,
-		100% {
-			transform: translateY(0);
-		}
-
-		40% {
-			transform: translateY(-20rpx);
-		}
-
-		60% {
-			transform: translateY(-10rpx);
-		}
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
+
+.page-container {
+    height: 100vh;
+}
+
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.animate-content {
+    position: absolute;
+    left: 0;
+    top: 16%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(5px);
+    transition: opacity 0.6s ease-out 0.2s,
+    transform 0.6s ease-out 0.2s,
+    filter 0.6s ease-out 0.2s;
+}
+
+.animate-visible {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+}
+
+.feel2-img {
+    width: 89%;
+    height: 248rpx;
+}
+
+.arrow-content {
+    width: 100%;
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.arrow-down {
+    width: 200rpx;
+    height: 40rpx;
+    animation: bounce 1.5s infinite;
+}
+
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 12%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 180rpx;
+    height: 56rpx;
+}
+
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20rpx);
+    }
+    60% {
+        transform: translateY(-10rpx);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter1/detail3.vue b/xxdf/chapter1/detail3.vue
index 93f3397..23cc332 100644
--- a/xxdf/chapter1/detail3.vue
+++ b/xxdf/chapter1/detail3.vue
@@ -1,188 +1,173 @@
 <template>
-  <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-    <swiper-item>
-      <view class="page-container home-page">
-        <template v-if="loadedPages[0]">
-          <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/hearing.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(0)" class="arrow-content">
-            <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
-          </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="/static/images/chapter1/hearing2.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
-            <image class="feel2-img" src="/static/images/chapter1/hearing2-img.png" mode="" :lazy-load="true"></image>
-          </view>
-          <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image>
-        </template>
-      </view>
-    </swiper-item>
-  </swiper>
-  <MusicControl />
+	<view>
+		
+	
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item>
+            <view class="page-container home-page">
+                <template v-if="loadedPages[0]">
+                    <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/hearing.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(0)" class="arrow-content">
+                        <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/hearing2.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
+                        <image class="feel2-img" src="/static/images/chapter1/hearing2-img.png" mode="" :lazy-load="true"></image>
+                    </view>
+                    <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image>
+                </template>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-import {
-  ref,
-  reactive,
-  onMounted,
-  onUnmounted,
-  watch
-} from 'vue';
-
-const isVisible = ref(false);
-const currentIndex = ref(0);
-
-// 记录哪些页面已经加载过
-const loadedPages = reactive({
-  0: false,
-  1: false
-});
-
-// 加载预缓冲区大小
-const preloadBuffer = 1;
-
-// 决定是否应该显示特定页面的内容
-const shouldShowContent = (index) => {
-  // 显示当前页和前后各preloadBuffer页
-  return Math.abs(index - currentIndex.value) <= preloadBuffer;
-};
-
-// 监听currentIndex变化，更新已加载页面状态
-watch(currentIndex, (newIndex) => {
-  // 标记当前页面和前后buffer页为已加载
-  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
-    loadedPages[i] = true;
-  }
-  
-  // 更新动画状态
-  isVisible.value = newIndex === 1;
-}, { immediate: true });
-
-const handleSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
+<script>
+export default {
+    data() {
+        return {
+            isVisible: false,
+            currentIndex: 0,
+            loadedPages: {
+                0: false,
+                1: false
+            },
+            preloadBuffer: 1
+        };
+    },
+    methods: {
+        shouldShowContent(index) {
+            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+        },
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+        },
+        goback() {
+            uni.navigateBack({
+                delta: 1
+            });
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newIndex) {
+                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
+                    this.loadedPages[i] = true;
+                }
+                this.isVisible = newIndex === 1;
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.loadedPages[0] = true;
+        if (this.preloadBuffer >= 1) {
+            this.loadedPages[1] = true;
+        }
+    }
 };
-
-const goback = () => {
-  uni.navigateBack({
-    delta: 1
-  });
-};
-
-onMounted(() => {
-  // 初始化时标记第一页和相邻页为已加载
-  loadedPages[0] = true;
-  
-  // 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载
-  if(preloadBuffer >= 1) {
-    loadedPages[1] = true;
-  }
-});
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-
-
-	.animate-content {
-		position: absolute;
-		left: 0;
-		top: 16%;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		z-index: 2;
-		opacity: 0;
-		transform: scale(0.9);
-		filter: blur(5px);
-		transition: opacity 0.6s ease-out 0.2s,
-			transform 0.6s ease-out 0.2s,
-			filter 0.6s ease-out 0.2s;
-	}
-
-	.animate-visible {
-		opacity: 1;
-		transform: scale(1);
-		filter: blur(0px);
-	}
-
-
-	.feel2-img {
-		width: 89%;
-		height: 228rpx;
-	}
-
-	.arrow-content {
-		width: 100%;
-		position: absolute;
-		bottom: 5%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2;
-	}
-
-	.arrow-down {
-		width: 200rpx;
-		height: 40rpx;
-		animation: bounce 1.5s infinite;
-	}
-
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 180rpx;
-		height: 56rpx;
-	}
-
-	@keyframes bounce {
-
-		0%,
-		20%,
-		50%,
-		80%,
-		100% {
-			transform: translateY(0);
-		}
-
-		40% {
-			transform: translateY(-20rpx);
-		}
-
-		60% {
-			transform: translateY(-10rpx);
-		}
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
+
+.page-container {
+    height: 100vh;
+}
+
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.animate-content {
+    position: absolute;
+    left: 0;
+    top: 16%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(5px);
+    transition: opacity 0.6s ease-out 0.2s,
+    transform 0.6s ease-out 0.2s,
+    filter 0.6s ease-out 0.2s;
+}
+
+.animate-visible {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+}
+
+.feel2-img {
+    width: 89%;
+    height: 228rpx;
+}
+
+.arrow-content {
+    width: 100%;
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.arrow-down {
+    width: 200rpx;
+    height: 40rpx;
+    animation: bounce 1.5s infinite;
+}
+
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 12%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 180rpx;
+    height: 56rpx;
+}
+
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20rpx);
+    }
+    60% {
+        transform: translateY(-10rpx);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter1/detail4.vue b/xxdf/chapter1/detail4.vue
index d5de160..d9153bf 100644
--- a/xxdf/chapter1/detail4.vue
+++ b/xxdf/chapter1/detail4.vue
@@ -1,239 +1,227 @@
 <template>
-  <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-    <swiper-item>
-      <view class="page-container home-page">
-        <template v-if="loadedPages[0]">
-          <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/olfactory.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(0)" class="arrow-content">
-            <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
-          </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="/static/images/chapter1/olfactory2.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
-            <image class="feel2-img" src="/static/images/chapter1/olfactory2-img.png" mode="" :lazy-load="true"></image>
-          </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="/static/images/chapter1/olfactory4.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(2)" :class="['animate-content2', {'animate-visible': isVisible2}]">
-            <image class="feel4-img" src="/static/images/chapter1/olfactory4-img.png" mode="" :lazy-load="true"></image>
-          </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="/static/images/chapter1/olfactory3.png" mode="" :lazy-load="true"></image>
-          <image v-show="shouldShowContent(3)" class="feel3-img" src="/static/images/chapter1/olfactory3-img.png" mode="" :lazy-load="true"></image>
-          <image v-show="shouldShowContent(3)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image>
-        </template>
-      </view>
-    </swiper-item>
-  </swiper>
-  <MusicControl />
+	<view>
+		
+	
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item>
+            <view class="page-container home-page">
+                <template v-if="loadedPages[0]">
+                    <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/olfactory.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(0)" class="arrow-content">
+                        <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/olfactory2.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
+                        <image class="feel2-img" src="/static/images/chapter1/olfactory2-img.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/olfactory4.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(2)" :class="['animate-content2', {'animate-visible': isVisible2}]">
+                        <image class="feel4-img" src="/static/images/chapter1/olfactory4-img.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/olfactory3.png" mode="" :lazy-load="true"></image>
+                    <image v-show="shouldShowContent(3)" class="feel3-img" src="/static/images/chapter1/olfactory3-img.png" mode="" :lazy-load="true"></image>
+                    <image v-show="shouldShowContent(3)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image>
+                </template>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-import {
-  ref,
-  reactive,
-  onMounted,
-  onUnmounted,
-  watch
-} from 'vue';
-
-const isVisible = ref(false);
-const isVisible2 = ref(false);
-const currentIndex = ref(0);
-
-// 记录哪些页面已经加载过
-const loadedPages = reactive({
-  0: false,
-  1: false,
-  2: false,
-  3: false
-});
-
-// 加载预缓冲区大小
-const preloadBuffer = 1;
-
-// 决定是否应该显示特定页面的内容
-const shouldShowContent = (index) => {
-  // 显示当前页和前后各preloadBuffer页
-  return Math.abs(index - currentIndex.value) <= preloadBuffer;
+<script>
+export default {
+    data() {
+        return {
+            isVisible: false,
+            isVisible2: false,
+            currentIndex: 0,
+            loadedPages: {
+                0: false,
+                1: false,
+                2: false,
+                3: false
+            },
+            preloadBuffer: 1
+        };
+    },
+    methods: {
+        shouldShowContent(index) {
+            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+        },
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+        },
+        goback() {
+            const app = getApp();
+            app.globalData.mainSliderIndex = 3;
+            uni.navigateTo({
+                url: '/xxdf/home/home'
+            });
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newIndex) {
+                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
+                    this.loadedPages[i] = true;
+                }
+                this.isVisible = newIndex === 1;
+                this.isVisible2 = newIndex === 2;
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.loadedPages[0] = true;
+        if (this.preloadBuffer >= 1) {
+            this.loadedPages[1] = true;
+        }
+    }
 };
-
-// 监听currentIndex变化，更新已加载页面状态
-watch(currentIndex, (newIndex) => {
-  // 标记当前页面和前后buffer页为已加载
-  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
-    loadedPages[i] = true;
-  }
-  
-  // 更新动画状态
-  isVisible.value = newIndex === 1;
-  isVisible2.value = newIndex === 2;
-}, { immediate: true });
-
-const handleSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
-};
-
-const goback = () => {
-  const app = getApp();
-  app.globalData.mainSliderIndex = 3;
-  uni.navigateTo({
-    url: '/pages/home/home'
-  });
-};
-
-onMounted(() => {
-  // 初始化时标记第一页和相邻页为已加载
-  loadedPages[0] = true;
-  
-  // 预加载第二页
-  if(preloadBuffer >= 1) {
-    loadedPages[1] = true;
-  }
-});
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-
-	.animate-content2 {
-		position: absolute;
-		left: 0;
-		top: 25%;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		z-index: 2;
-		opacity: 0;
-		transform: scale(0.9);
-		filter: blur(5px);
-		transition: opacity 0.6s ease-out 0.2s,
-			transform 0.6s ease-out 0.2s,
-			filter 0.6s ease-out 0.2s;
-	}
-
-	.animate-content {
-		position: absolute;
-		left: 6%;
-		top: 32%;
-		width: 100%;
-		display: flex;
-		z-index: 2;
-		/* 初始状态 */
-		opacity: 0;
-		transform: translateX(-50px) scale(0.95);
-		filter: blur(2px);
-		/* 过渡效果 */
-		transition: opacity 0.7s ease-out 0.3s,
-			transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s,
-			filter 0.6s ease-out 0.3s;
-	}
-
-	.animate-visible {
-		opacity: 1;
-		transform: translateX(0) scale(1);
-		filter: blur(0);
-	}
-
-
-	.feel2-img {
-		width: 300rpx;
-	}
-
-	.feel3-img {
-		width: 100%;
-		height: 650rpx;
-		z-index: 2;
-		position: relative
-	}
-	.feel4-img{
-		width: 100%;
-		height: 400rpx;
-	}
-	.arrow-content {
-		width: 100%;
-		position: absolute;
-		bottom: 5%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2;
-	}
-
-	.arrow-down {
-		width: 200rpx;
-		height: 40rpx;
-		animation: bounce 1.5s infinite;
-	}
-
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 270rpx;
-		height: 60rpx;
-	}
-
-	@keyframes bounce {
-
-		0%,
-		20%,
-		50%,
-		80%,
-		100% {
-			transform: translateY(0);
-		}
-
-		40% {
-			transform: translateY(-20rpx);
-		}
-
-		60% {
-			transform: translateY(-10rpx);
-		}
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
+
+.page-container {
+    height: 100vh;
+}
+
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.animate-content2 {
+    position: absolute;
+    left: 0;
+    top: 25%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(5px);
+    transition: opacity 0.6s ease-out 0.2s,
+    transform 0.6s ease-out 0.2s,
+    filter 0.6s ease-out 0.2s;
+}
+
+.animate-content {
+    position: absolute;
+    left: 6%;
+    top: 32%;
+    width: 100%;
+    display: flex;
+    z-index: 2;
+    /* 初始状态 */
+    opacity: 0;
+    transform: translateX(-50px) scale(0.95);
+    filter: blur(2px);
+    /* 过渡效果 */
+    transition: opacity 0.7s ease-out 0.3s,
+    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s,
+    filter 0.6s ease-out 0.3s;
+}
+
+.animate-visible {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: blur(0);
+}
+
+.feel2-img {
+    width: 300rpx;
+}
+
+.feel3-img {
+    width: 100%;
+    height: 650rpx;
+    z-index: 2;
+    position: relative
+}
+
+.feel4-img {
+    width: 100%;
+    height: 400rpx;
+}
+
+.arrow-content {
+    width: 100%;
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.arrow-down {
+    width: 200rpx;
+    height: 40rpx;
+    animation: bounce 1.5s infinite;
+}
+
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 12%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 270rpx;
+    height: 60rpx;
+}
+
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20rpx);
+    }
+    60% {
+        transform: translateY(-10rpx);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter1/detail5.vue b/xxdf/chapter1/detail5.vue
index 8f8b368..7d8ea09 100644
--- a/xxdf/chapter1/detail5.vue
+++ b/xxdf/chapter1/detail5.vue
@@ -1,187 +1,172 @@
 <template>
-  <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-    <swiper-item>
-      <view class="page-container home-page">
-        <template v-if="loadedPages[0]">
-          <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/gustation.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(0)" class="arrow-content">
-            <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
-          </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="/static/images/chapter1/gustation2.png" mode="" :lazy-load="true"></image>
-          <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
-            <image class="feel2-img" src="/static/images/chapter1/gustation2-img.png" mode="" :lazy-load="true"></image>
-          </view>
-          <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image>
-        </template>
-      </view>
-    </swiper-item>
-  </swiper>
-  <MusicControl />
+	<view>
+		
+	
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item>
+            <view class="page-container home-page">
+                <template v-if="loadedPages[0]">
+                    <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/gustation.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(0)" class="arrow-content">
+                        <image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
+                    </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="/static/images/chapter1/gustation2.png" mode="" :lazy-load="true"></image>
+                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
+                        <image class="feel2-img" src="/static/images/chapter1/gustation2-img.png" mode="" :lazy-load="true"></image>
+                    </view>
+                    <image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png" mode="" :lazy-load="true"></image>
+                </template>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-import {
-  ref,
-  reactive,
-  onMounted,
-  onUnmounted,
-  watch
-} from 'vue';
-
-const isVisible = ref(false);
-const currentIndex = ref(0);
-
-// 记录哪些页面已经加载过
-const loadedPages = reactive({
-  0: false,
-  1: false
-});
-
-// 加载预缓冲区大小
-const preloadBuffer = 1;
-
-// 决定是否应该显示特定页面的内容
-const shouldShowContent = (index) => {
-  // 显示当前页和前后各preloadBuffer页
-  return Math.abs(index - currentIndex.value) <= preloadBuffer;
-};
-
-// 监听currentIndex变化，更新已加载页面状态
-watch(currentIndex, (newIndex) => {
-  // 标记当前页面和前后buffer页为已加载
-  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
-    loadedPages[i] = true;
-  }
-  
-  // 更新动画状态
-  isVisible.value = newIndex === 1;
-}, { immediate: true });
-
-const handleSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
+<script>
+export default {
+    data() {
+        return {
+            isVisible: false,
+            currentIndex: 0,
+            loadedPages: {
+                0: false,
+                1: false
+            },
+            preloadBuffer: 1
+        };
+    },
+    methods: {
+        shouldShowContent(index) {
+            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+        },
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+        },
+        goback() {
+            uni.navigateBack({
+                delta: 1
+            });
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newIndex) {
+                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
+                    this.loadedPages[i] = true;
+                }
+                this.isVisible = newIndex === 1;
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        this.loadedPages[0] = true;
+        if (this.preloadBuffer >= 1) {
+            this.loadedPages[1] = true;
+        }
+    }
 };
-
-const goback = () => {
-  uni.navigateBack({
-    delta: 1
-  });
-};
-
-onMounted(() => {
-  // 初始化时标记第一页和相邻页为已加载
-  loadedPages[0] = true;
-  
-  // 由于只有两页且预加载缓冲区为1，第二页也会被标记为已加载
-  if(preloadBuffer >= 1) {
-    loadedPages[1] = true;
-  }
-});
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-
-
-	.animate-content {
-		position: absolute;
-		right: 6%;
-		top: 24%;
-		display: flex;
-		justify-content: center;
-		z-index: 2;
-		opacity: 0;
-		transform: scale(0.9);
-		filter: blur(5px);
-		transition: opacity 0.6s ease-out 0.2s,
-			transform 0.6s ease-out 0.2s,
-			filter 0.6s ease-out 0.2s;
-	}
-
-	.animate-visible {
-		opacity: 1;
-		transform: scale(1);
-		filter: blur(0px);
-	}
-
-
-	.feel2-img {
-		width: 310rpx;
-		height: 410rpx;
-	}
-
-	.arrow-content {
-		width: 100%;
-		position: absolute;
-		bottom: 5%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2;
-	}
-
-	.arrow-down {
-		width: 200rpx;
-		height: 40rpx;
-		animation: bounce 1.5s infinite;
-	}
-
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 180rpx;
-		height: 56rpx;
-	}
-
-	@keyframes bounce {
-
-		0%,
-		20%,
-		50%,
-		80%,
-		100% {
-			transform: translateY(0);
-		}
-
-		40% {
-			transform: translateY(-20rpx);
-		}
-
-		60% {
-			transform: translateY(-10rpx);
-		}
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
+
+.page-container {
+    height: 100vh;
+}
+
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.animate-content {
+    position: absolute;
+    right: 6%;
+    top: 24%;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(5px);
+    transition: opacity 0.6s ease-out 0.2s,
+    transform 0.6s ease-out 0.2s,
+    filter 0.6s ease-out 0.2s;
+}
+
+.animate-visible {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+}
+
+.feel2-img {
+    width: 310rpx;
+    height: 410rpx;
+}
+
+.arrow-content {
+    width: 100%;
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.arrow-down {
+    width: 200rpx;
+    height: 40rpx;
+    animation: bounce 1.5s infinite;
+}
+
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 12%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 180rpx;
+    height: 56rpx;
+}
+
+@keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20rpx);
+    }
+    60% {
+        transform: translateY(-10rpx);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/home/home.vue b/xxdf/home/home.vue
index d6701da..ba7c27f 100644
--- a/xxdf/home/home.vue
+++ b/xxdf/home/home.vue
@@ -154,22 +154,22 @@ export default {
         },
         navigateToChapter1() {
             uni.navigateTo({
-                url: '/pages/chapter1/cover1'
+                url: '/xxdf/chapter1/cover1'
             });
         },
         navigateToChapter2() {
             uni.navigateTo({
-                url: '/pages/chapter2/cover'
+                url: '/xxdf/chapter2/cover'
             });
         },
         navigateToChapter3() {
             uni.navigateTo({
-                url: '/pages/chapter3/cover'
+                url: '/xxdf/chapter3/cover'
             });
         },
         navigateToChapter4() {
             uni.navigateTo({
-                url: '/pages/chapter4/cover'
+                url: '/xxdf/chapter4/cover'
             });
         }
     },
@@ -205,7 +205,7 @@ export default {
         return {
             title: '细嗅东方｜「Epic Soul」阅读体 issue02',
             mpId: 'wx8954209bb3ad489e',
-            path: '/pages/chapter4/cover',
+            path: '/xxdf/chapter4/cover',
             imageUrl: '/static/share-img.jpg'
         };
     },