diff --git a/bmzm/chapter1/index.vue b/bmzm/chapter1/index.vue
index ba481e5..ca9a618 100644
--- a/bmzm/chapter1/index.vue
+++ b/bmzm/chapter1/index.vue
@@ -20,14 +20,17 @@
             </swiper-item>
         </swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/chapter2/index.vue b/bmzm/chapter2/index.vue
index d3a4b3c..15c6f29 100644
--- a/bmzm/chapter2/index.vue
+++ b/bmzm/chapter2/index.vue
@@ -9,14 +9,17 @@
             </swiper-item>
         </swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/chapter3/index.vue b/bmzm/chapter3/index.vue
index 3ae8cc8..56c6c8b 100644
--- a/bmzm/chapter3/index.vue
+++ b/bmzm/chapter3/index.vue
@@ -28,14 +28,17 @@
         </uni-popup>
 		
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/chapter4/index.vue b/bmzm/chapter4/index.vue
index d597ffd..b9afb80 100644
--- a/bmzm/chapter4/index.vue
+++ b/bmzm/chapter4/index.vue
@@ -18,14 +18,17 @@
 			</swiper-item>
 		</swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
 	export default {
 		components: {
-		    MusicControl
+		    MusicControl,
+			NavMenu
 		},
 		data() {
 			return {
diff --git a/bmzm/chapter5/index.vue b/bmzm/chapter5/index.vue
index 2d96b64..246b0d1 100644
--- a/bmzm/chapter5/index.vue
+++ b/bmzm/chapter5/index.vue
@@ -7,14 +7,17 @@
             </swiper-item>
         </swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/chapter6/index.vue b/bmzm/chapter6/index.vue
index af26ca7..24b2b82 100644
--- a/bmzm/chapter6/index.vue
+++ b/bmzm/chapter6/index.vue
@@ -10,14 +10,17 @@
             </swiper-item>
         </swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/chapter7/index.vue b/bmzm/chapter7/index.vue
index bb241ef..8916bf8 100644
--- a/bmzm/chapter7/index.vue
+++ b/bmzm/chapter7/index.vue
@@ -50,14 +50,17 @@
             </view>
         </uni-popup>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/bmzm/components/NavMenu.vue b/bmzm/components/NavMenu.vue
new file mode 100644
index 0000000..5097e14
--- /dev/null
+++ b/bmzm/components/NavMenu.vue
@@ -0,0 +1,214 @@
+<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: '购物车',
+						targetIndex: 7,
+						path: "/subPackages/user/gwc"
+					}
+				],
+			};
+		},
+		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/bmzm/home/home.vue b/bmzm/home/home.vue
index 5c9b13e..fd6f2ed 100644
--- a/bmzm/home/home.vue
+++ b/bmzm/home/home.vue
@@ -18,14 +18,17 @@
             </swiper-item>
         </swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/pig/components/SideNav.vue b/pig/components/SideNav.vue
index 1ca5fb6..fc95878 100644
--- a/pig/components/SideNav.vue
+++ b/pig/components/SideNav.vue
@@ -81,6 +81,11 @@ export default {
 		  targetIndex: 8,
 		  path: "/subPackages/techan/detail?id=38",
 		},
+		{
+			text: '购物车',
+			targetIndex: 10,
+			path: "/subPackages/user/gwc"
+		}
       ],
     };
   },
diff --git a/pig/home/home.vue b/pig/home/home.vue
index adb0a2c..1fd718f 100644
--- a/pig/home/home.vue
+++ b/pig/home/home.vue
@@ -278,6 +278,9 @@
 	      点击购买
 	    </text>
 	  </view>
+	  <view class="nav-item" @click="gotoPath('/subPackages/user/gwc')">
+	  	<text>购物车</text>
+	  </view>
 	 
     </view>
     <!-- <BuyPeaches /> -->
diff --git a/subPackages/techan/detail.vue b/subPackages/techan/detail.vue
index 05b3eb8..b74f7a1 100644
--- a/subPackages/techan/detail.vue
+++ b/subPackages/techan/detail.vue
@@ -156,6 +156,11 @@
 				</view>
 			</view>
 		</uni-popup>
+		
+		<!-- 购物车数量 -->
+		<!-- <view class="cart-box flex-center">
+			<image src="https://static.ticket.sz-trip.com/epicSoul/gowuche.png" mode="widthFix"></image>
+		</view> -->
 	</view>
 </template>
 
