workApp/pages/teacherStudy/index.vue

<template>
	<view class="page_body">
		<!-- 课程中心 -->
		<course-center v-if="state.tabBarValue=='courseCenter'"></course-center>
		<!-- 我的研修 -->
		<my-learning v-if="state.tabBarValue=='myLearning'"></my-learning>
		<!-- 研修监控 -->
		<learning-monitor v-if="state.tabBarValue=='learningMonitor'"></learning-monitor>
		<!-- 底部tabbar -->
		<page-tabbar :tabBarValue="state.tabBarValue" :tabBarList="state.tabBarList" @ChangeTabBarValue="ChangeTabBarValue"></page-tabbar>
	</view>
</template>

<script setup>
	import pageTabbar from '@/components/page-tabbar.vue';//头部
	import courseCenter from './courseCenter/index.vue';//课程中心
	import myLearning from './myLearning/index.vue';//我的研修
	import learningMonitor from './learningMonitor/index.vue';//研修监控
	import { reactive, ref } from 'vue';
	const state = reactive({
		tabBarValue:'courseCenter',
		tabBarList:[{
			"pathName":"courseCenter",
			"iconPath": "/static/image/tabbar/courseCenter.png",
			"selectedIconPath": "/static/image/tabbar/courseCenter_cur.png",
			"text": "课程中心"
		},{
			"pathName":"myLearning",
			"iconPath": "/static/image/tabbar/myLearning.png",
			"selectedIconPath": "/static/image/tabbar/myLearning_cur.png",
			"text": "我的研修"
		},{
			"pathName":"learningMonitor",
			"iconPath": "/static/image/tabbar/learningMonitor.png",
			"selectedIconPath": "/static/image/tabbar/learningMonitor_cur.png",
			"text": "研修监控"
		}]
	})
	//切换tabBar
	const ChangeTabBarValue = (name) => {
		state.tabBarValue = name;
	}
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
	}
</style>