From 4ed223d30881b4d1f566cfa465c8f0390012f57d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 2 Sep 2021 14:46:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/styles/theme.css                       |   4 +-
 components/index-banner/index-banner.vue      |  14 +-
 components/index-nav/index-nav.less           |   8 +-
 components/index-nav/index-nav.vue            | 113 ++++-
 components/lf-indexFind/lf-indexFind.vue      |  77 +++
 .../lf-indexShopMatrix/lf-indexShopMatrix.vue |  82 ++++
 .../lf-shopGoodsCard/lf-shopGoodsCard.vue     |  94 ++++
 components/lf-tabbar/lf-tabbar-box.vue        |   2 +-
 components/lf-tabbar/lf-tabbar.vue            |  14 +
 pages.json                                    |   9 +-
 pages/index/category/category.vue             | 445 ++++++++++++++++++
 pages/index/category/testdata.js              | 225 +++++++++
 .../classification - 副本.vue               | 181 +++++++
 pages/index/classification/classification.vue | 129 ++---
 pages/index/index/index.vue                   |  98 +++-
 store/index.js                                |   2 +-
 16 files changed, 1392 insertions(+), 105 deletions(-)
 create mode 100644 components/lf-indexFind/lf-indexFind.vue
 create mode 100644 components/lf-indexShopMatrix/lf-indexShopMatrix.vue
 create mode 100644 components/lf-shopGoodsCard/lf-shopGoodsCard.vue
 create mode 100644 pages/index/category/category.vue
 create mode 100644 pages/index/category/testdata.js
 create mode 100644 pages/index/classification/classification - 副本.vue

