beelink/src/layout/Mine.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>