<template>
|
<div class="home-index-page" ref="page" :style="{height:pageHeight}">
|
<div class="block-left">
|
<div class="block-left-top"><module-a /></div>
|
<div class="block-left-bottom"><module-b /></div>
|
</div>
|
<div class="block-right"><module-c /></div>
|
</div>
|
</template>
|
|
<script>
|
import ModuleA from './ModuleA.vue'
|
import ModuleB from './ModuleB.vue'
|
import ModuleC from './ModuleC.vue'
|
export default {
|
name:'homeIndexPage',
|
components:{ModuleA,ModuleB,ModuleC},
|
data(){
|
return {
|
pageHeight:'100%'
|
}
|
},
|
watch:{
|
'$store.state.app.multiTab':{
|
deep:true,
|
handler:(newVal,oldVal)=>{
|
this.calPageHeight(newVal)
|
}
|
}
|
},
|
methods:{
|
calPageHeight(hasTab){
|
if (hasTab) {
|
let _h = this.$refs.page.clientHeight;
|
if (_h) {
|
this.pageHeight = (_h-42)+'px'
|
}
|
} else {
|
this.pageHeight = '100%';
|
}
|
},
|
initPageHeight(callback){
|
setTimeout(()=>{
|
this.calPageHeight(this.$store.state.app.multiTab)
|
callback && callback()
|
},100)
|
}
|
},
|
mounted(){
|
this.initPageHeight()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home-index-page{
|
overflow: hidden;
|
display: flex;
|
min-width: 1000px;
|
.block-right{
|
width:30%;
|
min-width:300px;
|
flex-shrink: 0;
|
}
|
.block-left{
|
flex-grow: 1;
|
box-sizing: border-box;
|
padding-right: 24px;
|
display: flex;
|
flex-direction: column;
|
.block-left-top{
|
flex-shrink: 0;
|
}
|
.block-left-bottom{
|
flex-grow: 1;
|
}
|
}
|
}
|
</style>
|
