diff --git a/components/index_page.vue b/components/index_page.vue
index 1afa257..8a90f78 100644
--- a/components/index_page.vue
+++ b/components/index_page.vue
@@ -74,8 +74,8 @@
 		background-color: #fff;
 		height: 12vh;
 		display: flex;
-		border-radius: 15px;
 		align-items: center;
+		margin: 10px;
 	}
 
 	.page view:first-of-type {
diff --git a/components/part.vue b/components/part.vue
index c4e2dd5..a1d099a 100644
--- a/components/part.vue
+++ b/components/part.vue
@@ -86,6 +86,7 @@
 
 	.part {
 		width: 100%;
+		margin: 10px;
 	}
 
 	.part p:first-child {
diff --git a/pages.json b/pages.json
index 929449a..b57e8a8 100644
--- a/pages.json
+++ b/pages.json
@@ -42,6 +42,12 @@
 			"style": {
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path": "pages/index/voluteer_son",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6e69d00..2b14ae2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -8,7 +8,7 @@
 			<view class="headers_middle">
 				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
 					<swiper-item v-for="path in banner_content">
-						<view class="swiper-item" >
+						<view class="swiper-item">
 							<image :src="`http://124.93.196.45:10091/Neusoft/times-model${path}`"></image>
 						</view>
 					</swiper-item>
@@ -34,10 +34,10 @@
 		<view>
 			<text class="title">楷模列表</text>
 			<indexpage ref="as" :end="part_nums"></indexpage>
+			<button @click="showmore()">显示更多</button>
 		</view>
-		<button @click="showmore()">显示更多</button>
 		<view class="index_end">
-			<view class="nav_bottom" v-for="path_image in endbottom">
+			<view class="nav_bottom" v-for="(path_image,index) in endbottom" @click="gowhere(index)">
 				<image :src="path_image[0]"></image>
 				<p>{{path_image[1]}}</p>
 			</view>
@@ -101,7 +101,7 @@
 						method: "GET",
 						headers: {
 							"Content-Type": "application/json",
-							"Authorization":(await this.requests("up", "/app/login")).token
+							"Authorization": (await this.requests("up", "/app/login")).token
 						},
 					})
 
@@ -109,6 +109,20 @@
 				const data = await response.json()
 				console.log(data)
 				return data
+			},
+			gowhere(index) {
+				switch (index) {
+					case 1:
+						uni.navigateTo({
+							url: '/pages/index/voluteer'
+						});
+						break;
+					case 2:
+						uni.navigateTo({
+							url: '/pages/index/student'
+						});
+						break;
+				}
 			}
 		},
 		async mounted() {
@@ -118,7 +132,7 @@
 				datavalue.push(this.requests("down", `/appNotice/app-o/loopMapDetail?id=${i}`))
 			}
 			datavalue = (await Promise.all(datavalue)).map(x => x.data.picPath)
-			this.banner_content =datavalue
+			this.banner_content = datavalue
 			console.log(datavalue)
 		},
 	}
@@ -131,7 +145,7 @@
 	}
 
 	.begin {
-		background-color: rgb(246, 246, 246);
+		background-color: rgb(221,221,221);
 	}
 
 	.text1 {
@@ -157,13 +171,16 @@
 		border: 1px red solid;
 		background-color: #fff !important;
 	}
