diff --git a/common.scss b/common.scss
index 5fd3072..de989b9 100644
--- a/common.scss
+++ b/common.scss
@@ -37,4 +37,21 @@
 	margin: 0;
 	width: 0;
 	height: 0;
+}
+
+
+.flex {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.card {
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	padding: 19rpx 18rpx;
 }
\ No newline at end of file
diff --git a/components/base/tabbar.vue b/components/base/tabbar.vue
index 9c70362..8461658 100644
--- a/components/base/tabbar.vue
+++ b/components/base/tabbar.vue
@@ -1,8 +1,12 @@
 <template>
 	<view class="tabbar-box">
 		<view class="tabbar">
-			<view :class="{ 'tabbar-active' : select == item.key}" v-for="(item, index) in list" :key="index"
-				v-if="!item.isNotShop || !userShop" @click="toPath(item, index)" class="tabbar-item">
+			<!-- v-if="!item.isNotShop || !userShop" -->
+			<view 
+				:class="{ 'tabbar-active' : select == item.key}" 
+				v-for="(item, index) in list" :key="index"
+				@click="toPath(item, index)" class="tabbar-item"
+			>
 				<view class="tabbar-icon">
 					<image :src="select == item.key ? 
 					item.selectedIconPath : 
@@ -39,7 +43,7 @@
 						"selectedIconPath": "/static/image/tabbar/product-list-active.png",
 						"iconPath": "/static/image/tabbar/product-list.png",
 						"pagePath": "/pages/index/category",
-						"title": "商品列表",
+						"title": "商品",
 						key: 'category',
 					},
 					{
@@ -49,13 +53,6 @@
 						"title": "订单",
 						key: 'order',
 					},
