我们完成了上节课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文件

<template>   <el-row class="home" :gutter="20" style="height:800px;">     <!-- span表示盒子的宽度，height自己设定，向下布局 -->     <el-col :span="8" style="margin-top: 20px">       <el-card shadow="hover">         <div class="user">           <img :src="userImg" />           <div class="userinfo">             <p class="name">Admin</p>             <p class="access">超级管理员</p>           </div>         </div>         <div class="login-info">           <p>上次登录时间：<span>2021-1-19</span></p>           <p>上次登录地点：<span>武汉</span></p>         </div>     </el-col>   </el-row> </template>  <script>     export default {       name: "User",       data() {         return {           userImg: require("../../src/assets/images/user.png") </script>

显示效果：

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进行遍历。

<el-card style="margin-top:20px;height:460px;weight:300px">      <el-table :data="tableData">         <el-table-column         v-for="(val,key) in tableLabel"         :key="key"         :prop="key"         :label="val">       </el-table-column>     </el-table> </el-card>

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

3.订单统计

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

    <el-col :span="16" style="margin-top:20px;">         <div class="num">             <el-card             v-for="item in countData"             :key="item"             :body-style="{display:'flex', padding:0}">                 <i class="icon" :class="'el-icon-' item.icon" :style="{background:item.color}"></i>                 <div class="detail">                     <p class="num">￥{     
      {item.value}}</p>                     <p class="txt">{     
      {item.name}}</p>                 </div>             </el-card>         </div>         <el-card style="height:280px;"></el-card>         <div class="graph">             <el-card style="height:260px;"></el-card>             <el-card style="height:260px;"></el-card>         </div>     </el-col>

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",         },       ]

效果图：