2-11 绘制后台首页UI布局

说明:当用户登录成功后,我们要进入系统的默认主页,作为我们oa系统的默认主页长什么样子呢?如何使用element-plus来布局这样的页面呢?这是本节课要完成的内容

 2-11 绘制后台首页UI布局_第1张图片

 头部显示系统的名称以及当前登录的用户的信息,移动到用户名会产生下拉菜单
左侧对应了功能菜单的区域,一个完整的系统可能会包括多个模块若干个功能,我么可以使用折叠篮的方式对系统的功能进行分门别类的管理

页面最主要的空白部分用于显示我们每一个具体的功能页面如何使用element-plus来布局这样的页面呢?

通过官方文档来了解

2-11 绘制后台首页UI布局_第2张图片 2-11 绘制后台首页UI布局_第3张图片

创建全新的index.html文件 代表后台的默认首页

 2-11 绘制后台首页UI布局_第4张图片

 2-11 绘制后台首页UI布局_第5张图片

 直接粘贴引用语句

进行页面的布局

2-11 绘制后台首页UI布局_第6张图片

 写好基础语句后进行布局

2-11 绘制后台首页UI布局_第7张图片

 

 接下来构建下方左侧的功能菜单区,以及右侧主要的功能区

2-11 绘制后台首页UI布局_第8张图片

 

 为什么没有全屏铺满,而只有这么小的空间呢?只有设置了所有的高度以后才可以铺满全屏

2-11 绘制后台首页UI布局_第9张图片

 2-11 绘制后台首页UI布局_第10张图片

 页面显示区怎么显示其他的页面呢?只需要在空白的区域增加一个内嵌框架iframe,去在内全框架中显示具体的页面

 2-11 绘制后台首页UI布局_第11张图片

 

你可能感兴趣的:(慕课oa系统,大数据)