离校前端框架,包括数据字典、工作队伍、新闻公告模块
diff --git a/leave-school-vue/src/views/layout/Layout.vue b/leave-school-vue/src/views/layout/Layout.vue
new file mode 100644
index 0000000..df7af87
--- /dev/null
+++ b/leave-school-vue/src/views/layout/Layout.vue
@@ -0,0 +1,74 @@
+<template>
+ <div class="app-wrapper" :class="classObj">
+ <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
+ <sidebar class="sidebar-container"></sidebar>
+ <div class="main-container">
+ <navbar></navbar>
+ <tags-view v-if='showtags'></tags-view>
+ <app-main></app-main>
+ </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: {
+ showtags() {
+ return process.env.SHOW_TAGS
+ },
+ 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'
+ }
+ }
+ },
+ methods: {
+ handleClickOutside() {
+ this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
+ }
+ }
+}
+</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;
+ }
+</style>