<template> <div :class="classObj" class="app-wrapper"> <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div class="main-container"> <div :class="{ 'fixed-header': fixedHeader }"> <navbar /> <tags-view /> </div> <app-main /> <div :class="{ 'fixed-footer': fixedFooter }"> <copyright /> </div> </div> </div> </template> <script> import { AppMain, Navbar, Sidebar, TagsView, Copyright } from "./components"; import ResizeMixin from "./mixin/ResizeHandler"; import { getDictDetails } from "@/api/common"; import Vue from "vue"; export default { name: "Layout", components: { Navbar, Sidebar, AppMain, TagsView, Copyright, }, mixins: [ResizeMixin], computed: { sidebar() { return this.$store.state.app.sidebar; }, device() { return this.$store.state.app.device; }, fixedHeader() { return this.$store.state.settings.fixedHeader; }, fixedFooter() { return this.$store.state.settings.fixedFooter; }, classObj() { return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === "mobile", }; }, }, created() { getDictDetails({ code: "AlarmCodes" }).then((res) => { Vue.prototype.$dict = res.data; }); }, mounted() {}, methods: { handleClickOutside() { this.$store.dispatch("app/closeSideBar", { withoutAnimation: false }); }, }, }; </script> <style lang="scss" scoped> @import "~@/styles/mixin.scss"; @import "~@/styles/variables.scss"; .app-wrapper { @include clearfix; position: relative; height: 100%; width: 100%; &.mobile.openSidebar { position: fixed; top: 0; } // overflow: scroll; } .drawer-bg { background: #000; opacity: 0.3; width: 100%; top: 0; height: 100%; position: absolute; z-index: 999; } .fixed-header { position: fixed; top: 0; right: 0; z-index: 9; width: calc(100% - #{$sideBarWidth}); transition: width 0.28s; } .hideSidebar .fixed-header { width: calc(100% - 54px); } .mobile .fixed-header { width: 100%; } .fixed-footer { position: fixed; bottom: 0; right: 0; z-index: 1000; width: calc(100% - #{$sideBarWidth}); transition: width 0.28s; } .hideSidebar .fixed-footer { width: calc(100% - 54px); } .mobile .fixed-footer { width: 100%; } </style>