fruits.vue代码
<template>
  <div class="fruits-wrapper">
      <ul>
        <li v-for="item in fruits" class="fruits-item">
          <div class="icon">
            <img :src="fruit.icon">
          </div>
          <div class="content">
            <h2 class="name">{{fruit.name}}</h2>
            <p class="desc">{{fruit.description}}</p>
            <div class="extra">
              <span>月售{{fruit.sellCount}}份</span>
              <span>好评率{{fruit.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{fruit.price}}</span>
              <span class="old" v-show="fruit.oldPrice">￥{{fruit.oldPrice}}</span>
            </div>

          </div>
        </li>
      </ul>
  </div>
</template>

<script type="text/ecmascript-6">
 const ERR_OK = 0
 export default {
    props: {
      seller: {
        type: Object
      }
    },
 data () {
      return {
        fruits: []
      }
    },
 created () {
      this.$http.get('/api/fruits').then((response) => {
        response = response.body
 if (response.errno === ERR_OK) {
          this.fruits = response.data
        }
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .fruits-wrapper
   position: absolute
   top:174px
   width:100%
   bottom:46px
   overflow:hidden
 .fruits-item
     display:flex
 .icon
       flex: 0 0 57px
 .content
       flex: 1
 .name
        margin:2px 0 8px 0
 height:14px
        line-height:14px
        font-size:14px
        color:rgb(7,17,27)
       .desc ,.extra
        margin-bottom:8px
        line-height:10px
        font-size:10px
        color:rgb(147,153,159)
       .extra
        line-height:14px
        font-size:14px
 &.count
          margin-right:12px
 .price
           font-weight:700
 line-height:24px
 .now
             margin-right:8px
             font-size:14px
             color:rgb(240,20,20)
           .old
             text-decoration:line-through


</style>