<style lang="less" scoped>
@import "./Index.less";
</style>
<style lang="less">
@import "./IndexIview.less";
</style>

<template>
    <div class="sc-container" id="calc-height-flag">
        <!-- tab切换 -->
        <div class="stu-mgt-header">
            <div class="tab-box">
                <span class="pane" @click="tabClick('StuMgt')" :class="{ active: tab === 'StuMgt' }">
                    {{$t('stuAccount.stuMgt')}}
                </span>
                <span class="pane" @click="tabClick('Class')" :class="{ active: tab === 'Class' }">
                    {{$t('stuAccount.adminClass')}}
                </span>
                <span class="pane" @click="tabClick('StuList')" :class="{ active: tab === 'StuList' }">
                    {{$t('stuAccount.teachClass')}}
                </span>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tab: 'StuMgt'
        }
    },
    methods: {
        tabClick(tab) {
            this.$router.push({
                name: tab
            })
        }
    },
    watch: {
        '$route': {
            handler(n, o) {
                this.tab = n.name
            },
            deep: true,
            immediate: true
        }
    }
}
</script>

