<view class="v-float v-tab">
<view class="v-tab-title" :class="curPagetab == '0' ? 'is-active' : ''" @click="pageTabClick('0')">
<span>全省排行</span>
</view>
<view class="v-tab-title" :class="curPagetab == '1' ? 'is-active' : ''" @click="pageTabClick('1')">
<span>分公司排行</span>
</view>
<view class="v-tab-title" :class="curPagetab == '2' ? 'is-active' : ''" @click="pageTabClick('2')">
<span>部门排行</span>
</view>
</view>
<!-- css样式 -->
.v-float {
display: flex;
justify-content: space-between;
}
.v-tab {
width: 668rpx;
margin: auto;
height: 68rpx;
background-color: #e6e6e6;
/* 设置圆角 */
border-radius: 60rpx 60rpx 60rpx 60rpx;
margin-top: 15px;
.v-tab-title {
line-height: 68rpx;
width: 200rpx;
height: 60rpx;
border-radius: 40rpx;
text-align: center;
font-size: 12pt;
color: #757575;
}
.is-active {
height: 54rpx;
align-self: center;
text-align: center;
line-height: 54rpx;
font-size: 14pt;
color: #323232;
background: rgba(255, 255, 255, 0.8);
}
}
显示结果: