diff --git a/App.vue b/App.vue
index 21b5f68..723f4b5 100644
--- a/App.vue
+++ b/App.vue
@@ -15,8 +15,8 @@
 			// 审核
 			this.Post({id: 10217},'/api/article/getArticleById').then(res => {
 				try {
-					// let SHFlag = res.data.title
-					let SHFlag = res.data.subtitle
+					let SHFlag = res.data.title
+					// let SHFlag = res.data.subtitle
 					uni.setStorageSync('SHFlag', SHFlag)
 				} catch(e) {}
 			});
diff --git a/pages.json b/pages.json
index 123031a..d380eaf 100644
--- a/pages.json
+++ b/pages.json
@@ -578,6 +578,67 @@
           }
         }
       ]
+    },
+    {
+      "root": "xrcc",
+      "pages": [
+        {
+          "path": "home/home",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter1/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter2/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter3/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter4/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter5/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter6/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chapter7/index",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
   ],
   "tabBar": {
diff --git a/subPackages/techan/detail.vue b/subPackages/techan/detail.vue
index ff3824d..05b3eb8 100644
--- a/subPackages/techan/detail.vue
+++ b/subPackages/techan/detail.vue
@@ -124,7 +124,7 @@
 					</view>
 					<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
 						<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex">
-							<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]"
+							<view :class="['botProduct',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]"
 								@click="changeProduct(botItem,botIndex)">
 								{{botItem.title}}
 							</view>
@@ -616,7 +616,7 @@
 	}
 
 	.botProduct {
-		width: 320rpx;
+		width: 680rpx;
 		// height: 78rpx;
 		border-radius: 13rpx;
 		background-color: #EFEFEF;
@@ -624,12 +624,11 @@
 		font-family: PingFang SC;
 		font-weight: 400;
 		color: #333333;
-		line-height: 78rpx;
 		text-align: center;
 		margin-bottom: 25rpx;
 		display: inline-block;
 		position: relative;
-		padding: 0 40rpx;
+		padding: 10rpx 40rpx;
 	}
 	.noStore{
 		background-color: rgba(239, 239, 239, 1);
diff --git a/subPackages/user/privacy.vue b/subPackages/user/privacy.vue
index 40eec99..3a3fb6d 100644
--- a/subPackages/user/privacy.vue
+++ b/subPackages/user/privacy.vue
@@ -11,7 +11,7 @@
 	export default{
 		data(){
 			return {
-				list:[{name:'用户协议',id:'10001'},{name:'隐私协议',id:'9999'},{name:'个人信息收集清单',id:'10202	'}],
+				list:[{name:'用户协议',id:'10218'},{name:'隐私协议',id:'10219'},{name:'个人信息收集清单',id:'10220'}],
 			}
 		},
 		onShow() {
diff --git a/xrcc/chapter1/index.vue b/xrcc/chapter1/index.vue
new file mode 100644
index 0000000..7d23a95
--- /dev/null
+++ b/xrcc/chapter1/index.vue
@@ -0,0 +1,215 @@
+<template>
+	<view style="width: 100vw;">
+		<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 === 1">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2-dian.png"
+							v-for="i in 3" :key="i" mode="widthFix" :class="['module'+(i+1)]"
+							@click="openPopup(i+1)"></image>
+					</template>
+
+					<template v-if="index === 3">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/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/chapter2/index')"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<!-- 第二页气泡弹框 -->
+		<uni-popup ref="chapterPopup">
+			<view style="width: 100vw;height: 100vh;" @click="$refs.chapterPopup.close()">
+				<image :src="getImageUrl(`img2-${popupIndex}.png`)" mode="widthFix" :class="[`img2-${popupIndex}`]">
+				</image>
+			</view>
+		</uni-popup>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 1,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img3s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img4.gif',
+				],
+				animationConfig: {
+					delay: 0.5,
+					duration: 3,
+					keyframes: {
+						start: 1,
+						first: 0.8,
+						second: 1.2,
+						third: 0.9,
+						end: 1.1
+					}
+				},
+				popupIndex: 1
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		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 = 2;
+				}else {
+					this.navIndex = 1
+				}
+			},
+			// 第二页气泡弹框
+			openPopup(i) {
+				this.popupIndex = i
+				this.$refs.chapterPopup.open();
+			},
+			// 生成图片完整 URL
+			getImageUrl(path) {
+				if (typeof path === 'object') {
+					path = path.url;
+				}
+				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/${path}`;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+
+		.module1 {
+			position: absolute;
+			width: 52.1rpx;
+			top: 1020rpx;
+			left: 235rpx;
+			animation: breath1 3s ease-in-out infinite;
+		}
+
+		.module2 {
+			position: absolute;
+			width: 52.1rpx;
+			top: 760rpx;
+			left: 317rpx;
+			animation: breath2 4s ease-in-out infinite;
+		}
+
+		.module3 {
+			position: absolute;
+			width: 52.1rpx;
+			top: 700rpx;
+			left: 498rpx;
+			animation: breath3 5s ease-in-out infinite;
+		}
+
+		// 呼吸效果动画 - 不同频率
+		@keyframes breath1 {
+
+			0%,
+			100% {
+				transform: scale(1);
+			}
+
+			50% {
+				transform: scale(1.2);
+			}
+		}
+
+		@keyframes breath2 {
+
+			0%,
+			100% {
+				transform: scale(1);
+			}
+
+			50% {
+				transform: scale(1.2);
+			}
+		}
+
+		@keyframes breath3 {
+
+			0%,
+			100% {
+				transform: scale(1);
+			}
+
+			50% {
+				transform: scale(1.2);
+			}
+		}
+
+		.img4-text {
+			width: 428.43rpx;
+			position: absolute;
+			top: 170rpx;
+			left: 100rpx;
+		}
+
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 100rpx;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.img2-1 {
+		width: 267.37rpx;
+		position: fixed;
+		top: 395rpx;
+		left: 70rpx;
+	}
+
+	.img2-2 {
+		width: 332.24rpx;
+		position: fixed;
+		top: 210rpx;
+		left: 360rpx;
+	}
+
+	.img2-3 {
+		width: 600.59rpx;
+		position: fixed;
+		bottom: 215rpx;
+		right: 40rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/chapter2/index.vue b/xrcc/chapter2/index.vue
new file mode 100644
index 0000000..131d274
--- /dev/null
+++ b/xrcc/chapter2/index.vue
@@ -0,0 +1,257 @@
+<template>
+	<view style="width: 100vw;">
+		<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 === 6">
+						<!-- 第一张图：延迟0.5秒 -->
+						<image 
+							v-if="showImg7_1"
+							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-1.png" 
+							mode="widthFix"
+							class="fade-in-image"
+							:style="{ animationDelay: '0s' }"
+						></image>
+						
+						<!-- 第二张图：延迟1秒 -->
+						<image 
+							v-if="showImg7_2"
+							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-2.png" 
+							mode="widthFix"
+							class="fade-in-image"
+							:style="{ animationDelay: '0s' }"
+						></image>
+						
+						<!-- 第三张图：延迟2秒 -->
+						<image 
+							v-if="showImg7_3"
+							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-3.png" 
+							mode="widthFix"
+							class="fade-in-image"
+							:style="{ animationDelay: '0s' }"
+						></image>
+					</template>
+					
+					<template v-if="index === 7">
+						<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8-${i+1}.png`"
+							v-for="i in 4" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]"
+							@click="openPopup(i+1)"></image>
+					</template>
+					
+					<template v-if="index === 9">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10-text.png" mode="widthFix" class="img10-text"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
+							class="btn-img" @click="gotoPath('/xrcc/chapter3/index')"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+		
+		<!-- 第八页气泡弹框 -->
+		<uni-popup ref="chapterPopup">
+			<image :src="getImageUrl(`img8-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;">
+			</image>
+		</uni-popup>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 2,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img3.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img4.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img5s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img6.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7s.jpg',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img9.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10.gif'
+				],
+				// 控制图片显示的变量
+				showImg7_1: false,
+				showImg7_2: false,
+				showImg7_3: false,
+				// 存储定时器
+				timers: [],
+				popupIndex: 1
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		onUnload() {
+			// 清除定时器
+			this.timers.forEach(timer => clearTimeout(timer))
+		},
+		methods: {
+			handleJumpToPage(idx) {
+				this.navIndex = idx
+				if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
+			},
+			handleSwiperChange(e) {
+				// 清除之前的定时器
+				this.timers.forEach(timer => clearTimeout(timer))
+				this.timers = []
+				
+				this.currentIndex = e.detail.current;
+				
+				if (this.currentIndex == this.swiperImages.length - 1) {
+					this.navIndex = 3;
+				}else {
+					this.navIndex = 2
+				}
+				
+				if (this.currentIndex === 6) {
+					// 重置显示状态（确保每次进入都重新动画）
+					this.showImg7_1 = false
+					this.showImg7_2 = false
+					this.showImg7_3 = false
+					
+					// 延迟0.5秒显示第一张图
+					const timer1 = setTimeout(() => {
+						this.showImg7_1 = true
+					}, 500)
+					
+					// 延迟1秒显示第二张图
+					const timer2 = setTimeout(() => {
+						this.showImg7_2 = true
+					}, 1000)
+					
+					// 延迟2秒显示第三张图
+					const timer3 = setTimeout(() => {
+						this.showImg7_3 = true
+					}, 2000)
+					
+					this.timers.push(timer1, timer2, timer3)
+				} else {
+					// 非目标索引时隐藏所有图片
+					this.showImg7_1 = false
+					this.showImg7_2 = false
+					this.showImg7_3 = false
+				}
+			},
+			// 第八页气泡弹框
+			openPopup(i) {
+				this.popupIndex = i
+				this.$refs.chapterPopup.open();
+			},
+			getImageUrl(path) {
+				if (typeof path === 'object') {
+					path = path.url;
+				}
+				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/${path}`;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+		
+		.img10-text {
+			width: 484rpx;
+			position: absolute;
+			top: 170rpx;
+			left: 100rpx;
+		}
+
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 100rpx;
+		}
+		
+		.module-img {
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			width: 564.25rpx;
+		}
+		.module1 {
+			top: 630rpx;
+		}
+		.module2 {
+			top: 780rpx;
+		}
+		.module3 {
+			top: 930rpx;
+		}
+		.module4 {
+			top: 1080rpx;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	/* 渐入动画样式 */
+	.fade-in-image {
+		/* 初始状态：透明 */
+		opacity: 0;
+		/* 添加过渡动画：1秒内透明度从0到1 */
+		animation: fadeIn 1s ease-out forwards;
+		/* 根据需要调整图片的定位 */
+		position: absolute;
+	}
+
+	/* 渐入动画关键帧 */
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20rpx); /* 可选：添加轻微上移动画 */
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.fade-in-image:nth-child(1) {
+		width: 22.97rpx;
+		top: 825rpx;
+		right: 191rpx;
+	}
+
+	.fade-in-image:nth-child(2) {
+		width: 34.95rpx;
+		top: 790rpx;
+		right: 170rpx;
+	}
+
+	.fade-in-image:nth-child(3) {
+		width: 144.81rpx;
+		top: 680rpx;
+		right: 71rpx;
+	}
+</style>
diff --git a/xrcc/chapter3/index.vue b/xrcc/chapter3/index.vue
new file mode 100644
index 0000000..8de0ea1
--- /dev/null
+++ b/xrcc/chapter3/index.vue
@@ -0,0 +1,244 @@
+<template>
+	<view style="width: 100vw; position: relative;">
+		<!-- 滑动拦截遮罩（仅在第5页且未输入内容时显示） -->
+		<view 
+			v-if="currentIndex === 5 && !inputValue.trim()"
+			class="swipe-blocker"
+			@click="$refs.customPopup.open()"
+		></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})` }">
+					<!-- 第5页内容 -->
+					<template v-if="index === 5">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-text.png"
+							mode="widthFix" class="img6-text"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btn.png"
+							mode="widthFix" class="img6-btn" @click="$refs.customPopup.open()"></image>
+					</template>
+					
+					<!-- 第6页内容 -->
+					<template v-if="index === 6">
+						<view class="img7-box">
+							<view class="img7-textBg">
+								<view>你的</view>
+								<view style="margin: 10rpx 0;">{{inputValue}}</view>
+								<view>已备好</view>
+							</view>
+							<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-text.png"
+								mode="widthFix" class="img7-text"></image>
+						</view>
+					</template>
+					
+					<template v-if="index === 7">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8-text.png" mode="widthFix" class="img8-text"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
+							class="btn-img" @click="gotoPath('/xrcc/chapter4/index')"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<!-- 输入弹框 -->
+		<uni-popup ref="customPopup" type="center">
+			<view class="popup-content">
+				<textarea v-model="inputValue" class="input-area" placeholder="填写你的“物件”  (可以是一本书、一首歌、一段回忆、一个困惑...)"
+					maxlength="20"></textarea>
+
+				<view class="word-count">
+					{{ inputValue.length }}/20
+				</view>
+
+				<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6-btns.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
+			</view>
+		</uni-popup>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	// 脚本部分保持不变
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 3,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img2s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img3s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img4s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img5s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img6.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img8.gif',
+				],
+				inputValue: '',
+				swipeDirection: ''
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		methods: {
+			handleJumpToPage(idx) {
+				this.navIndex = idx
+				if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1
+			},
+			handleTouchStart(e) {
+				this.startY = e.touches[0].clientY;
+			},
+			handleTouchMove(e) {
+				const moveY = e.touches[0].clientY;
+				this.swipeDirection = moveY < this.startY ? 'down' : 'up';
+			},
+			handleSwiperChange(e) {
+				const newIndex = e.detail.current;
+				
+				if (this.currentIndex === 5 && newIndex === 6 && !this.inputValue.trim()) {
+					this.currentIndex = 5;
+					uni.showToast({
+						title: '请先填写内容才能继续',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+				
+				this.currentIndex = newIndex;
+				if (this.currentIndex === this.swiperImages.length - 1) {
+					this.navIndex = 4;
+				} else {
+					this.navIndex = 3;
+				}
+			},
+			submit() {
+				if (!this.inputValue.trim()) return;
+				this.$refs.customPopup.close()
+				this.currentIndex = 6;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/* 原有样式保持不变 */
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+
+		.img6-text {
+			width: 442.41rpx;
+			position: absolute;
+			top: 170rpx;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+		}
+		.img6-btn {
+			position: absolute;
+			width: 520.31rpx;
+			bottom: 210rpx;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+		}
+		
+		/* 其他样式保持不变 */
+		.img7-box {
+			position: relative;
+			top: 170rpx;
+			margin: 0 auto;
+		}
+		
+		.img7-textBg {
+			background-image: url('https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-textBg.png');
+			background-size: 100% 100%;
+			padding: 30rpx 50rpx;
+			font-size: 50rpx;
+			text-align: center;
+			color: #fff;
+			width: 520.31rpx;
+			margin: 0 auto;
+		}
+		
+		.img7-text {
+			display: block;
+			margin: 60rpx auto 0;
+			width: 447.4rpx;
+		}
+		
+		.img8-text {
+			width: 379.49rpx;
+			position: absolute;
+			top: 170rpx;
+			left: 100rpx;
+		}
+		
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 100rpx;
+		}
+	}
+
+	.swipe-blocker {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 9;
+	}
+
+	.popup-content {
+		width: 85vw;
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+
+		.input-area {
+			width: 100%;
+			min-height: 180rpx;
+			padding: 20rpx;
+			border: 2rpx solid #eee;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+			resize: none;
+			box-sizing: border-box;
+			margin-bottom: 15rpx;
+		}
+
+		.word-count {
+			text-align: right;
+			font-size: 24rpx;
+			color: #999;
+			margin-bottom: 35rpx;
+		}
+
+		.confirm-btn {
+			width: 100%;
+		}
+	}
+</style>
diff --git a/xrcc/chapter4/index.vue b/xrcc/chapter4/index.vue
new file mode 100644
index 0000000..e6b4e0e
--- /dev/null
+++ b/xrcc/chapter4/index.vue
@@ -0,0 +1,132 @@
+<template>
+	<view style="width: 100vw;">
+		<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">
+						<view class="module-box">
+							<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4-${i+1}.png`"
+								v-for="i in 5" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]"
+								@click="openPopup(i+1)"></image>
+						</view>
+					</template>
+					
+					<template v-if="index === 5">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5-text.png" mode="widthFix" class="img5-text"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
+							class="btn-img" @click="gotoPath('/xrcc/chapter5/index')"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+		
+		<uni-popup ref="chapterPopup">
+			<image :src="getImageUrl(`img4-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;">
+			</image>
+		</uni-popup>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 4,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img3.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5s.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img6.gif',
+				],
+				popupIndex: 1
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		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 = 5;
+				}else {
+					this.navIndex = 4
+				}
+			},
+			openPopup(i) {
+				this.popupIndex = i
+				this.$refs.chapterPopup.open();
+			},
+			getImageUrl(path) {
+				if (typeof path === 'object') {
+					path = path.url;
+				}
+				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/${path}`;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+		
+		.img5-text {
+			width: 576.23rpx;
+			position: absolute;
+			top: 170rpx;
+			left: 100rpx;
+		}
+		
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 100rpx;
+		}
+		
+		.module-box {
+			position: absolute;
+			top: 460rpx;
+			text-align: center;
+			
+			image {
+				width: 650rpx;
+				margin-bottom: 80rpx;
+			}
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/chapter5/index.vue b/xrcc/chapter5/index.vue
new file mode 100644
index 0000000..0ba3adf
--- /dev/null
+++ b/xrcc/chapter5/index.vue
@@ -0,0 +1,191 @@
+<template>
+	<view style="width: 100vw;">
+		<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 === 1">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2s.png" mode="widthFix"
+							:class="['img2s', {'animate-enter-from-right': animateShow}]"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2-btn.png"
+							mode="widthFix" class="img2-btn" @click="gotoPath('/subPackages/techan/detail?id=39')"></image>
+					</template>
+					<template v-if="index === 2">
+						<view class="img3-btn" @click="gotoPath('/subPackages/techan/detail?id=39')">立即购买</view>
+					</template>
+					
+					<template v-if="index === 5">
+						<view class="flex-column">
+							<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-texts.png" mode="widthFix"
+								class="img5-text"></image>
+							<!-- <image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-btn.png"
+								mode="widthFix" class="img5-btn" @click="goHome"></image> -->
+						</view>
+					</template>
+					
+					<template v-if="index === 6">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6-text.png" mode="widthFix"
+							class="img6-text" @click="gotoPath('/xrcc/chapter6/index')"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 5,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2ss.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img3.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img4.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img8.png',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5.gif',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6.png'
+				],
+				animateShow: false,
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		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 == 1) {
+					this.animateShow = true
+				}else {
+					this.animateShow = false
+				}
+				
+				if (this.currentIndex == this.swiperImages.length - 1) {
+					this.navIndex = 6;
+				} else {
+					this.navIndex = 5
+				}
+			},
+			// 去首页
+			goHome() {
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+
+		.img2s {
+			position: absolute;
+			top: 380rpx;
+			right: 25rpx;
+			width: 358rpx;
+			transform: translateX(100%);
+			opacity: 0;
+		}
+
+		.img2-btn {
+			width: 558rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			bottom: 70rpx;
+		}
+		
+		.img3-btn {
+			width: 558rpx;
+			line-height: 72rpx;
+			text-align: center;
+			border-radius: 20rpx;
+			border: 2rpx solid;
+			font-size: 30rpx;
+			color: #fff;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			bottom: 180rpx;
+		}
+		
+		.flex-column {
+			position: absolute;
+			bottom: 280rpx;
+			width: 100%;
+			align-items: center;
+			
+			.img5-text {
+				width: 100%;
+			}
+			
+			.img5-btn {
+				width: 230rpx;
+				margin-top: 99rpx;
+			}
+		}
+
+		.img6-text {
+			width: 408.46rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			bottom: 365rpx
+		}
+	}
+
+	/* 从右往左进入的动画 */
+	.animate-enter-from-right {
+		animation: enterFromRight 2s ease-out forwards;
+	}
+
+	@keyframes enterFromRight {
+		0% {
+			/* 起始位置：右侧外部 */
+			transform: translateX(100%);
+			opacity: 0;
+		}
+
+		100% {
+			/* 结束位置：正常位置 */
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/chapter6/index.vue b/xrcc/chapter6/index.vue
new file mode 100644
index 0000000..a9ea516
--- /dev/null
+++ b/xrcc/chapter6/index.vue
@@ -0,0 +1,216 @@
+<template>
+	<view style="width: 100vw;">
+		<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/chapter5/img7-1.png" mode="widthFix"
+							class="img7-1" @click="$refs.customPopup.open()"></image>
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-2.png" mode="widthFix"
+							class="img7-2" style="top: 620rpx;" @click="$refs.customPopups.open()"></image>
+							
+						<view class="bgm-box flex-between">
+							<view :class="{'bgm-active': index == bgmIndex}" v-for="(item,index) in bgmList" :key="index" @click="bgmIndex = index">{{item}}</view>
+						</view>
+						
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-btn.png" mode="widthFix"
+						 class="img7-btn" @click="confirm"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+		
+		<!-- 输入弹框 -->
+		<uni-popup ref="customPopup" type="center">
+			<view class="popup-content">
+				<textarea v-model="inputValue" class="input-area" placeholder="我的星槎"
+					maxlength="20"></textarea>
+		
+				<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
+			</view>
+		</uni-popup>
+		
+		<!-- 输入弹框 -->
+		<uni-popup ref="customPopups" type="center">
+			<view class="popup-content">
+				<textarea v-model="inputValues" class="input-area" placeholder="我的目的地"
+					maxlength="20"></textarea>
+		
+				<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
+			</view>
+		</uni-popup>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 5,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7.png',
+				],
+				inputValue: '',
+				inputValues: '',
+				bgmList: [
+					'古典',
+					'民谣',
+					'电子',
+					'自然白噪音'
+				],
+				bgmIndex: null
+			}
+		},
+		methods: {
+			handleJumpToPage(idx) {
+				this.navIndex = idx
+				if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
+			},
+			handleSwiperChange(e) {
+			    this.currentIndex = e.detail.current;
+			},
+			submit() {
+				this.$refs.customPopup.close()
+				this.$refs.customPopups.close()
+			},
+			getImageUrl(path) {
+				if (typeof path === 'object') {
+					path = path.url;
+				}
+				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/${path}`;
+			},
+			confirm() {
+				if (!this.inputValue.trim() || !this.inputValues.trim() || this.bgmIndex == null) {
+					uni.showToast({
+					    title: '请先填写或选择您的日志信息',
+					    icon: 'none'
+					});
+				}else {
+					let data = {
+						text1: this.inputValue.trim(),
+						text2: this.inputValues.trim(),
+						imgSrc: this.getImageUrl(`img${this.bgmIndex + 1}s.png`),
+						imgTitle: this.bgmList[this.bgmIndex]
+					}
+					this.gotoPath('/xrcc/chapter7/index?data=' + JSON.stringify(data))
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+		
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 84rpx;
+		}
+		
+		.img7-1, .img7-2 {
+			width: 437.67rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			top: 365rpx;
+		}
+		
+		.bgm-box {
+			width: 437.67rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 650rpx;
+			margin: 0 auto;
+			flex-wrap: wrap;
+			
+			view {
+				width: 207.89rpx;
+				line-height: 42.77rpx;
+				border-radius: 2rpx;
+				text-align: center;
+				color: #fff;
+				font-size: 20rpx;
+				border: 1rpx solid #fff;
+			}
+			view:nth-child(n+3) {
+				margin-top: 17rpx;
+			}
+			
+			.bgm-active {
+				border-color: #00C48C;
+				color: #00C48C;
+			}
+		}
+		
+		.img7-btn {
+			width: 439.66rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 244rpx;
+			margin: 0 auto;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+	
+	.popup-content {
+		width: 85vw;
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+	
+		.input-area {
+			width: 100%;
+			min-height: 180rpx;
+			padding: 20rpx;
+			border: 2rpx solid #747c8e;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+			resize: none;
+			box-sizing: border-box;
+			margin-bottom: 15rpx;
+		}
+	
+		.word-count {
+			text-align: right;
+			font-size: 24rpx;
+			color: #999;
+			margin-bottom: 35rpx;
+		}
+	
+		.confirm-btn {
+			width: 100%;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/chapter7/index.vue b/xrcc/chapter7/index.vue
new file mode 100644
index 0000000..5c804af
--- /dev/null
+++ b/xrcc/chapter7/index.vue
@@ -0,0 +1,143 @@
+<template>
+	<view style="width: 100vw;">
+		<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">
+						<view class="box">
+							<!-- <view class="title">我的星槎</view> -->
+							<view class="subtitle subtitle1">{{info.text1}}</view>
+							<!-- <view class="title">我的目的地</view> -->
+							<view class="subtitle subtitle2">{{info.text2}}</view>
+							<!-- <view class="title">我的航行BGM</view> -->
+							<view class="subtitle subtitle3">{{info.imgTitle}}</view>
+						</view>
+					</template>
+					
+					<template v-if="index === 1">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5-text.png" mode="widthFix" class="img5-text.png"></image>
+					</template>
+					
+					<!-- 二维码 -->
+					<template v-if="index === 2">
+						<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/qrcode.png" mode="widthFix" class="qrcode" :show-menu-by-longpress="true"></image>
+					</template>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 5,
+				swiperImages: [
+					'',
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/img5.png',
+					'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img7.png'
+				],
+				info: {}
+			}
+		},
+		onLoad(option) {
+			if(option) {
+				let data = JSON.parse(option.data)
+				this.info = data
+				console.log(data)
+				this.swiperImages[0] = data.imgSrc
+			}
+		},
+		methods: {
+			handleJumpToPage(idx) {
+				this.navIndex = idx
+			},
+			handleSwiperChange(e) {
+			    this.currentIndex = e.detail.current;
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% 100%;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+		
+		.box {
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			top: 300rpx;
+			text-align: center;
+			width: 100%;
+			color: rgba(220, 221, 221, 1);
+			
+			.title {
+				font-size: 25rpx;
+				margin-top: 50rpx;
+			}
+			.subtitle {
+				position: absolute;
+				font-size: 40rpx;
+				left: 0;
+				right: 0;
+				margin: 0 auto;
+			}
+			.subtitle1 {
+				top: 150rpx;
+			}
+			.subtitle2 {
+				top: 280rpx;
+			}
+			.subtitle3 {
+				top: 410rpx;
+			}
+		}
+		
+		.img5-text.png {
+			width: 312.58rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			bottom: 492rpx;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+	
+	.qrcode {
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		width: 25vw;
+		bottom: 28vh;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/chapter8/index.vue b/xrcc/chapter8/index.vue
new file mode 100644
index 0000000..0b339f9
--- /dev/null
+++ b/xrcc/chapter8/index.vue
@@ -0,0 +1,75 @@
+<template>
+	<view style="width: 100vw;">
+		<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})` }">
+					
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+
+		<MusicControl />
+	</view>
+</template>
+
+<script>
+	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
+	export default {
+		components: {
+			MusicControl,
+			NavMenu
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				navIndex: 3,
+				swiperImages: [
+					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif',
+				]
+			}
+		},
+		onLoad(option) {
+			this.currentIndex = option.currentIndex || 0
+			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
+		},
+		methods: {
+			handleJumpToPage(idx) {
+				this.navIndex = idx
+			},
+			handleSwiperChange(e) {
+			    this.currentIndex = e.detail.current;
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.swiper {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.swiper-item {
+		width: 100vw;
+		height: 100vh;
+		background-size: 100% auto;
+		background-color: #000;
+		background-repeat: no-repeat;
+		position: relative;
+		
+		.btn-img {
+			position: absolute;
+			width: 149.8rpx;
+			bottom: 290rpx;
+			left: 84rpx;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/components/NavMenu.vue b/xrcc/components/NavMenu.vue
new file mode 100644
index 0000000..ef2db66
--- /dev/null
+++ b/xrcc/components/NavMenu.vue
@@ -0,0 +1,243 @@
+<template>
+	<view>
+		<view class="overlay" v-if="showMenu" @click="onCloseMenu"></view>
+		<view class="fixed-nav" :class="{'hidden': showMenu}" @click="onShowMenu">
+			<image class="nav-icon" :class="{'rotated': iconRotated, 'bounce-back': iconBounceBack}" :src="navIconSrc"
+				mode="aspectFill"></image>
+		</view>
+		<view class="nav-menu" :class="{'show': showMenu}">
+			<view class="nav-item" :class="{'item-active': isItemActive(item)}" v-for="item in menuItems"
+				:key="item.targetIndex" @click="() => onJumpToPage(item)">
+				<view v-if="item.text.includes('#Chapter')" class="chapter-text">
+					<text class="chapter-title">#Chapter</text>
+					<text :class="{'active': isItemActive(item)}" class="chapter-number">
+						{{ item.text.replace('#Chapter', '') }}
+					</text>
+				</view>
+				<text v-else :class="{'active': isItemActive(item)}">{{ item.text }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			// 当前激活的索引
+			navIndex: {
+				type: Number,
+				required: true
+			},
+			// 导航图标地址
+			navIconSrc: {
+				type: String,
+				default: 'https://static.ticket.sz-trip.com/epicSoul/taozi/nav-icon.png'
+			}
+		},
+		data() {
+			return {
+				showMenu: false,
+				iconRotated: false,
+				iconBounceBack: false,
+				menuItems: [{
+						text: 'INTRO序曲',
+						targetIndex: 0,
+						path: "/xrcc/home/home"
+					},
+					{
+						text: 'SENCE01 星际飞船',
+						targetIndex: 1,
+						path: "/xrcc/home/home?currentIndex=3"
+					},
+					{
+						text: 'SENCE02 银河扁舟',
+						targetIndex: 2,
+						path: "/xrcc/chapter1/index?currentIndex=3"
+					},
+					{
+						text: 'SENCE03 渡梦旅人',
+						targetIndex: 3,
+						path: "/xrcc/chapter2/index?currentIndex=9"
+					},
+					{
+						text: 'SENCE04 今夜起航',
+						targetIndex: 4,
+						path: "/xrcc/chapter3/index?currentIndex=7"
+					},
+					{
+						text: 'SENCE05 当代星槎',
+						targetIndex: 5,
+						path: "/xrcc/chapter4/index?currentIndex=5"
+					},
+					{
+						text: '有感商品',
+						targetIndex: 6,
+						path: "/subPackages/techan/detail?id=39"
+					}
+				],
+			};
+		},
+		watch: {
+			navIndex(newVal) {
+				console.log(newVal)
+				if(newVal) this.navIndex = newVal
+			}
+		},
+		methods: {
+			onShowMenu() {
+				this.iconRotated = true;
+				setTimeout(() => {
+					this.showMenu = true;
+					this.$emit('menu-show');
+				}, 300);
+			},
+			onCloseMenu() {
+				this.showMenu = false;
+				setTimeout(() => {
+					this.iconBounceBack = true;
+					this.iconRotated = false;
+					setTimeout(() => {
+						this.iconBounceBack = false;
+					}, 500);
+				}, 300);
+				this.$emit('menu-hide');
+			},
+			onJumpToPage(item) {
+				console.log(this.navIndex)
+				if(item.path && item.targetIndex != this.navIndex) this.gotoPath(item.path)
+				this.onCloseMenu();
+			},
+			isItemActive(item) {
+				return this.navIndex === item.targetIndex;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.3);
+		z-index: 100;
+	}
+
+	.fixed-nav {
+		width: 80rpx;
+		height: 80rpx;
+		background-color: rgb(0 0 0 / 0.7);
+		border-radius: 10rpx 0 0 10rpx;
+		position: fixed;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9;
+		transition: transform 0.3s ease, opacity 0.3s ease;
+	}
+
+	.fixed-nav.hidden {
+		transform: translateX(100%);
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.nav-icon {
+		width: 35rpx;
+		height: 35rpx;
+		transition: transform 0.3s ease;
+	}
+
+	.nav-icon.rotated {
+		transform: rotate(180deg);
+	}
+
+	.nav-icon.bounce-back {
+		animation: bounceRotation 0.5s ease;
+	}
+
+	@keyframes bounceRotation {
+		0% {
+			transform: rotate(180deg);
+		}
+
+		50% {
+			transform: rotate(-20deg);
+		}
+
+		75% {
+			transform: rotate(10deg);
+		}
+
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	.nav-menu {
+		position: fixed;
+		top: 50%;
+		right: 0;
+		transform: translate(100%, -50%);
+		z-index: 999;
+		background-color: rgba(255, 255, 255, 0.95);
+		border-radius: 16rpx 0 0 16rpx;
+		box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
+		transition: transform 0.3s ease;
+	}
+
+	.nav-menu.show {
+		transform: translate(0, -50%);
+	}
+
+	.nav-item {
+		padding: 20rpx;
+		text-align: center;
+
+		text {
+			color: #333;
+			opacity: 0.7;
+			font-size: 28rpx;
+		}
+	}
+
+	.item-active {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.nav-item .active {
+		color: #333;
+		opacity: 1;
+	}
+
+	.chapter-text {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		line-height: 1.3;
+	}
+
+	.chapter-title {
+		color: #fff;
+		opacity: 0.7;
+		font-size: 24rpx;
+	}
+
+	.chapter-number {
+		color: #fff;
+		opacity: 0.7;
+		font-size: 28rpx;
+		margin-top: 8rpx;
+	}
+
+	.item-active .chapter-title,
+	.item-active .chapter-number.active {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/xrcc/components/SinglePlayGif.vue b/xrcc/components/SinglePlayGif.vue
new file mode 100644
index 0000000..a3d56a8
--- /dev/null
+++ b/xrcc/components/SinglePlayGif.vue
@@ -0,0 +1,95 @@
+<template>
+  <view class="gif-container">
+    <view class="dynamic-container">
+      <image 
+        :src="gifSrc" 
+        mode="widthFix"
+        class="gif-image"
+        :style="{ display: isPlaying ? 'block' : 'none' }"
+        @load="startGifPlay"
+      ></image>
+      <image 
+        :src="staticCover" 
+        mode="widthFix"
+        class="gif-image"
+        :style="{ display: isPlaying ? 'none' : 'block' }"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // GIF图片路径
+    gifSrc: {
+      type: String,
+      required: true
+    },
+    // 静态封面图
+    staticCover: {
+      type: String,
+      default: ''
+    },
+    // GIF播放时长(毫秒)
+    duration: {
+      type: Number,
+      default: 2000
+    }
+  },
+  data() {
+    return {
+      isPlaying: false,
+      playTimer: null
+    }
+  },
+  methods: {
+    // 开始播放GIF
+    startGifPlay() {
+      this.isPlaying = true;
+      
+      // 清除之前的定时器
+      if (this.playTimer) {
+        clearTimeout(this.playTimer);
+      }
+      
+      // 播放完成后显示静态封面
+      this.playTimer = setTimeout(() => {
+        this.isPlaying = false;
+      }, this.duration);
+    }
+  },
+  onUnload() {
+    // 页面卸载时清除定时器
+    if (this.playTimer) {
+      clearTimeout(this.playTimer);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gif-container {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+
+.gif-image {
+  width: 100vw;
+  height: auto;
+}
+
+.dynamic-container {
+  position: relative;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+
+.dynamic-container image {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
diff --git a/xrcc/home/home.vue b/xrcc/home/home.vue
new file mode 100644
index 0000000..bd3ffe3
--- /dev/null
+++ b/xrcc/home/home.vue
@@ -0,0 +1,148 @@
+<template>
+	<view style="width: 100vw;">
+		<!-- <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>
+
+		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
+
+		<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
+	}
+</script>
+
+<style lang="scss" scoped>
+	.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;
+
+		.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;
+		}
+	}
+
+	.swiper-img {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>
\ No newline at end of file