uniapp简单选项卡

<view class="bodyContentBg">
			<view class="bodyConBgHeadBg">
				<view class="zhengchangBg" @click="flag=0">
					<view :class="		['zhenchangBgTitle',flag==0?'zhenchangBgTitleActive':'zhenchangBgTitle']">正常过磅</view>
					<view class="lineBg" v-show="flag==0"></view>
				</view>
				<view class="diaoboBg" @click="flag=1">
					<view :class="['zhenchangBgTitle',flag==1?'zhenchangBgTitleActive':'zhenchangBgTitle']">调拨过磅</view>
					<view class="lineBg" v-show="flag==1"></view>
				</view>
			</view>
			<view class="zcBg" v-show="flag == 0">
				
			</view>
			<view class="dbBg" v-show="flag == 1">
				
			</view>
</view>
<script>
	export default {
		data() {
			return {
				flag:0
			}
		},
		onLoad() {

		},
		methods: {
			//没写方法
		}
	}
</script>
.bodyContentBg{
		width:90%;
		height:800rpx;
		background-color: #fff;
		margin:-100rpx auto 0;
	}
	.bodyConBgHeadBg{
		width:100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.zhengchangBg,.diaoboBg{
		width: 50%;
		height:80%;
		text-align: center;
		line-height: 60rpx;
		font-size: 36rpx;
		color:#333333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.zhenchangBgTitle{
		font-size: 32rpx;
		color:#333333;
	}
		
	.zhenchangBgTitleActive{
		font-size: 32rpx;
		color:#007AFF;
	}
	.lineBg{
		width:40rpx;
		height:10rpx;
		background: #007AFF;
	}
	.zcBg{
		width:100%;
		height:80%;
		border:1rpx solid pink;
	
	}
	.dbBg{
		width:100%;
		height:80%;
		border:1rpx solid green;
	}