完成了api获取

pages/index/index.vue

@@ -36,7 +36,12 @@
 				</view>
 			</view>
 		</view>
-
+		<view class="index_end">
+			<view class="nav_bottom" v-for="path_image in endbottom">
+				<image :src="path_image[0]"></image>
+				<p>{{path_image[1]}}</p>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -47,28 +52,22 @@
 			card
 		},
 		data() {
+			const imagepath = Array.from({
+				length: 4
+			}).map((_, x) => `../../static/c${x+1}.png`)
+			const textarray = ["首页", "公益", "心得", "我的"]
+			const endbottom = imagepath.map((value, index) => [value, textarray[index]])
 			return {
 				isRed: false,
-				list: [{
-					id: 1,
-					name: ""
-				}]
+				endbottom
 			}
 		},
 		computed: {
-			textColor() {
-				return this.isRed ? 'red' : 'black'
-			},
 			imagepaths() {
-				
 				let Path = Array.from({
 					length: 6
 				}, (_, x) => `../../static/c${x+1}.png`);
-				// let value = Array.from({
-				// 	length: 6
-				// }, (_, x) => `英雄故事`);
 				let value = ["楷模列表", "英雄故事", "身边英雄", "物资捐赠", "数据分析", "更多"]
-
 				return Path.map((path, index) => ({
 					path: path,
 					value: value[index]
@@ -79,11 +78,16 @@
 			toggleColor() {
 				this.isRed = !this.isRed
 			}
-	}}
-	
+		}
+	}
 </script>
 
 <style>
+	* {
+		padding: 0;
+		margin: 0;
+	}
+
 	.begin {
 		background-color: rgb(246, 246, 246);
 	}
@@ -229,4 +233,24 @@
 		text-overflow: ellipsis;
 		word-break: break-word;
 	}
+
+	.index_end {
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.nav_bottom {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.nav_bottom image {
+		width: 6vw;
+		height: 3vh;
+	}
+
+	.nav_bottom:nth-child(1) p {
+		color: #C2050F;
+	}
 </style>

pages/index/student.vue

@@ -20,7 +20,6 @@
 		</view>
 
 		<view class="student_end">
-
 			<view class="nav_bottom" v-for="path_image in endbottom">
 				<image :src="path_image[0]"></image>
 				<p>{{path_image[1]}}</p>
@@ -105,73 +104,6 @@
 		font-size: 1.1rem;
 	}
 
-	/* .page_div {
-		background-color: #fff;
-		border-radius: 15px;
-		padding: 3%;
-		margin: 2%;
-	}
-
-	.page_div>view:first-child {
-		border-bottom: 1px solid darkgray;
-		padding-bottom: 10px;
-	}
-
-	.page_div>view:first-child p:first-child {
-		font-size: 1.1rem;
-	}
-
-	.page_div>view:first-child p:nth-child(2) {
-		font-size: 0.8rem;
-	}
-
-	.page_div>view:first-child p:nth-child(3) {
-		font-size: 0.9rem;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-	}
-
-	.page_div>view:nth-child(2) {
-		display: flex;
-		flex-direction: column;
-		padding-bottom: 5px;
-		border-bottom: 1px solid darkgray;
-	}
-
-	.page_div>view:nth-child(2)>view:first-child {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.page_div>view:nth-child(2)>view:first-child p:nth-child(2) {
-		color: #C2050F;
-	}
-
-	.page_div>view:nth-child(2)>view:nth-child(2) {
-		background-color: darkgray;
-		border-radius: 10px;
-		padding: 5px;
-
-	}
-
-	.page_div>view:last-child {
-		margin-top: 10px;
-		height: 5vh;
-		color: rgb(255, 56, 59);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-	}
-
-	.page_div>view:last-child image {
-		width: 3vw;
-		height: 3vh;
-	} */
 
 	.student_end {
 		display: flex;