.number-box{
  display: flex;
  align-items: center;
}
.number-box .value{
  font-size: 36rpx;
  padding:0 28rpx;
}
.number-box .button{
  width:44rpx;height:44rpx;
  line-height: 1;
  padding:0;
  text-align: center;
  color: #fff;
  position: relative;
  background-color: var(--main-color);
  border-radius: 50%;
  border: 1rpx solid #FFC300;
}
.number-box .button.disabled{
  background-color: #fff;
}
.number-box .reduce::before,
.number-box .plus::before,
.number-box .plus::after{
  content: '';
  width:50%;
  height:4rpx;
  background-color: #fff;
  position:absolute;
  left:25%;top:20rpx;
}
.number-box .reduce.disabled::before,
.number-box .plus.disabled::before,
.number-box .plus.disabled::after{
  background-color: var(--main-color);
}
.number-box .plus::after{
  width:4rpx;
  height:50%;
  left:20rpx;top:25%;
  z-index: 100;
}
.number-box.disabled{
  opacity: .4;
}