duoji-frontend/src/layouts/PageContent.vue

<template>
    <div class="wrap">
        <!-- 面包屑下标题 -->
        <keep-alive>
            <router-view :exclude="['checkManage']" class="table"></router-view>
        </keep-alive>
        
        <!-- footer -->
        <div class="wrap-footer bg-white">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script type="text/javascript">
export default {
    name: "PageContent",
    data() {
        return {
            title: "",
            footerStyle: false
        };
    },
    watch: {
        $route(route) {
            this.title = route.meta.title || route.meta.name;
        }
    },
    computed: {},
    mounted() {
        this.title = this.$route.meta.title || this.$route.meta.name;
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
    .wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        &-title {
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0 20px 24px;
            font-size: 18px;
            &-text {
                font-weight: bold;
                flex: 1;
            }
        }

        &-header {
            background: #fff;
            border-bottom: 1px solid #e1e1e1;
        }

        &-cont {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 0 24px;

            &-cover {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 24px 0;
            }
        }

        &-container {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow-x: auto;
            background-color: #fff;
            & > div {
                padding: 24px;
                overflow-x: hidden;
            }
        }
        &-footer {
            position: fixed;
            left: 0;
            bottom: 0;
            padding-left: 256px;
            // padding-left: 50%;
            width: 100%;
            text-align: center;
            z-index: 2;
        }
        .table{
            background: #ffffff;
            margin: 8px 20px;
            min-height: calc(100vh - 100px);
            padding: 20px;
        }
    }
</style>