1.Bootstrap布局

内容不需要充满屏幕，所以使用了container容器。为了后续能够合理的开发，以及后期的修改和添加，将页面分成上（推荐商品列表）下（购物车列表）两层。每层里面再分头部、主体、底部，整个静态页面的布局思路就是将内容细分。方便修改和添加内容，将修改的区域合理的控制，而不会影响全局。推荐商品列表和购物车列表都使用栅格系统布局，能够合理的展示商品信息。

2.Vue渲染数据

使用数组对象存储推荐商品信息，因为页面推荐商品信息展示有两个区域，所以使用计算属性将数组通过下标分成两份。

当用户点击购买时，需要将用户点击的商品信息保存下来并将数据渲染到页面的购物车区域。所以需要创建一个空数组以接收用户要购买的商品信息。

给购买按钮一个点击事件并将点击的当前对象通过传参的方式传递回去，通过array.push()方法添加到存储用户购买商品信息的空数组里，当当价除以市场价*100获取折扣，并通过Object.assign()方法合并到商品对象，如果数组里已经有商品了，就循环通过商品名判断是否有一样的商品。

3.实现的功能

点击推荐商品标题右边下拉按钮时隐藏（显示）商品信息，同时切换相应的图片

购物车没有商品时显示一条提示语，有商品时隐藏

点击推荐商品列表的购买时，添加该商品信息到购物车。添加同样的商品时不再新增，该商品数量加一

点击购物车的删除时，通过array.splice()方法删除购物车数组里对应的对象

计算购物车栏商品的总计金额、总计积分、节省金额

4.效果图