diff --git a/package-lock.json b/package-lock.json
index 76a7b0e..86e31c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -993,7 +993,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "2.5.1",
         "regenerator-runtime": "0.11.0"
@@ -1059,6 +1058,14 @@
       "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==",
       "dev": true
     },
+    "better-scroll": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/better-scroll/-/better-scroll-1.3.1.tgz",
+      "integrity": "sha1-iS7MfjT2xMH8QxZo5eDWyyMVNVA=",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "big.js": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.1.3.tgz",
@@ -1671,8 +1678,7 @@
     "core-js": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
-      "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=",
-      "dev": true
+      "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -6853,8 +6859,7 @@
     "regenerator-runtime": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
-      "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==",
-      "dev": true
+      "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
diff --git a/package.json b/package.json
index 0e777c2..8b2ce0d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "better-scroll": "^1.3.1",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0"
   },
diff --git a/src/components/goods/goods.vue b/src/components/goods/goods.vue
index cb822f9..8a03b60 100644
--- a/src/components/goods/goods.vue
+++ b/src/components/goods/goods.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="goods">
-        <div class="menu-wrapper">
+        <div class="menu-wrapper" ref="menuScroll">
             <ul v-if="goods">
                 <li class="menu-item border-1px" v-for="(item,index) in goods" :key="item.type">
                     <span class="text">
@@ -8,9 +8,9 @@
                 </li>
             </ul>
         </div>
-        <div class="goods-wrapper">
+        <div class="goods-wrapper" ref="goodsScroll">
             <ul>
-                <li class="goods-item" v-for="good in goods" :key="good.name">
+                <li class="goods-item" v-for="good in goods" :key="good.name" ref="goodsItemHook">
                     <h1 class="good-name">{{good.name}}</h1>
                     <ul>
                         <li class="food-item" v-for="food in good.foods" :key="food.name">
@@ -19,15 +19,14 @@
                             </div>
                             <div class="content">
                                 <h3 class="food-name">{{food.name}}</h3>
-                                <p class="description">{{food.description}}</p>
+                                <p class="description" v-if="food.description">{{food.description}}</p>
                                 <div class="other">
                                     <span class="sellCount">月售{{food.sellCount}}份</span>
                                     <span class="rating">好评率{{food.rating}}%</span>
                                 </div>
                                 <div class="price">
                                     <span class="price">￥{{food.price}}</span>
-                                    <span class="oldPrice" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
-
+                                    <span class="oldPrice" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                                 </div>
                             </div>
                         </li>
@@ -38,21 +37,69 @@
     </div>
 </template>
 <script>
+/* 引入better-scroll插件 */
+import BScroll from 'better-scroll';
 const ERR_OK = 0;
 export default {
     data() {
         return {
             goods: [],
-            classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
+            classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
+            // food对应的每种套餐的高度
+            goodHeighList: [],
+            //  food的滚动高度
+            scrollY: 0
+
         };
     },
+    computed: {
+        // 根据foods的scrollY算出左边是哪种类型的套餐
+        menuCurrentIndex() {
+            let height = 0;
+            for (var i = 0; i < this.goodHeighList.length; i++) {
+                let item = this.goodHeighList[i];
+                height += item;
+            }
+        }
+    },
+    methods: {
+        _initBScroll() {
+            // 实例化menuscroll和goodscroll
+            this.menuScroll = new BScroll(this.$refs.menuScroll, {});
+            this.goodsScroll = new BScroll(this.$refs.goodsScroll, {
+                probeType: 3
+            });
+            this.goodsScroll.on('scroll', (pos) => {
+                let scrollY = Math.abs(pos.y);
+                console.log(scrollY);
+            });
+        },
+        _calculHeight() {
+            let goodsItems = this.$refs.goodsItemHook;
+            this.goodHeighList = [];
+            let height = 0;
+            goodsItems.forEach(function(element) {
+                height += element.offsetHeight;
+                goodHeighList.push(element.offsetHeight);
+            }, this);
+            console.log(height);
+            console.log(goodHeighList);
+            // console.log(goodsItems);
+            // return goodsItems;
+        }
+    },
     created() {
         this.axios.get('api/goods')
             .then((res) => {
                 console.log(res.data);
                 if (res.data.errno === ERR_OK) {
                     this.goods = res.data.data;
-                    console.log(this.goods);
+                    // dom更新后进行的操作
+                    this.$nextTick(() => {
+                        this._initBScroll();
+                        this._calculHeight();
+                    });
+                    // console.log(this.goods);
                 }
             })
             .catch((error) => {
@@ -83,21 +130,21 @@ export default {
      .icon
        display inline-block
        width 12px
-       height 12px   
+       height 12px
        margin-right 2px
        background-size 12px 12px
        background-repeat no-repeat
        vertical-align top
        margin-top 2px
-       &.decrease 
+       &.decrease
          bg-img('./imgs/decrease_3')
-       &.discount 
+       &.discount
          bg-img('./imgs/discount_3')
-       &.guarantee 
+       &.guarantee
          bg-img('./imgs/guarantee_3')
-       &.invoice 
+       &.invoice
          bg-img('./imgs/invoice_3')
-       &.special 
+       &.special
          bg-img('./imgs/special_3')
      .text
        line-height 14px
@@ -106,17 +153,17 @@ export default {
        vertical-align middle
   .goods-wrapper
     .goods-item
-      padding-right 18px     
       .good-name
         height 26px
         font-size 12px
         color rgb(147,153,159)
         line-height 26px
         background-color #f3f5f7
-        border-left 4px solid #d9dde1
+        border-left 2px solid #d9dde1
         padding-left 14px
       .food-item
-        padding 18px  
+        margin 18px
+        border-1px(rgba(7,17,27,0.1))
       .icon-wrapper
         display inline-block
         vertical-align top
@@ -125,13 +172,14 @@ export default {
         font-size 10px
         line-height 10px
         color rgb(147,153,159)
-        padding-top 2px 
+        padding-top 2px
         .food-name
           font-size 14px
           line-height 14px
           color rgb(7,17,27)
           padding 2px 0 8px 0
         .description
+          line-height 18px
           padding-bottom 8px
         .other
           font-size 0
@@ -139,5 +187,15 @@ export default {
             font-size 10px
             padding-right 12px
           .rating
-            font-size 10px   
+            font-size 10px
+        .price
+          line-height 24px
+          font-weight 700
+          .price
+            font-size 14px
+            color rgb(255,0,0)
+            margin-right 8px
+          .oldPrice
+            font-size 10px
+            text-decoration line-through
 </style>
\ No newline at end of file