123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <template>
- <div class="app-wrapper" :class="classObj">
- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
- <navbar></navbar>
-
- <div class="Header-container">
- <sidebar class="sidebar-container" @callBackIndex="handleIndex"></sidebar>
- <!-- <sidebar class="newSide" @callBackIndex="handleIndex"></sidebar> -->
- <div class="main-container">
- <tags-view :index="index" :num="num"></tags-view>
- <app-main></app-main>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import { Navbar, Sidebar, AppMain, TagsView } from "./components";
- import ResizeMixin from "./mixin/ResizeHandler";
-
- export default {
- name: "layout",
- components: {
- Navbar,
- Sidebar,
- AppMain,
- TagsView
- },
- mixins: [ResizeMixin],
- computed: {
- sidebar() {
- return this.$store.state.app.sidebar;
- },
- device() {
- return this.$store.state.app.device;
- },
- classObj() {
- return {
- hideSidebar: !this.sidebar.opened,
- openSidebar: this.sidebar.opened,
- withoutAnimation: this.sidebar.withoutAnimation,
- mobile: this.device === "mobile"
- };
- }
- },
- data() {
- return {
- index: 0,
- num: 1
- };
- },
- methods: {
- handleClickOutside() {
- this.$store.dispatch("closeSideBar", { withoutAnimation: false });
- },
- handleIndex(data, num) {
- // console.log({ prop: data });
- this.index = data;
- this.num = num;
- }
- }
- };
- </script>
-
- <style rel="stylesheet/scss" lang="scss" scoped>
- @import "src/styles/mixin.scss";
- .app-wrapper {
- @include clearfix;
- // position: relative;
- height: 100%;
- width: 100%;
- // &.mobile.openSidebar{
- // position: fixed;
- // top: 0;
- // }
- }
- .drawer-bg {
- background: #000;
- opacity: 0.3;
- width: 100%;
- top: 0;
- height: 100%;
- position: absolute;
- z-index: 999;
- }
- .newSide {
- width: 150px !important;
- height: 100%;
- position: fixed;
- top: 60px;
- bottom: 0;
- left: 0;
- z-index: 1001;
- overflow: hidden;
- }
- </style>
- <style lang="scss">
-
- </style>
|