refactor:refine sidebar css

This commit is contained in:
Pan 2017-11-21 10:14:20 +08:00
parent a9363ce541
commit 3f9df15c30
4 changed files with 18 additions and 7 deletions

View File

@ -41,14 +41,16 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/variables.scss';
.scroll-container {
position: relative;
width: 100%;
height: 100%;
background-color: #545c64;
background-color: $menuBg;
.scroll-wrapper {
position: absolute;
width: 100%;
width: 100%!important;
}
}
</style>

View File

@ -1,3 +1,5 @@
@import './variables.scss';
#app {
// 主体区域
.main-container {
@ -61,7 +63,7 @@
text-align: left;
text-indent: 20px;
top: 0px;
background-color: #2B2C2D!important;
background-color: $subMenuBg!important;
opacity: 1;
}
}
@ -89,9 +91,12 @@
.nest-menu .el-submenu>.el-submenu__title,
.el-submenu .el-menu-item {
min-width: 180px!important;
background-color: #2B2C2D!important;
background-color: $subMenuBg!important;
&:hover {
background-color: rgb(67, 74, 80)!important;
background-color: $menuHover!important;
}
}
.el-menu--collapse .el-menu .el-submenu{
min-width: 180px!important;
}
}

View File

@ -6,3 +6,8 @@ $green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
//sidebar
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;

View File

@ -1,7 +1,6 @@
<template>
<scroll-bar>
<el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b">
<el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
<sidebar-item :routes='permission_routers'></sidebar-item>
</el-menu>
</scroll-bar>