assess-app/components/en-utils/en-tab/en-tab.vue

<template>
	<view class="tab-box tab_height sys-background-fff">
		<view class="tab-item " :class="{'tab-check':tabIndex==index}" @click="setTab(item.path,index)"
			v-for="(item,index) in tabList" :key="index">
			<view class="tab-content">
				<image class="tab-img"
					:src="`/static/img/tabBar/${tabIndex==index?item.selectedIconPath:item.iconPath}.png`"></image>
				<view class="tab-text sys-size-24 text-color-dominant">{{item.name}}</view>
			</view>
		</view>
		<!-- 		<view class="tab-item" :class="{'tab-check':tabIndex===2}" @click="setTab(2)">
			<view class="tab-content">
				<image v-if="tabIndex===2" class="tab-img" src="/static/img/tabBar/task-select.png"></image>
				<image v-else class="tab-img" src="/static/img/tabBar/task-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant">任务</view>
			</view>
		</view>
		<view class="tab-item" :class="{'tab-check':tabIndex===3}" @click="setTab(3)">
			<view class="tab-content">
				<image v-if="tabIndex===3" class="tab-img" src="/static/img/tabBar/loan-select.png"></image>
				<image v-else class="tab-img" src="/static/img/tabBar/loan-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant ">贷后</view>
			</view>
		</view>
		<view class="tab-item" :class="{'tab-check':tabIndex===4}" @click="setTab(3)">
			<view class="tab-content">
				<image v-if="tabIndex===4" class="tab-img" src="/static/img/tabBar/statistics-select.png"></image>
				<image v-else class="tab-img" src="/static/img/tabBar/statistics-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant ">统计</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: 'en-tab',
		props: {
			'tabIndex': {
				default: 0
			}
		},
		data() {
			return {
				tabList: [{
						name: '工作台',
						path: '/pages/index/index',
						iconPath: 'home-default',
						selectedIconPath: 'home-select',
					},
					{
						name: '任务',
						path: '/pages/task/task',
						iconPath: 'task-default',
						selectedIconPath: 'task-select',
					},
					{
						name: '贷后',
						path: '/pages/loan/loan',
						iconPath: 'loan-default',
						selectedIconPath: 'loan-select',
					},
					{
						name: '统计',
						path: '/pages/statistics/statistics',
						iconPath: 'statistics-default',
						selectedIconPath: 'statistics-select',
					},
				]
			};
		},
		created() {
			this.getTabHeight()
		},
		methods: {
			setTab(path) {
				uni.switchTab({
					url: path
				})
			},
			getTabHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab_height').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						uni.setStorageSync('tab_height', data.height)
					}
				}).exec();
			}
		},

	}
</script>

<style lang="scss">
	.tab-box {
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		padding-bottom: 14rpx;
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;

		.tab-item {
			width: 25%;
			display: flex;
			justify-content: center;

			.tab-content {
				padding-top: 25rpx;
				width: 108rpx;
				height: 130rpx;
				box-sizing: border-box;
				border-radius: 0 0 100rpx 100rpx;
				text-align: center;

				.tab-img {
					width: 42rpx;
					height: 42rpx;
				}

				.tab-text {
					font-weight: 400;
					line-height: 34rpx;
					color: #333333;
				}
			}

		}

		.tab-check {
			.tab-content {
				background-color: rgba(15, 177, 128, 0.1);

				.tab-text {
					font-weight: 500;
					color: #0FB180;
				}
			}
		}
	}
</style>