MingGaoApp_vue/MingGaoApp/components/task-tabs/task-tabs.vue

<template>
	<view class="task-tabs">
		<view class="task-tabs__item" :class="{active:item.id===currentIndex}" v-for="item in tabList" :key="item.id"
			@click="handleTabClick(item)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				tabList: [{
					id: 1,
					name: '签到记录',
				}, {
					id: 2,
					name: '诱捕器',
				}, {
					id: 3,
					name: '行驶轨迹'
				}]
			};
		},
		methods: {
			handleTabClick(tabItem) {
				if (!tabItem.id) {
					return
				}

				this.currentIndex = tabItem.id
				
				this.$emit('tabClick',tabItem.id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-tabs {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 14rpx;

		&::before {
			content: '';
			left: 4rpx;
			right: 4rpx;
			bottom: 0;
			@include hairline-bottom(rgba(151, 151, 151, 0.09));
			position: absolute;
		}

		&__item {
			position: relative;
			width: 200rpx;
			height: 60rpx;
			font-weight: 400;
			text-align: center;
			font-size: 14px;
			line-height: 60rpx;
			color: #7489A9;
			border-radius: 8rpx;
			background: #F4F7FC;
			transition: all 1s;

			&::before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: 50%;
				bottom: -22rpx;
				transform: translateX(-50%);
				border: 12rpx solid transparent;
				transition: border-top-color 1s;
			}

			&::after {
				content: '';
				position: absolute;
				width: 0rpx;
				height: 4rpx;
				left: 50%;
				bottom: -12rpx;
				transform: translateX(-50%);
				// background-color: transparent;
				background-color: #1B76FF;
				transition: width 1s;
			}

			&.active {
				color: #fff;
				font-weight: 500;
				background: #1B76FF;

				&::before {
					border-top-color: #1B76FF;
				}

				&::after {
					width: 120rpx;
					// background-color: #1B76FF;
				}
			}
		}
	}
</style>