54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div class="mine" :style="{height:height + 'px'}">
|
|
<NavTop :type="1" style="flex-shrink:0"></NavTop>
|
|
<div class="body">
|
|
<Menu></Menu>
|
|
<div class="container">
|
|
<router-view/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.mine{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.body{
|
|
display: flex;
|
|
width: 100%;
|
|
height: calc(100% - 57px);
|
|
.container{
|
|
width: calc(100% - 171px);
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: #F5F5F5;
|
|
padding: 23px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
import Menu from "@/components/Menu.vue";
|
|
import NavTop from "@/components/NavTop.vue"
|
|
|
|
export default defineComponent({
|
|
components:{
|
|
Menu,
|
|
NavTop
|
|
},
|
|
setup(){
|
|
console.log(1)
|
|
const height = ref(0);
|
|
onMounted(() => {
|
|
height.value = document.documentElement.clientHeight;
|
|
})
|
|
window.onresize=function(){
|
|
height.value = document.documentElement.clientHeight;
|
|
}
|
|
return {
|
|
height
|
|
}
|
|
}
|
|
})
|
|
</script> |