diff --git a/components/index-nav/index-nav.vue b/components/index-nav/index-nav.vue
index 09c145b..e235ecf 100644
--- a/components/index-nav/index-nav.vue
+++ b/components/index-nav/index-nav.vue
@@ -42,7 +42,7 @@ export default {
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '数码家电'
 		},{
-			link: '',
+			link: '/pages/index/onlineMall/onlineMall',
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '黄金珠宝'
 		},{
diff --git a/pages.json b/pages.json
index a633afc..41c9981 100644
--- a/pages.json
+++ b/pages.json
@@ -952,6 +952,13 @@
 				"navigationBarTitleText": "兑换记录",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/onlineMall/onlineMall",
+			"style" : {
+				"navigationBarTitleText": "在线商城",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/discover/discover.vue b/pages/discover/discover.vue
index 09bca53..98cb544 100644
--- a/pages/discover/discover.vue
+++ b/pages/discover/discover.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<lf-nav :spreadOut="true" :showIcon="true" title="发现"></lf-nav>
+		<lf-nav :spreadOut="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>
diff --git a/pages/index/onlineMall/onlineMall.vue b/pages/index/onlineMall/onlineMall.vue
new file mode 100644
index 0000000..f4a3706
--- /dev/null
+++ b/pages/index/onlineMall/onlineMall.vue
@@ -0,0 +1,308 @@
+<template>
+	<view>
+		<lf-nav title="在线商城" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
+		<view class="head">
+			<u-search placeholder="搜你想要的" :show-action="false" :disabled="true" @click="searchClick"></u-search>
+		</view>
+		<view class="filter-box">
+			<!-- tabs -->
+			<view class="filter-item" @click="switchTab(0)">
+				<text style="white-space: nowrap">综合排序</text>
+			</view>
+			<view class="filter-item">
+				<text style="white-space: nowrap">黄金珠宝</text>
+			</view>
+			<view class="filter-item" @click="switchTab(2)">
+				<text style="white-space: nowrap">筛选</text>
+			</view>
+			<!-- 普通列表文字选择 -->
+			<view class="filter-modal" v-if="show_filter && tab_current == 0" @click="show_filter = false">
+				<view class="filter-content">
+					<view>综合排序</view>
+					<view>销量最高</view>
+					<view>价格最香</view>
+					<view>好评最多</view>
+				</view>
+			</view>
+			<!-- 多条件搜索 -->
+			<view class="filter-modal" v-else-if="show_filter && tab_current == 2" @click="show_filter = false">
+				<view class="filter-many" @click.stop>
+					<view class="filter-main">
+						<view>
+							<view class="filter-title lf-row-between">
+								<view>价格区间</view>
+								<view class="lf-flex">
+									<input class="filter-input" placeholder="最低价" />
+									<view class="filter-division">-</view>
+									<input class="filter-input" placeholder="最高价"/>
+								</view>
+							</view>
+							<view class="filter-title" style="margin-top: 80rpx;">
+								<text>品牌</text>
+								<text class="lf-font-24 lf-color-777">(可多选)</text>
+							</view>
+							<view class="lf-flex-wrap">
+								<view class="filter-capsule" v-for="(item) in 10" :key="item">周大福</view>
+							</view>
+						</view>
+					</view>
+					<view class="filter-foot">
+						<button class="filter-btn" >重置条件</button>
+						<button class="filter-btn solid-btn" >确定</button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view style="height: 104rpx;"></view>
+		<scroll-view :style="{height: autoHeight}" :scroll-y="true">
+			<view class="scroll-content">
+				<lf-waterfall :list="list"></lf-waterfall>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	export default {
+		components: {
+			lfWaterfall
+		},
+		data(){
+			return {
+				show_filter: true,
+				tab_current: null,
+				scrollH: 0,
+				nav_height: 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)"
+					}
+				]
+			}
+		},
+		computed: {
+			autoHeight(){
+				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 104rpx)`;
+			}
+		},
+		onLoad(){
+			let info = uni.getSystemInfoSync();
+			this.scrollH = info.screenHeight;
+		},
+		methods: {
+			searchClick(){
+				this.$url('/pages/shop/search');
+			},
+			switchTab(current){
+				if(this.tab_current != current){
+					this.show_filter = true;
+				}else{
+					this.show_filter = !this.show_filter;
+				}
+				this.tab_current = current;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.head{
+		padding: 30rpx 32rpx;
+	}
+	
+	.filter-box{
+		width: 750rpx;
+		height: 102rpx;
+		border-bottom: 1rpx solid #e5e5e5;
+		position: fixed;
+		background-color: #FFFFFF;
+		z-index: 9;
+		display: flex;
+		// justify-content: space-between;
+		justify-content: space-around;
+		align-items: center;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		.filter-item{
+			width: 114rpx;
+			height: 62rpx;
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: center;
+			align-items: center;
+			font-size: 28rpx;
+			color: #222222;
+			.tab-active{
+				display: inline-block;
+				transform: rotate(180deg);
+				color: #15716E !important;
+			}
+		}
+		.filter-modal{
+			position: absolute;
+			z-index: 7;
+			background-color: rgba(0,0,0,0.5);
+			top: 103rpx;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100vw;
+			height: calc(100vh - 103rpx);
+			.filter-content{
+				position: absolute;
+				width: 100%;
+				height: max-content;
+				max-height: 806rpx;
+				background-color: #FFFFFF;
+				left: 0;
+				z-index: 14;
+				overflow-y: scroll;
+				padding: 0 0 32rpx 32rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-evenly;
+				view{
+					height: 60rpx;
+					// border-bottom: 1rpx solid #e5e5e5;
+					padding: 20rpx 0;
+					line-height: 60rpx;
+				}
+			}
+			.filter-many{
+				position: absolute;
+				width: 100%;
+				height: 630rpx;
+				background-color: #FFFFFF;
+				left: 0;
+				z-index: 14;
+				.filter-main{
+					height: 500rpx;
+					overflow-y: scroll;
+					box-sizing: border-box;
+					padding: 32rpx;
+					.filter-title{
+						font-size: 28rpx;
+						color: #222222;
+						font-weight: bold;
+						margin-bottom: 20rpx;
+						.filter-input{
+							width: 160rpx;
+							height: 50rpx;
+							background-color: #FFFFFF;
+							border: 1rpx solid #e5e5e5;
+							text-align: center;
+							font-size: 24rpx;
+							font-weight: initial;
+							border-radius: 40rpx;
+						}
+						.filter-division{
+							padding: 0 20rpx;
+							font-weight: initial;
+						}
+					}
+					.filter-capsule{
+						width: 163rpx;
+						height: 62rpx;
+						border-radius: 31rpx;
+						border: 1rpx solid #999999;
+						font-size: 20rpx;
+						color: #999999;
+						text-align: center;
+						line-height: 62rpx;
+						margin-right: 12rpx;
+						&:nth-child(4n){
+							margin-right: 0rpx;
+						}
+						&:nth-child(n+5){
+							margin-top: 12rpx;
+						}
+					}
+					.filter-active{
+						border-color: #15716E;
+						color: #15716E;
+					}
+					.input-search{
+						width: 686rpx;
+						height: 62rpx;
+						background-color: #FFFFFF;
+						border-radius: 10rpx;
+						border: 1rpx solid #DDDDDD;
+						box-sizing: border-box;
+						padding: 0 15rpx;
+						font-size: 28rpx;
+						margin-bottom: 50rpx;
+					}
+				}
+				.filter-main>view:nth-child(n+3){
+					margin-top: 40rpx;
+				}
+				.filter-foot{
+					height: 130rpx;
+					border-top: 1rpx solid #e5e5e5;
+					padding: 32rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.filter-btn{
+						width: 332rpx;
+						height: 90rpx;
+						border-radius: 10rpx;
+						border: 1rpx solid #555555;
+						background-color: #FFFFFF;
+						line-height: 88rpx;
+						font-size: 32rpx;
+						color: #555555;
+						margin: 0;
+					}
+					.solid-btn{
+						background-color: #15716E;
+						color: #FFFFFF;
+						border: none;
+					}
+				}
+			}
+		}
+	}
+	
+	.scroll-content{
+		padding: 30rpx 32rpx;
+	}
+</style>