73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<template>
|
|
<div class="main-page">
|
|
<HeaderBar/>
|
|
<MenuPanel ref="menuPanel"/>
|
|
<div id="content-container">
|
|
<ContentZone/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import HeaderBar from '@/pages/main-zone/header-bar/HeaderBar.vue'
|
|
import ContentZone from '@/pages/main-zone/content-zone/ContentZone.vue'
|
|
import { useLoadingBar } from '@idux/components/loading-bar'
|
|
import Evt from '@/common/utils/evt.ts'
|
|
import MenuPanel from '@/pages/main-zone/menu-panel/MenuPanel.vue'
|
|
|
|
const {start, finish, error} = useLoadingBar()
|
|
const menuPanel = ref<InstanceType<typeof MenuPanel>>()
|
|
|
|
onMounted(() => {
|
|
menuPanel.value!.showMenuPanel = true
|
|
})
|
|
|
|
Evt.on('loading', e => {
|
|
switch (e) {
|
|
case 'start':
|
|
start()
|
|
break
|
|
case 'finish':
|
|
finish()
|
|
break
|
|
case 'error':
|
|
error()
|
|
break
|
|
}
|
|
})
|
|
onUnmounted(() => Evt.off('loading'))
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.main-page {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#content-container {
|
|
height: calc(100% - 4.1rem);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
:deep(.ix-drawer-content > .ix-header) {
|
|
box-shadow 0 1px 0 var(--ix-color-border-secondary);
|
|
}
|
|
|
|
:deep(.ix-drawer-wrapper),
|
|
:deep(.ix-drawer-mask) {
|
|
position: absolute;
|
|
}
|
|
|
|
:deep(.ix-drawer-start .ix-drawer-content) {
|
|
box-shadow: none
|
|
}
|
|
|
|
:deep(.ix-drawer-start .ix-drawer-content .ix-drawer-body) {
|
|
overflow hidden
|
|
}
|
|
}
|
|
</style>
|