喵喵喵.png
<view class="title">
<view class="{{showing==1?'on':''}}" bindtap="show_left">待配送(6)</view>
<view class="{{showing==2?'on':''}}" bindtap="show_right">已配送(8)</view>
</view>
show_left() {
this.setData({
showing: 1
})
},
show_right() {
this.setData({
showing: 2
})
},
.title {
height: 90rpx;
background: #fff;
padding-top: 25rpx;
display: flex;
color: #333;
margin-bottom: 20rpx;
padding-left:40rpx;
padding-right:40rpx;
}
.title view {
width: 50%;
text-align: center;
font-size: 32rpx;
position: relative;
}
.title view.on {
color: #DC0101;
}
.title view.on:after {
content: '';
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: -1rpx;
width: 60rpx;
height: 4rpx;
display: block;
border-bottom: 4rpx solid #DC0101;
z-index: 15;
}
