bn-q-icon/components/Tab/Tab.vue

<template>
	<view class="bottom top-border">
		<view class="nav-box">
			<view class="nav-tab" @click="toIndex(0)">
				<view class="nav-icon">
					<image :src="businessHighlightUrl" v-if="index === 0" class="home-img image"></image>
					<image :src="business" v-else class="home-img image"></image>
				</view>
				<view class="nav-text" :class="{textColor:index === 0}">
					首页
				</view>
			</view>
			<view class="nav-tab" @click="toIndex(1)">
				<view class="nav-icon">
					<image :src="homeHighlightUrl" v-if="index === 1" class="home-img image"></image>
					<image :src="homeUrl" v-else class="home-img image"></image>
				</view>
				<view class="nav-text" :class="{textColor:index === 1}">
					我的事务
				</view>
			</view>
			<view class="nav-tab" @click="toIndex(2)">
				<view class="nav-icon">
					<image :src="newsHighlightUrl" v-if="index === 2" class="home-img image"></image>
					<image :src="newsUrl" v-else class="home-img image"></image>
				</view>
				<view class="nav-text" :class="{textColor:index === 2}">
					福航动态
				</view>
			</view>
			<view class="nav-tab" @click="toIndex(3)">
				<view class="nav-icon">
					<image :src="myHighlightUrl" v-if="index === 3" class="home-img image"></image>
					<image :src="myUrl" v-else class="home-img image"></image>
				</view>
				<view class="nav-text" :class="{textColor:index === 3}">
					个人中心
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {},
		},
		components: {},
		data() {
			return {
				// index: 0,
				business: require('@/static/tabBar/business.png'),
				businessHighlightUrl: require('@/static/tabBar/business-highlight.png'),
				myUrl: require('@/static/tabBar/my.png'),
				myHighlightUrl: require('@/static/tabBar/my-highlight.png'),
				homeUrl: require('@/static/tabBar/home.png'),
				homeHighlightUrl: require('@/static/tabBar/home-highlight.png'),
				newsUrl: require('@/static/tabBar/news.png'),
				newsHighlightUrl: require('@/static/tabBar/news-highlight.png'),
			}
		},
		onLoad() {

		},
		methods: {
			toIndex(index) {
				// this.index = index
				this.$emit('toIndex', index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 49px;
		background: #fff;
		z-index: 999;

		.nav-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100%;
		}
	}

	.nav-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50px;

		.image {
			display: block;
			width: 24px;
			height: 24px;
		}

		.nav-text {
			color: #999999;
			margin-top: 3px;
			font-size: 10px;
		}

		.textColor {
			color: #C79F6C;
		}
	}
</style>