complete index,contryside complete about 50%,addr is none

components/side.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages.json

@@ -14,7 +14,25 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+		},
+		{
+			"path": "pages/index/countryside",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "components/side",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/index/addr",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/index/addr.vue

@@ -0,0 +1,13 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+	       
+</style>

pages/index/countryside.vue

@@ -0,0 +1,177 @@
+<template>
+	<view>
+		<view class="countryside_title">
+			<image src="/static/友邻社区.png"></image>
+			<text>友邻社区</text>
+		</view>
+		<view class="countryside_content">
+			<view v-for="value in valuearray">
+				<image :src="value[0]"></image>
+				<view>
+					<view>
+						<image src="/static/组 341.png"></image>
+						<view>{{value[1]}}</view>
+					</view>
+					<view>
+						<image src="/static/已收藏.png"></image>
+						<view>{{value[2]}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="list-li" v-for="part in list">
+				<image :src="part[1]"></image>
+				<text>{{part[0]}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			let list = ["首页", "友邻社区", "", "社区服务", "数据分析"].map((value, index) => [value,
+				`../../static/${["首页.png","友邻社区.png","c1.png","社区服务.png","组 153.png"][index]}`
+			])
+			return {
+				valuearray: null,
+				list
+			}
+		},
+		methods: {
+			async request(gest, path) {
+				let text
+				if (gest == "get") {
+					text = await fetch(`http://124.93.196.45:10091/Neusoft/community${path}`, {
+						method: "GET",
+						headers: {
+							"Content-Type": "application/json",
+							"Authorization": (await this.request("post", "/api/login")).token
+						},
+					})
+				} else if (gest == "post") {
+					text = await fetch(`http://124.93.196.45:10091/Neusoft/community${path}`, {
+						method: "POST",
+						headers: {
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify({
+							"password": "0CYdq6Hn",
+							"username": "6dOMIgIU",
+						})
+					})
+				}
+				const data = await text.json()
+				console.log(data)
+				return data
+			}
+		},
+		async mounted() {
+			this.valuearray =
+				(await this.request(
+					"get", "/api/post/list"))
+				.rows.map(x => [`http://124.93.196.45:10091/Neusoft/community${x.cover}`,
+					x.userId,
+					x.likeNum,
+					x.title,
+					x.createTime,
+					x.content
+				])
+			// .filter(x => x[0] !== null)
+
+			console.log(this.valuearray)
+
+		}
+	}
+</script>
+
+<style>
+	.countryside_title {
+		height: 6vh;
+		display: flex;
+		align-items: center;
+	}
+
+	.countryside_title image {
+		width: 12vw;
+		height: 100%;
+	}
+
+	.countryside_content {
+		margin: 10px;
+		height: 88vh;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 10px;
+		overflow: scroll;
+	}
+
+	.countryside_content>view {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.countryside_content>view>image {
+		width: 100%;
+		height: 30vh;
+	}
+
+	.countryside_content>view>view {
+		display: flex;
+		height: 5vh;
+		justify-content: space-between;
+	}
+
+	.countryside_content>view>view>view:first-child {
+		display: flex;
+		align-items: center;
+	}
+
+	.countryside_content>view>view>view:first-child image {
+		width: 30px;
+		height: 30px;
+	}
+
+	.countryside_content>view>view>view:nth-child(2) {
+		display: flex;
+		align-items: center;
+	}
+
+	.countryside_content>view>view>view:nth-child(2) image {
+		width: 30px;
+		height: 30px;
+	}
+
+	.bottom {
+		display: flex;
+		position: fixed;
+		border: 1px solid black;
+		bottom: 0;
+		width: 100%;
+		background-color: aliceblue;
+	}
+
+	.list-li {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.list-li image {
+		height: 20px;
+		width: 20px;
+	}
+
+	.list-li:nth-child(1) {
+		color: dodgerblue;
+	}
+
+	.list-li:nth-child(3) image {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		border: 2px solid black;
+	}
+</style>

pages/index/index.vue

@@ -30,12 +30,31 @@
 					<image :src="content[0]"></image>
 					<view>
 						<p>{{content[1]}}</p>
-						<p>据您{{content[2]}}m</p>
+						<p>据您{{content[2]}}km</p>
 					</view>
 				</view>
 			</view>
 		</view>
-
+		<view class="society" v-if="active_content">
+			<view class="society-title">
+				<view>社会动态</view>
+				<view>查看更多<image src="../../static/联合 10.png"></image>
+				</view>
+			</view>
+			<view class="society-content">
+				<view>
+					<view>{{active_content[2][1]}}</view>
+					<view>{{active_content[2][3]}}评论 {{active_content[2][4]}}</view>
+				</view>
+				<image :src="active_content[2][0]" mode=""></image>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="list-li" v-for="part in list">
+				<image :src="part[1]"></image>
+				<text>{{part[0]}}</text>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -43,14 +62,18 @@
 	import bannerlist from "../../components/bannerlist"
 	export default {
 		components: {
-			bannerlist
+			bannerlist,
 		},
 		data() {
+			let list = ["首页", "友邻社区", "", "社区服务", "数据分析"].map((value, index) => [value,
+				`../../static/${["首页.png","友邻社区.png","c1.png","社区服务.png","组 153.png"][index]}`
+			])
 			return {
 				notice: null,
 				imagePath: null,
 				notices: null,
-				active_content: null
+				active_content: null,
+				list
 			}
 		},
 		methods: {
@@ -89,12 +112,9 @@
 				x.unit
 			])
 			this.active_content = (await this.request("get", "/api/cms/article/list")).rows.map(x => [
-				`http://124.93.196.45:10091/Neusoft/community${x.cover}`, x.title,
+				`http://124.93.196.45:10091/Neusoft/community${x.cover}`, x.title, parseFloat(x.location), x
-				x.commentNum
+				.commentNum, x.createTime
 			])
-			// await this.request("get","/api/visitor/list")
-
-
 		}
 	}
 </script>
@@ -149,33 +169,147 @@
 
 	.active {
 		margin: 10px;
+		padding: 5px;
+		border-radius: 10px;
 		border: 1px #999999 solid;
 	}
 
 	.active-title {
 		display: flex;
 		justify-content: space-between;
+		align-items: center;
 		height: 3.5vh;
+		padding-left: 10px;
 	}
 
 	.active-title view {
 		display: flex;
 		align-items: center;
+		padding-left: 5px;
+	}
+
+	.active-title view:first-child {
+		border-left: 5px solid black;
+		height: 20px;
 	}
 
 	.active-title view:nth-child(2) image {
 		width: 2vw;
 		height: 2vh;
+		padding-left: 10px;
+	}
+
+	.active-content {
+		display: flex;
+		overflow: scroll;
 	}
 
 	.active-content>view {
+		flex-shrink: 0;
+		width: 70vw;
 		border: 1px #999999 solid;
+		margin: 10px;
 		display: flex;
-		
+		justify-content: center;
 	}
 
 	.active-content>view image {
 		width: 30vw;
 		height: 10vh;
+		flex-shrink: 0
+	}
+
+	.active-content>view view {
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.society {
+		margin: 10px;
+		padding: 5px;
+		border-radius: 10px;
+		border: 1px #999999 solid;
+	}
+
+	.society-title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 3.5vh;
+		padding-left: 10px;
+	}
+
+	.society-title view {
+		display: flex;
+		align-items: center;
+		padding-left: 5px;
+	}
+
+	.society-title view:first-child {
+		border-left: 5px solid black;
+		height: 20px;
+	}
+
+	.society-title view:nth-child(2) image {
+		width: 2vw;
+		height: 2vh;
+		padding-left: 10px;
+	}
+
+	.society-content {
+		display: flex;
+		justify-content: space-between;
+		margin: 10px;
+		height: 12vh;
+		align-items: center;
+	}
+
+
+	.society-content>view:first-child view:first-child {
+		font-size: 1.1rem;
+		font-weight: bold;
+		margin-bottom: 10px;
+	}
+
+	.society-content>view:first-child view:nth-child(2) {
+		color: #dadada;
+	}
+
+	.society-content image {
+		width: 20vw;
+		height: 8vh;
+	}
+
+	.bottom {
+		display: flex;
+		position: fixed;
+		border: 1px solid black;
+		bottom: 0;
+		width: 100%;
+	}
+
+	.list-li {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.list-li image {
+		height: 20px;
+		width: 20px;
+	}
+
+	.list-li:nth-child(1) {
+		color: dodgerblue;
+	}
+
+	.list-li:nth-child(3) image {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		border: 2px solid black;
 	}
 </style>