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{*/
	/*	heighheight: 50px;*/
    /*padding-bottom: constant(safe-area-inset-bottom);*/
    /*padding-bottom: env(safe-area-inset-bottom);*/
    /*box-sizing: content-box;*/
    /*background-color: #fff;*/
    /*!*box-shadow: 0 0 0.27rem #e5e5e5;*!*/
	/*	.footer-bar{*/
	/*		position: absolute;*/
    /*  bottom: constant(safe-area-inset-bottom);*/
    /*  bottom: env(safe-area-inset-bottom);*/
	/*	}*/
	/*}*/


	.footer_body{
		height: 2rem;
	}
	.footer_nav{
		height: 2.0rem;
		background-color: #fff;
		/*box-shadow: 0 0 0.27rem #e5e5e5;*/
		.footer-bar{
			position: absolute;
			/*bottom: 0.6rem;*/
		}
	}

  .van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
    border: 0;
  }

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

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