<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;
}

/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid @gray;
    border-bottom-color: @themeColor;
    border-radius: 3px 3px 0 0;
    font-size: 14px;
    font-weight: bold;

    &:first-child {
        border-right-color: transparent;
    }

    &:nth-child(2) {
        border-left-color: transparent;
    }

    &.is-active {
        border: 1px solid @themeColor;
        border-bottom-color: #ffffff;
        // font-size: 16px;
        // height: 40px;
        // line-height: 40px;
    }
}
</style>
