GCLS_Page_Learn/src/views/teacher/main/index.vue

<template>
  <div class="main-container">
    <div class="menu">
      <span
        v-for="item in menuList"
        :key="item.id"
        v-t="item.name"
        :class="['menu-tab', { active: currentTab === item.tab }]"
        @click="currentTab = item.tab"
      />
    </div>
    <keep-alive>
      <component :is="currentTabComponent" />
    </keep-alive>
  </div>
</template>

<script>
import TaskList from './TaskList';
import CurriculaList from './CurriculaList';
import { updateWordPack } from '@/utils/i18n';

export default {
  name: 'Main',
  components: {
    TaskList,
    CurriculaList
  },
  data() {
    return {
      currentTab: this.$route.query.tab || 'TaskList',
      menuList: [
        {
          id: 1,
          name: '任务列表',
          tab: 'TaskList'
        },
        {
          id: 2,
          name: '课程列表',
          tab: 'CurriculaList'
        }
      ]
    };
  },
  computed: {
    currentTabComponent: function () {
      return this.currentTab;
    }
  },
  created() {
    updateWordPack({
      word_key_list: [
        'Learn_Task_Panel',
        'Learn_Course_Management',
        'Learn_Task_No_Started',
        'Learn_Task_Has_Begun',
        'Learn_Task_Over'
      ]
    });
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.main-container {
  @include container;

  height: calc(100% - 19px);

  // 切换菜单
  .menu {
    width: 318px;
    border-radius: 30px;
    margin-bottom: 32px;
    background-color: #ebebeb;

    &-tab {
      display: inline-block;
      height: 48px;
      line-height: 30px;
      font-size: 20px;
      padding: 9px 39px;
      border-radius: 30px;
      background-color: #ebebeb;
      color: #9f9f9f;
      cursor: pointer;

      &.active {
        color: #fff;
        font-weight: 700;
        background-color: $basicColor;
      }
    }
  }
}
</style>