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/common/styles/iconfont.css b/common/styles/iconfont.css
index 1d70412..089002b 100644
--- a/common/styles/iconfont.css
+++ b/common/styles/iconfont.css
@@ -1,11 +1,11 @@
 @font-face {
-  font-family: "lf-iconfont"; /* Project id 2651793 */
-  src: url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.woff2?t=1627553466179') format('woff2'),
-       url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.woff?t=1627553466179') format('woff'),
-       url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.ttf?t=1627553466179') format('truetype');
+  font-family: "lf-iconfont"; /* Project id 2779107 */
+  src: url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff2?t=1630489955128') format('woff2'),
+       url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff?t=1630489955128') format('woff'),
+       url('//at.alicdn.com/t/font_2779107_i410qmxy80m.ttf?t=1630489955128') format('truetype');
 }
 
-.lf-iconfont {
+.iconfont {
   font-family: "lf-iconfont" !important;
   font-size: 16px;
   font-style: normal;
@@ -13,34 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.lf-icon-cuo:before {
-  content: "\e600";
+.icon-xiangyou:before {
+  content: "\e6af";
 }
 
-.lf-icon-xiangyou:before {
-  content: "\e6d8";
+.icon-zhankaishangxia:before {
+  content: "\e7b1";
 }
 
-.lf-icon-dui:before {
-  content: "\e64d";
+.icon-fabu:before {
+  content: "\e62f";
 }
 
-.lf-icon-jia:before {
-  content: "\e606";
+.icon-shoucang:before {
+  content: "\e61a";
 }
 
-.lf-icon-dui1:before {
-  content: "\e609";
+.icon-fenxiang:before {
+  content: "\e612";
 }
 
-.lf-icon-weixin:before {
+.icon-sousuo:before {
   content: "\e61c";
 }
-
-.lf-icon-cuowu:before {
-  content: "\e60c";
-}
-
-.lf-icon-tongzhi:before {
-  content: "\e60d";
-}
diff --git a/common/styles/theme.css b/common/styles/theme.css
index bfd1b09..5ccb8ac 100644
--- a/common/styles/theme.css
+++ b/common/styles/theme.css
@@ -80,6 +80,10 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	color: #222222 !important;
 }
 
+.lf-color-777 {
+	color: #777777 !important;
+}
+
 .lf-bg-black {
 	background: #222222 !important;
 }
diff --git a/components/lf-nocontent/lf-nocontent.vue b/components/lf-nocontent/lf-nocontent.vue
new file mode 100644
index 0000000..5129fa3
--- /dev/null
+++ b/components/lf-nocontent/lf-nocontent.vue
@@ -0,0 +1,31 @@
+<template>
+	<view class="padding-xl margin-top-xl">
+		<view class="flex justify-center">
+			<image src="@/static/images/empty.png" mode="widthFix" class="no-content-img"></image>
+		</view>
+		<text class="block text-center margin-top">暂无数据</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.no-content-img{
+		width: 440rpx;
+		height: 380rpx;
+	}
+</style>
diff --git a/components/lf-price/lf-price.vue b/components/lf-price/lf-price.vue
new file mode 100644
index 0000000..f4816d8
--- /dev/null
+++ b/components/lf-price/lf-price.vue
@@ -0,0 +1,46 @@
+<template>
+	<view>
+		<block v-if="isPoint">
+			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text>
+			<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
+		</block>
+		<block v-else>
+			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }} <text class="lf-font-24 lf-color-777 lf-m-l-10">起</text> </text>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			price: {
+				type: [Number, String],
+				default: ''
+			}
+		},
+		computed: {
+			// 是否存在小数点
+			isPoint(){
+				let price = parseFloat(this.$props.price).toString();
+				return price.indexOf('.') >= 0;
+			},
+			showPrice(){
+				let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况
+				return function(type){
+					let price_arr = price.split('.');
+					if(type == 1){
+						return price_arr[0];
+					}else if(type == 2){
+						return price_arr[1];
+					}else{
+						return price_arr[0];
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	
+</style>
diff --git a/components/lf-waterfall-shopdetails/lf-waterfall.vue b/components/lf-waterfall-shopdetails/lf-waterfall.vue
new file mode 100644
index 0000000..e707c3e
--- /dev/null
+++ b/components/lf-waterfall-shopdetails/lf-waterfall.vue
@@ -0,0 +1,220 @@
+<template>
+	<view>
+		<u-waterfall v-model="dataList" ref="uWaterfall" v-for="itemFather of listlength" :key="itemFather" v-if="itemFather == tabindex">
+			<template v-slot:left="{leftList}">
+				<view class="list-warter" v-for="(item, index) in leftList" :key="index">
+					<view v-if="!item.is_ad"  @click="onClick(item.id)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
+							<view class="list-label">已售{{item.sale}}</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+							<view class="list-price">
+								<!-- <text>{{item.price}}元</text> -->
+								<lf-price :price="item.price"></lf-price>
+								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+							</view>
+						</view>
+					</view>
+					<view v-else @click="goAd(item.type,item.url)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{rightList}">
+				<view class="list-warter" v-for="(item, index) in rightList" :key="index">
+					<view v-if="!item.is_ad"  @click="onClick(item.id)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
+							<view class="list-label">已售{{item.sale}}</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+							<view class="list-price">
+								<!-- <text>{{item.price}}元</text> -->
+								<lf-price :price="item.price"></lf-price>
+								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+							</view>
+						</view>
+					</view>
+					<view v-else @click="goAd(item.type,item.url)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			},
+			tabindex: {
+				type: Number,
+				default: 0
+			},
+			listlength: {
+				type: Number,
+				default: 1
+			}
+		},
+		data(){
+			return {
+				// dataList: []
+			}
+		},
+		computed: {
+			dataList: {
+				get() {
+					console.log('组件当前数据====',this.list)
+					return this.list; 
+				},
+				set(newValue) {  console.log('newvalue',newValue) }
+			},
+		},
+		// watch: {
+		// 	list(newValue,oldValue) {
+		// 		console.log('值变了',newValue)
+		// 		console.log('旧值',this.$refs)
+		// 		// this.$forceUpdate();
+				
+				
+		// 		this.dataList = newValue
+				
+		// 		console.log('当前值',this.dataList)
+		// 		return newValue
+		// 	}
+		// },
+		onShow(){
+			
+		},
+		deactivated() {
+			
+		},
+		onLoad() {
+			
+		},
+		destroyed() {
+			
+		},
+		methods: {
+			onClick(id){
+				this.$url('/pages/goodsDetail/index?goods_id='+id);
+				this.$emit('click');
+			},
+			goAd(type,url){
+				if(url) {
+					if(type == 0) {
+						this.$url(url);
+					}else {
+						this.$url('/pages/index/urlWeb?url='+url);
+					}
+				}
+			},
+			clear() {
+				console.log('组件名',this.$refs)
+				this.$refs.uWaterfall[0].clear();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	// ====
+	.list-warter {
+		border-radius: 20rpx;
+		margin: 10px 5px;
+		margin-top: 0px;
+		background-color: #ffffff;
+		// padding: 8px;
+		position: relative;
+		overflow: hidden;
+		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+	}
+	
+	.u-close {
+		position: absolute;
+		top: 32rpx;
+		right: 32rpx;
+	}
+	
+	.list-image {
+		width: 100%;
+		border-radius: 4px;
+	}
+	
+	.list-title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: $u-main-color;
+	}
+	
+	.list-label{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		background-color: rgba(0,0,0,0.5);
+		width: 140rpx;
+		height: 48rpx;
+		border-radius: 20rpx 0rpx 0rpx 0rpx;
+		font-size: 22rpx;
+		color: #FFFFFF;
+		line-height: 48rpx;
+		text-align: center;
+	}
+	
+	.list-tag {
+		display: flex;
+		margin-top: 5px;
+	}
+	
+	.list-tag-owner {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding: 4rpx 14rpx;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+	
+	.list-tag-text {
+		border: 1px solid $u-type-primary;
+		color: $u-type-primary;
+		margin-left: 10px;
+		border-radius: 50rpx;
+		line-height: 1;
+		padding: 4rpx 14rpx;
+		display: flex;
+		align-items: center;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+	}
+	
+	.list-price {
+		font-size: 30rpx;
+		color: $u-type-error;
+		margin-top: 5px;
+		display: flex;
+		align-items: center;
+	}
+	// ====
+</style>
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/main.js b/main.js
index aed3983..998f9db 100644
--- a/main.js
+++ b/main.js
@@ -18,6 +18,11 @@ import store from '@/store/index.js';
 Vue.config.productionTip = false
 import uView from 'uview-ui';
 Vue.use(uView);
+
+// 将无数据组件注入全局
+import lfNocontent from '@/components/lf-nocontent/lf-nocontent.vue';
+Vue.component('lf-nocontent', lfNocontent);
+
 Vue.prototype.$shared = $shared;
 Vue.prototype.$http = sandBox;
 Vue.prototype.$cookieStorage = cookieStorage;
diff --git a/pages.json b/pages.json
index 710ea86..4efd8a4 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/shop/shopdetail.vue b/pages/shop/shopdetail.vue
index fb581c3..cbf8264 100644
--- a/pages/shop/shopdetail.vue
+++ b/pages/shop/shopdetail.vue
@@ -1,13 +1,13 @@
 <template>
 	<view>
-		<lf-nav :spreadOut="false" :showIcon="true" baColor="rgba(0,0,0,0)"></lf-nav>
+		<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
 		<view class="shop-head">
-			<image class="lf-w-100 lf-h-100" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
+			<image class="lf-w-100 lf-h-100" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
 		</view>
 		<view class="shop-title">
 			<view class="shop-flex">
 				<view class="shop-img">
-					<image class="shop-img" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
+					<image class="shop-img" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
 				</view>
 				<view>
 					<view class="lf-color-black lf-font-36">AIMER MEN爱慕先生</view>
@@ -15,28 +15,424 @@
 				</view>
 			</view>
 			<view class="function-total">
-				<view>
-					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
-					<view class="lf-font-24 lf-color-333">客服</view>
+				<view class="lf-row-center lf-flex-column">
+					<view><text class="lf-iconfont icon-shoucang shop-function"></text></view>
+					<view class="lf-font-24 lf-color-33">客服</view>
 				</view>
-				<view>
-					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
+				<view class="lf-row-center lf-flex-column">
+					<view><text class="lf-iconfont icon-shoucang shop-function"></text></view>
 					<view class="lf-font-24 lf-color-333">收藏</view>
 				</view>
-				<view>
-					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
+				<view class="lf-row-center lf-flex-column">
+					<view><text class="lf-iconfont icon-fenxiang shop-function"></text></view>
 					<view class="lf-font-24 lf-color-333">分享</view>
 				</view>
 			</view>
 		</view>
+		<view v-if="title_tab.length">
+			<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
+		</view>
+		<lf-nocontent v-else></lf-nocontent>
+		<!-- 推荐 -->
+		<view v-if="title_current==0">
+			<view class="lf-row-between lf-p-l-32 lf-p-t-40 lf-p-r-32">
+				<view class="lf-font-32 lf-color-black lf-font-bold">在售商品</view>
+				<view class="lf-font-24 lf-color-555">查看全部 <text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text></view>
+			</view>
+			<view class="lf-row-between lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30" style="flex-wrap: wrap;">
+				<view class="goods-rom" v-for="(item,index) of list" :key="index">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
+						<view class="list-label">已售{{item.sale}}</view>
+					</u-lazy-load>
+					<view class="lf-p-20">
+						<view class="list-title">
+							{{item.title}}
+						</view>
+						<view class="list-price">
+							<!-- <text>{{item.price}}元</text> -->
+							<lf-price :price="item.price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="introduct">
+				<text class="lf-font-32 lf-color-black">品牌故事</text>
+				<view class="lf-font-28 lf-color-333 lf-m-t-20">
+					在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售在售商品在售商品在售商品在售商品
+				</view>
+			</view>
+		</view>
+		
+		
 		
+		<view class="lf-p-t-30 lf-p-b-30" v-else>
+			<view class="lf-m-b-30 lf-flex lf-w-100">
+				<u-icon name="search" class="search-icon"></u-icon>
+				<input class="rom-search" type="text" placeholder="请输入商品名称" />
+			</view>
+			<view class="special_tab">
+				<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+			</view>
+			<swiper :style="{height: '800rpx', width: '750rpx'}" :current="current" @change="swiperChange">
+				<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
+					<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
+						<view class="lf-m-t-20"></view>
+						<lf-waterfall :list="tabItem.list" :listlength="tab_list.length" :tabindex='tabIndex' ref="uWaterfallFather"></lf-waterfall>
+						<view class="loading-more lf-m-b-10">
+							<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
+							<lf-nocontent v-else></lf-nocontent>
+						<!-- 	<view> 
+								{{tabItem.list.length}}
+							</view> -->
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
 	</view>
 </template>
 
 <script>
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	export default {
+		data() {
+			return {
+				title_tab: [
+					{name:'推荐'},
+					{name:'商品'}
+				],
+				tab_list: [
+					{
+						id: 1,
+						name: '综合',
+						list: [
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							}
+						],
+						isRefresher: false,
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					},
+					{
+						id: 2,
+						name: '销量',
+						list: [
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							}
+						],
+						isRefresher: false,
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					},
+					{
+						id: 3,
+						name: '上新',
+						list: [
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							}
+						],
+						isRefresher: false,
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					},
+					{
+						id: 4,
+						name: '价格',
+						list: [
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							},
+							{
+								id: 10,
+								original_price: "4111.00",
+								picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+								pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+								price: "2412.00",
+								product_id: 1008,
+								sale: 0,
+								title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+							}
+						],
+						isRefresher: false,
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					}
+				],
+				current: 0,
+				title_current:0,
+				show_count: 0,
+				windowHeight: 0,
+				list: [
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					},
+					{
+						id: 10,
+						original_price: "4111.00",
+						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
+						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
+						price: "2412.00",
+						product_id: 1008,
+						sale: 0,
+						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
+					}
+				]
+			}
+		},
+		components: {
+			lfWaterfall
+		},
+		methods: {
+			tabChange(index){
+				this.current = index;
+				this.clearTabItem();
+				this.getData();
+			},
+			titletabChange(index){
+				this.title_current = index;
+			},
+			getData() {
+				let tab_item = this.tab_list[this.current];
+				let isPage = false;
+				tab_item.isPage = isPage;
+				if(!isPage){
+					tab_item.loadingClass = false;
+					tab_item.loadingText = '没有更多数据啦~';
+				}
+				tab_item.isRefresher = false;
+			},
+			// 滑块下标值变化
+			swiperChange(event){
+				this.current = event.detail.current;
+				if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
+			},
+			// 页面触底，加载下一页
+			onScrolltolower(){
+				let tab_item = this.tab_list[this.current];
+				if(tab_item.isPage){
+					tab_item.page = tab_item.page + 1;
+					this.getData();
+				}
+			},
+			// scroll-view 下拉刷新
+			onRefresherrefresh(){
+				this.$u.throttle(() => {
+					this.clearTabItem();
+					this.getData();
+				}, 200);
+			},
+			clearTabItem(){
+				let tab_item = this.tab_list[this.current];
+				tab_item.page = 1;
+				tab_item.isPage = true;
+				tab_item.isRefresher = true;
+				tab_item.loadingClass = true;
+				tab_item.loadingText = '正在加载中';
+				tab_item.list = [];
+				this.$set(this.tab_list, this.current, tab_item);
+				// this.$refs.uWaterfallFather[this.current].clear();
+			}
+		},
+		onShow(){
+			this.windowHeight = getApp().globalData.windowHeight;
+		},
+	}
 </script>
 
-<style lang="less" scoped>
+<style>
+	page {
+		background-color: white;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.search-icon {
+		position: relative;
+		bottom: 0;
+		left: 54rpx;
+	}
+	/deep/.input-placeholder{
+		color: #777;
+		font-size: 28rpx;
+	}
+	.rom-search {
+		width: 686rpx;
+		height: 60rpx;
+		background: #F4F8F8;
+		border-radius: 30rpx;
+		padding-left: 74rpx;
+		font-size: 28rpx;
+	}
+	.goods-rom {
+		border-radius: 20rpx;
+		width: 333rpx;
+		height: 497rpx;
+		background-color: white;
+		box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+		&:nth-child(2n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 3) {
+			margin-top: 20rpx;
+		}
+	}
+	.introduct {
+		padding: 0 0 30rpx 32rpx;
+	}
+	.com{
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 0rpx 28rpx;
+	}
 	.shop-head {
 		width: 100%;
 		height: 400rpx;
@@ -62,13 +458,161 @@
 		margin-right: 15rpx;
 	}
 	.shop-function {
-		width: 60rpx;
-		height: 60rpx;
+		width: 80rpx;
+		height: 80rpx;
 		border-radius: 50%;
+		font-size: 40rpx;
 	}
 	.function-total {
 		display: flex;
 		justify-content: space-between;
 		padding: 0 65rpx 0 65rpx;
 	}
+	
+	/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: -12rpx;
+	}
+	
+	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 56rpx!important;
+		position: absolute;
+		height: 5rpx!important;
+		left: 8rpx;
+		bottom: -4rpx;
+	}
+	
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+	
+	
+	//价格筛选伪类
+	// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
+	// 	font-size: 48rpx!important;
+	// 	content: '';
+		
+	// 	color: red;
+	// }
+	
+	// loading加载
+	.loading-more {
+		align-items: center;
+		justify-content: center;
+		padding-top: 10px;
+		padding-bottom: 10px;
+		text-align: center;
+		font-size: 28rpx;
+		color: #999;
+	}
+	.loading-more-text::before {
+		content: '';
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
+		animation: weuiLoading 1s steps(12, end) infinite;
+		background-repeat: no-repeat;
+		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
+		background-size: 100%;
+	}
+	@keyframes weuiLoading {
+		0% {
+			transform: rotate3d(0, 0, 1, 0deg);
+		}
+		100% {
+			transform: rotate3d(0, 0, 1, 360deg);
+		}
+	}
+	
+	
+	.list-warter {
+		border-radius: 20rpx;
+		margin: 10px 5px;
+		margin-top: 0px;
+		background-color: #ffffff;
+		// padding: 8px;
+		position: relative;
+		overflow: hidden;
+		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+	}
+	
+	.u-close {
+		position: absolute;
+		top: 32rpx;
+		right: 32rpx;
+	}
+	
+	.list-image {
+		width: 100%;
+		border-radius: 4px;
+	}
+	
+	.list-title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: $u-main-color;
+	}
+	
+	.list-label{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		background-color: rgba(0,0,0,0.5);
+		width: 140rpx;
+		height: 48rpx;
+		border-radius: 20rpx 0rpx 0rpx 0rpx;
+		font-size: 22rpx;
+		color: #FFFFFF;
+		line-height: 48rpx;
+		text-align: center;
+	}
+	
+	.list-tag {
+		display: flex;
+		margin-top: 5px;
+	}
+	
+	.list-tag-owner {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding: 4rpx 14rpx;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+	
+	.list-tag-text {
+		border: 1px solid $u-type-primary;
+		color: $u-type-primary;
+		margin-left: 10px;
+		border-radius: 50rpx;
+		line-height: 1;
+		padding: 4rpx 14rpx;
+		display: flex;
+		align-items: center;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+	}
+	
+	.list-price {
+		font-size: 30rpx;
+		color: $u-type-error;
+		margin-top: 5px;
+		display: flex;
+		align-items: center;
+	}
 </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>
diff --git a/static/images/empty.png b/static/images/empty.png
new file mode 100644
index 0000000..1c480e2
Binary files /dev/null and b/static/images/empty.png differ