我们一共需要改动这几个文件
1.找到Sidebar文件夹下的index.vue文件中的控制属性,把vertical改成horizontal
mode="vertical"
改为
mode="horizontal"
然后设置为flex布局
.menu{
display: flex;
}
如图:
2.logo.vue文件
做出如下改动
改动后的代码如下:
.sidebar-logo-container {
position: relative;
width: 180px;
height: 50px;
line-height: 50px;
float: left;
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 32px;
//height: 32px;
vertical-align: middle;
margin-right: 6px;
margin-left: 6px;
}
3.Layout——components文件夹下的Navbar.vue文件
style部分:
@import "~@/assets/styles/variables.scss";
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #304156;//修改
box-shadow: 0 1px 4px rgba(0,21,41,.08);
width: 100%;//新增
z-index: 998;//新增
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #fff;//修改
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
}
.avatar-container {
//margin-right: 30px;//注释掉
.avatar-wrapper {
margin-top: 10px;//修改
position: relative;
.user-avatar {//修改
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 15px;
}
.name {//新增
font-size: 14px;
position: relative;
bottom: 12px;
margin-left: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
html部分:该注释的注释
<template>
<div class="navbar">
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->
<div class="right-menu">
<template v-if="device!=='mobile'">
<!-- 语言选择器-->
<el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleSetLanguage">
<span class="international-icon">{{ language }}<i class="el-icon-caret-bottom" /></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="language === '中文'">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="language === 'English'">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<span class="name">{{ name }}</span>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<!-- <el-dropdown-item @click.native="setting = true">-->
<!-- <span>布局设置</span>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
js部分:加上个name,显示用户名称
...mapGetters(["sidebar", "avatar", "device",'name']),
4.Layout文件夹下index.vue文件
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
//width: calc(100% - #{$base-sidebar-width});//注释掉
width: 100%;//新增
transition: width 0.28s;
}
5.assets——styles文件夹下sidebar.scss文件
.main-container {
min-height: 100%;
transition: margin-left .28s;
//margin-left: $base-sidebar-width;//注释掉
position: relative;
}
新增以下样式:
.el-menu--horizontal > div > .el-submenu {
float: left;
}
/* 水平样式 */
.el-menu--horizontal > div > .el-submenu {
float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal > div > .el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
color: #fff;
margin-left: 8px;
margin-top: -1px;
}
/* 解决无下拉菜单时不对齐问题 */
.el-menu--horizontal > div > .el-submenu .el-submenu__title {
height: 50px;
line-height: 50px;
color: #909399;
}
.sidebar-container中的:以下是需要修改的子类和属性
-webkit-transition: width 0.28s;//修改
transition: width 0.28s;
//width: $base-sidebar-width !important;//注释掉
width: calc(100% - 220px);//修改
background-color: $base-menu-background;
height: 50px;//修改
position: fixed;
font-size: 0px;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,//修改
0s padding-right ease-in-out;//修改
}
.scrollbar-wrapper {
//overflow-x: hidden !important;//注释掉
height: 90px;//修改
}
&.has-logo {
.el-scrollbar {
//height: calc(100% - 50px);//注释掉
}
}
.svg-icon {
position: relative;//修改
top: 2px;//修改
margin-right: 6px;//修改
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
display: flex;//修改
// by kofi//注释掉
.el-menu-item {//新增
height: 60px !important;
padding-left: 30px !important;
}
//.el-menu-item, .el-submenu__title {//注释掉
// overflow: hidden !important;
// text-overflow: ellipsis !important;
// white-space: nowrap !important;
//}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
height: 50px;//修改
line-height: 50px;//修改
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
}
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;//修改
width: $base-sidebar-width !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0);
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 6px;
}
}
6.views文件夹下的index.vue文件
.login-container{
margin-top: 100px;
margin-left: 90px;
background-size: 100% 100%;
width: 100%;
//height: 86vh;//注释掉
position: relative;
overflow: hidden;
}
搞定!