-	.headers_middle swiper{
+
+	.headers_middle swiper {
 		height: 100%;
 	}
-	.headers_middle swiper .swiper-item image{
+
+	.headers_middle swiper .swiper-item image {
 		width: 100%;
 		height: 25vh;
 	}
+
 	.headers_bottom {
 		height: 10vh;
 		display: flex;
@@ -225,9 +242,8 @@
 	}
 
 	.headers+view+view {
-		background-color: rgb(246, 246, 246);
 		margin: 10px 15px;
-		padding-bottom: 10px;
+		padding-bottom: 65px;
 	}
 
 	.title {
@@ -241,6 +257,12 @@
 	.index_end {
 		display: flex;
 		justify-content: space-around;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		background-color: #fff;
+		height:65px;
 	}
 
 	.nav_bottom {
@@ -248,13 +270,13 @@
 		flex-direction: column;
 		align-items: center;
 	}
-
+	
 	.nav_bottom image {
-		width: 6vw;
-		height: 3vh;
+		width: 40px;
+		height: 40px;
 	}
-
+	
 	.nav_bottom:nth-child(1) p {
 		color: #C2050F;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/index/student.vue b/pages/index/student.vue
index 91ce147..32252c3 100644
--- a/pages/index/student.vue
+++ b/pages/index/student.vue
@@ -20,7 +20,7 @@
 		</view>
 
 		<view class="student_end">
-			<view class="nav_bottom" v-for="path_image in endbottom">
+			<view class="nav_bottom" v-for="(path_image,index) in endbottom" @click="gowhere(index)">
 				<image :src="path_image[0]"></image>
 				<p>{{path_image[1]}}</p>
 			</view>
@@ -66,7 +66,7 @@
 				this.write_none = false;
 				this.useInput = ""
 			},
-			async requests(updown,path) {
+			async requests(updown, path) {
 				let response
 				if (updown == "up") {
 					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
@@ -92,10 +92,24 @@
 				const data = await response.json()
 				console.log(data)
 				return data
+			},
+			gowhere(index) {
+				switch (index) {
+					case 0:
+						uni.navigateTo({
+							url: '/pages/index/index'
+						});
+						break;
+					case 1:
+						uni.navigateTo({
+							url: '/pages/index/voluteer'
+						});
+						break;
+				}
 			}
 		},
-		async mounted(){
-			await this.requests("down","/appStudy/app/deleteStatement")
+		async mounted() {
+			await this.requests("down", "/appStudy/app/deleteStatement")
 		}
 	}
 </script>
@@ -138,14 +152,26 @@
 	.student_end {
 		display: flex;
 		justify-content: space-around;
+		background-color: white;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		height:65px;
 	}
 
+	.nav_bottom {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
 	.nav_bottom image {
 		width: 40px;
 		height: 40px;
 	}
-
+	
 	.nav_bottom:nth-child(3) p {
 		color: #C2050F;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/index/voluteer.vue b/pages/index/voluteer.vue
index 95ec693..e50df2d 100644
--- a/pages/index/voluteer.vue
+++ b/pages/index/voluteer.vue
@@ -22,7 +22,13 @@
 							<image src="../../static/baoming_icon.png"></image>
 							<text>已报名{{ever[6]}}人</text>
 						</view>
-						<view>去报名</view>
+						<view @click="goto(ever[7])">去报名</view>
+					</view>
+				</view>
+				<view class="voluteer_bottom">
+					<view class="nav_bottom" v-for="(path_image,index) in endbottom" @click="gowhere(index)">
+						<image :src="path_image[0]"></image>
+						<p>{{path_image[1]}}</p>
 					</view>
 				</view>
 			</view>
@@ -36,10 +42,16 @@
 <script>
 	export default {
 		data() {
+			const imagepath = Array.from({
+				length: 4
+			}).map((_, x) => `../../static/a${x+1}.png`)
+			const textarray = ["首页", "公益", "心得", "我的"]
+			const endbottom = imagepath.map((value, index) => [value, textarray[index]])
 			return {
 				current: 0,
 				value: ["全部活动", "已报名"],
-				morevalue: null
+				morevalue: null,
+				endbottom
 			}
 		},
 		methods: {
@@ -74,12 +86,31 @@
 				const data = await response.json()
 				console.log(data)
 				return data
+			},
+			goto(id) {
+				uni.navigateTo({
+					url: `/pages/index/voluteer_son?id=${id}`
+				})
+			},
+			gowhere(index) {
+				switch (index) {
+					case 0:
+						uni.navigateTo({
+							url: '/pages/index/index'
+						});
+						break;
+					case 2:
+						uni.navigateTo({
+							url: '/pages/index/student'
+						});
+						break;
+				}
 			}
 		},
 		async mounted() {
 			// await this.requests("down","/activity/app-o/detail?id=1")
 			this.morevalue = (await this.requests("down", "/activity/app-o/list")).rows.map(x => [x.picPath, x.title, x
-				.startDate, x.endDate, x.sponsor, x.content, x.signUpNum
+				.startDate, x.endDate, x.sponsor, x.content, x.signUpNum, x.id
 			])
 			console.log(this.morevalue);
 		}
@@ -93,8 +124,8 @@
 	}
 
 	.begin {
-		background-color: rgb(246, 246, 246);
-		height: 95vh;
+		background-color: rgb(221, 221, 221);
+		height: 100vh;
 		display: flex;
 		flex-direction: column;
 	}
@@ -106,16 +137,24 @@
 
 	}
 
+	.content {
+		height: 110vh;
+		overflow: scroll;
+	}
+
 	.voluteer_card {
-		height: 40vh;
-		background-color:#fff;
+		height: 42vh;
+		background-color: #fff;
 		margin: 2%;
 		border-radius: 10px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
 	}
 
 	.voluteer_card image {
 		width: 100%;
-		height: 25vh;
+		height: 24vh;
 		border-radius: 10px;
 	}
 
@@ -129,7 +168,7 @@
 
 	.voluteer_card_bottom p:not(:nth-child(1)) {
 		font-size: 0.8rem;
-		padding: 1% auto;
+		padding: 1% 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -139,22 +178,26 @@
 		padding-bottom: 2%;
 		border-bottom: 1px solid rgb(220, 220, 220);
 	}
-	.voluteer_card_bottom+view{
+
+	.voluteer_card_bottom+view {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 0% 4% 2% 4%;
 	}
-	.voluteer_card_bottom+view>view:first-child{
+
+	.voluteer_card_bottom+view>view:first-child {
 		display: flex;
 		justify-content: space-evenly;
 		align-items: center;
 	}
-	.voluteer_card_bottom+view>view:first-child image{
+
+	.voluteer_card_bottom+view>view:first-child image {
 		width: 20px;
 		height: 20px;
 	}
-	.voluteer_card_bottom+view>view:nth-child(2){
+
+	.voluteer_card_bottom+view>view:nth-child(2) {
 		text-align: center;
 		line-height: 30px;
 		width: 100px;
@@ -163,4 +206,30 @@
 		color: white;
 		border-radius: 15px;
 	}
-</style>
\ No newline at end of file
+
+	.voluteer_bottom {
+		display: flex;
+		justify-content: space-around;
+		background-color: white;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		height: 65px;
+	}
+
+	.nav_bottom {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.nav_bottom image {
+		width: 40px;
+		height: 40px;
+	}
+	
+	.nav_bottom:nth-child(2) p {
+		color: #C2050F;
+	}
+</style>
diff --git a/pages/index/voluteer_son.vue b/pages/index/voluteer_son.vue
new file mode 100644
index 0000000..4fd596c
--- /dev/null
+++ b/pages/index/voluteer_son.vue
@@ -0,0 +1,185 @@
+<template>
+	<view class="begin">
+		<view class="title">
+			活动详情
+		</view>
+		<view class="content">
+			<view class="voluteer_card" v-if="ever">
+				<image :src="`http://124.93.196.45:10091/Neusoft/times-model${ever.picPath}`"></image>
+				<view class="voluteer_card_bottom">
+					<p>{{ever.title}}</p>
+					<p>活动时间：
+						{{ever.startDate}}~{{ever.endDate}}
+					</p>
+					<p>发起方：{{ever.sponsor}}</p>
+				</view>
+			</view>
+			<view class="voluteer_card_all">
+				<p>活动详情</p>
+				<p>{{ever.content}}</p>
+			</view>
+			<view class="voluteer_bottom">
+				<view><text>{{ever.signUpNum}}</text>人已报名</view>
+				<view @click="succ">报名</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {},
+		data() {
+			return {
+				id: null,
+				morevalue: null,
+				ever: null
+			}
+		},
+		async mounted() {
+			this.ever = (await this.requests("down", `/activity/app-o/detail?id=${this.id}`)).data
+			console.log(this.ever);
+		},
+		onLoad(option) {
+			this.id = option.id
+		},
+		methods: {
+			async requests(updown, path) {
+				let response
+				if (updown == "up") {
+					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
+						method: "POST",
+						headers: {
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify({
+							"password": "0CYdq6Hn",
+							"username": "6dOMIgIU"
+						})
+					})
+				} else if (updown == "down") {
+					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
+						method: "GET",
+						headers: {
+							"Content-Type": "application/json",
+							"Authorization": (await this.requests("up", "/app/login")).token
+						},
+					})
+
+				}
+				const data = await response.json()
+				console.log(data)
+				return data
+			},
+			succ(){
+				uni.showToast({
+				    title: '报名成功！',
+				    icon: 'success'
+				})
+			}
+		}
+
+	}
+</script>
+
+<style>
+	.begin {
+		background-color: rgb(221, 221, 221);
+	}
+
+	.title {
+		font-size: 1.3rem;
+		font-weight: bold;
+		text-align: center;
+		background-color: #fff;
+	}
+
+	.voluteer_card {
+		height: 34.5vh;
+		background-color: #fff;
+		margin: 2%;
+		border-radius: 10px;
+	}
+
+	.voluteer_card image {
+		width: 100%;
+		height: 25vh;
+		border-radius: 10px;
+	}
+
+	.voluteer_card_bottom {
+		padding: 0% 4%;
+	}
+
+	.voluteer_card_bottom p:nth-child(1) {
+		font-size: 1.2rem;
+		font-weight: bold;
+	}
+
+	.voluteer_card_bottom p:not(:nth-child(1)) {
+		font-size: 0.8rem;
+		padding: 1% 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.voluteer_card_bottom p:last-child {
+		padding-bottom: 2%;
+	}
+
+	.voluteer_card_bottom+view {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0% 4% 2% 4%;
+	}
+
+	.voluteer_card_all {
+		height: 60vh;
+		background-color: #fff;
+		margin: 2%;
+		border-radius: 10px;
+		padding: 3%;
+	}
+
+	.voluteer_card_all p:first-child {
+		font-size: 1.2rem;
+		font-weight: bold;
+		border-left: 5px solid #C2050F;
+		padding-left: 3%;
+	}
+
+	.voluteer_card_all p:nth-child(2) {
+		padding: 5%;
+	}
+
+	.voluteer_bottom {
+		display: flex;
+		justify-content: space-around;
+		height: 5vh;
+		line-height: 5vh;
+		background-color: white;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		text-align: center;
+	}
+
+	.voluteer_bottom view:nth-child(1) {
+		width: 50%;
+		background-color: #f9f9f9;
+	}
+
+	.voluteer_bottom view:nth-child(1) text {
+		color: #C2050F;
+		font-weight:bold ;
+	}
+
+	.voluteer_bottom view:nth-child(2) {
+		width: 50%;
+		background-color:#C2050F;
+	}
+</style>