@@ -180,6 +185,14 @@
 				addCartOrOrder: null, //true 加入购物车 false 购买
 			};
 		},
+		onShow() {
+			// 获取购物车数量
+			this.Post({
+				is_post: 1,
+			}, '/api/shopping/getShoppingList').then(res => {
+				console.log(res)
+			})
+		},
 		onLoad(option) {
 			this.id = option.id;
 			this.getInfo();
@@ -793,5 +806,17 @@
 	}
 }
 
-
+.cart-box {
+	width: 100rpx;
+	height: 100rpx;
+	background: #f5f5f5;
+	position: fixed;
+	bottom: 200rpx;
+	right: 50rpx;
+	z-index: 100;
+	
+	image {
+		width: 60rpx;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/taozi/home/home.vue b/taozi/home/home.vue
index 9db6e54..389b3e0 100644
--- a/taozi/home/home.vue
+++ b/taozi/home/home.vue
@@ -236,6 +236,10 @@
 					{
 						text: 'GuestBook',
 						targetIndex: 10
+					},
+					{
+						text: '购物车',
+						targetIndex: 100
 					}
 				],
 				chapterPaths: {
@@ -299,6 +303,11 @@
 				}, 300);
 			},
 			jumpToPage(idx) {
+				if(idx == 100) {
+					// 去购物车
+					this.gotoPath('/subPackages/user/gwc')
+					return;
+				}
 				const targetIndex = idx;
 				this.currentIndex = targetIndex;
 				this.closeMenu();
diff --git a/xrcc/components/NavMenu.vue b/xrcc/components/NavMenu.vue
index ef2db66..af8ef97 100644
--- a/xrcc/components/NavMenu.vue
+++ b/xrcc/components/NavMenu.vue
@@ -73,6 +73,11 @@
 						text: '有感商品',
 						targetIndex: 6,
 						path: "/subPackages/techan/detail?id=39"
+					},
+					{
+						text: '购物车',
+						targetIndex: 7,
+						path: "/subPackages/user/gwc"
 					}
 				],
 			};
diff --git a/xxdf/chapter1/cover1.vue b/xxdf/chapter1/cover1.vue
index 704d6d8..044616e 100644
--- a/xxdf/chapter1/cover1.vue
+++ b/xxdf/chapter1/cover1.vue
@@ -24,15 +24,17 @@
             <image @click="goback" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/abandon-btn.png" mode=""></image>
         </view>
         <MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
