muck_truck_app/components/uni-tabbar/uni-tabbar.vue

<template>
	<u-tabbar :value="value" @change="changeTabbar" :fixed="true" :border="false" :placeholder="true"
		activeColor="#F59A02" :safeAreaInsetBottom="true">
		<u-tabbar-item text="首页" name="home">
			<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/nav_02.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/nav_01.png">
			</image>
		</u-tabbar-item>
		<u-tabbar-item text="企业信息" name="firm">
			<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/nav_04.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/nav_03.png">
			</image>
		</u-tabbar-item>
		<u-tabbar-item text="我的" name="my">
			<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/nav_06.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/nav_05.png">
			</image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: "home",
			},
	
		},
		data() {
			return {
				
			}
		},
		
		methods: {
			changeTabbar(name){
				console.log(name,'name');
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .u-tabbar__content {
		background-image: url('@/static/images/nav_bg.png');
		background-size: 100% 100%;
	}
	
	/deep/ .u-tabbar-item {
		height: 70px;
	}
	
	/deep/ .u-tabbar__content[data-v-542a922e] {
		background-color: transparent;
	}
	
	/deep/ .u-tabbar__content {
		height: 60px;
	}
	
	.u-page__item__slot-icon {
		width: 32px;
		height: 32px;
	}
	
	/deep/ .u-tabbar-item__text {
		font-size: 11px;
		font-weight: 400;
		color: #4A5D94;
	}
</style>