front/src/views/questioncenter/LearnHelper.vue

<template>
  <div class="learn_container">
    <el-card class="header" style="padding-bottom: 0">
      <div class="tab">
        <div
          class="tab_item pointer"
          v-for="item in  tabList"
          :class="tabActive == item.value ? 'tab_active' : ''"
          @click="switchTab(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </el-card>
    <!-- 收藏夹 -->
    <div class="content">
      <collect v-if="tabActive == 0"></collect>
      <!-- 错题本 -->
      <mistake v-if="tabActive == 1"></mistake>
      <!-- 学习记录 -->
      <learn-record v-if="tabActive == 2"></learn-record>
    </div>

  </div>
</template>
<script>
import Collect from './components/collect'
import Mistake from './components/mistake'
import LearnRecord from './components/learn-record'
export default {
  components: { Collect, Mistake, LearnRecord },
  data() {
    return {
      tabActive: 0,
      tabList: [
        {
          label: '收藏夹',
          value: 0
        },
        {
          label: '错题本',
          value: 1
        },
        {
          label: '学习记录',
          value: 2
        }
      ],
    }
  },
  created() {
    // 设置默认高亮
    this.tabActive = this.$route.query.tabActive
      ? this.$route.query.tabActive
      : 0
    this.switchTab(this.tabActive)
  },
  methods: {
    switchTab(index) {
      this.tabActive = index
    },
  }
}
</script>
<style scoped>
.learn_container {
  padding: 20px;
  background: #f7f7f7;
  min-height: 100vh;
}

.header {
  margin-bottom: 16px;
}

.content {
  background: #fff;
  padding: 20px;
}


.tab {
  display: flex;
  margin-bottom: 14px;
  border-bottom: 1px solid #dedede;
}


.tab .tab_item {
  flex: 1;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 22px;
  padding-bottom: 28px;
  position: relative;
}

.tab .tab_active {
  color: #47c6a2;
}

.tab .tab_active::after {
  content: "";
  height: 4px;
  width: 100%;
  background: #47c6a2;
  position: absolute;
  transform: translateY(50%);
  left: 0;
  bottom: 0;
}






</style>