商品列表-结构

新建一个HotShopList.vue的组件
html代码实现如下

<template>
    <div class="shop-container">
        <ul class="shop-list">
              <li class="shop-list-item">
                  <img src="./../../imgs/shop_list/shop_item.png" alt="">
                  <h4>我是标题标题标题</h4>
                  <div class="list-item-bottom">
                      <span class="item-price">$26.9</span>
                      <span class="item-counter">已拼成999件</span>
                      <span class="item-user">
                          <img src="./../../imgs/shop_list/user1.jpg" alt="">
                          <img src="./../../imgs/shop_list/user2.jpg" alt="">
                      </span>
                      <span class="item-buy">
                           <button>去拼单</button>
                      </span>
                  </div>
              </li>
        </ul>
</template>

CSS代码实现如下

<style  scoped lang="stylus" ref="stylesheet/stylus">
   .shop-container
      margin-bottom 50px   //内容距离底部有距离
      background-color #f5f5f5
      .shop-list
         .shop-list-item
            margin-bottom 10px
            background-color #fff
            display flex
            flex-direction column
            .list-item-title
                line-height 22px
                width 94%
                margin-left 3%
                height 44px
                overflow hidden   //标题太长需要隐藏
                .list-item-bottom
                    margin 10px 0
                    display flex
                    flex-direction row
                    justify-content space-around
                    align-items center
                    .item-price
                      font-size 18px
                      text-align center
                      font-weight bolder
                      color red
                      flex 1
                     .item-counter
                       flex 2
                       font-size 12px
                       color #ccccc
                     .item-user
                       display flex
                       justify-content center
                       align-items center
                       flex 1
                         img
                            width 40px
                            border-radius 50%         
                         img:nth-child(2)
                            magrin-left -6px
                       .item-buy
                            flex 2
                            button
                                width 80%
                                height 34px
                                border none
                                color #fff
                                display flex
                                font-size 15px
                                justify-content center
                                align-items center
                                margin-left 10px
                                background-color red
                                border-radius 10px

效果如图

微信截图_20181130021105.png