feat:添加动态消息页面

pages.json

@@ -14,6 +14,20 @@
 		},
 		{
 			"path": "pages/tabBar/mine/mine"
+		},
+		{
+			"path" : "pages/tabBar/tree/subPages/dynamic",
+			"style" : 
+			{
+				"navigationBarTitleText" : "动态消息"
+			}
+		},
+		{
+			"path" : "pages/tabBar/tree/subPages/rank",
+			"style" : 
+			{
+				"navigationBarTitleText" : "好友排行榜"
+			}
 		}
 	],
 	"globalStyle": {

pages/tabBar/tree/subPages/dynamic.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="sub-base-container">
+		<view class="messgae-list" v-for="(item,index) in messageList" :key="index">
+			<text class="date">{{item.date}}</text>
+			<view class="message-item" v-for="(ele,idx) in item.list" :key="idx">
+				<view class="messgae-info">
+					<view class="info-text">
+						<up-image class="avatar" :fade="false"
+							src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="56rpx"
+							height="56rpx" shape="circle"></up-image>
+						<view><text class="my">励志人生</text> 向 <text class="name">茜茜荔</text> 留言 </view>
+					</view>
+					<text class="time">{{ele.date}}</text>
+				</view>
+				<text class="message-text">{{ele.desc}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const messageList = [{
+			date: '今天',
+			list: [{
+					name: '茜茜荔',
+					date: '11:08',
+					desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
+				},
+				{
+					name: '茜茜荔',
+					date: '11:08',
+					desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
+				}
+			]
+		},
+		{
+			date: '昨天',
+			list: [{
+				name: '茜茜荔',
+				date: '11:08',
+				desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
+			}]
+		},
+		{
+			date: '07/30',
+			list: [{
+				name: '茜茜荔',
+				date: '11:08',
+				desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
+			}]
+		}
+	]
+</script>
+
+<style lang="scss" scoped>
+	.sub-base-container {
+		.messgae-list {
+			.date {
+				font-size: 34rpx;
+			}
+
+			.message-item {
+				margin-top: 24rpx;
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 24rpx 32rpx;
+
+				.messgae-info {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 16rpx;
+					.info-text{
+						display: flex;
+						align-items: center;
+						.my{
+							font-weight: 500;
+						}
+						.name{
+							color: #EAB400;
+						}
+					}
+					.time{
+						font-size: 24rpx;
+						color: #999999;
+					}
+					.avatar {
+						margin-right: 16rpx;
+					}
+				}
+				.message-text{
+					font-size: 28rpx;
+				}
+			}
+		}
+
+		.messgae-list+.messgae-list {
+			margin-top: 24rpx;
+		}
+	}
+</style>

pages/tabBar/tree/subPages/rank.vue

@@ -0,0 +1,13 @@
+<template>
+	<view class="sub-base-container">
+		123
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/tabBar/tree/tree.vue

@@ -46,7 +46,7 @@
 					</view>
 				</view>
 				<view class="tool-right">
-					<view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index">
+					<view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index" @click="handleToolItem(item)">
 						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/r-tree-icon-${index+1}.png`"></image>
 						<view class="name">{{item.name}}</view>
 					</view>
@@ -105,7 +105,8 @@
 	]
 	const toolRightList = [{
 			name: "好友",
-			className: 'friend'
+			className: 'friend',
+			path:'rank'
 		},
 		{
 			name: "认养",
@@ -115,9 +116,16 @@
 		},
 		{
 			name: "动态",
-			className: 'dynamic'
+			className: 'dynamic',
+			path:'dynamic'
 		}
-	]
+	]
+	
+	const handleToolItem = ({path})=>{
+		uni.navigateTo({
+			url: `/pages/tabBar/tree/subPages/${path}`
+		});
+	}
 	const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
 </script>
 

static/style/common.scss

@@ -1,5 +1,5 @@
 
-.base-container {
+.base-container,.sub-base-container {
 	width: 100%;
 	min-height: 100vh;
 	background: #f7f7f7;
@@ -12,6 +12,9 @@
 .base-container{
 	min-height: calc(100vh - 100rpx - 88rpx);
 }
+.sub-base-container{
+	min-height: calc(100vh - 88rpx);
+}
 /* #endif */