From 3f9df15c308960447be32d8c5274331416522d92 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 21 Nov 2017 10:14:20 +0800
Subject: [PATCH] refactor:refine sidebar css
---
src/components/ScrollBar/index.vue | 6 ++++--
src/styles/sidebar.scss | 11 ++++++++---
src/styles/variables.scss | 5 +++++
src/views/layout/components/Sidebar/index.vue | 3 +--
4 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue
index 8ef203be..00e81293 100644
--- a/src/components/ScrollBar/index.vue
+++ b/src/components/ScrollBar/index.vue
@@ -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>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 1a854828..7d826cd2 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -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;
+ }
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index bcfb67ce..acc77a82 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,3 +6,8 @@ $green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
+
+//sidebar
+$menuBg:#304156;
+$subMenuBg:#1f2d3d;
+$menuHover:#001528;
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index a8028d0d..80c88ee6 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -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>