后台管理系统
home 组件的实现
第一次主要是左侧上面部分的内容
<template>
<!-- 使用layout方式进行页面布局
gutter 栅格间隔 表示每一行一共分为多少个栅格
-->
<el-row class="home" :gutter="20">
<!-- 左侧的整体布局 span 表示设置当前行所占用的栅格数-->
<el-col :span="8" style="margin-top: 20px">
<!-- 左侧内容进行布局 使用的是card组件,通过此组件进行布局 shadow 设置阴影显示时机-->
<el-card shadow="hover">
<!-- 此时user 里面放的是 左侧的头像 和右侧的 信息 -->
<div class="user">
<img :src="userImg" />
<div class="userInfo">
<p class="name">Admin</p>
<p class="acess">超级管理员</p>
</div>
</div>
<br />
<!-- 然后在往下面 -->
<div class="loginInfo">
<p>上次登录时间:<span>2022-10-16</span></p>
<p>上次登录地点:<span>河南</span></p>
</div>
</el-card>
</el-col>
</el-row>
</template>
增加 左侧下面的内容
需要使用组件库中的 table 组件
<!-- 左侧内容下半部分区域进行布局 使用的是 table 组件进行 -->
<el-card style="margin-top: 20px; height: 460px">
<el-table :data="tableData" style="width: 100%">
<!-- prop 用来读取数据中对应的名称 key代表键值-->
<el-table-column
v-for="(val, key) in tableLabel"
:key="key"
:prop="key"
:label="val"
>
</el-table-column>
</el-table>
对右边页面进行布局
<el-col :span="16">
<div class="num">
<!-- 订单相关的统计 首先循环遍历所给的数据
给此组件添加样式
使用body-style 设置 body 的样式 接收的是object类型 — { padding: '20px' }
-->
<el-card
v-for="item in countData"
:key="item.name"
:body-style="{ display: 'flex', padding: 0 }"
>
<!-- 对于卡片里面的内容 左侧是一个 icon 标签 ,带有颜色,右侧是收入的内容 -->
<!-- 对于里面的class 动态和静态可以同时存在 对于后面动态绑定的 通过 es6里面的``进行拼接 -->
<i
class="icon"
:class="`el-icon-${item.icon}`"
:style="{ background: item.color }"
></i>
<!-- 右边的金额和名称 -->
<div class="detail">
<p class="num1">¥{{ item.value }}</p>
<p class="txt">{{ item.name }}</p>
</div>
</el-card>
</div>
<el-card style="height: 200px; margin-top: 20px"></el-card>
<div class="graph">
<el-card style="height: 260px"></el-card>
<el-card style="height: 260px"></el-card>
</div>
</el-col>
<script>
export default {
name: "home",
data() {
return {
// 注意路径的显示
userImg: require("@/assets/image/2.jpg"),
//增加的数据
tableData: [
{
name: "oppo",
todayBuy: 100,
monthBuy: 300,
totalBuy: 800,
},
{
name: "vivo",
todayBuy: 100,
monthBuy: 300,
totalBuy: 800,
}
],
tableLabel: {
name: "课程",
todayBuy: "今日购买",
monthBuy: "本月购买",
totalBuy: "总购买",
},
};
countData: [
{
name: "今日支付订单",
value: 1234,
icon: "success",
color: "#2ec7c9",
},
{
name: "今日收藏订单",
value: 210,
icon: "star-on",
color: "#ffb980",
},
{
name: "今日未支付订单",
value: 1234,
icon: "s-goods",
color: "#5ab1ef",
}
],
},
};
</script>
<style lang="less" scoped>
.user {
display: flex;
height: 100%;
// 两端对齐,上下居中
// justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgb(157, 157, 157);
padding-bottom: 15px;
// img
img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 30px;
}
.userInfo {
.name {
font-weight: 600;
font-size: 20px;
margin-bottom: 10px;
}
.acess {
color: rgb(157, 157, 157);
font-size: 14px;
}
}
}
.loginInfo {
font-size: 14px;
color: rgb(157, 157, 157);
margin-top: 5px;
p {
margin-bottom: 10px;
span {
margin-left: 30px;
}
}
}
</style>