1.完成后的效果预览，左侧是Logo，右侧是用户下拉菜单
2.代码，关于代码的介绍见注释
<template>
<el-container style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;overflow: hidden;">
<!--通过display: flex;和margin-right: auto;使得头像内容靠右-->
<el-header style="display: flex;">
<h3 style="margin-right: auto;">Guard-Admin</h3>
<div class="right-menu">
<!--这里如果添加trigger="click"，就是通过点击显示下拉菜单，如果不加就是鼠标放上去显示下拉菜单-->
<el-dropdown>
<div>
<img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/" class="no-decoration">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<router-link to="/profile/password" class="no-decoration">
<el-dropdown-item divided>
密码修改
</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-container style="height: 100%;padding-bottom: 60px;">
<el-aside width="200px">
<li v-for="item in 100" :key="item">
{{ item }}
</li>
</el-aside>
<el-main>
<div v-for="item in 100" :key="item.id">
{{ item }}
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Main"
}
</script>
<style>
/*设置头部的背景颜色和文字颜色*/
.el-header {
background-color: #545c64;
color: #fff;
}
/**设置向下箭头的颜色*/
.el-icon-caret-bottom {
color: #FFF;
}
/**垂直居中*/
.right-menu {
align-self: center;
}
/**去除下划线*/
.no-decoration {
text-decoration: none;
}
/*设置头像的大小*/
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
}
</style>
完整前后台代码托管在gitee上，地址 https://gitee.com/gintone/Guard
