0
点赞
收藏
分享

微信扫一扫

按钮组小样式

西红柿上校 2022-03-30 阅读 80

在这里插入图片描述

<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;
	}
举报

相关推荐

0 条评论