zk-driver-wechat-applet/components/power-change-header/power-change-header.vue

<template>
	<view class="header">
		<navigator url="/pages/monitoring/index" open-type="redirect" :class="{'active':currentPage===1}">换电流程
		</navigator>
		<navigator url="/pages/carinfo/index" open-type="redirect" :class="{'active':currentPage===2}">车辆信息</navigator>
		<navigator url="/pages/batteryinfo/index" open-type="redirect" :class="{'active':currentPage===3}">电池信息
		</navigator>
	</view>
</template>

<script>
	export default {
		name: "power-change-header",
		data() {
			return {
				currentPage: 0,
			};
		},
		mounted() {
			this.getRoute()			
		},
		methods: {
			getRoute() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route
				if (route === 'pages/monitoring/index') {
					this.currentPage = 1
				} else if (route === 'pages/carinfo/index') {
					this.currentPage = 2
				} else if (route === 'pages/batteryinfo/index') {
					this.currentPage = 3
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		padding: 30rpx;
		width: 690rpx;
		color: #86909c;
		font-size: 32rpx;
		justify-content: space-around;
		.active {
			color: #1d2129;
			font-weight: bold;
			position: relative;
		}
		.active::after {
			content: '';
			background-image: url('@/static/line.png');
			background-size: 100% 100%;
			width: 52rpx;
			height: 9rpx;
			position: absolute;
			bottom: -25rpx;
			left: 32%;
		}
	}
</style>