simulation-front/src/views/index.vue

<template>
    <div id="main" v-bind:class="{ fold: isFold }">
        <page-menu @menuFold="menuFold"></page-menu>
        <bread-crumb></bread-crumb>
        <router-view class="mainBox"></router-view>
    </div>
</template>

<script>
// @ is an alias to /src
import pageMenu from "./page/pageMenu";
import breadCrumb from "@/views/page/breadCrumb";

export default {
    name: "index",
    components: {
        pageMenu,
        breadCrumb,
    },
    data() {
        return {
            isFold: false, // menu是否折叠
        };
    },
    methods: {
        menuFold(flag) {
            this.isFold = flag;
        },
    },
};
</script>

<style scoped lang="less">
#main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-left: 150px;
}

#main.fold {
    padding-left: 60px;
}

.mainBox {
    padding-bottom: 60px;
}
</style>