完成了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>