<template>
|
<div>
|
<el-container :style="`overflow:hidden;height:${c1h}px;display: block;`" ref="container1">
|
<header-component ref="header" v-if="!$route.meta.hideHeader"
|
@handleMsgDialog="handleMsgDialog">
|
</header-component>
|
<el-container ref="container2" v-if="!$route.meta.hideHeader">
|
<transition name="slide-fade">
|
<el-aside v-if="$store.state.userTree && $store.state.userTree.length" class="aside"
|
id="menu-aside" :style="`height:${c1h-60}px;`">
|
<sidebar style="border-top-right-radius:10px;" :subMenuList='$store.state.userTree'>
|
</sidebar>
|
</el-aside>
|
</transition>
|
<el-container class="flex-container"
|
:style="{ background: $route.path == '/dash/home' ? '#fff' : '#f2f2f2',height:c1h-60 + 'px'}">
|
<MenuTabs @refresh-list='refreshList' :featching='featching'></MenuTabs>
|
<el-main class="main-container">
|
<el-container ref="container3" class="loading-mask" id="containerBox">
|
<el-main ref="main" id="main-container"
|
:style="`overflow-y: auto;height:${c1h - 160}px;overflow-x: hidden;`">
|
<router-view v-if="!featching"></router-view>
|
<div id="child-container"></div>
|
</el-main>
|
</el-container>
|
</el-main>
|
</el-container>
|
</el-container>
|
<router-view v-else></router-view>
|
</el-container>
|
<msg-notification-dialog :dialogVisible.sync="msgNotificationDialogVisible" title="消息通知">
|
</msg-notification-dialog>
|
</div>
|
</template>
|
<script>
|
import headerComponent from '@/views/layout/components/headerComponent.vue'
|
import sidebar from '@/views/layout/components/sidebar.vue'
|
import { mapGetters } from 'vuex'
|
import MenuTabs from './views/layout/components/MenuTabs.vue'
|
import msgNotificationDialog from '@/views/layout/components/msgNotificationDialog.vue'
|
// import eventBus from '@/views/blindBoxActivity/eventBus'
|
|
export default {
|
name: 'app',
|
components: { headerComponent, sidebar, MenuTabs, msgNotificationDialog },
|
data() {
|
return {
|
c1h: 0,
|
msgNotificationDialogVisible: false, // 消息通知弹窗状态
|
featching: false
|
}
|
},
|
computed: {
|
...mapGetters(['mainContainerHeight'])
|
},
|
mounted() {
|
var that = this
|
that.c1h = window.innerHeight
|
window.onresize = function() {
|
that.$nextTick(function() {
|
that.computeContainerSize()// 获取屏幕可视区域高度
|
})
|
}
|
},
|
watch: {
|
mainContainerHeight(newHeight, oldHeight) {
|
this.c1h = this.$refs.container1.$el.clientHeight
|
},
|
$route: {
|
handler: function() {
|
if (document.getElementById('main-container')) {
|
document.getElementById('main-container').scrollTop = 0
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
// 刷新列表
|
refreshList(item) {
|
this.featching = true
|
setTimeout(() => {
|
this.featching = false
|
}, 500);
|
},
|
/**
|
* 获取屏幕可视区域高度
|
*/
|
computeContainerSize() {
|
var that = this
|
var wh = window.innerHeight
|
that.c1h = wh
|
that.$nextTick(function() {
|
this.$refs.container1.$nextTick(function() {
|
var mh = this.$el.clientHeight
|
this.$store.dispatch('updateMainContainerHeight', mh)
|
})
|
})
|
},
|
/**
|
* 操作消息弹窗
|
*/
|
handleMsgDialog(bool) {
|
this.msgNotificationDialogVisible = bool;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import "./assets/styles/public.scss";
|
</style>
|
<style scoped>
|
.el-main {
|
margin: 20px;
|
padding: 0;
|
}
|
.main-container {
|
margin: 0;
|
}
|
.flex-container {
|
display: block;
|
}
|
/* 可以设置不同的进入和离开动画 */
|
/* 设置持续时间和动画函数 */
|
.slide-fade-enter-active,
|
.slide-fade-leave-active {
|
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
}
|
.slide-fade-enter, .slide-fade-leave-to
|
/* .slide-fade-leave-active for below version 2.1.8 */ {
|
transform: translateX(-10px);
|
opacity: 0;
|
}
|
.aside {
|
background: rgba(0, 0, 0, 0.85);
|
}
|
@media (min-width: 809px) {
|
.aside {
|
width: 160px !important;
|
}
|
}
|
@media (min-width: 1024px) {
|
.aside {
|
width: 180px !important;
|
}
|
} /*>=1024的设备*/
|
|
@media (min-width: 1100px) {
|
.aside {
|
width: 200px !important;
|
}
|
} /*>=1100的设备*/
|
@media (min-width: 1280px) {
|
.aside {
|
width: 225px !important;
|
}
|
} /*>=1280的设备*/
|
|
@media (min-width: 1366px) {
|
.aside {
|
width: 246px !important;
|
}
|
}
|
|
@media (min-width: 1440px) {
|
.aside {
|
width: 256px !important;
|
}
|
}
|
|
@media (min-width: 1680px) {
|
.aside {
|
width: 276px !important;
|
}
|
}
|
</style>
|
