uni-zhks-app/components/p-i-s-tabbar/p-i-s-tabbar.vue

<template>
	<view class="content">
		<view class="tabbar">
			<view class="list_item">
				<view class="item" :class="active === 1 ? 'active':''" @click="click_item(1)">
					<view class="item_icon icon_one"></view>
					<view class="item_name">
						模拟量
					</view>
				</view>
				<view class="item" :class="active === 2 ? 'active':''" @click="click_item(2)">
					<view class="item_icon icon_two"></view>
					<view class="item_name">
						开关量
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				active:1,
			};
		},
		methods:{
			click_item(item){
				this.active = item
				this.$emit("tab","item")
			}
		}
		
	}
</script>

<style lang="scss">
	.content{
		position: fixed;
		bottom: 0;
	}
	.tabbar{
		width: 750rpx;
		.list_item{
			width: 100%;
			border-top: 2rpx solid #f3f3f3;
			box-sizing: border-box;
			padding: 12rpx 0;
			
			.item{
				float: left;
				width: 50%;
				.item_icon{
					margin: 0 auto;
					width: 45rpx;
					height: 45rpx;
					
					background-size: cover;
					background-repeat: no-repeat;
				}
				.icon_one{
					background-image: url(icon/ss1.png);
				}
				.icon_two{
					background-image: url(icon/work.png);
				}
				.item_name{
					text-align: center;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #929292;
					line-height: 40rpx;

				}
			}
			.active{
				.icon_one{
					background-image: url(icon/ss2.png);
				}
				.icon_two{
					background-image: url(icon/work_active.png);
				}
				.item_name{
					color: #3498DB;
				}
			}
		}
	}
</style>