FE-lab-xcx/pages_safetyEducationExamination/component/tabBar.vue

<!-- 教育考试tab导航 -->
<template>
	<view class="safetyEducationExamination-tab-bar">
		<view class="flex-full-p"></view>
		<view class="button-box" @click="checkButton(1)">
			<span class="tab-icon">🏠</span>
			<view :class="checkButtonType == 1?'check-p':''">工作台</view>
		</view>
		<view class="flex-full-p"></view>
		<view class="button-box" @click="checkButton(2)">
			<span class="tab-icon">📚</span>
			<view :class="checkButtonType == 2?'check-p':''">学习培训</view>
		</view>
		<view class="flex-full-p"></view>
		<view class="button-box" @click="checkButton(3)">
			<span class="tab-icon">🎓</span>
			<view :class="checkButtonType == 3?'check-p':''">在线考试</view>
		</view>
		<view class="flex-full-p"></view>
		<view class="button-box" @click="checkButton(4)">
			<span class="tab-icon">✏️</span>
			<view :class="checkButtonType == 4?'check-p':''">刷题练习</view>
		</view>
		<view class="flex-full-p"></view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		systemMineUserEdit
	} from '@/pages_safetyEducationExamination/api/index.js'
	let currentTabCache = 1;
	export default {
		data() {
			return {
				checkButtonType: currentTabCache,
			}
		},
		created() {
			uni.$on('update-tab-bar', (type) => {
				this.checkButtonType = type;
				currentTabCache = type;
			});
		},
		beforeDestroy() {
			uni.$off('update-tab-bar');
		},
		methods: {
			checkButton(type){
				if (this.checkButtonType != type) {
					this.checkButtonType = type;
					currentTabCache = type;
					uni.$emit('update-tab-bar', type);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-tab-bar {
		// height:80rpx;
		display: flex;
		padding: 20rpx 0 30rpx;
		background-color: #fff;

		.flex-full-p {
			flex: 1;
		}

		.button-box {
			width: 140rpx;
			display: flex; 
			flex-direction: column; 
			align-items: center;
			view {
				text-align: center;
				margin-top:20rpx;
				font-size:24rpx;
			}
			.check-p{
				color:#1857d4;
			}
			span {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50rpx;
				height: 50rpx;
				font-size: 50rpx;
				--blue: #1857d4;
				--blue-deep: #0f3ea8;
				--blue-mid: #2e6fe0;
				--blue-light: #eef3fd;
				--blue-xlight: #f5f8ff;
				--green: #10a37f;
				--green-dark: #0d8f6f;
				--green-light: #edfaf6;
				--orange: #e67e22;
				--orange-light: #fef6ec;
				--red: #e53e3e;
				--red-light: #fff5f5;
				--gray: #8896a7;
				--gray-light: #f4f6fa;
				--gray-border: #dde3ed;
				--text-primary: #1a2233;
				--text-secondary: #4a5568;
				--text-hint: #8896a7;
				--bg: #f0f4fb;
				--white: #ffffff;
				--radius: 12px;
				--shadow: 0 2px 12px rgba(24, 87, 212, .08);
				--shadow-md: 0 4px 20px rgba(24, 87, 212, .12);
				--header-bg: linear-gradient(135deg, #1857d4 0%, #2e6fe0 100%);
			}
		}
	}
</style>