front/src/views/questioncenter/bestpaper.vue

<template >
  <div class="bestpaper_container">
    <el-card class="mb10">
      <div class="smart_tabs">
        <div
          class="tab pointer"
          v-for="item in tabList"
          :class="tabActive == item.code ? 'tab_active' : ''"
          @click="switchTab(item.code)"
        >
          {{ item.label }}
        </div>
      </div>
    </el-card>
    <div>
      <keep-alive>
        <famous-paper v-if="tabActive == 0"></famous-paper>
      </keep-alive>
      <keep-alive>
        <history-paper :queryYear="queryYear"  v-if="tabActive == 1"></history-paper>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import MxCondition from '@/components/MxCondition/mx-condition'
import HistoryPaper from './components/history-paper'
import FamousPaper from './components/famous-paper'

export default {
  components:{
    FamousPaper,
    MxCondition,
    HistoryPaper
  },
  data() {
    return {
      tabActive: 0,
      tabList:[
        {
          label:'名校试卷',
          code:0
        },
        {
          label:'历年真题',
          code:1
        }
      ],
      queryParams:{
        paperSubject:'',
        paperGrade:'',
        paperType:'',
        paperArea:'',
        paperYear:'',
      },
      queryYear:'',
      requireFields:['paperSubject','paperGrade','paperType','paperArea','paperYear'],

    };
  },
  created() {
    let query = this.$route.query;
    // 设置默认高亮
    this.tabActive = query.tabActive ? query.tabActive : 0;
    this.queryYear = query.year ? query.year : '';
  },

  methods: {
    handleQuery(){

    },
    handleInvalidQuery(){

    },
    switchTab(index) {
      this.tabActive = index;
    },
  },
};
</script>
<style scoped>
.bestpaper_container {
  padding: 20px;
}
.smart_tabs {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.smart_tabs .tab {
  text-align: center;
  flex: 1;
  padding: 8px 0 24px 0;
  border-bottom: 4px solid transparent;
}
.smart_tabs .tab_active {
  color: #47c6a2;
  border-bottom: 4px solid #47c6a2;
}

</style>