-					{
-						"selectedIconPath": "/static/image/tabbar/cart-active.png",
-						"iconPath": "/static/image/tabbar/cart.png",
-						"pagePath": "/pages/index/cart",
-						"title": "购物车",
-						key: 'cart',
-					},
 					{
 						"selectedIconPath": "/static/image/tabbar/user-center-active.png",
 						"iconPath": "/static/image/tabbar/user-center.png",
diff --git a/components/couponPopup/couponPopup.vue b/components/couponPopup/couponPopup.vue
index 19115f0..837fad8 100644
--- a/components/couponPopup/couponPopup.vue
+++ b/components/couponPopup/couponPopup.vue
@@ -2,28 +2,12 @@
 <template>
 	<view class="couponPopup">
 		<uv-popup ref="couponPopup" 
-		customStyle="background-color: transparent;"
-		:z-index="999999">
+			customStyle="background-color: transparent;"
+			:z-index="999999"
+		>
 			<view class="couponPopup-wrapper">
-				<view class="main-container"
-				@click="toCoupon">
-					<view class="body">
-						<image :src="configList.coupon_image" mode="widthFix" class="coupon-bg"></image>
-						<image @click.stop="close" src="@/static/image/coupon/close-btn.png" mode="widthFix"
-							class="close-btn">
-						</image>
-						<view class="coupon-money">
-							<text class="unit">￥</text>
-							<view class="money">
-								{{ riceInfo.getCouponMoney }}
-							</view>
-						</view>
-						<image :src="configList.qd_image" mode="widthFix" class="register-success"></image>
-						<view class="shopping">（购物即可抵扣！）</view>
-					</view>
-					<image
-					:src="configList.down_image" mode="widthFix" 
-					class="examine"></image>
+				<view class="main-container" @click="toCoupon">
+					<image style="width: 583rpx; height: 601rpx;" src="@/static/image/home/coupon.png"></image>
 				</view>
 			</view>
 		</uv-popup>
@@ -48,6 +32,7 @@
 		methods: {
 			//跳转优惠券页面
 			toCoupon() {
+				// todo
 				this.$refs.couponPopup.close()
 				this.$api('getRiceCoupon', res => {
 					if(res.code == 200){
@@ -74,67 +59,6 @@
 			align-items: center;
 
 			.main-container {
-				.body {
-					position: relative;
-
-					.coupon-bg {
-					}
-
-					.close-btn {
-						position: absolute;
-						right: 0;
-						top: 0;
-						width: 50rpx;
-						height: 50rpx;
-					}
-
-					.coupon-money {
-						display: flex;
-						justify-content: center;
-						align-items: flex-end;
-						position: absolute;
-						left: 50%;
-						top: 34%;
-						width: 40%;
-						color: #FF6733;
-						transform: translateX(-30%);
-						font-weight: bold;
-
-						.unit {
-							font-size: 40rpx;
-						}
-
-						.money {
-							font-size: 120rpx;
-							line-height: 120rpx;
-						}
-					}
-
-					.register-success {
-						position: absolute;
-						top: 7%;
-						left: 50%;
-						transform: translateX(-50%);
-						width: 80%;
-					}
-
-					.shopping {
-						position: absolute;
-						bottom: 5%;
-						left: 50%;
-						transform: translateX(-50%);
-						color: #FEF3DD;
-						text-align: center;
-						font-size: 40rpx;
-						width: 80%;
-					}
-				}
-
-				.examine {
-					display: block;
-					width: 70%;
-					margin: 20rpx auto;
-				}
 			}
 		}
 	}
diff --git a/components/product/productCard.vue b/components/product/productCard.vue
new file mode 100644
index 0000000..1f29b63
--- /dev/null
+++ b/components/product/productCard.vue
@@ -0,0 +1,178 @@
+<template>
+  <view class="card flex product" :class="[direction]">
+    <view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']">
+      <image :src="data.imgUrl" mode="aspectFill"></image>
+      <image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
+    </view>
+    <view class="flex flex-column info">
+      <view class="title">{{ data.title }}</view>
+      <view>{{ data.desc }}</view>
+      <view class="flex price" :class="[role]">
+        <view>
+          <text class="price-unit">¥</text>
+          <text>{{ data.price }}</text>
+        </view>
+
+        <view class="flex tag" v-if="role === 'member-personal'">
+          <image class="icon" src="@/static/image/home/icon-member-personal.png"></image>
+          <text>个人会员价</text>
+        </view>
+        <view class="flex tag" v-else-if="role === 'member-business'">
+          <image class="icon" src="@/static/image/home/icon-member-business.png"></image>
+          <text>企业会员价</text>
+        </view>
+
+      </view>
+      <view class="flex sales">
+        <image class="icon" src="@/static/image/home/icon-sales.png"></image>
+        <text>{{ `已售出 ${data.sales}单` }}</text>
+      </view>
+    </view>
+    <button class="btn">立即下单</button>
+  </view>
+</template>
+
+<script>
+  const TEST_DATA = {
+    imgUrl: '../../static/image/home/temp-product.png',
+    title: '60分钟肩颈推拿按摩',
+    desc: '疏通经络 放松肌肉',
+    price: 264,
+    sales: 235,
+    isRecommend: true,
+  }
+
+	export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          // todo: delete
+          return TEST_DATA
+        }
+      },
+      direction: {
+        type: String,
+        default: 'horizontal' // horizontal | vertical
+      }
+    },
+		data() {
+			return {
+        role: 'member-business', // member-personal | member-business
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.product {
+  margin-top: 20rpx;
+  background-color: $uni-fg-color;
+  color: #999999;
+  font-size: 22rpx;
+
+  .img {
+    width: 164rpx;
+    height: 164rpx;
+    box-sizing: border-box;
+    position: relative;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.is-recommend {
+      border: 3rpx solid $uni-color-light;
+
+      .mark {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 68rpx;
+        height: 68rpx;
+      }
+    }
+  }
+
+  .info {
+    flex: 1;
+    align-items: flex-start;
+    padding-left: 14rpx;
+  }
+
+  .title {
+    color: #000000;
+    font-size: 28rpx;
+    font-weight: 700;
+    margin-bottom: 7rpx;
+  }
+
+  .price {
+    color: #FF2A2A;
+    font-size: 30rpx;
+    margin-top: 7rpx;
+    align-items: flex-start;
+
+    &-unit {
+      font-size: 18rpx;
+      margin-right: 3rpx;
+    }
+
+    .tag {
+      font-size: 18rpx;
+      font-weight: 700;
+      padding: 9rpx 12rpx 9rpx 19rpx;
+      margin-left: 4rpx;
+
+      .icon {
+        width: 27rpx;
+        height: 19rpx;
+        margin-right: 3rpx;
+      }
+    }
+
+    &.member-personal {
+      color: $uni-color-light;
+      .tag {
+        background-color: rgba($color: #D8FF8F, $alpha: 0.72);
+      }
+    }
+
+    &.member-business {
+      color: #FFB465;
+      .tag {
+        background-color: rgba($color: #FFFBC4, $alpha: 0.72);
+      }
+    }
+  }
+
+  .sales {
+    justify-content: flex-start;
+    margin-top: 8rpx;
+
+    .icon {
+      width: 19rpx;
+      height: 23rpx;
+      margin-right: 4rpx;
+    }
+  }
+
+  .btn {
+    border: none;
+    background-color: $uni-color-light;
+    color: $uni-text-color-inverse;
+    font-size: 22rpx;
+    line-height: 1;
+    padding: 14rpx 28rpx;
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    border-radius: 29rpx;
+  }
+
+  &.horizontal {
+  }
+}
+</style>
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f98e0b8..3f9bc2a 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,10 +1,12 @@
 <template>
-	<view class="home">
+	<view class="page">
 
-		<view style="background-color: white;">
-			<!-- 导航栏 -->
-			<navbar :title="configList.logo_name"/>
+		<image class="bg" src="@/static/image/home/bg.png"></image>
 
+		<view class="content">
+			<!-- 导航栏 -->
+			<navbar title="首页" bgColor="transparent" color="#FFFFFF" />
+			
 			<!-- 搜索栏 -->
 			<view class="search">
 				<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search"
@@ -13,89 +15,53 @@
 
 			<!-- 轮播图 -->
 			<view class="swipe">
-				<uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper>
-			</view>
-
-			<!-- 首页-分类菜单 -->
-			<view class="home-menu">
-				<uv-grid :border="false" :col="5">
-					<uv-grid-item v-for="(item, index) in categoryList" 
-					:key="index" 
-					@click="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)">
-						<image :src="item.image" mode="aspectFill"></image>
-						<text class="menu-text">{{item.name}}</text>
-					</uv-grid-item>
-				</uv-grid>
+				<uv-swiper :list="bannerList" indicator height="340rpx" keyName="image"></uv-swiper>
 			</view>
-		</view>
 
-		<!-- 新人专享 -->
-		<view class="new-people">
-			<view class="new-perple-top">
-				<view class="new-perple-top-left">
-					<view class="title">
-						最新活动
-					</view>
-					<!-- <view class="descript">
-						领199元大礼包
-					</view> -->
-				</view>
-				<view class="new-perple-top-right"
-				@click="$utils.navigateTo(`/pages_order/home/journalism`)">
-					<image :src="configList.index_model" mode="aspectFill"></image>
+			
+			<!-- 推荐 -> 会员 -->
+			<!-- todo: jump to member page -->
+			<view v-if="!role" class="card flex recommend-member" @click="$utils.navigateTo('/pages/index/category')" >
+				<view class="flex" style="flex: 1;">
+					<image class="icon-member" style="" src="@/static/image/home/icon-member.png"></image>
+					<text>会员享受专属折扣和优惠活动，会员下单更优惠！</text>
 				</view>
+				<image class="icon-arrow" src="@/static/image/home/icon-arrow.png"></image>
 			</view>
-			<view class="new-perple-main">
-				
-				<!-- <view class="red-packet">
-					<image src="@/static/image/home/red-packet.png" mode="aspectFill"></image>
-				</view> -->
-				
-				<view v-for="(item, index) in adList" :key="item.id" 
-				@click="$utils.navigateTo(`/pages_order/home/newsDetail?id=${item.id}`)" 
-				class="activity">
-					<image :src="item.icon" mode="aspectFill"></image>
-					<view class="title">{{ item.title }}</view>
-					<!-- <view class="product-price">
-						￥100
-					</view> -->
+
+			<!-- 商品列表 -->
+			<view class="recommend-product">
+				<view class="flex title">
+					<text>热销套餐</text>
+					<image class="icon-hot" style="" src="@/static/image/home/icon-hot.png"></image>
 				</view>
+				<productCard v-for="item in list" :data="item" :key="item.id"></productCard>
+				<!-- todo: delete -->
+				<productCard></productCard>
 			</view>
-		</view>
 
-		<!-- 视频 -->
-		<view v-if="configList.index_vo" class="video-line">
-			<view class="line"></view>
-			视频
-		</view>
-		<view v-if="configList.index_vo" class="video-item">
-			<video :src="configList.index_vo" object-fit="cover" @error="videoErrorCallback" :danmu-list="danmuList"
-				controls class="product-video"></video>
-		</view>
+			<!-- 优惠券弹窗 -->
+			<couponPopup v-if="true || riceInfo.isGetCoupon"></couponPopup>
 
-		<!-- 推荐 -->
-		<view class="recommend">
-			<view class="recommend-title">推荐宝贝</view>
-			<view @click="$utils.navigateTo('/pages/index/category')" 
-			class="recommend-more">更多</view>
-		</view>
+			<!-- tabbar -->
+			<tabber select="home" />
 
-		<!-- 商品列表 -->
-		<view style="position: 20rpx;">
-			<productList :list="list" />
 		</view>
 
-		<!-- 全局弹框 -->
-		<PrivacyAgreementPoup />
+		<template v-if="false">
 
-		<!-- 联系客服 -->
-		<customerServicePopup ref="customerServicePopup" />
+			<!-- 商品列表 -->
+			<view style="position: 20rpx;">
+				<productList :list="list" />
+			</view>
+
+			<!-- 全局弹框 -->
+			<PrivacyAgreementPoup />
 
-		<!-- tabbar -->
-		<tabber select="home" />
+			<!-- 联系客服 -->
+			<customerServicePopup ref="customerServicePopup" />
 
-		<!-- 优惠券弹窗 -->
-		<couponPopup v-if="riceInfo.isGetCoupon"></couponPopup>
+		</template>
 		
 	</view>
 </template>
@@ -110,11 +76,16 @@
 	} from 'vuex'
 	import customerServicePopup from '@/components/config/customerServicePopup.vue'
 	import productList from '@/components/user/productList.vue'
+
+	import productCard from '@/components/product/productCard.vue'
+
 	import mixinsList from '@/mixins/list.js'
 	export default {
 		mixins: [mixinsList],
 		components: {
 			tabber,
+			productCard,
+
 			PrivacyAgreementPoup,
 			customerServicePopup,
 			productList,
@@ -122,8 +93,13 @@
 		},
 		data() {
 			return {
+				role: '',
 				notice: '',
-				bannerList: [],
+				bannerList: [
+					{
+						image: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
+					}
+				],
 				baseList: [],
 				productList: [],
 				keyword: '',
@@ -144,13 +120,8 @@
 			}
 		},
 		onShow() {
-			// 临时改一下
-			if (!uni.getStorageSync('token')) {
-					uni.navigateTo({
-					url: '/pages_order/auth/wxLogin'
-				})
-			}
 
+			return
 			this.getBanner()
 			this.getRiceNoticeList()
 			this.getRiceIconList()
@@ -162,6 +133,7 @@
 			}
 		},
 		onPullDownRefresh() {
+			return
 			this.getBanner()
 			this.getRiceNoticeList()
 		},
@@ -267,31 +239,89 @@
 </script>
 
 <style scoped lang="scss">
-	.home {
+	.page {
+		width: 100vw;
+		min-height: 100vh;
+		background-color: $uni-bg-color;
 
-		// 搜索栏
-		.search {
-			border: 1px solid #F0F0F0;
-			margin: 20rpx;
-			border-radius: 41rpx;
-			padding: 10rpx 0rpx;
-			display: flex;
-			align-items: center;
+	}
+	.bg {
+		width: 100%;
+		height: 589rpx;
+	}
 
-			/deep/ .uv-search__action {
-				background-color: $uni-color;
-				color: #FFFFFF;
-				padding: 10rpx 20rpx;
-				border-radius: 30rpx;
+	.content {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	// 搜索栏
+	.search {
+		background-color: $uni-fg-color;
+		border-radius: 41rpx;
+		padding: 10rpx 0rpx;
+		margin: 20rpx 30rpx 0 30rpx;
+		display: flex;
+		align-items: center;
+
+		/deep/ .uv-search__action {
+			color: $uni-text-color;
+			padding: 10rpx 18rpx;
+		}
+	}
+	
+	// 轮播图
+	.swipe {
+		overflow: hidden;
+		border-radius: 14rpx;
+		margin: 14rpx 30rpx 0 30rpx;
+	}
+
+	.recommend {
+		&-member {
+			margin: 27rpx 17rpx 0 17rpx;
+			color: $uni-color-light;
+			font-size: 28rpx;
+
+			.icon {
+				&-member {
+					width: 42rpx; 
+					height: 38rpx;
+					margin-right: 5rpx;
+				}
+				&-arrow {
+					width: 26rpx; 
+					height: 26rpx;
+				}
 			}
 		}
 
-		// 轮播图
-		.swipe {
-			overflow: hidden;
-			border-radius: 20rpx;
-			margin: 20rpx;
+		&-product {
+			margin: 28rpx 17rpx 0 17rpx;
+			
+			.title{
+				justify-content: flex-start;
+				color: #000000;
+				font-size: 32rpx;
+				font-weight: 700;
+				padding-left: 18rpx;
+			}
+
+			.icon {
+				&-hot {
+					width: 22rpx;
+					height: 30rpx;
+					margin-left: 2rpx;
+				}
+			}
 		}
+	}
+
+
+	.home {
 
 		// 首页-分类菜单
 		.home-menu {
diff --git a/static/image/home/bg.png b/static/image/home/bg.png
new file mode 100644
index 0000000..961f23c
Binary files /dev/null and b/static/image/home/bg.png differ
diff --git a/static/image/home/coupon.png b/static/image/home/coupon.png
new file mode 100644
index 0000000..314940b
Binary files /dev/null and b/static/image/home/coupon.png differ
diff --git a/static/image/home/icon-arrow.png b/static/image/home/icon-arrow.png
new file mode 100644
index 0000000..5081588
Binary files /dev/null and b/static/image/home/icon-arrow.png differ
diff --git a/static/image/home/icon-hot.png b/static/image/home/icon-hot.png
new file mode 100644
index 0000000..bb5dd36
Binary files /dev/null and b/static/image/home/icon-hot.png differ
diff --git a/static/image/home/icon-member-business.png b/static/image/home/icon-member-business.png
new file mode 100644
index 0000000..eb54d55
Binary files /dev/null and b/static/image/home/icon-member-business.png differ
diff --git a/static/image/home/icon-member-personal.png b/static/image/home/icon-member-personal.png
new file mode 100644
index 0000000..193a2f8
Binary files /dev/null and b/static/image/home/icon-member-personal.png differ
diff --git a/static/image/home/icon-member.png b/static/image/home/icon-member.png
new file mode 100644
index 0000000..68158d4
Binary files /dev/null and b/static/image/home/icon-member.png differ
diff --git a/static/image/home/icon-sales.png b/static/image/home/icon-sales.png
new file mode 100644
index 0000000..3170326
Binary files /dev/null and b/static/image/home/icon-sales.png differ
diff --git a/static/image/home/mark-recommend.png b/static/image/home/mark-recommend.png
new file mode 100644
index 0000000..8683cc7
Binary files /dev/null and b/static/image/home/mark-recommend.png differ
diff --git a/static/image/home/temp-product.png b/static/image/home/temp-product.png
new file mode 100644
index 0000000..acb15a9
Binary files /dev/null and b/static/image/home/temp-product.png differ
diff --git a/static/image/tabbar/cart-active.png b/static/image/tabbar/cart-active.png
deleted file mode 100644
index 32a9b5f..0000000
Binary files a/static/image/tabbar/cart-active.png and /dev/null differ
diff --git a/static/image/tabbar/cart.png b/static/image/tabbar/cart.png
deleted file mode 100644
index dafecf5..0000000
Binary files a/static/image/tabbar/cart.png and /dev/null differ
diff --git a/static/image/tabbar/home-active.png b/static/image/tabbar/home-active.png
index 786e7c4..19f3d59 100644
Binary files a/static/image/tabbar/home-active.png and b/static/image/tabbar/home-active.png differ
diff --git a/static/image/tabbar/home.png b/static/image/tabbar/home.png
index 1d470bf..3a59af6 100644
Binary files a/static/image/tabbar/home.png and b/static/image/tabbar/home.png differ
diff --git a/static/image/tabbar/order-active.png b/static/image/tabbar/order-active.png
index 792c804..3e3e09f 100644
Binary files a/static/image/tabbar/order-active.png and b/static/image/tabbar/order-active.png differ
diff --git a/static/image/tabbar/order.png b/static/image/tabbar/order.png
index a61a1e5..dc2e27d 100644
Binary files a/static/image/tabbar/order.png and b/static/image/tabbar/order.png differ
diff --git a/static/image/tabbar/product-list-active.png b/static/image/tabbar/product-list-active.png
index 41f5dbd..a0b02b4 100644
Binary files a/static/image/tabbar/product-list-active.png and b/static/image/tabbar/product-list-active.png differ
diff --git a/static/image/tabbar/product-list.png b/static/image/tabbar/product-list.png
index a77faba..10c7c9b 100644
Binary files a/static/image/tabbar/product-list.png and b/static/image/tabbar/product-list.png differ
diff --git a/static/image/tabbar/user-center-active.png b/static/image/tabbar/user-center-active.png
index e358aba..75e10a2 100644
Binary files a/static/image/tabbar/user-center-active.png and b/static/image/tabbar/user-center-active.png differ
diff --git a/static/image/tabbar/user-center.png b/static/image/tabbar/user-center.png
index aab92d8..3781118 100644
Binary files a/static/image/tabbar/user-center.png and b/static/image/tabbar/user-center.png differ
diff --git a/uni.scss b/uni.scss
index 84de141..58fd49c 100644
--- a/uni.scss
+++ b/uni.scss
@@ -12,7 +12,8 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 /* 颜色变量 */
-$uni-color: #eb3300;
+$uni-color: #86A941;
+$uni-color-light:#84A73F;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
@@ -21,14 +22,15 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
+$uni-text-color:#86A941;//基本色
 $uni-text-color-inverse:#fff;//反色
 $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color:#ffffff;
+$uni-fg-color:#ffffff;
+$uni-bg-color: #F5F5F5;
 $uni-bg-color-grey:#f8f8f8;
 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色