FE-lab-xcx/pages_safetyEducationExamination/views/home.vue

<!-- 教育考试首页 -->
<template>
	<view class="safetyEducationExamination-home">
		<view class="safetyEducationExamination-home-page">
			<workbench class="safetyEducationExamination-content" v-show="currentTab == 1"></workbench>
			<learning class="safetyEducationExamination-content" v-show="currentTab == 2"></learning>
			<online-exams class="safetyEducationExamination-content" v-show="currentTab == 3"></online-exams>
			<practice class="safetyEducationExamination-content" v-show="currentTab == 4"></practice>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		systemMineUserEdit
	} from '@/pages_safetyEducationExamination/api/index.js'
	import {
		workbench
	} from '@/pages_safetyEducationExamination/component/workbench/index'
	import {
		learning
	} from '@/pages_safetyEducationExamination/component/learning/index'
	import {
		onlineExams
	} from '@/pages_safetyEducationExamination/component/onlineExams/index'
	import {
		practice
	} from '@/pages_safetyEducationExamination/component/practice/index'
	import {
		tabBar
	} from '@/pages_safetyEducationExamination/component/tabBar'
	export default {
		components: {
			workbench,
			learning,
			onlineExams,
			practice,
			tabBar,
		},
		data() {
			return {
				currentTab: 1 ,
				tabTitles: {
					1: { title: '安全教育考试', bgColor: '#1857d4', frontColor: '#ffffff' },
					2: { title: '学习培训', bgColor: '#10a37f', frontColor: '#ffffff' },
					3: { title: '在线考试', bgColor: '#e67e22', frontColor: '#ffffff' },
					4: { title: '刷题练习', bgColor: '#ffffff', frontColor: '#000000' }
				}
			}
		},
		created() {
			uni.$on('update-tab-bar', (type) => {
				this.currentTab = type;
				const style = this.tabTitles[type];
				uni.setNavigationBarTitle({
					title: style.title
				});
				uni.setNavigationBarColor({
					frontColor: style.frontColor,      // 仅支持 #ffffff 和 #000000
					backgroundColor: style.bgColor,    // 必须是十六进制颜色
					animation: {
						duration: 200,                 // 设置 200ms 的过渡动画，体验更丝滑
						timingFunc: 'easeIn'
					}
				});
			});
		},
		onShow() {
			uni.$emit('update-tab-bar', this.currentTab);
		},
		methods: {

		},
		beforeDestroy() {
			uni.$off('update-tab-bar');
		}
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-home {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f0f4fb;
		.safetyEducationExamination-home-page{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.safetyEducationExamination-content{
				flex:1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}
		}
	}
</style>