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

效果图：

实现这部分内容：

（1）

      

        

        新品首发
        更多>
        
      

 

.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

 
      
        
        
        
{
    {n.text}}
        
      

 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）

      

        footer div