AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

refactor:refine sidebar css

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/ScrollBar/index.vue
View file

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

11
src/styles/sidebar.scss
View file

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

5
src/styles/variables.scss
View file

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

3
src/views/layout/components/Sidebar/index.vue
View file

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