diff --git a/common/styles/theme.css b/common/styles/theme.css
index cd95db8..bfd1b09 100644
--- a/common/styles/theme.css
+++ b/common/styles/theme.css
@@ -61,11 +61,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 /* #endif */
 
 .lf-color-primary {
-	color: #1998FE !important;
+	color: #186c6b !important;
 }
 
 .lf-bg-primary {
-	background: #1998FE !important;
+	background: #186c6b !important;
 }
 
 .lf-color-secondary {
diff --git a/components/index-banner/index-banner.vue b/components/index-banner/index-banner.vue
index 94ef4aa..301d41f 100644
--- a/components/index-banner/index-banner.vue
+++ b/components/index-banner/index-banner.vue
@@ -25,6 +25,7 @@
 					indicator-dots="true"
 					autoplay="true"
 					circular="true"
+					indicator-active-color="#186c6b"
 				>
 					<swiper-item v-for="(item, index) in bannerData" :key="index">
 						<image mode="widthFix" :src="item.image" :data-src="item.link" class="slide-image" @load="_imgLoad" @tap="_jumpImg"></image>
@@ -40,7 +41,7 @@ export default {
 	// 对应data
 	data() {
 		return {
-			imgHeight: ''
+			imgHeight: '450'
 		};
 	},
 	options: {
@@ -74,6 +75,7 @@ export default {
 	methods: {	  
 	  //内部方法建议以下划线开头
 	  _imgLoad(e) {
+		  return; // PS 不执行自动高
 	    var height = e.detail.height;
 	    var width = e.detail.width;
 	    var ratio = width / height;
@@ -102,9 +104,9 @@ export default {
 </script>
 
 <!-- 复制之前的less放进来就可以 -->
-<style lang="less">
+<style lang="less" scoped>
 	.index-banner{
-		height: 900rpx;
+		// height: 900rpx;
   //margin-bottom: 10px;
   .banner-title{
     padding: 10px 15px 10px 15px;
@@ -135,11 +137,13 @@ export default {
   }
   .banner {
     background: #FFFFFF;
+	height: 100%;
     image {
       width: 100%;
-	  height: 100%;
+	  height: 100% !important;
       object-fit: cover;
-
+	  vertical-align: middle !important;
+	  border-radius: 0 0 30rpx 30rpx;
     }
   }
 
diff --git a/components/index-nav/index-nav.less b/components/index-nav/index-nav.less
index fea7274..e9fd21f 100644
--- a/components/index-nav/index-nav.less
+++ b/components/index-nav/index-nav.less
@@ -1,13 +1,19 @@
 .quick-nav{
   background-color: #FFFFFF;
+  margin-top: 20rpx;
   .nav-content{
     display: flex;
     align-items: center;
     flex-wrap:wrap;
     padding: 10px 0 0 0;
+	// width: 890rpx;
+	width: 1000rpx;
     .nav-item{
       padding:0px 0px 10px 0px;
-      width: 25%;
+      // width: 25%;
+      width: 13.8%;
+   //    width: 68.97px;
+	  // height: 73px;
       text-align: center;
       .top-info{
         image{
diff --git a/components/index-nav/index-nav.vue b/components/index-nav/index-nav.vue
index 3a55a5c..c88b95b 100644
--- a/components/index-nav/index-nav.vue
+++ b/components/index-nav/index-nav.vue
@@ -1,13 +1,18 @@
 <template>
 <!--快捷导航-->
 <view class="quick-nav" :style="'margin-bottom: ' + meta.margin_bottom + 'px'">
-   <view class="nav-content">
-       <view class="nav-item" v-for="(item, index) in navData" :key="index"  @tap="_jumpImg" :data-src="item.link">
-           <view class="top-info">
-               <image :src="item.image"></image>
-           </view>
-           <view class="bottom-info">{{item.name}}</view>
-       </view>
+   <scroll-view :scroll-x="true" class="scroll-view" @scroll="scroll">
+	   <view class="nav-content">
+	       <view class="nav-item" v-for="(item, index) in list" :key="index"  @tap="_jumpImg" :data-src="item.link">
+	           <view class="top-info">
+	               <image :src="item.image"></image>
+	           </view>
+	           <view class="bottom-info">{{item.name}}</view>
+	       </view>
+	   </view>
+   </scroll-view>
+   <view class="indicator">
+	   <view class="percentage" :style="{width: per_width +'%'}"></view>
    </view>
 </view>
 </template>
@@ -15,7 +20,62 @@
 
 export default {
   data() {
-    return {};
+    return {
+		list: [{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '面部护肤'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '国际精品'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '积分商城'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '服装内衣'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '数码家电'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '黄金珠宝'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '会员服务'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '活动报名'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '餐饮配套'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '领券中心'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '在线客服'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '鞋履箱包'
+		},{
+			link: '/pages/store/groups/groups',
+			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
+			name: '滋补保健'
+		}],
+		per_width: 14.285 * 5
+	};
   },
 
   props: {
@@ -27,6 +87,9 @@ export default {
 	    type: Object,
 	    value: ""
 	  }  
+   },
+   mounted(){
+	  
    },
     //组件的方法
     methods: {
@@ -36,12 +99,42 @@ export default {
         wx.navigateTo({
           url: src
         });
-      }
-
+      },
+	  scroll(event){
+		  // todo 计算优化
+		  if(event.detail.scrollLeft < 112){
+			  this.per_width = 14.285 * 5;
+		  }else{
+			  this.per_width = 0.636 * event.detail.scrollLeft;
+		  }
+	  }
     },
  
 };
 </script>
 <style rel="stylesheet/less" lang="less">
 @import "index-nav";
+.scroll-view{
+	width: 750rpx;
+	height: max-content;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+}
+.indicator{
+	width: 100rpx;
+	height: 10rpx;
+	background-color: #e0e0e0;
+	margin: 0 auto;
+	border-radius: 20rpx;
+	position: relative;
+	overflow: hidden;
+	.percentage{
+		height: 10rpx;
+		background-color: #186c6b;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border-radius: 20rpx;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/components/lf-indexFind/lf-indexFind.vue b/components/lf-indexFind/lf-indexFind.vue
new file mode 100644
index 0000000..96ce7ca
--- /dev/null
+++ b/components/lf-indexFind/lf-indexFind.vue
@@ -0,0 +1,77 @@
+<template>
+	<scroll-view class="find-scroll" :scroll-x="true">
+		<view class="find-content">
+			<view class="find-item" :class="{'max-item': index == 0}" v-for="(item, index) in 5" :key="index">
+				<image class="img" src="https://picsum.photos/200/300"></image>
+				<view class="lf-line-2 info">南边开，风儿吹，北边放，花儿开，西边来，春归去，东边来，北边跑</view>
+			</view>
+		</view>
+		<view style="height: 10rpx;"></view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: 0
+			}
+		},
+		created(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.find-scroll{
+		padding: 30rpx 32rpx;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.find-content{
+			display: flex;
+			width: max-content; 
+			align-items: center;
+			padding: 10rpx 0 0 10rpx;
+		}
+		.find-item{
+			width: 380rpx;
+			height: 480rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+			margin-right: 20rpx;
+			.img{
+				width: 380rpx;
+				height: 380rpx;
+				background-color: #D8D8D8;
+			}
+			.info{
+				padding: 10rpx;
+				width: 380rpx;
+				height: 100rpx;
+				box-sizing: border-box;
+				font-size: 24rpx;
+				line-height: 1.8;
+			}
+		}
+		.max-item{
+			height: 563rpx;
+			width: 425rpx;
+			.img{
+				width: 425rpx;
+				height: 425rpx;
+			}
+			.info{
+				width: 425rpx;
+				height: 138rpx;
+				padding: 20rpx;
+				font-size: 26rpx;
+				line-height: 2.1;
+			}
+		}
+	}
+</style>
diff --git a/components/lf-indexShopMatrix/lf-indexShopMatrix.vue b/components/lf-indexShopMatrix/lf-indexShopMatrix.vue
new file mode 100644
index 0000000..bc72b59
--- /dev/null
+++ b/components/lf-indexShopMatrix/lf-indexShopMatrix.vue
@@ -0,0 +1,82 @@
+<template>
+	<view class="content">
+		<view class="item" v-for="(item, index) in 16" :key="index">
+			<image class="bg-img" src="https://picsum.photos/200/300"></image>
+			<view class="shop">
+				<image src="../../static/recommend-r.png"></image>
+				<view class="lf-line-1">DIOR迪奥</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		created(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		padding: 30rpx 32rpx;
+		display: flex;
+		flex-wrap: wrap;
+		.item{
+			width: 165rpx;
+			height: 165rpx;
+			border: 1rpx solid #979797;
+			margin-right: 9rpx;
+			position: relative;
+			&:nth-child(4n){
+				margin-right: 0rpx;
+			}
+			&:nth-child(n+5){
+				margin-top: 8rpx;
+			}
+			.bg-img{
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+			.shop{
+				width: 100%;
+				height: 100%;
+				background-color: rgba(0,0,0,0.1);
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+				z-index: 2;
+				&>image{
+					width: 70rpx;
+					height: 70rpx;
+					border-radius: 50%;
+					background-color: #FFFFFF;
+				}
+				&>view{
+					font-size: 24rpx;
+					color: #FFFFFF;
+					margin-top: 4rpx;
+					width: 100%;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>
diff --git a/components/lf-shopGoodsCard/lf-shopGoodsCard.vue b/components/lf-shopGoodsCard/lf-shopGoodsCard.vue
new file mode 100644
index 0000000..0ac1163
--- /dev/null
+++ b/components/lf-shopGoodsCard/lf-shopGoodsCard.vue
@@ -0,0 +1,94 @@
+<template>
+	<view class="content">
+		<view class="shop">
+			<image class="img" src="https://picsum.photos/seed/picsum/200/300" mode="aspectFill"></image>
+		</view>
+		<scroll-view class="scroll-view" :scroll-x="true">
+			<view class="scroll-content">
+				<view class="goods-item" v-for="(item, index) in 5" :key="index">
+					<image class="goods-img"></image>
+					<view class="goods-info">
+						<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
+						<view>￥0.5</view>
+					</view>
+				</view>
+				<view class="goods-item">
+					<view class="more-box">
+						<text>查看更多</text>
+						<text class="lf-iconfont icon--2 lf-text-vertical"></text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		created(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		padding: 0rpx 32rpx;
+		.shop{
+			width: 100%;
+			height: 245rpx;
+			.img{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.scroll-view{
+			height: 280rpx;
+			width: 100%;
+			margin-top: 20rpx;
+			.scroll-content{
+				display: flex;
+				width: 100%;
+				.goods-item{
+					margin-right: 15rpx;
+					width: 180rpx;
+				}
+				.goods-img{
+					width: 180rpx;
+					height: 180rpx;
+					background-color: #EEEEEE;
+				}
+				.goods-info{
+					text-align: center;
+					color: #222222;
+					&>view:nth-child(1n){
+						font-size: 24rpx;
+					}
+					&>view:nth-child(2n){
+						font-size: 28rpx;
+						font-weight: bold;
+					}
+				}
+				.more-box{
+					width: 180rpx;
+					height: 180rpx;
+					background-color: #EEEEEE;
+					text-align: center;
+					line-height: 180rpx;
+					font-size: 24rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/components/lf-tabbar/lf-tabbar-box.vue b/components/lf-tabbar/lf-tabbar-box.vue
index bb3cc09..90f88b3 100644
--- a/components/lf-tabbar/lf-tabbar-box.vue
+++ b/components/lf-tabbar/lf-tabbar-box.vue
@@ -90,7 +90,7 @@ export default {
     },
     activeColor: {
       type: String,
-      default: '#409EFF'
+      default: '#186c6b'
     },
     inactiveTextColor: String,
     activeTextColor: String,
diff --git a/components/lf-tabbar/lf-tabbar.vue b/components/lf-tabbar/lf-tabbar.vue
index 7508ca9..6f65a60 100644
--- a/components/lf-tabbar/lf-tabbar.vue
+++ b/components/lf-tabbar/lf-tabbar.vue
@@ -40,6 +40,20 @@
 		computed: {
 			...mapGetters(['currentTabBar', 'tabbars', 'isShowTabBar'])
 		},
+		created(){
+			// 组件被创建时检查当前在哪个页面，然后校验currentTabBar是否与之匹配
+			let pages = getCurrentPages();
+			let page = pages[pages.length - 1].route;
+			let tabbar_name = '';
+			this.tabbars.map(item => {
+				if(item.path == '/'+ page){
+					tabbar_name = item.name;
+				}
+			})
+			if(tabbar_name != this.currentTabBar){
+				this.$store.commit('setCurrentTabBar', tabbar_name);
+			}
+		},
 		methods: {
 			handleClick (options) {
 			  this.$store.commit('setCurrentTabBar', options.name);
diff --git a/pages.json b/pages.json
index f4c3e7e..710ea86 100644
--- a/pages.json
+++ b/pages.json
@@ -664,6 +664,13 @@
 				"navigationBarTitleText": "欢迎使用",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/category/category",
+			"style" : {
+				"navigationBarTitleText": "分类",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
@@ -716,7 +723,7 @@
   		},
 		{
 			"name": "测试",
-			"path": "pages/index/openScreenAd/openScreenAd",
+			"path": "pages/index/classification/classification",
 			"query": ""
 		}
 		
diff --git a/pages/index/category/category.vue b/pages/index/category/category.vue
new file mode 100644
index 0000000..c6ea0e2
--- /dev/null
+++ b/pages/index/category/category.vue
@@ -0,0 +1,445 @@
+<template>
+	<view class="centent">
+		<lf-nav :title="['分类','品牌'][current]" bgColor="#fff" :search="current == 0" @changeHeight="e => nav_height = e"></lf-nav>
+		<view class="tabs">
+			<view class="lf-tab" 
+				:style="{width: 100 / tabs.length +'%'}"
+				:class="{'tab-active': current == index}" 
+				v-for="(item, index) in tabs" :key="index"
+				@click="current = index">{{ item.name }}
+			</view>
+		</view>
+		<!-- 分类 -->
+		<view class="page" v-if="current == 0">
+			<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }">
+				<block v-for="(item, index) in dataArr" :key="index">
+					<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view>
+				</block>
+				<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
+			</scroll-view>
+			
+			<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation>
+				<block v-for="(item, index) in dataArr" :key="index">
+					<view :ref="'left_' + index" class="right_item " :id="'left_' + index">
+						<text class="right_item_title ">{{ item.name }}</text>
+						<view class="right_item_view">
+							<view class="item" v-for="(item, index) in item.subArr" :key="index" @click="rightTap(item)">
+								<image :src="item.img" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image>
+								<text class="lf-font-24">{{ item.name }}</text>
+							</view>
+						</view>
+					</view>
+				</block>
+				<view class="" :style="{ height: 'calc('+ scrollH / 2 +'px)' }"><!-- 站位 --></view>
+			</scroll-view>
+		</view>
+		<!-- 品牌 -->
+		<view class="brand" v-else-if="current == 1" :style="{height: autoHeight}">
+			<!-- 筛选 -->
+			<view class="lf-filter-box">
+				<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}">
+					<view :class="{'filter-active': filter_active == 'floor'}" @click="filter_active = 'floor'">楼层</view>
+					<view :class="{'filter-active': filter_active == 'class'}" @click="filter_active = 'class'">分类</view>
+				</view>
+				<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''">
+					<view class="filter-modal">
+						<view class="filter-item" v-for="(item, index) in 6" :key="index">{{ '哈哈'+ item }}</view>
+					</view>
+				</view>
+			</view>
+			<!-- 内容 -->
+			<scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}">
+				<view class="lf-flex brand-item" :id="'anchor-'+ index" v-for="(item, index) in point_list" :key="index">
+					<image class="img" src="https://picsum.photos/200"></image>
+					<view class="info">
+						<view class="lf-font-36 lf-font-bold lf-color-black">luckin coffee 瑞幸咖啡 {{ item }}</view>
+						<view class="lf-font-24 lf-color-gray">餐饮·美食｜18件在售</view>
+						<view class="lf-font-24">
+							<text class="lf-iconfont icon--1 lf-font-24"></text>
+							<text class="lf-color-gray lf-m-l-10">L2</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<!-- 锚点定位 -->
+			<view class="fixed-point" @touchmove="pointTouchmove">
+				<view class="point-item" @click="pointClick" :id="'point-'+index" :style="{height: 100 / 26 +'%'}" v-for="(item, index) in point_list" :key="index">{{ item }}</view>
+			</view>
+		</view>
+		<lf-tabbar></lf-tabbar>
+	</view>
+</template>
+
+<script>
+	import lfNav from '@/components/lf-nav/lf-nav.vue';
+	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
+	import testdata from './testdata.js';
+	let app = getApp();
+	
+	export default {
+		data() {
+			return {
+				scrollH: 0,
+				subItemW: 0,
+				left_selectIndex: 0,
+				right_selectIndex: 0,
+				ttscrollH: 0, //总高度
+				placeholderH: 0, //占位高度
+				heighArr: [],
+				dataArr: testdata,
+				current: 1,
+				nav_height: 0,
+				tabs: [{
+					name: '分类'
+				},{
+					name: '品牌'
+				}],
+				filter_active: '',
+				point_list: [],
+				scrollAnchorId: ''
+			};
+		},
+		computed: {
+			autoHeight(){
+				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx)`;
+			},
+			otherHeight(){
+				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx - 105rpx)`;
+			}
+		},
+		components: {
+			lfNav,
+			lfTabbar
+		},
+		onLoad() {
+			// https://ext.dcloud.net.cn/plugin?id=5031
+			let info = uni.getSystemInfoSync();
+			
+			let self = this;
+			self.scrollH = info.screenHeight;
+			self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3);
+			setTimeout(function() {
+				self.computerH();
+			}, 100);
+			this.createAtoZ();
+		},
+		methods: {
+			// 生成A-Z的大写字母
+			createAtoZ(){
+				let point_list = [];
+				for(var i=0; i<26; i++){
+					point_list.push(String.fromCharCode(65+i));
+				}
+				this.point_list = point_list;
+			},
+			pointTouchmove(event){
+				console.log(event);
+			},
+			pointClick(event){
+				let index = (event.target.id).replace('point-', '');
+				let letter = this.point_list[index];
+				this.scrollAnchorId = '';
+				this.$msg(letter);
+				this.$nextTick(() => {
+					this.scrollAnchorId = 'anchor-'+ index;
+				})
+			},
+			leftTap: function(e) {
+				this.left_selectIndex = e.index;
+				this.right_selectIndex = e.index;
+			},
+			// 右边点击
+			rightTap: function() {
+				uni.showModal({
+					title: '点击了',
+					showCancel: false
+				});
+			},
+			rightScroll: function(e) {
+				let scrollH = e.detail.scrollTop + 30;
+				let cc = this.ttscrollH - this.scrollH;
+		
+				let a = 0;
+				let findInx = this.heighArr.findIndex(function(itemH, i) {
+					a = a + itemH;
+					return a > scrollH;
+				});
+				// if (scrollH >= cc) {
+				// 	return;
+				// }
+				this.left_selectIndex = findInx;
+			},
+			// 计算高度
+			computerH: function() {
+				this.ttscrollH = 0;
+				for (let item of this.dataArr) {
+					let title_lineH = 49; //rpx
+					let subNum = item.subArr.length;
+					let subImgH = this.subItemW; //rpx
+					let subTitleH = 40; //rpx
+					let rowSpecH = 8; //rpx
+					let rowN = subNum % 3;
+					let rowSpecNum = parseInt(subNum / 3) + parseInt(rowN > 0 ? 1 : 0);
+					let totalRpx = title_lineH + (subImgH + subTitleH) * rowSpecNum + rowSpecH * (rowSpecNum - 1);
+					this.heighArr.push(totalRpx);
+					this.ttscrollH = this.ttscrollH + totalRpx;
+				}
+		
+				// this.placeholderH = this.scrollH - this.heighArr[this.heighArr.length - 1];
+		
+				//以下方法也可以
+				// let self=this
+				// var selectorQuery = uni.createSelectorQuery()
+				// selectorQuery.selectAll('.right_item').boundingClientRect(data => {
+				// 	self.heighArr = data.map(item => {
+				// 		return {
+				// 			top: Math.round(item.top),
+				// 			height: Math.round(item.height)
+				// 		}
+				// 	})
+				// }).exec()
+				// console.log('ttscrollH',this.$refs.left_0)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		grid-template-rows: auto;
+		position: absolute;
+		left: 0rpx;
+		right: 0rpx;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+	.left_view {
+		background-color: #f4f8f8;
+		position: relative;
+		box-sizing: border-box;
+		// 蒙版
+		.seletItem {
+			height: 98px;
+			position: absolute;
+			top: 0rpx;
+			left: 0rpx;
+			z-index: 10;
+			right: 0rpx;
+			// background-color: rgba(255, 255, 255, 0.3);
+			transition: top 0.2s linear;
+			display: flex;
+			align-items: center;
+			box-sizing: border-box;
+			&::before {
+				content: '';
+				width: 6rpx;
+				height: 60%;
+				background-color: #15716E;
+				left: 0rpx;
+			}
+		}
+		.left_item {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 60px;
+			margin-bottom: 0rpx;
+			position: relative;
+			font-size: 28rpx;
+			box-sizing: border-box;
+			color: #555555;
+		}
+		.left_item_s {
+			background-color: #ffffff;
+			color: #15716E;
+			font-weight: bold;
+			position: relative;
+			box-sizing: border-box;
+		}
+	}
+	
+	.right_view {
+		background-color: #ffffff;
+		padding: 0rpx 12px;
+		box-sizing: border-box;
+		.right_item {
+			.right_item_title {
+				display: block;
+				box-sizing: border-box;
+				line-height: 49px;
+				font-size: 28rpx;
+				font-weight: bold;
+				color: #15716E;
+			}
+			.right_item_view {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-rows: auto;
+				grid-gap: 8px 15px;
+				box-sizing: border-box;
+				.item {
+					display: flex;
+					flex-flow: column nowrap;
+					align-items: center;
+					box-sizing: border-box;
+					text {
+						color: #333;
+						line-height: 40px;
+					}
+				}
+			}
+		}
+	}
+	
+	.tabs{
+		width: 750rpx;
+		height: 90rpx;
+		display: flex;
+		justify-content: space-between;
+		border-bottom: 1rpx solid #e5e5e5;
+		background-color: #FFFFFF;
+		.lf-tab{
+			// width: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+			color: #777777;
+			position: relative;
+			&.tab-active{
+				color: #15716E;
+			}
+			&.tab-active::after{
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				width: 80rpx;
+				height: 10rpx;
+				background-color: #15716E;
+				border-radius: 10rpx 10rpx 0 0;
+				margin-left: -40rpx;
+			}
+		}
+	}
+	.lf-filter-box{
+		height: 105rpx;
+		width: 750rpx;
+		background-color: #F4F8F8;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		.lf-filter{
+			width: 300rpx;
+			height: 65rpx;
+			border-radius: 33rpx;
+			border: 1rpx solid #15716E;
+			color: #15716E;
+			font-size: 24rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			position: relative;
+			overflow: hidden;
+			&.lf-filter-after::after{
+				content: '';
+				position: absolute;
+				top: 12rpx;
+				left: calc(50% - 1rpx);
+				width: 2rpx;
+				height: 40rpx;
+				background-color: #15716E;
+			}
+			&>view{
+				height: 100%;
+				width: 50%;
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+			}
+			.filter-active{
+				background-color: #15716E;
+				color: #FFFFFF;
+			}
+		}
+		.filter-modal-mask{
+			position: absolute;
+			top: 105rpx;
+			left: 0;
+			width: 100%;
+			background-color: rgba(0,0,0,0.5);
+			.filter-modal{
+				width: 750rpx;
+				height: max-content;
+				padding: 60rpx 32rpx;
+				box-sizing: border-box;
+				background-color: #FFFFFF;
+				display: flex;
+				flex-wrap: wrap;
+				.filter-item{
+					width: 215rpx;
+					height: 65rpx;
+					border-radius: 10rpx;
+					border: 1rpx solid #555555;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 28rpx;
+					color: #555555;
+					margin-right: 21rpx;
+					&:nth-child(3n){
+						margin-right: 0rpx;
+					}
+					&:nth-child(n+4){
+						margin-top: 21rpx;
+					}
+				}
+			}
+		}
+	}
+	.brand-scroll{
+		padding: 0rpx 32rpx;
+		box-sizing: border-box;
+		width: 750rpx;
+		.brand-item{
+			margin-bottom: 60rpx;
+			&:nth-child(1n){
+				margin-top: 30rpx;
+			}
+		}
+		.img{
+			width: 150rpx;
+			height: 150rpx;
+			border-radius: 4rpx;
+			margin-right: 20rpx;
+		}
+		.info{
+			width: 514rpx;
+			height: 150rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+	}
+	.brand{
+		position: relative;
+	}
+	.fixed-point{
+		position: fixed;
+		right: 0;
+		top: 18vh;
+		height: 70vh;
+		width: 57rpx;
+		background-color: rgba(0,0,0,0.3);
+		border-radius: 30rpx 0rpx 0rpx 30rpx;
+		padding: 14rpx 0rpx;
+		.point-item{
+			font-size: 24rpx;
+			color: #FFFFFF;
+			text-align: center;
+		}
+	}
+</style>
diff --git a/pages/index/category/testdata.js b/pages/index/category/testdata.js
new file mode 100644
index 0000000..a46f780
--- /dev/null
+++ b/pages/index/category/testdata.js
@@ -0,0 +1,225 @@
+export default [{
+		name: '面部护肤',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			}
+		]
+	},
+	{
+		name: '香水彩妆',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			}
+		]
+	},
+	{
+		name: '精致洗护',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '名称2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称2'
+			}
+		]
+	},
+	{
+		name: '国际精品',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '水果2'
+			}
+		]
+	},
+	{
+		name: '服装内衣',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			}
+		]
+	},
+	{
+		name: '首饰配饰',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '名称'
+			}
+		]
+	},
+	{
+		name: '服装内衣',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			}
+		]
+	},
+	{
+		name: '服装内衣',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			}
+		]
+	},
+	{
+		name: '滴滴滴等',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			}
+		]
+	},
+	{
+		name: '好好说说',
+		subArr: [{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			},
+			{
+				img: 'https://picsum.photos/200',
+				name: '悲剧2'
+			}
+		]
+	}
+]
diff --git a/pages/index/classification/classification - 副本.vue b/pages/index/classification/classification - 副本.vue
new file mode 100644
index 0000000..1b503bf
--- /dev/null
+++ b/pages/index/classification/classification - 副本.vue	
@@ -0,0 +1,181 @@
+<template>
+	<view style="height: 100%;">
+		<lf-nav title="分类"></lf-nav>
+		<view id="classification" style="height: 100%;">
+			<view :class="classData.type == 'upper_lower' ? '' : 'hiddens'" style="height: 100%;">
+				<view v-if="init && classData.type == 'upper_lower'">
+					<view class="class__banner" v-if="classData.CategoryListAd && classData.CategoryListAd.length">
+						<swiper :style="{height:imgHeight+'px'}" indicator-dots="true" autoplay="true" circular="true">
+							<swiper-item v-for="(item,index) in classData.CategoryListAd" :key="index">
+								<image mode="widthFix" @load="imgLoad" :src="item.image" :data-url="item.link" @tap="jumpItem"></image>
+							</swiper-item>
+						</swiper>
+					</view>
+					<view class="class__item_box">
+						<view class="class__item" v-for="(item,index) in classData.CategoryList" :key="index">
+							<view class="img_item" :data-url="item.link" @tap="jumpItem">
+								<image :src="item.image"></image>
+								<view class="img_text">
+									<view class="text_top">
+										<view class="text_line"></view>
+										<view class="text_content">
+											{{item.name}}
+										</view>
+										<view class="text_line"></view>
+									</view>
+
+									<view class="text_btn">
+										查看全部
+									</view>
+								</view>
+							</view>
+							<view class="class__tag">
+								<view class="tag__item" v-for="(items,idx) in item.items" :key="idx">
+									<view class="tag_flex" :data-url="items.link" @tap="jumpItem">
+										<view class="tag_img">
+											<image :src="items.image"></image>
+										</view>
+										<view class="tag_text">
+											{{items.name}}
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view v-if="init && classData.type == 'left_right'" style="height: 100%;">
+					<view class="classifical" style="height: 100%;">
+						<view class="left-menu">
+							<view class="item" :class="activeIndex == key ? 'active' : ''" v-for="(i,key) in classData.CategoryList" :key="key"
+							 @tap="change" :data-index="key">{{i.name}}</view>
+						</view>
+						<view class="right-content" style="height: 100%;">
+							<view class="title" @tap="jumpItem" :data-url="classData.CategoryList[activeIndex].link">
+								<span>{{classData.CategoryList[activeIndex].name}}</span>
+								<span class="iconfont icon--xiangyoujiantou"></span>
+							</view>
+							<view v-for="(item,index) in classData.CategoryList" :key="index" v-show="activeIndex == index">
+								<view class="list">
+									<view class="list-item" v-for="(list,idx) in item.items" :key="idx" @tap="jumpItem" :data-url="list.link">
+										<view class="photo">
+											<image :src="list.image" mode="widthFix"></image>
+										</view>
+										<view class="txt">{{list.name}}</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+
+				</view>
+			</view>
+
+
+
+
+		</view>
+
+		<lf-tabbar></lf-tabbar>
+	</view>
+
+</template>
+<script>
+	import {
+		pageLogin,
+		getUrl,
+		config
+	} from '@/common/js/utils.js';
+	import lfNav from '@/components/lf-nav/lf-nav.vue';
+	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
+
+	export default {
+		components: {
+			lfNav,
+			lfTabbar
+		},
+		data() {
+			return {
+				classData: '',
+				screenWidth: '',
+				activeIndex: 0,
+				init: false,
+				imgHeight:''
+			};
+		},
+
+		onLoad() {
+			this.classificationList();
+			wx.getSystemInfo({
+				success: res => {
+					this.screenWidth = res.screenWidth;
+
+				}
+			});
+		},
+		methods: {
+			//切换menu
+			change(e) {
+				var activeIndex = e.currentTarget.dataset.index;
+				this.activeIndex = activeIndex;
+			},
+
+			jumpItem(e) {
+				var url = e.currentTarget.dataset.url;
+				wx.navigateTo({
+					url: url
+				});
+			},
+
+			imgLoad(e) {
+				var height = e.detail.height;
+				var width = e.detail.width;
+				var ratio = width / height;
+				var screenWidth = this.screenWidth;
+				this.imgHeight = screenWidth / ratio;
+			},
+
+			classificationList() {
+				wx.showLoading({
+					title: '加载中',
+					mask: true
+				});
+				this.$http.get({
+					api: 'api/home/getHomeCategoryList'
+				}).then(res => {
+					if (res.statusCode == 200) {
+						res = res.data;
+						if (res.status) {
+							this.init = true;
+							this.classData = res.data;
+						} else {
+							wx.showModal({
+								content: '请求失败',
+								showCancel: false
+							});
+						}
+					} else {
+						wx.showModal({
+							content: '请求失败',
+							showCancel: false
+						});
+					}
+
+					wx.hideLoading();
+				}, err => {
+					wx.showModal({
+						content: '请求失败',
+						showCancel: false
+					});
+					wx.hideLoading();
+				});
+			},
+
+
+		},
+	};
+</script>
+<style rel="stylesheet/less" lang="less">
+	@import "classification";
+</style>
diff --git a/pages/index/classification/classification.vue b/pages/index/classification/classification.vue
index 1b503bf..a2dc82a 100644
--- a/pages/index/classification/classification.vue
+++ b/pages/index/classification/classification.vue
@@ -1,80 +1,9 @@
 <template>
-	<view style="height: 100%;">
-		<lf-nav title="分类"></lf-nav>
-		<view id="classification" style="height: 100%;">
-			<view :class="classData.type == 'upper_lower' ? '' : 'hiddens'" style="height: 100%;">
-				<view v-if="init && classData.type == 'upper_lower'">
-					<view class="class__banner" v-if="classData.CategoryListAd && classData.CategoryListAd.length">
-						<swiper :style="{height:imgHeight+'px'}" indicator-dots="true" autoplay="true" circular="true">
-							<swiper-item v-for="(item,index) in classData.CategoryListAd" :key="index">
-								<image mode="widthFix" @load="imgLoad" :src="item.image" :data-url="item.link" @tap="jumpItem"></image>
-							</swiper-item>
-						</swiper>
-					</view>
-					<view class="class__item_box">
-						<view class="class__item" v-for="(item,index) in classData.CategoryList" :key="index">
-							<view class="img_item" :data-url="item.link" @tap="jumpItem">
-								<image :src="item.image"></image>
-								<view class="img_text">
-									<view class="text_top">
-										<view class="text_line"></view>
-										<view class="text_content">
-											{{item.name}}
-										</view>
-										<view class="text_line"></view>
-									</view>
-
-									<view class="text_btn">
-										查看全部
-									</view>
-								</view>
-							</view>
-							<view class="class__tag">
-								<view class="tag__item" v-for="(items,idx) in item.items" :key="idx">
-									<view class="tag_flex" :data-url="items.link" @tap="jumpItem">
-										<view class="tag_img">
-											<image :src="items.image"></image>
-										</view>
-										<view class="tag_text">
-											{{items.name}}
-										</view>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-
-				<view v-if="init && classData.type == 'left_right'" style="height: 100%;">
-					<view class="classifical" style="height: 100%;">
-						<view class="left-menu">
-							<view class="item" :class="activeIndex == key ? 'active' : ''" v-for="(i,key) in classData.CategoryList" :key="key"
-							 @tap="change" :data-index="key">{{i.name}}</view>
-						</view>
-						<view class="right-content" style="height: 100%;">
-							<view class="title" @tap="jumpItem" :data-url="classData.CategoryList[activeIndex].link">
-								<span>{{classData.CategoryList[activeIndex].name}}</span>
-								<span class="iconfont icon--xiangyoujiantou"></span>
-							</view>
-							<view v-for="(item,index) in classData.CategoryList" :key="index" v-show="activeIndex == index">
-								<view class="list">
-									<view class="list-item" v-for="(list,idx) in item.items" :key="idx" @tap="jumpItem" :data-url="list.link">
-										<view class="photo">
-											<image :src="list.image" mode="widthFix"></image>
-										</view>
-										<view class="txt">{{list.name}}</view>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-
-				</view>
-			</view>
-
-
-
-
+	<view>
+		<lf-nav :title="current == 1 ? '品牌' : ''" :showIcon="true" :search="showNavDiy" bgColor="#ffffff"></lf-nav>
+		<view class="tabs">
+			<view class="lf-tab" :class="{'tab-active': current == 0}" @click="current = 0">分类</view>
+			<view class="lf-tab" :class="{'tab-active': current == 1}" @click="current = 1">品牌</view>
 		</view>
 
 		<lf-tabbar></lf-tabbar>
@@ -101,10 +30,15 @@
 				screenWidth: '',
 				activeIndex: 0,
 				init: false,
-				imgHeight:''
+				imgHeight:'',
+				current: 0
 			};
 		},
-
+		computed: {
+			showNavDiy(){
+				return this.current == 0;
+			}
+		},
 		onLoad() {
 			this.classificationList();
 			wx.getSystemInfo({
@@ -176,6 +110,41 @@
 		},
 	};
 </script>
-<style rel="stylesheet/less" lang="less">
-	@import "classification";
+
+<style>
+	page{
+		background-color: #FFFFFF;
+	}
+</style>
+<style lang="scss" scoped>
+	.tabs{
+		width: 750rpx;
+		height: 90rpx;
+		display: flex;
+		justify-content: space-between;
+		border-bottom: 1rpx solid #e5e5e5;
+		.lf-tab{
+			width: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+			color: #777777;
+			position: relative;
+			&.tab-active{
+				color: #15716E;
+			}
+			&.tab-active::after{
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				width: 80rpx;
+				height: 10rpx;
+				background-color: #15716E;
+				border-radius: 10rpx 10rpx 0 0;
+				margin-left: -40rpx;
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index/index.vue b/pages/index/index/index.vue
index 98bb799..28f2055 100644
--- a/pages/index/index/index.vue
+++ b/pages/index/index/index.vue
@@ -1,6 +1,19 @@
 <template>
     <block v-if="microData && microData.micro_page && microData.micro_page.meta">
-		<lf-nav title="主页" :spreadOut="false" :bgColor="nav_bg_color"></lf-nav>
+		<lf-nav title="主页" :spreadOut="false" :bgColor="nav_bg_color" :diy="true">
+			<view class="lf-nav-capsule">
+				<text class="lf-iconfont icon-nv"></text>
+				<text class="lf-m-l-4">会员</text>
+			</view>
+			<view class="lf-nav-capsule">
+				<text class="lf-iconfont icon-nv"></text>
+				<text class="lf-m-l-4">停车</text>
+			</view>
+			<view class="lf-nav-capsule lf-bg-gray">
+				<text class="lf-iconfont icon-nv"></text>
+				<text class="lf-m-l-4">搜索</text>
+			</view>
+		</lf-nav>
 		<view id="microData" :style="{background: microData.micro_page.meta.background_color}">
 			<!-- #ifdef MP-WEIXIN -->
 		<!-- 	<view class="about-program" @tap="changeAbout" v-if="is_show_init">
@@ -22,7 +35,6 @@
 		            </view> -->
 		            <!--轮播图组件-->
 		            <view v-if="item.name == 'micro_page_componet_slide' && item.value && item.value.length">
-					
 		                <indexBanner :banner-data="item.value" :banner-title="item.title" :screen-width="screenWidth" :show="item.is_show_title" :meta="item.meta"></indexBanner>
 		            </view>
 		            <!--优惠券组件-->
@@ -65,6 +77,30 @@
 					 <!--快捷导航-->
 					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
 						<indexNav :nav-data="item.value" :meta="item.meta"></indexNav>
+					</view>
+					<!-- 服务升级 TODO 暂时借用快捷导航字段判断 -->
+					<view class="fuwu-tips" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<view class="fuwu-tips-title">服务升级</view>
+						<view>
+							<text class="fuwu-tips-desc1">线上商城全场限时包邮</text>
+							<text class="fuwu-tips-desc2">(部分品牌满额包邮)</text>
+						</view>
+					</view>
+					<!-- 活动页入口 TODO -->
+					<view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')">
+						<image src="https://picsum.photos/200" mode="aspectFill"></image>
+					</view>
+					<!-- TODO 首页发现推荐模块 -->
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-index-find></lf-index-find>
+					</view>
+					<!-- TODO 大牌不停推模块 - 店铺矩阵 -->
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-index-shop-matrix></lf-index-shop-matrix>
+					</view>
+					<!-- TODO 店铺商品展示模块 -->
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-shop-goods-card v-for="(d_item,d_index) in 2" :key="d_index"></lf-shop-goods-card>
 					</view>
 					 <!--图片魔方-->
 					<view v-if="item.name == 'micro_page_componet_cube' && item.value && item.value.length">
@@ -78,7 +114,8 @@
 					<view v-if="item.name == 'micro_page_componet_goods_group' && item.value && item.value.length">
 						<indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping>
 					</view>
-			
+					<!-- TODO 为你推荐模块 -->
+					
 		        </view>
 		    </block>
 		    <view class="author">
@@ -346,6 +383,9 @@
 	import lfNav from '@/components/lf-nav/lf-nav.vue';
 	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
 	import lfAdModal from '@/components/lf-adModal/lf-adModal.vue';
+	import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
+	import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
+	import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
 	var app = getApp();
     export default {
         data() {
@@ -408,7 +448,10 @@
 			birthday,
 			lfNav,
 			lfTabbar,
-			lfAdModal
+			lfAdModal,
+			lfIndexFind,
+			lfIndexShopMatrix,
+			lfShopGoodsCard
         },
 		
 		  onShow(e) {
@@ -1014,4 +1057,51 @@
 
 <style rel="stylesheet/less" lang="less">
     /*@import "index.less";*/
+	.lf-nav-capsule{
+		width: 120rpx;
+		height: 50rpx;
+		background-color: #186c6b;
+		font-size: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #FFFFFF;
+		border-radius: 40rpx;
+		margin-right: 14rpx;
+	}
+	.lf-m-l-4{
+		margin-left: 4rpx;
+	}
+	.fuwu-tips{
+		width: 686rpx;
+		height: 70rpx;
+		background-color: #eff6f7;
+		margin: 60rpx auto 0;
+		display: flex;
+		justify-content: space-between;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 30rpx;
+		border-radius: 40rpx;
+		.fuwu-tips-title{
+			font-size: 36rpx;
+			color: #186c6b;
+		}
+		.fuwu-tips-desc1{
+			font-size: 28rpx;
+		}
+		.fuwu-tips-desc2{
+			font-size: 22rpx;
+			color: #777777;
+		}
+	}
+	.lf-activity{
+		width: 686rpx;
+		height: 350rpx;
+		margin: 60rpx auto 0;
+		&>image{
+			width: 100%;
+			height: 100%;
+		}
+	}
 </style>
diff --git a/store/index.js b/store/index.js
index 5a8e62b..f955666 100644
--- a/store/index.js
+++ b/store/index.js
@@ -15,7 +15,7 @@ let state = {
 		  name: 'brand',
 		  text: '品牌',
 		  icon: 'weirenzheng',
-		  path: '/pages/index/classification/classification'
+		  path: '/pages/index/category/category'
 		},
 		{
 		  name: 'find',

From a75af925681223c92972dc0d8542ae24aef1d976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 2 Sep 2021 17:11:10 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=9C=B0=E5=9D=80?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/styles/theme.css                       |  8 +-
 .../lf-multiColumnAd/lf-multiColumnAd.vue     | 63 +++++++++++++++
 pages.json                                    |  2 +-
 pages/address/add/add.less                    | 20 +++--
 pages/address/add/add.vue                     | 40 +++++++---
 pages/address/list/list.less                  | 40 +++++++---
 pages/address/list/list.vue                   | 80 ++++++++++++++++---
 pages/index/index/index.vue                   | 58 +++++++++++++-
 8 files changed, 264 insertions(+), 47 deletions(-)
 create mode 100644 components/lf-multiColumnAd/lf-multiColumnAd.vue

diff --git a/common/styles/theme.css b/common/styles/theme.css
index 5ccb8ac..a80ccff 100644
--- a/common/styles/theme.css
+++ b/common/styles/theme.css
@@ -19,8 +19,8 @@ checkbox .uni-checkbox-input {
 radio .uni-radio-input.uni-radio-input-checked,
 checkbox .uni-checkbox-input.uni-checkbox-input-checked {
 	/* border-radius: 50%; */
-	border: 1px solid #1998FE !important;
-	background: #1998FE !important;
+	border: 1px solid #186c6b !important;
+	background: #186c6b !important;
 	color: #FFFFFF !important;
 }
 
@@ -45,8 +45,8 @@ checkbox .wx-checkbox-input {
 radio .wx-radio-input.wx-radio-input-checked,
 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
 	border-radius: 50%;
-	border: 1px solid #1998FE !important;
-	background: #1998FE !important;
+	border: 1px solid #186c6b !important;
+	background: #186c6b !important;
 	color: #FFFFFF !important;
 }
 
diff --git a/components/lf-multiColumnAd/lf-multiColumnAd.vue b/components/lf-multiColumnAd/lf-multiColumnAd.vue
new file mode 100644
index 0000000..14b9668
--- /dev/null
+++ b/components/lf-multiColumnAd/lf-multiColumnAd.vue
@@ -0,0 +1,63 @@
+<template>
+	<view class="content">
+		<view class="left">
+			<image class="left-img"></image>
+		</view>
+		<view class="right">
+			<view class="right-img">
+				<image></image>
+			</view>
+			<view class="right-img">
+				<image></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		created(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		padding: 30rpx 32rpx;
+		display: flex;
+		justify-content: space-between;
+		.left{
+			width: 436rpx;
+			height: 436rpx;
+			.left-img{
+				width: 100%;
+				height: 100%;
+				background: #D8D8D8;
+			}
+		}
+		.right{
+			width: 228rpx;
+			height: 436rpx;
+			.right-img{
+				width: 228rpx;
+				height: 208rpx;
+				background: #D8D8D8;
+				&:nth-child(2n){
+					margin-top: 20rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages.json b/pages.json
index 4efd8a4..826d09a 100644
--- a/pages.json
+++ b/pages.json
@@ -744,7 +744,7 @@
   		},
 		{
 			"name": "测试",
-			"path": "pages/index/classification/classification",
+			"path": "pages/user/personal/personal",
 			"query": ""
 		}
 		
diff --git a/pages/address/add/add.less b/pages/address/add/add.less
index fd5e5fd..8bff22a 100644
--- a/pages/address/add/add.less
+++ b/pages/address/add/add.less
@@ -8,16 +8,20 @@
 	}
   .address-info{
     background: #FFFFFF;
-
+	padding: 0 32rpx;
     .info-item{
       height: 40px;
       line-height: 40px;
-      padding-left: 15px;
+      // padding-left: 15px;
       display: flex;
       align-items: center;
       color: #333333;
       font-size: 13px;
 	  font-weight:bold;
+	  border-bottom: 1rpx solid #e5e5e5;
+	  &:last-child{
+		  border-bottom: none;
+	  }
       label{
         width: 80px;
         display: block;
@@ -115,12 +119,18 @@
   }
   .button-box{
     margin-top: 30px;
-
+	display: flex;
+	justify-content: center;
     .submit{
-      background: @mainColor;
+      // background: @mainColor;
+	  width: 550rpx;
+	  height: 100rpx;
+	  background: #15716E;
+	  border-radius: 50rpx;
+	  line-height: 100rpx;
     }
     .delete {
-      background: @secColor;
+      // background: @secColor;
     }
     button{
       margin: 0 20px 15px 20px;
diff --git a/pages/address/add/add.vue b/pages/address/add/add.vue
index f028d80..7167610 100644
--- a/pages/address/add/add.vue
+++ b/pages/address/add/add.vue
@@ -4,13 +4,25 @@
 		<image src="https://cdn.guojiang.club/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200403161800.png" mode="widthFix"></image>
 	</view>
    <view class="address-info">
-        <view class="info-item mx-1px-bottom">
+        <view class="info-item">
             <label for="name">姓名:</label>
             <view class="form-control">
                 <input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
             </view>
         </view>
-        <view class="info-item mx-1px-bottom">
+		<view class="info-item">
+		    <radio-group class="lf-flex">
+				<label>
+					<radio></radio>
+					<text class="lf-m-l-15">女士</text>
+				</label>
+				<label>
+					<radio></radio>
+					<text class="lf-m-l-15">先生</text>
+				</label>
+			</radio-group>
+		</view>
+        <view class="info-item">
             <label for="phone">联系电话:</label>
             <view class="form-control">
                 <input type="number" id="phone" data-type="mobile" :value="detail.mobile" @input="input" />
@@ -18,7 +30,7 @@
         </view>
 		
 		<!-- #ifdef MP-WEIXIN -->
-		<view class="info-item mx-1px-bottom">
+		<view class="info-item">
 		    <label>所在地:</label>
 				<view class="form-control select">
 					<picker mode="region" @change="bindRegionChange" :value="detail.address_name">
@@ -32,7 +44,7 @@
 	   
 	   <!--  #ifdef APP-PLUS || H5 -->
 	   <view class="mpvue-picker">
-	   	<view class="info-item mx-1px-bottom uni-btn-v" @click="showMulLinkageThreePicker">
+	   	<view class="info-item uni-btn-v" @click="showMulLinkageThreePicker">
 	   		<label>所在地:</label>
 	   		<view class="form-control select">
 	   			<view class="picker uni-common-mt">
@@ -50,13 +62,20 @@
 		
 		
 		
-        <view class="info-item mx-1px-bottom">
+        <view class="info-item">
             <label for="address">详细地址:</label>
             <view class="form-control">
                 <input type="text" id="address" data-type="address" :value="detail.address" @input="input" />
             </view>
         </view>
-        <view class="info-item mx-1px-bottom">
+		<!-- TODO -->
+		<view class="info-item">
+		    <label for="name">门牌号:</label>
+		    <view class="form-control">
+		        <input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
+		    </view>
+		</view>
+        <view class="info-item">
             <label class="checkbox" @tap="check">
                 <!-- #ifdef H5 -->
                 <checkbox color="red" :checked="detail.is_default"></checkbox>
@@ -67,7 +86,7 @@
 				<!-- #ifdef MP-WEIXIN -->
 				<checkbox color="#FFFFFF" :checked="detail.is_default"></checkbox>
 				<!-- #endif -->
-                <text>设为默认地址</text>
+                <text class="lf-m-l-10">设为默认地址</text>
             </label>
         </view>
     </view>
@@ -80,7 +99,7 @@
 	</view>
    <view class="button-box">
         <button type="primary" :style="'background: ' + config.mainColor" class="submit" @tap="submit" :loading="loading">保存</button>
-        <button type="warn" class="delete" :style="'background: ' + config.secColor" v-if="id" @tap="deleteAddress" :loading="deleteLoading">删除</button>
+        <!-- <button type="warn" class="delete" :style="'background: ' + config.secColor" v-if="id" @tap="deleteAddress" :loading="deleteLoading">删除</button> -->
     </view>
 </view>
 
@@ -591,6 +610,9 @@ export default {
   watch: {}
 };
 </script>
-<style rel="stylesheet/less" lang="less">
+<style rel="stylesheet/less" lang="less" scoped>
     @import "add";
+	.identify-address>textarea{
+		border-color: #e5e5e5 !important;
+	}
 </style>
diff --git a/pages/address/list/list.less b/pages/address/list/list.less
index f8e9efc..cea858f 100644
--- a/pages/address/list/list.less
+++ b/pages/address/list/list.less
@@ -1,14 +1,25 @@
 #address-list{
   .list-box{
-	  padding-bottom: 20px;
+	  // padding-bottom: 20px;
+	  padding: 30rpx 32rpx;
+	  width: 750rpx;
+	  height: max-content;
+	  box-sizing: border-box;
     .list-item{
       font-size:14px;
       background:#FFFFFF;
-      padding:15px 40px 15px 15px;
-      background-image:url("https://uto.ibrand.cc/m/static/img/ic_forward.png");
-      background-repeat:no-repeat;
-      background-position:100%;
-      background-size:20px;
+      // padding:15px 40px 15px 15px;
+      // background-image:url("https://uto.ibrand.cc/m/static/img/ic_forward.png");
+      // background-repeat:no-repeat;
+      // background-position:100%;
+      // background-size:20px;
+	  width: 686rpx;
+	  height: max-content;
+	  background: #FFFFFF;
+	  border-radius: 20rpx;
+	  padding: 30rpx;
+	  box-sizing: border-box;
+	  margin-bottom: 30rpx;
 
       .user{
         display: flex;
@@ -33,18 +44,23 @@
     
   }
   .add-address{
-	
-	background-color: #ffffff;
+	display: flex;
+	justify-content: center;
+	// background-color: #ffffff;
 	padding:10px 12px;
 	.small-btn{
 		display: flex;
 		align-items: center;
 		justify-content:center;
-		background-color:#FB5054;
+		// background-color:#FB5054;
 		color: #FFFFFF;
-		border-radius:4px;
-		height: 40px;
-		line-height: 40px;
+		// border-radius:4px;
+		// height: 40px;
+		line-height: 40rpx;
+		width: 550rpx;
+		height: 100rpx;
+		background: #15716E;
+		border-radius: 50rpx;
 		.icon{
 		  margin-right: 15px;
 		}
diff --git a/pages/address/list/list.vue b/pages/address/list/list.vue
index 6cf1c22..d73f5be 100644
--- a/pages/address/list/list.vue
+++ b/pages/address/list/list.vue
@@ -1,8 +1,8 @@
 <template>
 <view id="address-list">
     <view class="list-box">
-        <view class="list-item mx-1px-bottom" :data-info="JSON.stringify(item)" :data-id="item.id" v-for="(item, index) in list" :key="index" @tap="setInfo">
-            <view class="user">
+        <view class="list-item" :data-info="JSON.stringify(item)" :data-id="item.id" v-for="(item, index) in list" :key="index">
+            <!-- <view class="user">
                 <view class="name">
                     <text>{{item.accept_name}}</text>
                     <text class="phone">{{item.mobile}}</text>
@@ -11,17 +11,39 @@
                     默认
                 </view>
             </view>
-            <view class="address">{{item.address_name}} {{item.address}}</view>
+            <view class="address">{{item.address_name}} {{item.address}}</view> -->
+			
+			<view class="lf-font-28 user-item" @tap="setInfo(item)">
+				<text class="lf-color-black lf-font-bold">{{item.accept_name}}</text>
+				<text class="lf-color-777 lf-m-l-20">{{item.mobile}}</text>
+			</view>
+			<view class="address-item lf-line-2" @tap="setInfo(item)">
+				<text>{{item.address_name}}</text>
+				<text>{{item.address}}</text>
+			</view>
+			<view class="menu-item lf-row-between lf-m-t-30">
+				<view class="lf-row-center">
+					<checkbox></checkbox>
+					<text class="lf-m-l-15 lf-font-24 lf-color-777">默认地址</text>
+				</view>
+				<view class="lf-row-between">
+					<view>
+						<text class="lf-iconfont icon--1"></text>
+						<text class="lf-m-l-10">编辑</text>
+					</view>
+					<view class="lf-m-l-50">
+						<text class="lf-iconfont icon--1"></text>
+						<text class="lf-m-l-10">删除</text>
+					</view>
+				</view>
+			</view>
         </view>
     </view>
+	
 	<view class="add-address" @tap="add">
 	    <view class="small-btn">
-	    	<view class="icon iconfont icon-juxing">
-	    		
-	    	</view>
-	    	<view>
-	    	    新增收货地址
-	    	</view>
+	    	<text class="lf-iconfont icon--2"></text>
+	    	<text class="lf-m-l-10">新增收货地址</text>
 	    </view>
 	</view>
 </view>
@@ -33,7 +55,19 @@ import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
 export default {
   data() {
     return {
-      list: [],
+      list: [{
+		  accept_name: '加号',
+		  mobile: '12373873873',
+		  address_name: '广西南宁',
+		  address: '细丝里流向17号',
+		  is_default: true
+	  },{
+		  accept_name: '加号',
+		  mobile: '12373873873',
+		  address_name: '广西南宁',
+		  address: '细丝里流向17号',
+		  is_default: true
+	  }],
       order_no: '',
       url: '',
 	  id:''
@@ -41,7 +75,8 @@ export default {
   },
 
   onShow() {
-    this.queryAddressList(); // let app =getApp();
+    this.queryAddressList(); // let app =getApp(); 暂时注释
+	
     // app.isBirthday().then(()=>{
     //     if(this.$cookieStorage.get("birthday_gift")){
     //         var giftData=this.$cookieStorage.get("birthday_gift").data;
@@ -51,6 +86,7 @@ export default {
   },
 
   onLoad(e) {
+	  // 暂时注释
     pageLogin(getUrl());
     this.setData({
       order_no: e.order_no,
@@ -62,9 +98,10 @@ export default {
   props: {},
   methods: {
     setInfo(e) {
-      var from = e.currentTarget.dataset.info;
+      // var from = e.currentTarget.dataset.info;
+	  var from = e;
       var data = this.$cookieStorage.get('order_form');
-	  var from=JSON.parse(from);
+	  // var from=JSON.parse(from);
 	 
       if (!data) {
         return this.view(from.id);
@@ -152,6 +189,23 @@ export default {
   watch: {}
 };
 </script>
+
+<style>
+	page{
+		background-color: #F8F8F8;
+	}
+</style>
 <style rel="stylesheet/less" lang="less">
     @import "list";
+	
+	.user-item, .menu-item{
+		height: 50rpx;
+		width: 100%;
+	}
+	.address-item{
+		width: 100%;
+		margin-top: 10rpx;
+		font-size: 28rpx;
+		color: #333333;
+	}
 </style>
diff --git a/pages/index/index/index.vue b/pages/index/index/index.vue
index 28f2055..4b51049 100644
--- a/pages/index/index/index.vue
+++ b/pages/index/index/index.vue
@@ -90,6 +90,10 @@
 					<view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')">
 						<image src="https://picsum.photos/200" mode="aspectFill"></image>
 					</view>
+					<!-- TODO 广告活动模块 -->
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-multi-column-ad></lf-multi-column-ad>
+					</view>
 					<!-- TODO 首页发现推荐模块 -->
 					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
 						<lf-index-find></lf-index-find>
@@ -115,7 +119,9 @@
 						<indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping>
 					</view>
 					<!-- TODO 为你推荐模块 -->
-					
+					<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
+						<lf-waterfall :list="recommend_list"></lf-waterfall>
+					</view>
 		        </view>
 		    </block>
 		    <view class="author">
@@ -386,6 +392,8 @@
 	import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
 	import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
 	import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
+	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
 	var app = getApp();
     export default {
         data() {
@@ -426,7 +434,49 @@
                 microData:"",
 				is_login:'',// 是否是登陆状态
 				show_ad: true, // 是否显示ad广告
-				nav_bg_color: 'transparent' // 导航背景颜色
+				nav_bg_color: 'transparent' ,// 导航背景颜色
+				recommend_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)"
+					}
+				]
             };
         },
         // 注册组件
@@ -451,7 +501,9 @@
 			lfAdModal,
 			lfIndexFind,
 			lfIndexShopMatrix,
-			lfShopGoodsCard
+			lfShopGoodsCard,
+			lfWaterfall,
+			lfMultiColumnAd
         },
 		
 		  onShow(e) {