Adam / gulu-admin

Blame view

src/layout/index.vue 2.21 KB
edit raw normal view history
80a28914e   吉鹏   init 
1
2
3
4
 
  <template>
    <div :class="classObj" class="app-wrapper">
      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
      <sidebar class="sidebar-container" />
d7d9c38c2   Adam   auto commit the c... 
5
 
      <div :class="{hasTagsView:needTagsView}" class="main-container">
80a28914e   吉鹏   init 
6
7
 
        <div :class="{'fixed-header':fixedHeader}">
          <navbar />
d7d9c38c2   Adam   auto commit the c... 
8
 
          <tags-view v-if="needTagsView" />
80a28914e   吉鹏   init 
9
10
 
        </div>
        <app-main />
d7d9c38c2   Adam   auto commit the c... 
11
12
13
 
        <right-panel v-if="showSettings">
          <settings />
        </right-panel>
80a28914e   吉鹏   init 
14
15
16
17
18
 
      </div>
    </div>
  </template>
  
  <script>
d7d9c38c2   Adam   auto commit the c... 
19
20
 
  import RightPanel from '@/components/RightPanel'
  import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
80a28914e   吉鹏   init 
21
 
  import ResizeMixin from './mixin/ResizeHandler'
d7d9c38c2   Adam   auto commit the c... 
22
 
  import { mapState } from 'vuex'
80a28914e   吉鹏   init 
23
24
25
26
 
  
  export default {
    name: 'Layout',
    components: {
d7d9c38c2   Adam   auto commit the c... 
27
 
      AppMain,
80a28914e   吉鹏   init 
28
 
      Navbar,
d7d9c38c2   Adam   auto commit the c... 
29
30
 
      RightPanel,
      Settings,
80a28914e   吉鹏   init 
31
 
      Sidebar,
d7d9c38c2   Adam   auto commit the c... 
32
 
      TagsView
80a28914e   吉鹏   init 
33
34
35
 
    },
    mixins: [ResizeMixin],
    computed: {
d7d9c38c2   Adam   auto commit the c... 
36
37
38
39
40
41
42
 
      ...mapState({
        sidebar: state => state.app.sidebar,
        device: state => state.app.device,
        showSettings: state => state.settings.showSettings,
        needTagsView: state => state.settings.tagsView,
        fixedHeader: state => state.settings.fixedHeader
      }),
80a28914e   吉鹏   init 
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
      classObj() {
        return {
          hideSidebar: !this.sidebar.opened,
          openSidebar: this.sidebar.opened,
          withoutAnimation: this.sidebar.withoutAnimation,
          mobile: this.device === 'mobile'
        }
      }
    },
    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%;
d7d9c38c2   Adam   auto commit the c... 
69
70
 
  
      &.mobile.openSidebar {
80a28914e   吉鹏   init 
71
72
73
74
 
        position: fixed;
        top: 0;
      }
    }
d7d9c38c2   Adam   auto commit the c... 
75
 








80a28914e
 
 吉鹏
 
init




76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102




    .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%;
    }
  </style>