vue+vant移动端入门实现3（仿网易严选）

效果图：

实现这部分内容：

（1）

<!--商品列表-->
      <div class='goodsListDiv'>
        <h1>
        <label>新品首发</label>
        <a href='#'>更多></a>
        </h1>
      </div>

 

.goodsListDiv{
  height:1rem;
  line-height:1rem;
}
.goodsListDiv label{
  display:inline-block;
  margin:0 0 0 0.3rem;
  float:left;
  font-size:0.6rem;
}
.goodsListDiv a{
  display:inline-block;
  margin:0 0 0 0;
  float:right;
  font-size:0.6rem;
}

（2）宫格使用vant框架的grip

 <!--新品首发宫格-->
      <van-grid :center='false' :border='false' :column-num="3">
        <van-grid-item v-for="(n,inx) in good_list" :key="inx">
        <img :src="n.imgurl">
        <div>{{n.text}}</div>
        </van-grid-item>
      </van-grid>

 good_list:[
        {
          imgurl:require('../assets/good_list/good_list_1.png'),
          text:'网易有道词典笔',
          price:99,
          gradientPrice:1
        },{
          imgurl:require('../assets/good_list/good_list_2.png'),
          text:'网易有道1111111词典笔',
          price:123,
          gradientPrice:2
        },{
          imgurl:require('../assets/good_list/good_list_3.png'),
          text:'网易有道词典笔',
          price:732,
          gradientPrice:3
        },{
          imgurl:require('../assets/good_list/good_list_4.png'),
          text:'网易有道词典笔',
          price:227,
          gradientPrice:0
        },{
          imgurl:require('../assets/good_list/good_list_5.png'),
          text:'网易有道词典笔',
          price:744,
          gradientPrice:4
        },{
          imgurl:require('../assets/good_list/good_list_6.png'),
          text:'网易有道词典笔',
          price:749,
          gradientPrice:0
        }

      ]

（3）

<!--底部-->
      <div style='height:10rem;background:#000;font-size:3rem;color:#666;text-align:center;'>
        footer div
      </div>