blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-09-10 12:50:38 +08:00
Code Issues Releases Wiki Activity

refine css

Browse Source
This commit is contained in:
Pan 2019-03-25 15:03:39 +08:00
parent 7a10b95baa
commit 6e7289b751
4 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/layout/Layout.vue
View File

@ -66,11 +66,13 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
@ -80,6 +82,7 @@ export default {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
@ -88,9 +91,11 @@ export default {
width: calc(100% - #{$sideBarWidth}); width: calc(100% - #{$sideBarWidth});
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px) width: calc(100% - 54px)
} }
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }

4
src/layout/components/AppMain.vue
View File

@ -32,7 +32,7 @@ export default {
} }
.fixed-header+.app-main { .fixed-header+.app-main {
margin-top: 50px; padding-top: 50px;
} }
.hasTagsView { .hasTagsView {
@ -42,7 +42,7 @@ export default {
} }
.fixed-header+.app-main { .fixed-header+.app-main {
margin-top: 80px; padding-top: 80px;
} }
} }
</style> </style>

4
src/layout/components/Sidebar/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<el-scrollbar wrap-class="scrollbar-wrapper"> <div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="$route.path" :default-active="$route.path"
:collapse="isCollapse" :collapse="isCollapse"
@ -13,6 +14,7 @@
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div>
</template> </template>
<script> <script>

12
src/styles/sidebar.scss
View File

@ -38,6 +38,16 @@
right: 0px; right: 0px;
} }
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal { .is-horizontal {
display: none; display: none;
} }
@ -100,6 +110,7 @@
.el-tooltip { .el-tooltip {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
@ -111,6 +122,7 @@
&>.el-submenu__title { &>.el-submenu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }