zhapp/components/uni-tab/uni-tab.vue

<!-- components/custom-tabs.vue -->
<template>
	<div class="">
		<view class="wrap">
			<view class="tabs dis a-end">
				<view v-for="(item, index) in tabList" :key="index" class="tab dis a-c j-c" :class="{
            active: activeTab === index,
            tab1: activeTab !== index,
            left: activeTab === 0,
            right: activeTab === 1
          }" :style="{
			  backgroundColor: activeTab !== index?noactivebackgroundColor:''
		  }" @click="handleTab(index)">
					<view class="tabtitle" :class="activeTab === 0 ? 'tabtext' : 'tabtext1'">
						<image v-if="activeTab==index" src="/static/image/Vector 22.png" mode=""></image>
						<view class="">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>

			<view class="content-container">
				<!-- 内容插槽 -->
				<view class="content-wrap contentwrap1" v-show="activeTab === 0">
					<slot name="content0">
					</slot>
				</view>
				<view class="content-wrap contentwrap2" v-show="activeTab === 1">
					<slot name="content1"></slot>
				</view>

			</view>
		</view>
	</div>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			// 标签数据
			tabList: {
				type: Array,
				default: () => []
			},
			// 当前激活标签
			value: {
				type: Number,
				default: 0
			},
			//未选中标签背景色
			noactivebackgroundColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				activeTab: this.value
			}
		},
		watch: {
			value(newVal) {
				this.activeTab = newVal
			}
		},
		methods: {
			handleTab(index) {
				this.activeTab = index
				this.$emit('change', index)
				this.$emit('tab-change', index)
			}
		}
	}
</script>

<!-- 保持原有样式不变 -->
<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.wrap {
		position: relative;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 0px 10px 10px 10px;

	}

	.tabs {
		display: flex;
		position: relative;
		overflow: hidden;
		border-radius: 10px 10px 0 0;
	}

	.tab {
		flex: 1;
		height: 86rpx;
		color: #333;
		font-size: 30rpx;
		position: relative;
		// background-color: rgba(254, 249, 239, 55%);
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		box-shadow: inset 0px 0px 3px 0px #FFFFFF, 0px 4px 10px 0px rgba(255, 255, 255, 0.25);


		&.active {
			background: #FFFCE5;
			color: #1F1F1F;
			height: 106rpx;
			font-size: 36rpx;
			font-weight: bold;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
		}


		&.left.active {
			border-top-right-radius: 0;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				right: -50px;
				height: 100%;
				width: 50px;
				z-index: 2;
				background-color: #FFFCE5;
				clip-path: path("M0 0 C25 0 25 50 50 50 L0 50 Z");
			}
		}

		// 右侧标签的曲线
		&.right.active {
			border-top-left-radius: 0;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: -49px;
				height: 100%;
				width: 50px;
				z-index: 2;
				background-color: #FFFCE5;
				clip-path: path("M50 0 C25 0 25 50 0 50 L50 50 Z");
			}
		}
	}

	.tab1 {
		flex: 1;
		height: 86rpx;
		color: #333;
		font-size: 30rpx;
		position: relative;
		// background-color: rgba(254, 249, 239, 55%);
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		margin-top: 10rpx;
		box-shadow: inset 0px 0px 3px 0px #FFFFFF, 0px 4px 10px 0px rgba(255, 255, 255, 0.25);

	}

	.tabtext {
		margin-left: 50rpx;
	}

	.tabtext1 {
		margin-right: 50rpx;
	}

	.content-container {
		position: relative;
		height: auto;
		background: #fff;
		;
		border-radius: 10px 10px 10px 10px;
		margin-top: -6rpx;
	}

	.content-wrap {
		height: 100%;
		box-sizing: border-box;
		border: 4rpx solid #FFFFFF;
		border-top: none;
		background: linear-gradient(180deg, #FFFCE1 0%, #FFFFFF 15%);
	}

	.contentwrap1 {
		border-radius: 0px 10px 10px 10px;
	}

	.contentwrap2 {
		border-radius: 10px 0 10px 10px;
	}

	.tabtitle {
		position: relative;
		z-index: 1; // 父级降低层级

		// 文字部分
		&__text {
			position: relative; // 必须定位元素才能生效z-index
			z-index: 3; // 高于装饰图片
			display: inline-block;
		}

		// 装饰图片
		image {
			position: absolute;
			bottom: -14rpx; // 根据实际图片高度调整
			left: 50%;
			transform: translateX(-50%);
			z-index: 2; // 介于父级和文字之间
			width: 100%;
			height: 20rpx;
		}
	}
</style>