除了数据分析都完成

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>
+
+	.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>