diff --git a/components/lf-nolanPhoto/lf-nolanPhoto.vue b/components/lf-nolanPhoto/lf-nolanPhoto.vue
new file mode 100644
index 0000000..504b2ca
--- /dev/null
+++ b/components/lf-nolanPhoto/lf-nolanPhoto.vue
@@ -0,0 +1,48 @@
+<template>
+	<view class="content">
+		<view class="image-item" v-for="item in 5" :key="item">
+			<image src="https://picsum.photos/200"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			// TODO 优化当头像数量超过盒子大小时最后一个元素显示+剩余多少张
+			// 参考：http://www.bootstrapmb.com/item/2739
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		display: flex;
+		flex-wrap: nowrap;
+		width: 100%;
+		height: 60rpx;
+		margin-top: 20rpx;
+		.image-item{
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 50%;
+			border: 2rpx solid #FFFFFF;
+			overflow: hidden;
+			&:nth-child(n+2){
+				margin-left: -16rpx;
+			}
+			image{
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>
diff --git a/pages.json b/pages.json
index 3c6d98e..bc67640 100644
--- a/pages.json
+++ b/pages.json
@@ -132,6 +132,12 @@
 			"style": {
 				"navigationBarTitleText": "消息"
 			}
+		},
+		{
+			"path": "pages/messageCenter/system",
+			"style": {
+				"navigationBarTitleText": "系统消息"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/find/find.vue b/pages/find/find.vue
index 8aa150e..e59fc76 100644
--- a/pages/find/find.vue
+++ b/pages/find/find.vue
@@ -1,14 +1,81 @@
 <template>
 	<view>
-		
+		<swiper class="cover_swiper" :current="current">
+			<swiper-item v-for="(item, index) in cover_images" :key="index">
+				<lf-image :src="item"></lf-image>
+			</swiper-item>
+		</swiper>
+		<view class="content">
+			<view class="card" v-for="item in 2" :key="item">
+				<view class="avatar">
+					<lf-image src="../../static/logo.png" ></lf-image>
+				</view>
+				<view class="info">
+					<!-- 昵称和说说文字 -->
+					<view class="lf-font-28 lf-color-777">编号 73949</view>
+					<view class="lf-font-32 lf-color-222 lf-m-t-10">我更新了相册</view>
+					<!-- 图片显示区 -->
+					<view class="images-box">
+						<view class="img" v-for="item in 2" :key="item">
+							<lf-image src="https://picsum.photos/seed/picsum/200/300" />
+						</view>
+					</view>
+					<!-- 赞过的用户头像 -->
+					<lf-nolan-photo></lf-nolan-photo>
+					<!-- 时间和更多按钮 -->
+					<view class="lf-row-between lf-m-t-23">
+						<view class="lf-font-28 lf-color-777">08:38</view>
+						<view class="more" @click="show_more = !show_more">
+							<text>···</text>
+							<view class="more-modal" v-if="show_more">
+								<view class="more-item">
+									<text class="lf-iconfont icon-zan"></text>
+									<text class="lf-m-l-14">赞</text>
+								</view>
+								<view class="more-item">
+									<text class="lf-iconfont icon-pinglun"></text>
+									<text class="lf-m-l-14">评论</text>
+								</view>
+								<view class="more-item">
+									<text class="lf-iconfont icon-fenxiang"></text>
+									<text class="lf-m-l-14">分享</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<!-- 评论 -->
+					<view class="comment">
+						<view>评论：</view>
+						<view class="lf-m-t-20">
+							<text>等呵呵～：</text>
+							<text class="lf-color-333">哈哈哈哈哈哈</text>
+						</view>
+						<view class="lf-m-t-20">
+							<text>编号37894</text>
+							<text class="lf-color-333 lf-m-l-10 lf-m-r-10">回复</text>
+							<text>等呵呵～：</text>
+							<text class="lf-color-333">俺是头大本驴</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 悬浮发布按钮 -->
+		<view class="fixed-bottom" hover-class="lf-opacity">
+			<text class="lf-iconfont icon-jia lf-font-50"></text>
+		</view>
 	</view>
 </template>
 
 <script>
+	import lfNolanPhoto from '@/components/lf-nolanPhoto/lf-nolanPhoto.vue';
 	export default {
+		components: { lfNolanPhoto },
 		data(){
 			return {
-				
+				current: 0,
+				cover_images: ['https://picsum.photos/seed/picsum/200/300'],
+				show_more: false
 			}
 		},
 		onLoad(){
@@ -21,5 +88,116 @@
 </script>
 
 <style lang="scss" scoped="scoped">
+	.cover_swiper{
+		width: 750rpx;
+		height: 375rpx;
+	}
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 40rpx 32rpx;
+		box-sizing: border-box;
+		.card{
+			width: 100%;
+			height: max-content;
+			padding-bottom: 30rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+			&:nth-child(n+2){
+				margin-top: 30rpx;
+			}
+			&:last-child{
+				border-bottom: none;
+			}
+			.avatar{
+				width: 110rpx;
+				height: 110rpx;
+				border-radius: 50%;
+			}
+			.info{
+				width: 560rpx;
+				height: max-content;
+			}
+			.images-box{
+				margin-top: 28rpx;
+				display: flex;
+				flex-wrap: wrap;
+				.img{
+					width: 275rpx;
+					height: 275rpx;
+					background-color: #0BCE5F;
+					margin-right: 10rpx;
+					&:nth-child(2n){
+						margin-right: 0rpx;
+					}
+					&:nth-child(n+3){
+						margin-top: 10rpx;
+					}
+				}
+			}
+			
+			.more{
+				width: 66rpx;
+				height: 40rpx;
+				background-color: #F5F5F5;
+				border-radius: 5rpx;
+				color: #333333;
+				text-align: center;
+				line-height: 40rpx;
+				font-size: 42rpx;
+				position: relative;
+				.more-modal{
+					position: absolute;
+					left: -472rpx;
+					top: -14rpx;
+					width: 467rpx;
+					height: 68rpx;
+					background: #555555;
+					border-radius: 5rpx;
+					display: flex;
+					align-items: center;
+					.more-item{
+						width: 156rpx;
+						height: 48rpx;
+						border-right: 1rpx solid #777777;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						&:last-child{
+							border-right: none;
+						}
+					}
+				}
+			}
+			.comment{
+				margin-top: 20rpx;
+				width: 100%;
+				height: max-content;
+				background-color: #F5F5F5;
+				border-radius: 5rpx;
+				box-sizing: border-box;
+				padding: 20rpx;
+				font-size: 28rpx;
+				color: #777777;
+			}
+		}
+	}
 	
+	.fixed-bottom{
+		position: fixed;
+		right: 32rpx;
+		bottom: 40rpx;
+		width: 100rpx;
+		height: 100rpx;
+		background-color: #E21196;
+		border-radius: 50%;
+		color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>
diff --git a/pages/messageCenter/index.vue b/pages/messageCenter/index.vue
index 8aa150e..49dc27b 100644
--- a/pages/messageCenter/index.vue
+++ b/pages/messageCenter/index.vue
@@ -1,6 +1,17 @@
 <template>
-	<view>
-		
+	<view class="content">
+		<view class="list" v-for="(item, index) in list" :key="index" @click="$url(item.path)" hover-class="lf-opacity">
+			<image class="icon" src="../../static/images/empty.png"></image>
+			<view class="lf-row-between" style="width: 556rpx;">
+				<view>
+					<view class="lf-font-32 lf-color-222">{{ item.title }}</view>
+					<view class="lf-m-t-10 lf-font-28 lf-color-777">{{ item.desc }}</view>
+				</view>
+				<view>
+					<text class="lf-iconfont icon-xiangyou lf-color-999"></text>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,7 +19,25 @@
 	export default {
 		data(){
 			return {
-				
+				list: [{
+					title: '消息订阅',
+					desc: '关闭后将错过不少缘分',
+					icon: '',
+					path: '',
+					unread_count: 0
+				},{
+					title: '联系过的人',
+					desc: '去看看哪些人联系过了',
+					icon: '',
+					path: '',
+					unread_count: 0
+				},{
+					title: '系统消息',
+					desc: '查看官方消息',
+					icon: '',
+					path: '/pages/messageCenter/system',
+					unread_count: 0
+				}]
 			}
 		},
 		onLoad(){
@@ -21,5 +50,21 @@
 </script>
 
 <style lang="scss" scoped="scoped">
-	
+	.content{
+		padding: 0 32rpx;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.list{
+			padding: 30rpx 0;
+			border-bottom: 1rpx solid #e5e5e5;
+			display: flex;
+			.icon{
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				margin-right: 15rpx;
+			}
+		}
+	}
 </style>
diff --git a/pages/messageCenter/system.vue b/pages/messageCenter/system.vue
new file mode 100644
index 0000000..7a93bf9
--- /dev/null
+++ b/pages/messageCenter/system.vue
@@ -0,0 +1,53 @@
+<template>
+	<view class="content">
+		<view class="list" v-for="item in 12">
+			<view class="lf-row-between">
+				<view class="lf-font-32 lf-color-222 lf-line-1" style="width: 420rpx;">小程序里发动态教程</view>
+				<view class="lf-font-24 lf-color-777">2021-08-06</view>
+			</view>
+			<view class="lf-m-t-10 lf-font-28 lf-color-777">小程序里发动态教程</view>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F5F5F5;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 30rpx 32rpx;
+		box-sizing: border-box;
+		.list{
+			width: 686rpx;
+			height: max-content;
+			background-color: #FFFFFF;
+			border-radius: 10rpx;
+			box-sizing: border-box;
+			padding: 30rpx;
+			&:nth-child(n+2){
+				margin-top: 30rpx;
+			}
+		}
+	}
+</style>