MinNan/components/mntabBar/mntabBar.vue

<template>
	<view>
		<view style="height: 75px"></view>
		<view class="cu-bar tabbar bg-gray shadow foot">
			<view class="action" :class="footerTab == '0' ? 'text-red' : 'text-black'" @tap="clickTabPath('/pages/index/index')">
				<!-- <u-icon name="https://huli-app.wenlvti.net/app_static/minnanhun/image/home_a.png" color="#a49086" size="20" labelPos="bottom"></u-icon> -->
				<image style="width: 32rpx; height: 30rpx" src="/static/image/home_a.png" mode=""></image>
				<view class="">首页</view>
			</view>

			<view class="action" :class="footerTab == '1' ? 'text-red' : 'text-black'" @tap="clickTabPath('/pages/jiyi/jiyi')">
				<!-- <u-icon name="https://huli-app.wenlvti.net/app_static/minnanhun/image/commossion_a.png" color="#a49086" size="20" labelPos="bottom"></u-icon> -->

				<image style="width: 32rpx; height: 30rpx" src="/static/image/commossion_a.png" mode=""></image>
				<view class="">记忆</view>
			</view>

			<view class="action add-action" :class="footerTab == '2' ? 'text-red' : 'text-black'" @tap="clickTabPath('/pages/chuanCheng/chuanCheng')">
				<view class="cuIcon-">
					<u-icon
						size="35"
						labelSize="22rpx"
						space="10rpx"
						:labelColor="footerTab == '2' ? '#CA5642' : '#666666'"
						name="/static/image/wajue.png"
						label="传承"
						labelPos="bottom"
					></u-icon>
				</view>
			</view>

			<view class="action" :class="footerTab == '3' ? 'text-red' : 'text-black'" @tap="clickTabPath('/pages/xueYuan/xueYuan')">
				<!-- <u-icon name="https://huli-app.wenlvti.net/app_static/minnanhun/image/invite_a.png" color="#a49086" size="20" labelPos="bottom"></u-icon> -->
				<image style="width: 40rpx; height: 36rpx" src="/static/image/invite_a.png.png" mode=""></image>
				<view class="">学院</view>
			</view>

			<view class="action" :class="footerTab == '4' ? 'text-red' : 'text-black'" @tap="clickTabPath('/pages/user/index')">
				<!-- <u-icon name="https://huli-app.wenlvti.net/app_static/minnanhun/image/mine_a.png" color="#a49086" size="20" labelPos="bottom"></u-icon> -->
				<image style="width: 40rpx; height: 36rpx" src="/static/image/mine_a.png" mode=""></image>
				<view class="">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'colorBar',
	props: {
		footerTab: {
			type: String,
			default: 0
		},
		messageCount: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		clickTabPath(url) {
			console.log(url);
			uni.switchTab({
				url: url
			});
		}
	}
};
</script>

<style>
.action {
	line-height: 25rpx !important;
}
</style>