Homestay_manage_app/pages/likeList/likeList.vue

<template>
	<view class="container">
		<view class="list">
			<!-- 每一个用户区域 -->
			<view class="list_box" v-for="item in list" :key="item.id">
				<img mode="aspectFill" :src="item.url" />
				<view class="box_info">
					<view class="info_name">{{ item.name }}</view>
					<view class="info_num">
						<view class="num_article">{{ item.count }}篇推文</view>
						<view class="num_fans">{{ item.fans }}粉丝</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
					name: '鸣人',
					count: 6,
					fans: 10
				},
				{
					id: 2,
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
					name: '路飞',
					count: 6,
					fans: 10
				},
				{
					id: 3,
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
					name: '黑崎一护',
					count: 6,
					fans: 10
				},
				{
					id: 4,
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
					name: '灰太狼',
					count: 6,
					fans: 10
				},
				{
					id: 5,
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
					name: '哆啦A梦',
					count: 6,
					fans: 10
				}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #fff;

	.list {
		padding: 10rpx 20rpx;

		.list_box {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #e5e5e5;

			img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.box_info {
				margin-left: 15rpx;
				font-size: 24rpx;

				.info_name {
					font-weight: bold;
				}

				.info_num {
					display: flex;
					align-items: center;
					margin-top: 5rpx;
					color: #808080;

					.num_article {
					}
					.num_fans {
						margin-left: 30rpx;
					}
				}
			}
		}
	}
}
</style>