ieplus-app/src/pagesStudy/pages/study-history/study-history.vue

<template>
  <ie-page bg-color="#F6F8FA" :fix-height="true">
    <ie-navbar title="学习记录" />
    <view class="bg-white sticky z-1" :style="{ top: baseStickyTop + 'px' }">
      <uv-tabs :list="list" :current="current" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
        :scrollable="false" @change="handleTabChange"></uv-tabs>
    </view>
    <view class="h-20"></view>
    <knowledge-history v-if="current === 0" />
    <exam-history v-if="current === 1" />
    <practice-history v-if="current === 2" />
    <video-history v-if="current === 3" />
  </ie-page>
</template>

<script lang="ts" setup>
import { useNavbar } from '@/hooks/useNavbar';
import knowledgeHistory from './components/knowledge-history.vue'
import examHistory from './components/exam-history.vue'
import practiceHistory from './components/practice-history.vue'
import videoHistory from './components/video-history.vue'
const { baseStickyTop } = useNavbar();
const current = ref(0);
const list = [
  { name: '知识点记录', },
  { name: '试卷记录', },
  { name: '刷题总量', },
  { name: '视频总数', }
]
const activeStyle = {
  fontWeight: 'bold',
  color: '#31A0FC'
}
const inactiveStyle = {
  color: '#999999'
}
const handleTabChange = (e: any) => {
  current.value = e.index;
}
</script>

<style lang="scss" scoped></style>