| | |
| | | <template> |
| | | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
| | | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
| | | <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> |
| | | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
| | | <sidebar v-if="!sidebar.hide" class="sidebar-container" /> |
| | | <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
| | | <div :class="{'fixed-header':fixedHeader}"> |
| | | <navbar /> |
| | | <navbar ref="navbar"/> |
| | | <tags-view v-if="needTagsView" /> |
| | | </div> |
| | | <app-main /> |
| | |
| | | return variables; |
| | | } |
| | | }, |
| | | created() { |
| | | this.$nextTick(() => { |
| | | this.$refs.navbar.getTenantList(); |
| | | }); |
| | | }, |
| | | methods: { |
| | | handleClickOutside() { |
| | | this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
| | |
| | | top: 0; |
| | | right: 0; |
| | | z-index: 9; |
| | | width: calc(100% - #{$sideBarWidth}); |
| | | width: calc(100% - #{$base-sidebar-width}); |
| | | transition: width 0.28s; |
| | | } |
| | | |
| | | .hideSidebar .fixed-header { |
| | | width: calc(100% - 54px) |
| | | width: calc(100% - 54px); |
| | | } |
| | | |
| | | .sidebarHide .fixed-header { |
| | | width: 100%; |
| | | } |
| | | |
| | | .mobile .fixed-header { |