<template>
    <div class="resource-container">
        <div class="resource-header">
            <span @click="tabClick('literacy')" :class="['resource-tab',routerName == 'literacy' ? 'resource-tab-active':'']">素养课程</span>
            <span @click="tabClick('diagnosis')" :class="['resource-tab',routerName == 'diagnosis' ? 'resource-tab-active':'']">规划诊断</span>
            <span @click="tabClick('probation')" :class="['resource-tab',routerName == 'probation' ? 'resource-tab-active':'']">优课资源</span>
            <span @click="tabClick('leadership')" :class="['resource-tab',routerName == 'leadership' ? 'resource-tab-active':'']">领导力课程</span>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerName: 'training'
        }
    },
    methods: {
        tabClick(router) {
            this.$router.push({
                name: router
            })
        },
        
    },
    mounted(){
        this.routerName = this.$route.name
    }
}
</script>
<style lang="less" scoped>
.resource-container{
    width: 100%;
    height: 100%;
    background: #f7f7f7;
}
.resource-header{
    height: 45px;
    line-height: 45px;
    padding-left: 16px;
    box-shadow: 0px 2px 5px #e9e9e9;
    background-color: white;
    position: relative;
}
.resource-tab{
    display: inline-block;
    line-height: 42px;
    cursor: pointer;
    color: #808695;
    margin: 0px 35px 0px 10px;
    user-select: none;
    font-size: 15px;
}
.resource-tab-active{
    border-bottom: 2px solid #2b85e4;
    color: #2b85e4;
    font-weight: 600;
}
</style>