上节课我们完成了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",
},
]
效果图: