From dec3f1e102ef29a7a1c31deaf8e55b7f45b2b974 Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Thu, 2 Sep 2021 14:42:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=97=E9=93=BA=E8=AF=A6=E6=83=85=E9=A1=B5/?=
 =?UTF-8?q?=E5=8F=91=E7=8E=B0=E9=A1=B5/=E4=B8=AA=E4=BA=BA=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5/=E5=8F=91=E7=8E=B0=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                            |   2 +-
 components/self-line/self-line.vue |  16 ++
 pages.json                         |  27 +++-
 pages/discover/discover.vue        | 127 ++++++++++++++++
 pages/discover/discoverdetails.vue | 236 +++++++++++++++++++++++++++++
 pages/user/my/my.vue               | 139 +++++++++++++++++
 6 files changed, 543 insertions(+), 4 deletions(-)
 create mode 100644 components/self-line/self-line.vue
 create mode 100644 pages/discover/discover.vue
 create mode 100644 pages/discover/discoverdetails.vue
 create mode 100644 pages/user/my/my.vue

diff --git a/App.vue b/App.vue
index 830974e..b5e17ed 100644
--- a/App.vue
+++ b/App.vue
@@ -78,7 +78,7 @@ page {
     padding: 0;
     border: none;
     font-size: 16px;
-    background-color: #F3F3F3;
+    background-color: white;
     line-height: 1.6;
 }
 .globalColor {
diff --git a/components/self-line/self-line.vue b/components/self-line/self-line.vue
new file mode 100644
index 0000000..07d36b5
--- /dev/null
+++ b/components/self-line/self-line.vue
@@ -0,0 +1,16 @@
+<template>
+	<view class="bg-gray1 h-20" />
+</template>
+
+<script>
+</script>
+
+<style>
+	.h-20 {
+	    height: 20rpx;
+	}
+	.bg-gray1 {
+		background-color: #F8F8F8;
+		color: #333333;
+	}
+</style>
diff --git a/pages.json b/pages.json
index f4c3e7e..34da0a1 100644
--- a/pages.json
+++ b/pages.json
@@ -4,10 +4,9 @@
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index/index",
+			"path": "pages/discover/discover",
 			"style": {
-				"navigationBarTitleText": "首页",
-				"enablePullDownRefresh":true,
+				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
 		},
@@ -18,6 +17,28 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/user/my/my",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/discover/discoverdetails",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/index/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh":true,
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/index/microPages/microPages",
 			"style": {
diff --git a/pages/discover/discover.vue b/pages/discover/discover.vue
new file mode 100644
index 0000000..297a763
--- /dev/null
+++ b/pages/discover/discover.vue
@@ -0,0 +1,127 @@
+<template>
+	<view>
+		<lf-nav :spreadOut="true" :showIcon="true" title="发现"></lf-nav>
+		<view>
+			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+		</view>
+		<view v-for="i of 6">
+			<view class="lf-p-32">
+				<view class="lf-flex">
+					<view class="tag-father">
+						<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
+						<view class="head-tag">V</view>
+					</view>
+					<view class="lf-flex-column lf-m-l-20">
+						<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view>
+						<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
+					</view>
+				</view>
+				<view class="lf-font-28 lf-color-333 lf-m-t-20">
+					在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
+				</view>
+				<view class="lf-flex-wrap lf-m-t-20">
+					<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+				</view>
+				<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
+					<view class="lf-row-center">
+						<text class="lf-iconfont icon-shoucang"></text>
+						<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
+					</view>
+					<view class="lf-row-center">
+						<text class="lf-iconfont icon-fabu"></text>
+						<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
+					</view>
+					<view class="lf-row-center">
+						<text class="lf-iconfont icon-fenxiang"></text>
+						<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
+					</view>
+				</view>
+			</view>
+			<self-line/>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tab_list: [
+					{name: '最新',id: 1},
+					{name: '最热',id: 2},
+					{name: '已关注',id: 3},
+					{name: '消息',id: 4}
+				],
+				current: 0,
+			}
+		},
+		methods: {
+			tabChange(index){
+				this.current = index;
+			},
+		}
+	}
+</script>
+
+<style>
+	page {
+		background-color: white;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.tag-father {
+		position: relative;
+	}
+	.head-tag {
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: 24rpx;
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		background-color: #15716E;
+		border: 1rpx solid #FFFFFF;
+		position: absolute;
+		left: 66rpx;
+		top: 70rpx;
+		z-index: 99;
+	}
+	.qzone-img {
+		width: 220rpx;
+		height: 220rpx;
+		border-radius: 10rpx;
+		margin-right: 12rpx;
+		&:nth-child(3n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 4) {
+			margin-top: 12rpx;
+		}
+	}
+	.head-img {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+	}
+	// tab样式
+	/deep/.u-scroll-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+	/deep/.u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 80rpx!important;
+		position: absolute;
+		left: 0;
+		bottom: -14rpx;
+	}
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+</style>
diff --git a/pages/discover/discoverdetails.vue b/pages/discover/discoverdetails.vue
new file mode 100644
index 0000000..e5ed563
--- /dev/null
+++ b/pages/discover/discoverdetails.vue
@@ -0,0 +1,236 @@
+<template>
+	<view>
+		<lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav>
+		<view class="lf-p-32">
+			<view class="lf-flex">
+				<view class="tag-father">
+					<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
+					<view class="head-tag">V</view>
+				</view>
+				<view class="lf-flex-column lf-m-l-20">
+					<view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view>
+					<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
+				</view>
+			</view>
+			<view class="lf-font-28 lf-color-333 lf-m-t-20">
+				在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
+			</view>
+			<view class="lf-flex-wrap lf-m-t-20">
+				<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+			</view>
+			<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-shoucang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fabu"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fenxiang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
+				</view>
+			</view>
+		</view>
+		<self-line/>
+		<!-- 评论 -->
+		<view class="comment">
+			<view class="lf-color-555 lf-font-24">共 2条评论</view>
+			<!-- 评论开始 -->
+			<view>
+				<view class="lf-m-t-20">
+					<view class="lf-flex">
+						<view>
+							<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+						</view>
+						<view class="lf-flex-column lf-m-l-20">
+							<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
+							<view>
+								<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
+							</view>
+						</view>
+						<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
+							<view>
+								<text class="lf-iconfont icon-shoucang"></text>
+							</view>
+							<view class="lf-color-555 lf-font-24">10</view>
+						</view>
+					</view>
+				</view>
+				<view class="comment-replay">
+					<view class="lf-flex">
+						<view>
+							<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+						</view>
+						<view class="lf-flex-column lf-m-l-20">
+							<view class="lf-color-999 lf-font-24">优选嘿嘿</view>
+							<view>
+								<view class="lf-color-black lf-line-2 lf-row-center" style="max-width: 446rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
+							</view>
+						</view>
+						<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
+							<view>
+								<text class="lf-iconfont icon-shoucang"></text>
+							</view>
+							<view class="lf-color-555 lf-font-24">10</view>
+						</view>
+					</view>
+					<view class="lf-flex">
+						<view class="lf-flex lf-m-t-30">
+							<view>
+								<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+							</view>
+							<view class="lf-flex-column lf-m-l-20">
+								<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
+								<view class="lf-row-center" style="max-width: 446rpx;">
+									<text class="lf-color-333 lf-m-r-10">回复</text>
+									<text class="lf-font-24 lf-color-999">优选嘿嘿:</text>
+									<text class="lf-font-26 lf-color-black lf-m-l-10">哈哈哈哈哈</text>
+									<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text>
+								</view>
+							</view>
+						</view>
+						<view class="lf-m-t-30" style="position: absolute;right:33rpx;">
+							<view>
+								<text class="lf-iconfont icon-shoucang"></text>
+							</view>
+							<view class="lf-color-555 lf-font-24">10</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 评论结束 -->
+			<view>
+				<view class="lf-m-t-20">
+					<view class="lf-flex">
+						<view>
+							<image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+						</view>
+						<view class="lf-flex-column lf-m-l-20">
+							<view class="lf-color-999 lf-font-24">金城优选哈哈</view>
+							<view>
+								<view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
+							</view>
+						</view>
+						<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
+							<view>
+								<text class="lf-iconfont icon-shoucang"></text>
+							</view>
+							<view class="lf-color-555 lf-font-24">10</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 底部tab -->
+		<view class="comment-tab">
+			<view>
+				<input class="rom-search" type="text" placeholder="说点什么" />
+			</view>
+			<view class="lf-row-center">
+				<view class="lf-row-center lf-m-r-35">
+					<text class="lf-iconfont icon-shoucang"></text>
+					<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
+				</view>
+				<view class="lf-row-center lf-m-r-35">
+					<text class="lf-iconfont icon-fenxiang"></text>
+					<text class="lf-m-l-10 lf-font-24 lf-color-black">3579</text>
+				</view>
+				<view class="lf-row-center lf-m-r-35">
+					<text class="lf-iconfont icon-fabu"></text>
+					<text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+	.tag-father {
+		position: relative;
+	}
+	.head-tag {
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: 24rpx;
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		background-color: #15716E;
+		border: 1rpx solid #FFFFFF;
+		position: absolute;
+		left: 66rpx;
+		top: 70rpx;
+		z-index: 99;
+	}
+	/deep/.input-placeholder{
+		color: #aaa;
+		font-size: 28rpx;
+	}
+	.rom-search {
+		width: 279rpx;
+		height: 70rpx;
+		background: #F4F8F8;
+		border-radius: 35rpx;
+		padding-left: 30rpx;
+		font-size: 28rpx;
+	}
+	.comment-tab {
+		padding: 0  0 0 32rpx;
+		display: flex;
+		justify-content: space-between;
+		height: 100rpx;
+		align-items: center;
+		width: 100%;
+		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+		position: fixed;
+		bottom: 0;
+		z-index: 99;
+		background-color: white;
+	}
+	.comment-replay {
+		margin-left: 96rpx;
+		margin-top: 28rpx;
+	}
+	.comment-img {
+		width: 75rpx;
+		height: 75rpx;
+		border-radius: 50%;
+	}
+	.comment{
+		width: 100%;
+		height: max-content;
+		background-color: white;
+		border-radius: 5rpx;
+		box-sizing: border-box;
+		padding: 32rpx;
+		font-size: 28rpx;
+		color: #777777;
+		padding-bottom: 120rpx;
+	}
+	.qzone-img {
+		position: relative;
+		width: 220rpx;
+		height: 220rpx;
+		border-radius: 10rpx;
+		margin-right: 12rpx;
+		&:nth-child(3n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 4) {
+			margin-top: 12rpx;
+		}
+	}
+	.head-img {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+	}
+</style>
diff --git a/pages/user/my/my.vue b/pages/user/my/my.vue
new file mode 100644
index 0000000..37fe497
--- /dev/null
+++ b/pages/user/my/my.vue
@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F3F8F8" title="个人主页"></lf-nav>
+		<view class="user-top">
+			<view class="lf-row-between lf-w-100">
+				<view class="lf-flex">
+					<view class="tag-father">
+						<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
+						<view class="head-tag">V</view>
+					</view>
+					<view class="lf-flex-column lf-m-l-20">
+						<text class="lf-font-42 lf-color-black lf-font-bold">最新</text>
+						<text class="lf-font-28 lf-color-black">0 关注 | 0 粉丝</text>
+					</view>
+				</view>
+				<view>
+					<button class="head-btn">关注</button>
+				</view>
+			</view>
+		</view>
+		<view class="lf-m-32">
+			<view class="lf-font-48 lf-color-black lf-font-bold">
+				08月27日
+			</view>
+			<view class="lf-color-777 lf-font-24">
+				18:39
+			</view>
+			<view class="lf-flex-wrap lf-m-t-20">
+				<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+			</view>
+			<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-shoucang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fabu"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fenxiang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
+				</view>
+			</view>
+		</view>
+		<view class="lf-m-32">
+			<view class="lf-font-48 lf-color-black lf-font-bold">
+				08月27日
+			</view>
+			<view class="lf-color-777 lf-font-24">
+				18:39
+			</view>
+			<view class="lf-flex-wrap lf-m-t-20">
+				<image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
+			</view>
+			<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-shoucang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fabu"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
+				</view>
+				<view class="lf-row-center">
+					<text class="lf-iconfont icon-fenxiang"></text>
+					<text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+	page {
+		background-color: white;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.tag-father {
+		position: relative;
+	}
+	.head-tag {
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: 24rpx;
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		background-color: #15716E;
+		border: 1rpx solid #FFFFFF;
+		position: absolute;
+		left: 76rpx;
+		top: 86rpx;
+		z-index: 99;
+	}
+	.qzone-img {
+		width: 220rpx;
+		height: 220rpx;
+		border-radius: 10rpx;
+		margin-right: 12rpx;
+		&:nth-child(3n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 4) {
+			margin-top: 12rpx;
+		}
+	}
+	.user-top {
+		background-color: #F3F8F8;
+		height: 236rpx;
+		padding: 60rpx;
+		display: flex;
+		align-items: center;
+	}
+	.head-img {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+	}
+	.head-btn {
+		width: 160rpx;
+		height: 70rpx;
+		background: #15716E;
+		display: flex;
+		align-items: center;
+		font-size: 28rpx;
+		color: white;
+		justify-content: center;
+		border-radius: 35rpx;
+	}
+</style>