tqApp-webView/components/tq-tab/index.vue

<template>
    <view class="tq-tab-contaienr" :class="classType">
		<slot></slot>
	</view>
</template>

<script>

export default {
    props: {
        //样式类型
        classType: {
            type: Object | String,
            default: function () {
				return {}
			}
        },  
    },
	

    data() {
        return {
            
        }
    },
    created() {
       
    },
    methods: {
        
    }
}
</script>

<style lang="scss" scoped>
	
.tq-tab-contaienr {
	height: 40rpx;
	min-width: 100rpx;
	display: inline-block;
	
	font-family: PingFangSC, PingFang SC;
	border-radius: 4rpx;
	overflow: hidden;
	line-height: 40rpx;
	font-style: normal;
	text-align: center;
	font-size: 22rpx;
	padding: 2rpx 10rpx;
}

.blue {
	color: #4573FC;
	background-color: rgba(69, 115, 252, .2);
}
.green {
	color: #38B42F;
	background-color: rgba(56, 180, 47, .2);
}

.red {
	color: #E44C4C;
	background-color: rgba(228, 76, 76, .2);
}
.orange {
	color: #F7A254;
	background-color: rgba(247, 162, 84, .2);
}

</style>
<style lang="scss" >
	.tq-tab-contaienr + .tq-tab-contaienr {
		margin-right: 10rpx;
	}
</style>