06. Vue管理系统速成
盒子模型拆分网页
官网菜单效果
当且仅当标签是 el-menu-item 的时候，index 才会生效
$route.path 是当前浏览器正在访问的路由
格式： /xxx
padding: 20
icon: width 24 + margin 5
20 + 24 + 5 = 49
我们要实现的效果
布局
logo
设置
菜单高亮颜色：
** **#1890ff
一级菜单颜色：
#001529
二级菜单颜色：
#000c17
菜单和头部阴影
box-shadow: 2px 0 6px rgba(0,21,41,.35);
整体框架
<el-container>
<el-aside>
</el-aside>
<el-container>
<el-header>
</el-header>
<el-main>
</el-main>
</el-container>
</el-container>
logo
<div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center">
<img src="@/assets/logo1.png" style="width: 30px;" alt="">
<span class="logo-title" v-show="!isCollapse">Honey2024</span>
</div>
菜单
<el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"
active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"
style="border: none">
<el-menu-item index="/">
<i class="el-icon-s-home"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template>
<el-menu-item index="/user">用户管理</el-menu-item>
<el-menu-item index="/admin">管理员管理</el-menu-item>
</el-submenu>
</el-menu>
菜单样式
<style>
.el-submenu__title {
height: 40px !important;
line-height: 40px !important;
padding: 0 25px !important;
transition: color 0s;
}
.el-menu-item {
min-width: 0 !important;
width: calc(100% - 10px);
margin: 5px;
height: 40px !important;
line-height: 40px !important;
border-radius: 5px;
}
.el-menu--inline, .el-menu-item {
background-color: #000c17 !important;
}
.el-submenu__title>i:nth-child(1) {
margin-top: 2px;
}
.el-submenu__title>i.el-submenu__icon-arrow {
margin-top: -5px;
}
.el-menu--inline>.el-menu-item {
padding-left: 50px !important;
}
.el-menu-item.is-active {
background-color: dodgerblue !important;
}
.el-menu-item:hover {
color: #fff !important;
}
.el-submenu__title:hover *, .el-submenu__title:hover {
color: #fff !important;
}
.el-aside {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
background-color: #001529;
color: #fff;
min-height: 100vh;
transition: width .3s;
}
.el-menu--collapse .el-submenu__title {
padding: 0 20px !important;
}
.el-menu--collapse .el-tooltip {
padding: 0 15px !important;
}
.logo-title {
margin-left: 5px;
transition: all .3s;
}
</style>
头部布局
左侧
<i :class="collapseIcon" @click="handleCollapse" style="font-size: 26px"></i>
<el-breadcrumb separator="/" style="margin-left: 20px">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
</el-breadcrumb>
右侧
<div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
<i class="el-icon-quanping" @click="handleFullScreen" style="font-size: 25px"></i>
<el-dropdown placement="bottom">
<div style="display: flex; align-items: center; cursor: pointer">
<img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
<span>管理员</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
iconfont 自定义图标
设置
下载后解压，拷贝这几个文件到你项目 css 静态目录下
在 main.js 里引入 iconfont.css 即可
主题色设置
https://element.eleme.cn/#/zh-CN/theme
直接复制 theme 文件夹到项目里，在 mian.js 里引入即可
直播后的完整代码
<template>
<div>
<el-container>
<!-- 侧边栏 -->
<el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
<div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
<img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px">
<span class="logo-title" v-show="!isCollapse">honey2024</span>
</div>
<el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none" :default-active="$route.path">
<el-menu-item index="/">
<i class="el-icon-menu"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-menu-item index="/1">
<i class="el-icon-house"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-menu-item index="/2">
<i class="el-icon-house"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-menu"></i>
<span>信息管理</span>
</template>
<el-menu-item>用户信息</el-menu-item>
<el-menu-item>管理员信息</el-menu-item>
<el-menu-item index="/">系统首页</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<!-- 头部区域-->
<el-header>
<i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
</el-breadcrumb>
<div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
<i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
<el-dropdown placement="bottom">
<div style="display: flex; align-items: center; cursor: default">
<img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
<span>管理员</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item @click="">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<!-- 主体区域-->
<el-main>
<div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
早安，骚年，祝你开心每一天！
</div>
<el-card style="width: 500px">
<div slot="header" class="clearfix">
<span>青哥哥带你做毕设2024</span>
</div>
<div>
2024毕设正式开始了！青哥哥带你手把手敲出来！
<div style="margin-top: 20px">
<div style="margin: 10px 0"><strong>主题色</strong></div>
<el-button type="primary">按钮</el-button>
<el-button type="success">按钮</el-button>
<el-button type="warning">按钮</el-button>
<el-button type="danger">按钮</el-button>
<el-button type="info">按钮</el-button>
</div>
</div>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
isCollapse: false, // 不收缩
asideWidth: '200px',
collapseIcon: 'el-icon-s-fold'
}
},
methods: {
handleFull() {
document.documentElement.requestFullscreen()
},
handleCollapse() {
this.isCollapse = !this.isCollapse
this.asideWidth = this.isCollapse ? '64px' : '200px'
this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
}
}
}
</script>
<style>
.el-menu--inline {
background-color: #000c17 !important;
}
.el-menu--inline .el-menu-item {
background-color: #000c17 !important;
padding-left: 49px !important;
}
.el-menu-item:hover, .el-submenu__title:hover {
color: #fff !important;
}
.el-submenu__title:hover i {
color: #fff !important;
}
.el-menu-item:hover i {
color: #fff !important;
}
.el-menu-item.is-active {
background-color: #1890ff !important;
border-radius: 5px !important;
width: calc(100% - 8px);
margin-left: 4px;
}
.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip{
margin-left: -4px;
}
.el-menu-item {
height: 40px !important;
line-height: 40px !important;
}
.el-submenu__title {
height: 40px !important;
line-height: 40px !important;
}
.el-submenu .el-menu-item {
min-width: 0 !important;
}
.el-menu--inline .el-menu-item.is-active {
padding-left: 45px !important;
}
/*.el-submenu__icon-arrow {*/
/* margin-top: -5px;*/
/*}*/
.el-aside {
transition: width .3s;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.logo-title {
margin-left: 5px;
font-size: 20px;
transition: all .3s; /* 0.3s */
}
.el-header {
box-shadow: 2px 0 6px rgba(0,21,41,.35);
display: flex;
align-items: center;
}
</style>
尽管我提前写了一遍，但是直播写的布局思路跟我备课的布局还是不一样，下面放出我备课的布局代码：
备课的布局完整代码
<template>
<div>
<el-container>
<el-aside :width="asideWidth">
<div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center">
<img src="@/assets/logo1.png" style="width: 30px;" alt="">
<span class="logo-title" v-show="!isCollapse">Honey2024</span>
</div>
<el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"
active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"
style="border: none">
<el-menu-item index="/">
<i class="el-icon-s-home"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template>
<el-menu-item index="/user">用户管理</el-menu-item>
<el-menu-item index="/admin">管理员管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="height: 60px; line-height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
<i :class="collapseIcon" @click="handleCollapse" style="font-size: 26px"></i>
<el-breadcrumb separator="/" style="margin-left: 20px">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
</el-breadcrumb>
<div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
<i class="el-icon-quanping" @click="handleFullScreen" style="font-size: 25px"></i>
<el-dropdown placement="bottom">
<div style="display: flex; align-items: center; cursor: pointer">
<img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
<span>管理员</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-main>
<div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
早安，骚年，祝你开心每一天！
</div>
<el-card style="width: 500px">
<div slot="header" class="clearfix">
<span>青哥哥带你做毕设2024</span>
</div>
<div>
2024毕设正式开始了！青哥哥带你手把手敲出来！
<div style="margin-top: 20px">
<div style="margin: 10px 0"><strong>主题色</strong></div>
<el-button type="primary">按钮</el-button>
<el-button type="success">按钮</el-button>
<el-button type="warning">按钮</el-button>
<el-button type="danger">按钮</el-button>
<el-button type="info">按钮</el-button>
</div>
</div>
</el-card>
<!-- <el-table stripe :header-cell-style="{ backgroundColor: 'aliceblue', fontWeight: 'bold', color: '#333' }">-->
<!-- <el-table-column label="姓名" align="center"></el-table-column>-->
<!-- <el-table-column label="电话" align="center"></el-table-column>-->
<!-- <el-table-column label="邮箱" align="center"></el-table-column>-->
<!-- <el-table-column label="地址" align="center"></el-table-column>-->
<!-- </el-table>-->
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
isCollapse: false,
asideWidth: '200px',
collapseIcon: 'el-icon-s-fold'
}
},
mounted() {
},
methods: {
handleFullScreen() {
document.documentElement.requestFullscreen()
},
handleCollapse() {
this.isCollapse = !this.isCollapse
this.asideWidth = this.isCollapse ? '64px' : '200px'
this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
}
}
}
</script>
<style>
.el-menu--inline, .el-menu-item {
background-color: #000c17 !important;
}
.el-submenu__title {
height: 40px !important;
line-height: 40px !important;
padding: 0 25px !important;
transition: color 0s;
}
.el-menu--collapse .el-submenu__title {
padding: 0 20px !important;
}
.el-submenu__title>i:nth-child(1) {
margin-top: 2px;
}
.el-submenu__title>i.el-submenu__icon-arrow {
margin-top: -5px;
}
.el-menu-item {
min-width: 0 !important;
width: calc(100% - 10px);
margin: 5px;
height: 40px !important;
line-height: 40px !important;
border-radius: 5px;
}
.el-menu--inline>.el-menu-item {
padding-left: 50px !important;
}
.el-menu-item.is-active {
background-color: dodgerblue !important;
}
.el-menu-item:hover {
color: #fff !important;
}
.el-submenu__title:hover *, .el-submenu__title:hover {
color: #fff !important;
}
.el-aside {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
background-color: #001529;
color: #fff;
min-height: 100vh;
transition: width .3s;
}
.el-menu--collapse .el-tooltip {
padding: 0 15px !important;
}
.logo-title {
margin-left: 5px;
transition: all .3s;
}
.el-menu {
transition: all .3s;
}
</style>