
<view class="time-dimension">
<view class="left" :class="{ select: timeDimension == 0 }" @click="timeDimensionClick(0)">全部</view>
<view class="center" :class="{ select: timeDimension == 1 }" @click="timeDimensionClick(1)">日常检查</view>
<view class="right" :class="{ select: timeDimension == 2 }" @click="timeDimensionClick(2)">专项检查</view>
</view></view>
</view>
timeDimension: 0,
timeDimensionClick(index) {
this.timeDimension = index
},
.time-dimension {
display: flex;
justify-content: center;
z-index: 10;
view {
height: 40rpx;
width: 100rpx;
line-height: 40rpx;
text-align: center;
border: 1px solid #157DFE;
font-size: 20rpx;
color: #157DFE;
}
.left {
border-top-left-radius: 55rpx;
border-bottom-left-radius: 55rpx;
}
.right {
border-top-right-radius: 55rpx;
border-bottom-right-radius: 55rpx;
}
.select {
background: #157DFE;
border: 1px solid #157DFE;
color: #fff;
}
}
.time-dimension:hover {
cursor: pointer;
}