我们完成了上节课CommonHeader，本课程将完成home页面的大概div布局。内容多。(16-18)

1.用户盒子

使用Element ui的Layout栅格布局（24），el-row表示大盒子，gutter表示col列宽之间，只需设置高度，el-col的宽度用:span属性表示，大致el-col中有el-card标签。col表示列，card表示列中的卡片。

在home下的index.js文件

显示效果：

2.图表展示

使用Element ui的el-table。这里涉及到数据处理，提前模拟后端发送过来的数据tableData。将数据放在return中。

tableData: [         {           name: "oppo",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },         {           name: "vivo",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },         {           name: "苹果",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },         {           name: "小米",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },         {           name: "三星",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },         {           name: "魅族",           todayBuy: 100,           monthBuy: 300,           totalBuy: 800,         },       ],

el-table使用标签：data表示从后端获得的数据，：data=tabbleData。在return中添加一个tableLabel属性。即表格数据的第一行。el-table-column用v-for进行遍历。

tableLabel:{           name:'课程',           todayBuy:今日购买，           monthBuy:本月购买，           totalBuy:总购买，       },

3.订单统计

在return中写死countData同样需要数据for-v遍历，使用item接收数据，使用flex布局。icon使用字符串拼接，icon图标名都是el-icon-开头的。

             
                                               
                     
￥{     
      {item.value}}
                     
{     
      {item.name}}
                 
                      
                  
                                   
     

countData: [         {           name: "今日支付订单",           value: 1234,           icon: "success",           color: "#2ec7c9",         },         {           name: "今天收集订单",           value: 210,           icon: "star-on",           color: "#ffb980",         },         {           name: "今日未付订单",           value: 1234,           icon: "s-goods",           color: "#5ab1ef",         },         {           name: "本月支付订单",           value: 1234,           icon: "success",           color: "#2ec7c9",         },         {           name: "本月收集订单",           value: 210,           icon: "star-on",           color: "#ffb980",         },         {           name: "本月未付订单",           value: 1234,           icon: "s-goods",           color: "#5ab1ef",         },       ]

效果图：