-
+import NavMenu from '../components/NavMenu.vue';
 export default {
     components: {
-        MusicControl
+        MusicControl,
+		NavMenu
     },
     data() {
         return {
diff --git a/xxdf/chapter1/detail1.vue b/xxdf/chapter1/detail1.vue
index 6c1d021..0a4f776 100644
--- a/xxdf/chapter1/detail1.vue
+++ b/xxdf/chapter1/detail1.vue
@@ -29,13 +29,16 @@
         </swiper-item>
     </swiper>
     <MusicControl />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
-	components: {MusicControl},
+	components: {MusicControl,
+		NavMenu},
     data() {
         return {
             isVisible: false,
diff --git a/xxdf/chapter1/detail2.vue b/xxdf/chapter1/detail2.vue
index 30f7db3..f674860 100644
--- a/xxdf/chapter1/detail2.vue
+++ b/xxdf/chapter1/detail2.vue
@@ -29,14 +29,17 @@
         </swiper-item>
     </swiper>
     <MusicControl />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/xxdf/chapter1/detail3.vue b/xxdf/chapter1/detail3.vue
index 294587a..9e3ad4d 100644
--- a/xxdf/chapter1/detail3.vue
+++ b/xxdf/chapter1/detail3.vue
@@ -27,14 +27,17 @@
         </swiper-item>
     </swiper>
     <MusicControl />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/xxdf/chapter1/detail4.vue b/xxdf/chapter1/detail4.vue
index 0c6f1c8..b6ecfb4 100644
--- a/xxdf/chapter1/detail4.vue
+++ b/xxdf/chapter1/detail4.vue
@@ -47,14 +47,17 @@
         </swiper-item>
     </swiper>
     <MusicControl />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/xxdf/chapter1/detail5.vue b/xxdf/chapter1/detail5.vue
index dc2224e..a187a10 100644
--- a/xxdf/chapter1/detail5.vue
+++ b/xxdf/chapter1/detail5.vue
@@ -27,14 +27,17 @@
         </swiper-item>
     </swiper>
     <MusicControl />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 import MusicControl from '@/components/MusicControl.vue';
+import NavMenu from '../components/NavMenu.vue';
 export default {
 	components: {
-	    MusicControl
+	    MusicControl,
+		NavMenu
 	},
     data() {
         return {
diff --git a/xxdf/chapter2/cover.vue b/xxdf/chapter2/cover.vue
index f8be313..7d4bf93 100644
--- a/xxdf/chapter2/cover.vue
+++ b/xxdf/chapter2/cover.vue
@@ -97,14 +97,17 @@
 			</swiper-item>
 		</swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
 	export default {
 		components: {
-			MusicControl
+			MusicControl,
+			NavMenu
 		},
 		data() {
 			return {
diff --git a/xxdf/chapter3/cover.vue b/xxdf/chapter3/cover.vue
index 74b9336..5c1c577 100644
--- a/xxdf/chapter3/cover.vue
+++ b/xxdf/chapter3/cover.vue
@@ -60,14 +60,17 @@
 			</swiper-item>
 		</swiper>
 		<MusicControl />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
 	import MusicControl from '@/components/MusicControl.vue';
+	import NavMenu from '../components/NavMenu.vue';
 	export default {
 		components: {
-			MusicControl
+			MusicControl,
+			NavMenu
 		},
 		data() {
 			return {
diff --git a/xxdf/chapter3/randomImage.vue b/xxdf/chapter3/randomImage.vue
index a3c69e8..a457328 100644
--- a/xxdf/chapter3/randomImage.vue
+++ b/xxdf/chapter3/randomImage.vue
@@ -3,15 +3,17 @@
         <RandomImage :images="randomImages" ref="randomImageRef" />
         <image @click="goBack" class="back-icon" src="https://static.ticket.sz-trip.com/epicSoul/back.png" mode=""></image>
         <image class="save-icon" src="https://static.ticket.sz-trip.com/epicSoul/save-btn.png" mode=""></image>
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import RandomImage from '../../components/chapter3/RandomImage.vue';
-
+import NavMenu from '../components/NavMenu.vue';
 export default {
     components: {
-        RandomImage
+        RandomImage,
+		NavMenu
     },
     data() {
         return {
diff --git a/xxdf/chapter4/cover.vue b/xxdf/chapter4/cover.vue
index 794fadc..c07094f 100644
--- a/xxdf/chapter4/cover.vue
+++ b/xxdf/chapter4/cover.vue
@@ -93,10 +93,12 @@
     </swiper>
     <MusicControl />
     <ShareGuide @close="onShareGuideClose" />
+	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
 	</view>
 </template>
 
 <script>
+import NavMenu from '../components/NavMenu.vue';
 import {
     getQuestionnaireList,
     getQuestionnaireDetail,
@@ -109,7 +111,8 @@ import MusicControl from '@/components/MusicControl.vue';
 export default {
     components: {
         ShareGuide,
-		MusicControl
+		MusicControl,
+		NavMenu
     },
     data() {
         return {
diff --git a/xxdf/components/NavMenu.vue b/xxdf/components/NavMenu.vue
new file mode 100644
index 0000000..5097e14
--- /dev/null
+++ b/xxdf/components/NavMenu.vue
@@ -0,0 +1,214 @@
+<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: '购物车',
+						targetIndex: 7,
+						path: "/subPackages/user/gwc"
+					}
+				],
+			};
+		},
+		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/xxdf/home/home.vue b/xxdf/home/home.vue
index ab5137a..47c0839 100644
--- a/xxdf/home/home.vue
+++ b/xxdf/home/home.vue
@@ -115,17 +115,19 @@
         </swiper>
         <MusicControl />
         <ShareGuide v-model="showShareGuide" @close="onShareGuideClose" />
+		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
     </view>
 </template>
 
 <script>
 import ShareGuide from '@/components/ShareGuide.vue';
 import MusicControl from '@/components/MusicControl.vue';
-
+import NavMenu from '../components/NavMenu.vue';
 export default {
     components: {
         ShareGuide,
-        MusicControl
+        MusicControl,
+		NavMenu
     },
     data() {
         return {