XEH-miniProgram/pages/self/order/index.vue

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
				{{ item.label }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabActive: 1,
			tabList: [
				{
					label: '全部订单',
					value: 1
				},
				{
					label: '未生效',
					value: 2
				},
				{
					label: '未生效',
					value: 3
				},
				{
					label: '已完成',
					value: 4
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-top: 82.42rpx;
}

.tabs-panel {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 82.42rpx;
	background: #fff;
	display: flex;
	z-index: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}

	&::before {
		top: 0;
	}

	&::after {
		bottom: 0;
	}

	.item {
		flex: 1;
		text-align: center;
		font-size: 27.47rpx;
		color: #999;
		line-height: 82.42rpx;
		position: relative;
		& + .item::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 1rpx;
			background: #e0e0e0;
		}
	}

	.active {
		color: #00bcd2;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
			height: 5.49rpx;
			background: #00bcd2;
			z-index: 1;
		}
	}
}
</style>