<template>
	<div class="bottomTapBar">
		<span :class="type == 'sy' ? 'active' : ''" @click="locationHrefHome"><img
				:src="type == 'sy' ? require('../assets/images/home-active.png') : require('../assets/images/home.png')" /><br />首页</span>
		<span :class="type == 'rw' ? 'active' : ''" @click="locationHref('/rw')"><img
				:src="type == 'rw' ? require('../assets/images/renwu-active.png') : require('../assets/images/renwu.png')" /><br />待办</span>
		<span :class="type == 'yyzx' ? 'active' : ''" @click="locationHref('/yyzx')"><img
				:src="type == 'yyzx' ? require('../assets/images/yinyong-active.png') : require('../assets/images/yinyong.png')" /><br />应用中心</span>
		<span :class="type == 'wd' ? 'active' : ''" @click="locationHref('/my')"><img
				:src="type == 'wd' ? require('../assets/images/my-active.png') : require('../assets/images/my.png')" /><br />我的</span>
	</div>
</template>

<script setup>
	import { defineEmits} from 'vue';
	import {useRouter} from 'vue-router';
	const router = useRouter();
	const props = defineProps({
		type: String, //选中的tab
	})
	//跳转路由
	function locationHref(url){
		router.replace(url)
	}
	function locationHrefHome(){
		router.replace('/xlmjHome');
	}
	
</script>

<style lang="scss" scoped>
	@import "../assets/styles/mixin.scss";

	/*每个页面公共css */
	.bottomTapBar {
		display: flex;
		position: fixed;
		z-index: 2;
		left: 0vw;
		bottom: 0vw;
		right: 0vw;
		height: 13.8666vw;
		@include bg_color($background-color-theme);
		@include bottm_tab_top_color($bottom-border-top-clore-theme);
	}

	.bottomTapBar span {
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 2.6666vw;
	}

	.bottomTapBar span.active {
		color: #4788E1;
	}

	.bottomTapBar span img {
		display: inline-block;
		width: 5.6vw;
		height: 5.6vw;
		margin-top: 1.8666vw;
		line-height: 5.3333vw;
	}
</style>
