提交 bbfb242b authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat: 系统管理左侧菜单栏采用统一可拖拽组件

上级 f261acb7
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<el-main class="ms-main-container"> <el-main class="ms-main-container">
<!-- <keep-alive> -->
<router-view :key="key" /> <router-view :key="key" />
<!-- </keep-alive> -->
</el-main> </el-main>
</transition> </transition>
</section> </section>
...@@ -26,11 +24,11 @@ export default { ...@@ -26,11 +24,11 @@ export default {
.app-main { .app-main {
/* topbar 56 */ /* topbar 56 */
min-height: calc(100vh - 56px); // min-height: calc(100vh - 56px);
width: 100%; // width: 100%;
height: 100%; // height: 100%;
position: relative; // position: relative;
overflow: hidden; // overflow: hidden;
} }
.fixed-header + .app-main { .fixed-header + .app-main {
......
<template> <template>
<div :class="{'has-logo':showLogo}"> <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="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
...@@ -14,7 +13,6 @@ ...@@ -14,7 +13,6 @@
> >
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu> </el-menu>
</el-scrollbar>
</div> </div>
</template> </template>
...@@ -23,7 +21,6 @@ import { mapGetters } from 'vuex' ...@@ -23,7 +21,6 @@ import { mapGetters } from 'vuex'
import Logo from './Logo' import Logo from './Logo'
import SidebarItem from './SidebarItem' import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss' import variables from '@/styles/variables.scss'
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
computed: { computed: {
......
...@@ -2,35 +2,43 @@ ...@@ -2,35 +2,43 @@
<div :class="classObj" class="app-wrapper"> <div :class="classObj" class="app-wrapper">
<licbar /> <licbar />
<topbar /> <topbar />
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> <de-container style="padding-top: 56px;">
<div :class="{sidebarHide: sidebar.hide}" class="main-container"> <de-aside-container v-if="!sidebar.hide">
<div :class="{'fixed-header':fixedHeader}"> <sidebar class="sidebar-container" />
<!-- <navbar /> --> </de-aside-container>
</div>
<de-main-container class="la-main-container">
<app-main /> <app-main />
<right-panel v-if="showSettings"> </de-main-container>
<settings /> </de-container>
</right-panel>
</div> <!-- <de-main-container>
<app-main />
</de-main-container> -->
<!-- <div :class="{sidebarHide: sidebar.hide}" class="main-container">
<app-main />
</div> -->
</div> </div>
</template> </template>
<script> <script>
import RightPanel from '@/components/RightPanel' import { Sidebar, AppMain, Topbar, Licbar } from './components'
import { Sidebar, Settings, AppMain, Topbar, Licbar } from './components'
// import { Sidebar, Settings, AppMain, Topbar } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
export default { export default {
name: 'Layout', name: 'Layout',
components: { components: {
RightPanel,
Sidebar, Sidebar,
Settings,
AppMain, AppMain,
Topbar, Topbar,
Licbar Licbar,
DeMainContainer,
DeContainer,
DeAsideContainer
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
...@@ -70,8 +78,8 @@ export default { ...@@ -70,8 +78,8 @@ export default {
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
// height: 100%; height: 100%;
height: $contentHeight; // height: $contentHeight;
width: 100%; width: 100%;
&.mobile.openSidebar{ &.mobile.openSidebar{
position: fixed; position: fixed;
...@@ -104,4 +112,8 @@ export default { ...@@ -104,4 +112,8 @@ export default {
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
.la-main-container {
padding: 0px !important;
}
</style> </style>
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
} }
.sidebar-container { .sidebar-container {
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; // width: $sideBarWidth !important;
background-color: $menuBg; background-color: $menuBg;
// height: 100%; // width: 260px;
height: $contentHeight; height: $contentHeight;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
left: 0; left: 0;
z-index: 999; z-index: 999;
overflow: hidden; overflow: hidden;
border-right: 1px solid rgba(0, 0, 0, 0.12); // min-width: 260px;
// max-width: 400px;
// border-right: 1px solid rgba(0, 0, 0, 0.12);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论