From 7451ed6299c3328adee097689a2915949515f949 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 6 Nov 2017 15:24:04 +0800
Subject: [PATCH] style:refine sidebar css
---
src/styles/sidebar.scss | 134 ++++++++++----------
src/views/layout/components/Sidebar.vue | 2 -
src/views/layout/components/SidebarItem.vue | 13 +-
3 files changed, 71 insertions(+), 78 deletions(-)
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 5f09f017..eeb56142 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -4,17 +4,7 @@
min-height: 100%;
transition: margin-left 0.28s;
margin-left: 180px;
- }
- // 侧边æ
- .hideSidebar {
- .sidebar-container {
- width: 36px!important;
- overflow: inherit;
- }
- .main-container {
- margin-left: 36px;
- }
- }
+ } // 侧边æ
.sidebar-container {
transition: width 0.28s;
width: 180px!important;
@@ -28,72 +18,78 @@
&::-webkit-scrollbar {
display: none
}
- }
- .sidebar-container>.el-menu {
- width: 100%!important;
- min-height: 100%;
- }
- .sidebar-container .svg-icon {
- margin-right: 16px;
- }
- .hideSidebar .el-submenu>.el-submenu__title,
- .hideSidebar .submenu-title-noDropdown {
- padding-left: 10px!important;
- }
- .hideSidebar .submenu-title-noDropdown span,
- .hideSidebar .el-submenu>.el-submenu__title>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- .hideSidebar .nest-menu .el-submenu__title {
- text-align: initial!important;
- padding-left: 20px!important;
- span {
- height: auto;
- width: auto;
- visibility: visible;
- display: inline;
+ a {
+ display: inline-block;
+ width: 100%;
}
- .el-submenu__icon-arrow {
- display: block!important;
+ .svg-icon {
+ margin-right: 16px;
+ }
+ .el-menu {
+ border: none;
}
}
- .hideSidebar .menu-wrapper>.el-menu-item,
- .hideSidebar .submenu-title-noDropdown,
- .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
- text-align: center;
- }
- .hideSidebar .el-menu-item .el-submenu__icon-arrow,
- .hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
- display: none;
- }
- .hideSidebar .submenu-title-noDropdown {
- position: relative;
- span {
- transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
- opacity: 0;
+ .hideSidebar {
+ .sidebar-container {
+ width: 36px!important;
+ overflow: inherit;
}
- &:hover {
+ .main-container {
+ margin-left: 36px;
+ }
+ }
+ .hideSidebar {
+ .submenu-title-noDropdown {
+ padding-left: 10px!important;
+ position: relative;
span {
- display: block;
- border-radius: 3px;
- z-index: 1002;
- width: 140px;
- height: 56px;
- visibility: visible;
- position: absolute;
- right: -145px;
- text-align: left;
- text-indent: 20px;
- top: 0px;
- background-color: #2B2C2D!important;
- opacity: 1;
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
+ transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
+ opacity: 0;
+ display: inline-block;
+ }
+ &:hover {
+ span {
+ display: block;
+ border-radius: 3px;
+ z-index: 1002;
+ width: 140px;
+ height: 56px;
+ visibility: visible;
+ position: absolute;
+ right: -145px;
+ text-align: left;
+ text-indent: 20px;
+ top: 0px;
+ background-color: #2B2C2D!important;
+ opacity: 1;
+ }
+ }
+ }
+ .el-submenu {
+ &>.el-submenu__title {
+ padding-left: 10px!important;
+ &>span {
+ display: none;
+ }
+ .el-submenu__icon-arrow {
+ display: none;
+ }
+ }
+ .nest-menu {
+ .el-submenu__icon-arrow {
+ display: block!important;
+ }
+ span {
+ display: inline-block!important;
+ }
}
}
}
+ .nest-menu .el-submenu>.el-submenu__title,
.el-submenu .el-menu-item {
min-width: 180px!important;
background-color: #2B2C2D!important;
diff --git a/src/views/layout/components/Sidebar.vue b/src/views/layout/components/Sidebar.vue
index 56abd7c1..301a86ee 100644
--- a/src/views/layout/components/Sidebar.vue
+++ b/src/views/layout/components/Sidebar.vue
@@ -4,8 +4,6 @@
</el-menu>
</template>
-
-
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
diff --git a/src/views/layout/components/SidebarItem.vue b/src/views/layout/components/SidebarItem.vue
index f577a1df..5d07147c 100644
--- a/src/views/layout/components/SidebarItem.vue
+++ b/src/views/layout/components/SidebarItem.vue
@@ -5,26 +5,25 @@
<router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
<el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
<svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
- <span>{{item.children[0].meta?generateTitle(item.children[0].meta.title):'no title'}}</span>
+ <span v-if='item.children[0].meta&&item.children[0].meta.title'>{{generateTitle(item.children[0].meta.title)}}</span>
</el-menu-item>
</router-link>
- <el-submenu :index="item.name" v-if="item.children&&item.children.length>1&&!item.hidden" :key='item.name'>
+ <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'>
<template slot="title">
<svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
- <span>{{item.meta?generateTitle(item.meta.title):'no title'}}</span>
+ <span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span>
</template>
- <template v-for="child in item.children" v-if='!child.hidden'>
- <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'> </sidebar-item>
+ <template v-if='!child.hidden' v-for="child in item.children">
+ <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'></sidebar-item>
<router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
- <span v-if='child.meta' >{{generateTitle(child.meta.title)}}</span>
+ <span v-if='child.meta&&child.meta.title'>{{generateTitle(child.meta.title)}}</span>
</el-menu-item>
</router-link>
-
</template>
</el-submenu>
--
GitLab