blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-09-08 03:01:56 +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

17
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,18 +82,21 @@ export default {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.fixed-header{
.fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$sideBarWidth}); width: calc(100% - #{$sideBarWidth});
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header{
width: calc(100% - 54px) .hideSidebar .fixed-header {
width: calc(100% - 54px)
} }
.mobile .fixed-header{
.mobile .fixed-header {
width: 100%; width: 100%;
} }
</style> </style>

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

@ -24,7 +24,7 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.app-main { .app-main {
/*50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
@ -32,17 +32,17 @@ export default {
} }
.fixed-header+.app-main { .fixed-header+.app-main {
margin-top: 50px; padding-top: 50px;
} }
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/*84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
.fixed-header+.app-main { .fixed-header+.app-main {
margin-top: 80px; padding-top: 80px;
} }
} }
</style> </style>

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

@ -1,18 +1,20 @@
<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-menu <el-scrollbar wrap-class="scrollbar-wrapper">
:default-active="$route.path" <el-menu
:collapse="isCollapse" :default-active="$route.path"
:background-color="variables.menuBg" :collapse="isCollapse"
:text-color="variables.menuText" :background-color="variables.menuBg"
:active-text-color="variables.menuActiveText" :text-color="variables.menuText"
:collapse-transition="false" :active-text-color="variables.menuActiveText"
mode="vertical" :collapse-transition="false"
> mode="vertical"
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> >
</el-menu> <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-scrollbar> </el-menu>
</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;
} }