jn_app/pages/common/stationTab.vue

<template>
	<view class="stationBar flex justify-between">
		<view class="stationBarItem" @click="changeTab('首页')">
			<image src="../../static/jnImage/indexPage/homeS.png" mode="" v-if="showTab === '首页'"></image>
			<image src="../../static/jnImage/indexPage/home.png" mode="" v-else></image>
			<view class="stationBarText" :style="showTab === '首页' ? 'color: #FF8902' : ''">首页</view>
		</view>
		<view class="stationBarItem" @click="changeTab('电量预测')">
			<image src="../../static/jnImage/indexPage/powerS.png" mode="" v-if="showTab === '电量预测'"></image>
			<image src="../../static/jnImage/indexPage/power.png" mode="" v-else></image>
			<view class="stationBarText" :style="showTab === '电量预测' ? 'color: #FF8902' : ''">电量预测</view>
		</view>
		<view class="stationBarItem" @click="changeTab('故障分类')">
			<image src="../../static/jnImage/indexPage/typeS.png" mode="" v-if="showTab === '故障分类'"></image>
			<image src="../../static/jnImage/indexPage/type.png" mode="" v-else></image>
			<view class="stationBarText" :style="showTab === '故障分类' ? 'color: #FF8902' : ''">故障分类</view>
		</view>
		<view class="stationBarItem" @click="changeTab('数据简报')">
			<image src="../../static/jnImage/indexPage/reportS.png" mode="" v-if="showTab === '数据简报'"></image>
			<image src="../../static/jnImage/indexPage/report.png" mode="" v-else></image>
			<view class="stationBarText" :style="showTab === '数据简报' ? 'color: #FF8902' : ''">数据简报</view>
		</view>
		<view class="stationBarItem" @click="changeTab('故障预警')">
			<image src="../../static/jnImage/indexPage/warnS.png" mode="" v-if="showTab === '故障预警'"></image>
			<image src="../../static/jnImage/indexPage/warn.png" mode="" v-else></image>
			<view class="stationBarText" :style="showTab === '故障预警' ? 'color: #FF8902' : ''">故障预警</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTab: '首页'
			};
		},
		methods: {
			changeTab(it) {
				this.showTab = it
				this.$emit('stationTab', it)
			}
		}
	}
</script>

<style lang="scss">
	.stationBar {
		padding: 0 20px;
		height: 50px;
		width: 100vw;
		background-color: #000;
		position: fixed;
		bottom: 0;

		.stationBarItem {
			text-align: center;
			position: relative;
			top: 6px;

			image {
				width: 20px;
				height: 20px;
			}

			.stationBarText {
				color: #6A98CB;
				font-size: 26upx;

			}
		}
	}
</style>