From 41eaa275fa1a53a40d69077bfbc6e971f28ecc43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Wed, 18 Aug 2021 10:52:08 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E6=88=90]=20=E5=8F=91=E7=8E=B0?=
 =?UTF-8?q?=E9=A1=B5UI=20[=E5=AE=8C=E6=88=90=E5=BE=85=E4=BC=98=E5=8C=96]?=
 =?UTF-8?q?=20=E5=B0=81=E8=A3=85=E9=87=8D=E5=8F=A0=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lf-nolanPhoto/lf-nolanPhoto.vue |  48 ++++++
 pages/find/find.vue                        | 182 ++++++++++++++++++++-
 2 files changed, 228 insertions(+), 2 deletions(-)
 create mode 100644 components/lf-nolanPhoto/lf-nolanPhoto.vue

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