diff --git a/pages/index/index.js b/pages/index/index.js
index 5eb703b..0824937 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -3,7 +3,11 @@ const product = require('../../utils/product.js')
 Page({
   data: {
     items: [],
-    slides: []
+    slides: [],
+    navs: [{icon: "../../images/1.png", name: "资产"},
+           {icon: "../../images/1.png", name: "直销"},
+           {icon: "../../images/1.png", name: "严选"},
+           {icon: "../../images/1.png", name: "包装"}]
   },
 
   bindShowProduct: function (e) {
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 03ce318..e597f18 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -10,6 +10,15 @@
       </block>
     </swiper>
 
+    <view class="navs">
+      <block wx:for-items="{{navs}}">
+        <view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}">
+          <image src="{{item.icon}}" class="nav-image"/>
+          <text>{{item.name}}</text>
+        </view>
+      </block>
+    </view>
+
     <block wx:for="{{items}}" wx:for-item="item">
       <view class="item" bindtap="bindShowProduct" data-id="{{item.id}}">
         <view class="image">
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index b517f4f..e9971f1 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -2,6 +2,28 @@
   width: 100%;
 }
 
+.navs {
+  display: flex;
+}
+
+.nav-item {
+  width: 25%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 20rpx;
+}
+
+.nav-item .nav-image {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+
+.nav-item text {
+  padding-top: 20rpx;
+}
+
 .item {
   height: 270rpx;
   padding: 15rpx;