zdxtLawEnforcementCodeView/src/components/footer-enforcement-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-o" to="/enforceHome">{{
				$t("common.lang_home")
			}}</van-tabbar-item>
			<van-tabbar-item name="Classify" replace icon="shop-o" to="/classify">
				预警
			</van-tabbar-item>
			<van-tabbar-item
				name="Shop"
				replace
				icon="cart-o"
				to="/shop"
				:dot="data.dot"
				:badge="goodsNum"
				>预约</van-tabbar-item
			>
      <van-tabbar-item
				name="Shop"
				replace
				icon="cart-o"
				to="/shop"
				:dot="data.dot"
				:badge="goodsNum"
				>计划</van-tabbar-item
			>
			<van-tabbar-item name="My" replace icon="manager-o" to="/my">{{
				$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,
});

const goodsNum = computed(() => {
	return useCommon.goods_card_num;
});
</script>
<style lang="less" scoped>
	.footer_nav{
		height: 50px;
		.footer-bar{
			position: absolute;
			bottom: 0;
		}
	}
</style>