zdxtLawEnforcementCodeView/src/components/footer-nav/index.vue

<template>
	<div class="footer_nav">
		<van-tabbar class="footer-bar" v-model="data.footerActive" :route="true" safe-area-inset-bottom>
			<van-tabbar-item name="Home" replace icon="wap-home" to="/home">{{
				$t("common.lang_home")
			}}</van-tabbar-item>
			<van-tabbar-item name="Classify" replace icon="bell" to="/enterprise/enterpriseInspectionNotice">
				行政检查通知
			</van-tabbar-item>
			<van-tabbar-item name="Classify" replace icon="todo-list" to="/enterprise/complaintList">
				投诉进度查询
			</van-tabbar-item>
			<!-- <van-tabbar-item name="My" replace icon="manager-o" to="">{{
				$t("common.lang_my")
			}}</van-tabbar-item> -->
		</van-tabbar>
	</div>
</template>

<script setup name="footerNav">

// const { useCommon } = $globalStore

let data = reactive({
	footerActive: "Home",
	dot: false,
});

</script>
<style lang="less" scoped>
	.footer_nav{
		height: 1.33rem;
    box-shadow: 0 0 0.27rem #e5e5e5;
		.footer-bar{
			position: absolute;
			bottom: 0;
		}
	}

  /deep/ .van-tabbar-item {
    color: #bbb;
  }

  /deep/ .van-tabbar-item--active{
    color: #1989fa;
  }
</style>