关于basic layout布局设置，高度适配

直接贴代码

<template>
    <div class="basic-view-container">
        <div class="basic-view-header">
            <global-header></global-header>
        </div>
        <div class="basic-view-menu">
            <global-menu></global-menu>
        </div>
        <div class="basic-view-content">
            <router-view v-slot="{ Component }">
                <component :is="Component" v-if="!$route.meta.keepAlive" />
                <keep-alive>
                    <component :is="Component" v-if="$route.meta.keepAlive" />
                </keep-alive>
            </router-view>
        </div>
        <div class="basic-view-footer">
            <global-footer></global-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
export default {
    name: "BasicView",
    setup() {
        const state = reactive({
            
        })

        return {
            ...toRefs(state),
        };
    },
};
</script>

<style scoped lang="less">
.basic-view-container {
    min-width: @layout-width;  //与UI商定好内容展示区域的最小宽度
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    .basic-view-header{
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 1600;
    }
    .basic-view-content{
        flex: auto;
        background-color: @shallow-bg-color;
    }

}
</style>

说明

100vh仅在PC端比较适用，移动端尝试其他获取高度的方法
参考说明：
https://zhuanlan.zhihu.com/p/369515213
https://www.jianshu.com/p/f82e06abc10e/

移动端如何适配高度

【app.vue】
    function matchScreenHeight(){
        const matchFunc = () => {
            let svh = Number.parseFloat((window.innerHeight * 0.01).toFixed(4))
            document.documentElement.style.setProperty('--screenvh', `${svh}px`)
        }
        matchFunc()
        window.addEventListener('resize', () => {
            matchFunc()
        })
    }

    onMounted(()=>{
        matchScreenHeight()
    })


【demo.vue】
<style scoped lang="less">
.screen-height{  //网站移动端内容区域最小高度适配。如何调用 .screen-height();
    min-height: 100vh;  //此行：兼容某些不支持自定义属性的浏览器
    // min-height: calc(var(--screenvh, 1vh) * 100 - 46px);
    min-height: calc(var(--screenvh, 1vh) * 100);  //实时适配高度
}
.blank-view-container {
    width: 100%;
    .screen-height();
    background-color: #f7f7f7;
}
</style>

其他获取高度的方法举例

<template>
    <div class="basic-view-container" :style="`min-height:${pageMinHeight}px`">
        <div class="basic-view-header" ref="headerElem">
            <global-header></global-header>
        </div>
        <div class="basic-view-menu" ref="menuElem">
            <global-menu></global-menu>
        </div>
        <div class="basic-view-content" ref="contentElem">
            <router-view v-slot="{ Component }">
                <component :is="Component" v-if="!$route.meta.keepAlive" />
                <keep-alive>
                    <component :is="Component" v-if="$route.meta.keepAlive" />
                </keep-alive>
            </router-view>
        </div>
        <div class="basic-view-footer" ref="footerElem">
            <global-footer></global-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
export default {
    name: "BasicView",
    setup() {
        const state = reactive({
            pageMinHeight: 0,
            headerElem: null,
            menuElem: null,
            contentElem: null,
            footerElem: null,
        })

        function matchHeight(){
            state.pageMinHeight = window.innerHeight;  //规定页面最小高度
            state.menuElem.style.paddingTop=`${state.headerElem.offsetHeight}px`  //头部部分使用了定位，菜单部分需给向上padding值以实现占位
            state.contentElem.style.paddingBottom=`${state.footerElem.offsetHeight}px`  //底部部分使用了定位，内容部分需给向下padding值以实现占位
        }

        onMounted(() => {
            matchHeight()
            window.onresize = function(){
                matchHeight()
            }
        });

        return {
            ...toRefs(state),
        };
    },
};
</script>

<style scoped lang="less">
.basic-view-container {
     min-width: @layout-width;  //与UI商定好内容展示区域的最小宽度
    background-color: @shallow-bg-color;
    position: relative;
    .basic-view-header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1600;
    }
    .basic-view-content{
        position: relative;
    }
    .basic-view-footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }

}
</style>

当部分页面需要自定义背景色

<div class="bg-set"></div>
<div class="content">......</div>

.bg-set{
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.content{
    background-color: #fff;
    position: relative;
    z-index: 1;
}