<template>
|
<el-container direction="vertical" style="height: 100vh;">
|
<el-header class="p-0">
|
<MyHeader @getUserInfoFlag="getUserInfoFlag=true"></MyHeader>
|
</el-header>
|
<el-main :style="{height: mainHeight}" class="custom-main p-0" >
|
<div v-if="getUserInfoFlag">
|
<router-view></router-view>
|
</div>
|
<div v-else :style="{'min-height': `${height-150}px`}" class="loading-container">
|
<CustomLoading />
|
</div>
|
<MyFooter></MyFooter>
|
</el-main>
|
<LoginDialog />
|
</el-container>
|
</template>
|
<script>
|
import { useWindowSize } from '@/utils/hook.js'
|
import MyHeader from '@/views/main/components/MyHeader.vue'
|
import MyFooter from '@/views/main/components/MyFooter.vue'
|
import LoginDialog from '@/views/login/index.vue'
|
import CustomLoading from '@/views/main/components/CustomLoading.vue'
|
export default {
|
components: {
|
MyHeader,
|
MyFooter,
|
LoginDialog,
|
CustomLoading
|
},
|
setup() {
|
const { height } = useWindowSize()
|
return { height }
|
},
|
data() {
|
return {
|
getUserInfoFlag: false
|
}
|
},
|
computed: {
|
mainHeight: function() {
|
return `${this.height - 60}px`
|
}
|
},
|
created() {
|
this.getUserInfo()
|
},
|
methods: {
|
getUserInfo() {
|
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
|
.custom-main {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
-ms-overflow-style: none; /* IE 和 Edge */
|
scrollbar-width: none; /* Firefox */
|
}
|
</style>
|
