Vue后台管理系统练习-3首页主要布局

上周一直在赶期末考试和ddl, 因此一直没有空出时间写
这部分的内容主要是一些element-ui组件和css样式的架构, 比较基础因此讲解部分比较少
效果如下:

整体页面布局采用element-ui的layout布局 + el-card组件
layout布局中通过el-row与el-col控制页面
el-row:
:gutter属性可以规定每个分隔的间距
:span规定此块占用的列数(一共有24列), 其他的部分具体参见element-ui的文档

教程中的table也使用了elementUI的table组件, 但我因为先做的数据绑定就写了格原生table进去, 觉得也不算麻烦因此没有改
左侧部分的代码如下:

<template>
<el-col :span="8">
	<el-card shadow="hover" body-style="padding:0 20px;">
		<div class="user">
			<img :src="userImg" />
			<div class="userInfo">
				<p class="name">{{ username }}p>
				<p class="access">{{ useraccess }}p>
			div>
		div>
		<div class="login-info">
			<p>上次登陆时间: <span>{{ lasttime }}span>p>
			<p>上次登陆地点: <span>{{ lastplace }}span>p>
		div>
	el-card>
	<el-card shadow="hover" style="margin-top: 15px">
		<table class="orders">
			<tr>
				<th>品牌th>
				<th>销售总额th>
				<th>本月销售th>
			tr>
			<tr v-for="item in orders" :key="item.class">
				<td>{{ item.class }}td>
				<td>{{ item.total }}td>
				<td>{{ item.month }}td>
			tr>
		table>
	el-card>
el-col>

orders的json数据这里也贴出来:

[
	{
		"class":"oppo",
		"total": 22000,
		"month":3500
	},
	{
		"class":"vivo",
		"total": 24000,
		"month":2200
	},
	{
		"class":"苹果",
		"total": 65000,
		"month":5500
	},
	{
		"class":"小米",
		"total": 45000,
		"month":6500
	},
	{
		"class":"三星",
		"total": 34000,
		"month":2000
	},
	{
		"class":"魅族",
		"total": 22000,
		"month":3000
	}
]

样式大致如此:

<style lang="less">
.user {
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid rgb(224, 224, 224);
	img {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 1px solid rgb(224, 224, 224);
		margin: 20px 0;
	}
	.userInfo {
		margin: auto;
		p {
			margin: 0;
		}
		.name {
			font-size: 24px;
		}
		.access {
			font-size: 10px;
			color: gray;
		}
	}
}

.login-info {
	font-size: 12px;
	color: gray;
	margin: 15px 0;
	span {
		margin-left: 3em;
	}
}

.orders {
	width:100%;
	height:300px;
	th {
		font-size: 14px;
	}
	td {
		text-align: center;
		font-size: 14px;
		color:gray;
	}
}
style>

然后是右边的布局和订单计数的数据绑定
json数据如下:

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

这里同样适用elementUI中的icon
代码如下:

<el-col :span="16">
	<div class="countData">
	 	<el-card
	          v-for="item in countData"
	          :key="item.name"
	          :body-style="{ display: 'flex', padding: 0 }"
	          shadow="hover"
	        >
			<div class="icon" :style="{ background: item.color }">
				<i :class="'el-icon-' + item.icon">i>
			div>
			<div class="detail">
				<p class="num">¥{{ item.value }}p>
				<p class="txt">{{ item.name }}p>
			div>
		el-card>
	div>
	<el-card style="height: 200px; margin-top:5px;" shadow="hover"> el-card>
	<div class="graph">
		<el-card shadow="hover" style="width:360px;height:240px;">el-card>
		<el-card shadow="hover" style="width:360px;height:240px;">el-card>
	div>
el-col>

<style>
.countData {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	.el-card {
		height: 60px;
		width: 31%;
		margin: 5px;
	}
	.detail {
		margin: 10px;
	}
	.icon {
		width: 30%;
		height: 60px;
		color: white;
		font-size: 30px;
		text-align: center;
		line-height: 60px;
	}
	.num {
		margin: 0;
	}
	.txt {
		margin-top: 5px;
		font-size: 10px;
		color: gray;
	}
}

.graph {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	justify-content: space-between;
}
style>

整体内容为el-card的应用和css布局, 数据绑定, 大部分是之前用过的技巧
没有提到过的大概是绑定style这两部分, 注意写法即可

<div class="icon" :style="{ background: item.color }">
<el-card
	:body-style="{ display: 'flex', padding: 0 }"
	shadow="hover"
>