simulation-front/src/views/index.vue

<template>
    <div id="main" v-bind:class="{ fold: isFold }">
        <page-menu @menuFold="menuFold" ref="menu"></page-menu>
        <bread-crumb></bread-crumb>
        <router-view class="mainBox" ref="curRouter"></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;
        },
    },
    mounted() {
        // localStorage.setItem(
        //     "Authorization",
        //     "Bearer 9882c634-9af6-4647-89dc-8ad53c04a56b"
        // );

        let { code, ticket } = this.$route.query;
        if (code && ticket) {
            this.$axios({
                method: "post",
                url: this.$api.common.single,
                data: { code, ticket },
            }).then((res) => {
                if (res.code == 200 && !!res.info.access_token) {
                    localStorage.setItem(
                        "Authorization",
                        "Bearer " + res.info.access_token
                    );
                    this.$nextTick(() => {
                        this.$refs.curRouter.init &&
                            this.$refs.curRouter.init();
                    });
                } else {
                    alert(res);
                }
            });
        }
    },
};
</script>

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

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

.fold {
    /deep/ .breadCrumbPanel {
        left: 60px;
    }
}

.mainBox {
    padding-bottom: 60px;
    overflow: auto;
}

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