feiniao-youwei-uniapp/pages/tabBar/tree/subPages/dynamic.vue

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