vue+uni支付宝小程序手动写tab卡片切换

先上代码：

:key="items">
{{item.cont}}
{{item.text}}




@click="isYearCard(index)">
年卡
售价102.20元

methods: {
// 会员高亮以及切换
vipSpecial(items) {
this.classVip = items;
this.vipOneList = false
},
}

.yearCard {
width: 690rpx;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding-bottom: 188rpx;

.yearCardLis {
box-sizing: border-box;
width: 214rpx;
height: 108rpx;
border-radius: 12rpx;
border: solid 2rpx #e5e5e5;
margin: 24rpx 24rpx 0 0;
padding: 22rpx 0;
text-align: center;

text {
color: #333;
font-size: 34rpx;
font-weight: bold;
}

.yearPrice {
font-size: 20rpx;
color: #666;
margin-top: 11rpx;
}
}

.yearCardLis:nth-of-type(3n) {
margin-right: 0;
}

.speYearCard {
border: solid 3rpx #ff3f3e;
background: rgba(255, 63, 62, 0.1);

text {
color: #ff3f3e;
}

.yearPrice {
color: #ff3f3e;
}
}
}
.yearCard:nth-of-type(3) .speYearCard{
border: solid 3rpx yellow;
background: rgba(255, 63, 62, 0.1);
}

没法弄视频就截的图

点击前后点击后效果图