emis-sapp/components/tpx-tabs/tpx-tabs.vue

<template>
	<view>
		<u-row justify="start">
			<view v-for="(item) in list" @click="handleChangeTab(item)"
				:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
				<view class="stai-text">
					<u-row>
						{{item.title}}
						<slot :item="item"></slot>
					</u-row>
					<view class="stai-chk-line"></view>
				</view>
			</view>
		</u-row>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default () {
					return []
				}
			},
			value: {
				default () {
					return ''
				}
			},
			mode: {
				default () {
					return 'primary' // primary info  
				}
			}
		},
		data() {
			return {

			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},
		
		methods: {
			handleChangeTab(cur){
				this.$emit('tabchange', cur.val)
				this.$emit('update:value', cur.val) 
			}
		}
	}
</script>

<style scoped lang="scss">
	.sta-item {
		flex: 1;
		padding: 0 0 30rpx 0;
		margin-right: 30rpx;
		position: relative;
		font-size: 30rpx;
		color: #FFF;
		opacity: 0.8;
		.stai-text {
			position: relative;
			display: inline-block;
		}

		&.active {
			font-weight: 600;
			opacity: 1;
			.stai-text {
				.stai-chk-line{
					content: ' ';
					position: absolute;
					bottom: -30rpx;
					left: 0;
					margin-left: 10%;
					width: 80%;
					height: 4rpx;
					background: #FFF;
					border-radius: 2rpx;
				}
			}
		}
		&.stai-primary{
			color: #0E0708;
			&.active {
				.stai-chk-line{
					background: $u-primary;
				}
			}
		}
	}
</style>