exam/exam-06173-vue/src/views/web/ucenter/index.vue

<template>

  <el-row :gutter="20">

    <el-col :span="24">
      <user-banner />
    </el-col>
    <el-col :span="24">

      <el-card style="margin-top: -5px; padding-top: 50px">
        <el-tabs v-model="activeTab" class="uc-tab" @tab-click="tabClick">
          <el-tab-pane label="用户信息" name="first">
            <update-info />
          </el-tab-pane>

          <el-tab-pane label="修改密码" name="second">
            <update-pass />
          </el-tab-pane>

          <el-tab-pane label="我的成绩" name="eight">
            <my-paper />
          </el-tab-pane>

          <el-tab-pane label="训练记录" name="third">
            <train-history />
          </el-tab-pane>

          <el-tab-pane label="学习记录" name="four">
            <my-file-learn />
          </el-tab-pane>

          <el-tab-pane label="我的问答" name="seven">
            <course-qa :is-mine="true" />
          </el-tab-pane>

          <!-- <el-tab-pane label="积分日志" name="six">
            <points-log />
          </el-tab-pane> -->

        </el-tabs>
      </el-card>

    </el-col>
  </el-row>

</template>

<script>

import { mapGetters } from 'vuex'
import UserBanner from './components/UserBanner'
import TrainHistory from './components/TrainHistory'
import PointsLog from './components/PointsLog'
import MyFileLearn from '@/views/web/ucenter/components/MyFileLearn'
import CourseQa from '@/views/web/course/qa'
import UpdateInfo from '@/views/web/ucenter/components/UpdateInfo'
import UpdatePass from '@/views/web/ucenter/components/UpdatePass'
import MyPaper from '@/views/web/paper/total'

export default {
  components: { MyPaper, UpdatePass, UpdateInfo, CourseQa, MyFileLearn, PointsLog, TrainHistory, UserBanner },

  data() {
    return {
      activeTab: 'first'
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'realName'
    ])
  },

  created() {
    const active = localStorage.getItem('uc:tab:active')
    if (active != null && active !== '') {
      this.activeTab = active
    }
  },
  methods: {

    tabClick(e) {
      // 保存状态
      localStorage.setItem('uc:tab:active', e.name)
    }

  }
}
</script>

<style scoped>

  .el-tab-pane{
    padding-top: 20px;
  }

  ::v-deep
  .el-tabs__item {

  }

  ::v-deep
  .el-tabs__nav-scroll {
    background: #F7F9FE;
  }

</style>