<span class="flex tab" >
					<view :class="tabStyle(1)"  @click="tabClick(1)">
						变形监测
					</view>
					<view :class="tabStyle(2)"  @click="tabClick(2)">
						渗流渗压
					</view>
				</span>



tabIndex:1



tabClick(data){
				this.tabIndex=data
			},
			tabStyle(data){
				return[data===this.tabIndex?'blue-button':'gray-button']
			}




.tab{
		font-size: 12px;background-color: #e7e2e2;border-radius: 20px;font-weight: 500;
	}
	.blue-button{
		padding: 5px;background-color: rgb(36, 96, 215);color: white;border-radius: 20px;
	}
	.gray-button{
		padding: 5px;background-color: #e7e2e2;color: gray;border-radius: 20px;
	}

<view style="text-align: center;">
		<span class="flex tab" style="width: fit-content;margin: auto;">
			<view :class="tabWaterStyle(1)"  @click="tabWaterClick(1)">
				水库规模
			</view>
			<view :class="tabWaterStyle(2)"  @click="tabWaterClick(2)">
				安全级别
			</view>
			<view :class="tabWaterStyle(3)"  @click="tabWaterClick(3)">
				坝型
			</view>
			<view :class="tabWaterStyle(4)"  @click="tabWaterClick(4)">
				坝高
			</view>
		</span>
		</view>

tabWaterIndex:1


tabWaterClick(data){
				this.tabWaterIndex=data
			},
			tabWaterStyle(data){
				return[data===this.tabWaterIndex?'blue-button':'gray-button']
			}


.tab{
		font-size: 12px;background-color: #e7e2e2;border-radius: 20px;font-weight: 500;
	}
	.blue-button{
		padding: 5px 8px;background-color: rgb(36, 96, 215);color: white;border-radius: 20px;
	}
	.gray-button{
		padding: 5px 8px;background-color: #e7e2e2;color: gray;border-radius: 20px;
	}