1. 用户盒子布局
使用Element ui的Layout栅格布局（24），el-row表示大盒子，gutter表示col之间的列宽，只需要设置高度即可，el-col的宽度用:span属性表示，大致el-col中有el-card标签。col表示列，card表示列里面的卡片。
&emsp在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 class="img-header" :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-card></el-col></el-row>
</template>
<script>export default {name: "home",data() {return {userImg: require("../../assets/images/user.png")}}}
</script>
<style lang="less">.img-header {width: 100px;height: 100px;}</style>
显示效果：
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-columnv-for="(val,key) in tableLabel":key="key":prop="key":label="val"></el-table-column></el-table>
</el-card>
tableLabel:{name:'课程',todayBuy:'今日购买',monthBuy:'本月购买',totalBuy:'总购买',},
2. 列表展示
在return中写死countData数据，同样需要for-v遍历，使用item接受数据，使用flex布局。icon采用字符串拼接，icon图标名都是el-icon-开头的。
<el-col :span="16" style="margin-top:20px;"><div class="num"><el-cardv-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",},]
完整代码
//src/views/home/index.vue
<template><el-row class="home" :gutter="20" style="height:800px;"><!-- span表示盒子宽度，height自己设定，向下布局 --><el-col :span="8" class="user-section"><el-card shadow="hover"><div class="user-layout"><img class="user-header" :src="userImg"/><div class="user-info-layout"><p class="user-name">Admin</p><p class="user-nickname">超级管理员</p></div></div><div class="login-layout"><p class="login-time">上次登录时间：<span>2021-1-19</span></p><p class="login-loc">上次登录地点：<span>武汉</span></p></div></el-card><el-card style="margin-top:20px;height:460px;weight:300px"><el-table :data="tableData"><el-table-columnv-for="(val,key) in tableLabel":key="key":prop="key":label="val"></el-table-column></el-table></el-card></el-col></el-row>
</template><script>export default {name: "home",data() {return {userImg: require("../../assets/images/user.png"),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,},],tableLabel: {name: '课程',todayBuy: '今日购买',monthBuy: '本月购买',totalBuy: '总购买',},}}}
</script>
<style lang="less">/*用户模块*/.user-section {margin-top: 10px}.user-layout {display: flex;flex-direction: row;align-items: center;border-bottom: #999 solid 1px;padding: 0 10px 10px;}.user-header {width: 100px;height: 100px;border-radius: 50%;}.user-info-layout {display: flex;flex-direction: column;margin-left: 20px;}.user-name {font-size: 18px;color: black;font-weight: 700;}.user-nickname {font-size: 18px;color: black;margin-top: 5px;font-weight: 700;}.login-layout {display: flex;flex-direction: column;margin-left: 20px;}.login-time {font-size: 17px;color: black;margin-top: 5px;}.login-loc {font-size: 17px;color: black;margin-top: 8px;}
</style>
运行效果
3. 订单统计
在return中写死countData数据，同样需要for-v遍历，使用item接受数据，使用flex布局。icon采用字符串拼接，icon图标名都是el-icon-开头的。
<!--订单统计--><el-col :span="8" v-for="(item) in countData":key="item" :offset="0"><el-card class="order-section":body-style="{display:'flex', padding:0}"><div class="order-layout"><i class="order-icon" :class="'el-icon-'+item.icon":style="{background:item.color}"></i><div class="order-detail"><p class="order-num">￥{{item.value}}</p><p class="order-title">{{item.name}}</p></div></div></el-card></el-col>
countData: [{name: "今日支付订单",value: 1234,icon: "success",color: "#2ec7c9",offset: 0,},{name: "今日收藏订单",value: 210,icon: "star-on",color: "#ffb980",offset: 1,},{name: "今日未支付订单",value: 1234,icon: "s-goods",color: "#5ab1ef",offset: 2,},{name: "本月支付订单",value: 1234,icon: "success",color: "#2ec7c9",offset: 0,},{name: "本月收藏订单",value: 210,icon: "star-on",color: "#ffb980",offset: 1,},{name: "本月未支付订单",value: 1234,icon: "s-goods",color: "#5ab1ef",offset: 2,},]
完整代码
//src/views/home/index.vue
<template><el-row class="home" :gutter="20" style="height:100vh;"><!--用户布局--><el-col :span="9" class="user-section"><el-card shadow="hover"><div class="user-layout"><img class="user-header" :src="userImg"/><div class="user-info-layout"><p class="user-name">Admin</p><p class="user-nickname">超级管理员</p></div></div><div class="login-layout"><p class="login-time">上次登录时间：<span>2021-1-19</span></p><p class="login-loc">上次登录地点：<span>武汉</span></p></div></el-card><!--列表展示--><el-card class="list-section"><el-table :data="tableData"><el-table-columnv-for="(val,key) in tableLabel":key="key":prop="key":label="val"></el-table-column></el-table></el-card></el-col><!--右侧布局--><el-col :span="15"><!--订单统计--><el-col :span="8" v-for="(item) in countData":key="item" :offset="0"><el-card class="order-section":body-style="{display:'flex', padding:0}"><div class="order-layout"><i class="order-icon" :class="'el-icon-'+item.icon":style="{background:item.color}"></i><div class="order-detail"><p class="order-num">￥{{item.value}}</p><p class="order-title">{{item.name}}</p></div></div></el-card></el-col><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></el-row>
</template><script>export default {name: "home",data() {return {userImg: require("../../assets/images/user.png"),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,},],tableLabel: {name: '课程',todayBuy: '今日购买',monthBuy: '本月购买',totalBuy: '总购买',},countData: [{name: "今日支付订单",value: 1234,icon: "success",color: "#2ec7c9",offset: 0,},{name: "今日收藏订单",value: 210,icon: "star-on",color: "#ffb980",offset: 1,},{name: "今日未支付订单",value: 1234,icon: "s-goods",color: "#5ab1ef",offset: 2,},{name: "本月支付订单",value: 1234,icon: "success",color: "#2ec7c9",offset: 0,},{name: "本月收藏订单",value: 210,icon: "star-on",color: "#ffb980",offset: 1,},{name: "本月未支付订单",value: 1234,icon: "s-goods",color: "#5ab1ef",offset: 2,},]}}}
</script>
<style lang="less">/*用户模块*/.user-section {margin: 10px 0}.user-layout {display: flex;flex-direction: row;align-items: center;border-bottom: #999 solid 1px;padding: 0 10px 10px;}.user-header {width: 100px;height: 100px;border-radius: 50%;}.user-info-layout {display: flex;flex-direction: column;margin-left: 20px;}.user-name {font-size: 18px;color: black;font-weight: 700;}.user-nickname {font-size: 18px;color: black;margin-top: 5px;font-weight: 700;}.login-layout {display: flex;flex-direction: column;margin-left: 20px;}.login-time {font-size: 17px;color: black;margin-top: 5px;}.login-loc {font-size: 17px;color: black;margin-top: 8px;}/*列表展示*/.list-section {margin-top: 20px;height: 460px;}/*订单统计*/.order-section {padding: 0 0;margin: 10px 0 15px;background-color: white;}.order-layout {display: flex;flex-direction: row;align-items: center;}.order-icon {display: flex;width: 65px;height: 65px;//border-radius: 50%;align-items: center;justify-content: center;}.order-detail {display: flex;flex-direction: column;justify-content: center;margin-left: 15px;}.order-num {color: #333333;font-size: 18px;}.order-title {color: #333;font-size: 18px;font-weight: 700;margin-top: 8px;}</style>
用户盒子布局、图表展示布局、列表展示布局示例下载
