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

最新推荐文章于 2024-10-14 21:49:10 发布

YK_Ark

最新推荐文章于 2024-10-14 21:49:10 发布

阅读量2.3k

点赞数

分类专栏： vue后台管理项目文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Yuki_Aruki/article/details/124770084

版权

本文介绍了使用Vue和Element-UI构建后台管理系统的首页布局。主要内容包括Element-UI的layout、el-row、el-col组件的使用，以及CSS样式布局。通过设置gutter属性和span属性实现灵活的页面布局。同时，文章提到了数据绑定到原生table和Element-UI的table组件，以及订单计数的数据显示。

摘要由CSDN通过智能技术生成

上周一直在赶期末考试和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>