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..43050c3
--- /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>
+		</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/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/shop/shopdetail.vue b/pages/shop/shopdetail.vue
index fb581c3..2608be2 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>
@@ -16,27 +16,423 @@
 			</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>
+					<image class="shop-function" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
 					<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>
+					<image class="shop-function" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
 					<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>
+					<image class="shop-function" src="https://images.shobserver.com/news/690_390/2021/9/1/72943e71bc5e485584d0a7d5618a00cd.jpg" mode="aspectFill"></image>
 					<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">查看全部 <u-icon name="arrow-right"></u-icon></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-r-32 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;
@@ -71,4 +467,147 @@
 		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) {
+		font-size: 48rpx!important;
+		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/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