写tab栏样式，有销量价格顺序倒序样式

 要实现这样的效果

<view class="content-tabs flex justify-content-between align-items-center">
	<view class="tabs-item flex justify-content-center align-items-center" :class="tabIndex==0?'actived':''" @tap="changtabs(0)">
		<text class="tabs-item-title">综合</text>
	</view>
	<view class="tabs-item flex align-items-center justify-content-center" :class="tabIndex==1?'actived':''" @tap="changtabs(1)">
		<text class="tabs-item-title">销量</text>
	    <view class="flex column">
		    <text class="iconfont icon-xiangshangjiantou" :class="!clicknum ?'iconactived':''"></text>
		    <text class="iconfont icon-xiangxiajiantou" :class="clicknum ?'iconactived':''"></text>
	    </view>
	</view>
	<view class="tabs-item flex align-items-center justify-content-center" @tap="changtabs(2)" :class="tabIndex==2?'actived':''">
		<text class="tabs-item-title">价格</text>
		<view class=" flex column ">
			<text class="iconfont icon-xiangshangjiantou" :class="!clicknum ?'iconactived':''"></text>
			<text class="iconfont icon-xiangxiajiantou" :class="clicknum ?'iconactived':''"></text>
		</view>
	</view>
</view>

其中flex、align-items-center、justify-content-center是全局定义的flex样式，直接加类名就行了

js：

export default{
    data(){
        return{
            tabIndex:0,
			clicknum:true,  //销量或价格排列顺序  true从大到小  false从小到大
        }
    },
    watch:{
		tabIndex:{
			handler(newVal,oldVal){
				this.clicknum=true
			}
		}
	},
    methods:{
		changtabs(index){
			this.tabIndex=index
			if(index!=0){
				this.clicknum = !this.clicknum
			}
		},
	},
}

css

    .content-tabs{
		height: 96rpx;
		padding: 14rpx 30rpx 14rpx;
		background-color: #fff;
		.iconfont{
			font-size: 14rpx;
			font-weight: 800;
			margin-left: 8rpx;
		}
		.tabs-item{
			width: 180rpx;
			height: 100%;
			position: relative;
			&.actived{
				&::after{
					content: '';
					width: 100%;
					height: 3rpx;
					background-color: $color-red;
					position: absolute;
					bottom: 0;
				}
				.tabs-item-title{
					color: $color-red;
					font-weight: bold;
				}
				.iconfont{
					&.iconactived{
						color: $color-red;
					}
				}
			}
		}
	}