challengeFamily/components/activity/sku.wxss

.sku-container {
  max-height: -webkit-max-content;
  max-height: max-content;
  overflow-y: auto;
  /* height: 986rpx; */
  height: 100%;
  font-size: 28rpx;
  background: #F5F5F4;
  /* padding-bottom: 80rpx; */
}

.militaryTip {
  margin-top: 20rpx;
  color: #ee3a43;
}


.warning {
  font-weight: 700;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.spacing {
  margin: 10rpx 0;
}

.modular .modal-title {
  border: unset;
  margin-bottom: -20rpx;
}

.check-box {
  padding: 20rpx 20rpx 0;
  display: flex;
  align-items: center;
}

.friend-share-tip {
  padding: 0 20rpx;
  line-height: 2;
  background: #EE3A43;
  color: #fff;
  /* position: absolute; */
  top: 0;
  width: 100%;
  z-index: 1000;
}

.sku-container .m-top40 {
  margin-top: 40rpx;
}

.column-title {
  color: #878787;
  line-height: 2;
}

.sku-column {
  padding-bottom: 30rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #c7c8c9;
}

.sku-column-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 24rpx;
}

.sku-column-body .sku-package {
  width: calc(100%/3 - 20rpx);
  margin-top: 20rpx;
  padding: 0 10rpx;
  text-align: center;
}

.sku-column-body .sku-sessions {
  width: calc(50% - 40rpx);
  margin-top: 20rpx;
  padding: 0 20rpx;
  text-align: center;
}

.sku-sessions-box {
  /* background: #c8c9cc; */
  border: 1rpx solid #C7C8C9;
  padding: 10rpx 0;
  border-radius: 15rpx;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
}

.flex-box {
  height: 70rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sku-header {
  margin-left: 30rpx;
}

.sku__goods-name {
  margin-bottom: 20rpx;
  font-size: 32rpx;
}

.sku-header__goods-info {
  box-sizing: border-box;
  padding: 20rpx 120rpx 20rpx 0rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #ebedf0;
}

/* .alternate{
  position: absolute;
    top: -16rpx;
    right: -10rpx;
    font-size: 18rpx;
    line-height: 20rpx;
    padding: 0 8rpx;
    border: 1rpx solid #f44;
    border-radius: 10rpx;
    border-bottom-left-radius: 0;
    color: #EE3A43;
    font-weight: 700;
    background: #fff;
} */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.van-sku__quota {
  /* color: var(--subtitleColor); */
}

.sku__goods-price {
  margin-top: 20rpx;
  color: #f44;
  vertical-align: middle;
}

.sku-body {
  overflow-y: scroll;
  padding-bottom: 270rpx;
}

.sku-group-container {
  margin-left: 30rpx;
  padding: 24rpx 0 4rpx;
  border-bottom: 2rpx solid #ebedf0;
}

.sku-row {
  margin: 0 30rpx 20rpx 0;
}

.sku-row__title {
  padding-bottom: 20rpx;
}

.sku-row__item {
  background: #f6f5f5;
  color: #333;
  border: 0 none;
  border-radius: 16rpx;
  line-height: 36rpx;
  display: inline-block;
  box-sizing: border-box;
  min-width: 104rpx;
  height: 56rpx;
  margin: 0 20rpx 20rpx 0;
  padding: 10rpx 18rpx;
  font-size: 24rpx;
  text-align: center;
  position: relative;
}

.sku-row__item--disabled {
  border-color: #ebedf0;
  color: #c8c9cc;
}

.sku-column-body .sku-sessions .sku-row__item--active,
.sku-column-body .sku-package .sku-row__item--active {
  color: #000;
  background: var(--subtitleColor);
  border: var(--subtitleColor);
}

.sku-column-body .sku-row__item--active .sessions-title {
  color: #000;
}

.sku-column-body .sku-sessions .sku-row__item--active .sessions-status {
  color: #000;
  border: 1px solid #000;
}

.sku-column-quota {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.sku-stepper-stock {
  margin-left: 30rpx;
  padding: 24rpx 0;
}

.sku-stepper-container {
  height: 60rpx;
  margin-right: 40rpx;
}

.sku__stepper-title {
  float: left;
  line-height: 60rpx;
}

.sku__stepper {
  float: right;
}

.stepper {
  font-size: 0;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
}

.sku__stock {
  margin-right: 20rpx;
  color: #969799;
}

.stepper__minus,
.stepper__plus {
  width: 44rpx;
  height: 44rpx;
  border: 1px solid var(--subtitleColor);
  border-radius: 50%;
  position: relative;
}

.stepper__plus {
  background: var(--subtitleColor);
}

.stepper__minus::before,
.stepper__plus::before {
  content: '';
  width: 30rpx;
  height: 2rpx;
  background: #000;
  position: absolute;
  top: 21rpx;
  left: 7rpx;
}

.stepper__plus::after {
  content: '';
  width: 2rpx;
  height: 30rpx;
  position: absolute;
  top: 7rpx;
  left: 21rpx;
}

.stepper__plus::before,
.stepper__plus::after {
  background: #000;
}

.stepper__minus__diabled,
.stepper__plus__diabled {
  background: white;
  border: 1px solid gray;
}

.stepper__minus__diabled::before,
.stepper__plus__diabled::before,
.stepper__plus__diabled::after {
  background: gray;
}

.stepper__input {
  box-sizing: border-box;
  width: 64rpx;
  height: 48rpx;
  margin: 0 4rpx;
  padding: 0;
  color: #323233;
  font-size: 28rpx;
  line-height: 48rpx;
  text-align: center;
  vertical-align: middle;
  border: 0;
  border-width: 2rpx 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.button.button-warn {
  background: #EE3A43;
  color: white;
  font-size: 32rpx;
}
.button.button-subtitle{background-color: var(--subtitleColor); color: #000;font-size: 32rpx;}


.bottom-btns-box {
  position: absolute;
  bottom: 0;
  width: calc(100% - 120rpx);
  padding: 10rpx 60rpx;
  background: #fff;
  z-index: 10002;
  box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, .2);
}

.sku-box-top {
  margin-top: 20rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 20rpx;
  background: #fff;
  padding-bottom: 120rpx;
}

.sessions-status {
  border: 1rpx solid #C7C8C9;
  padding: 0 10rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}

.meals-status {
  font-size: 22rpx;
}

.identify {
  position: absolute;
  top: -20rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.attr-r {
  padding: 0 10rpx;
  right: -20rpx;
  border-bottom-left-radius: 0;
  border: 4rpx solid #ebedf0;
  background: #969799;
  color: #fff;
}

.attr-l {
  background: #FEF5F5;
  color: #ee3a43;
  border: 4rpx solid #fff;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  left: -10rpx;
}

.sessions-title {
  color: #717071;
}

.presell-price-view {
  display: flex;
  flex-direction: column;
}

/* 场次状态 */
.sku-sessions .full,
.sku-package .full {
  background: #EDEDEE;
  color: #C7C8C9;
}

.full .sessions-title {
  color: #C7C8C9;
}

.sku-sessions .sale {
  color: #717071;
}

.sku-sessions .sale .sessions-status {
  color: #07BB98;
  border: 1px solid #07BB98;
}

.sku-sessions .few-quota {
  color: #717071;
}

.sku-sessions .few-quota .sessions-status {
  color: #ee3a43;
  border: 1px solid #ee3a43;
}

.sku-sessions .alternate,
.sku-package .alternate {
  color: #C7C8C9;
}

.alternate .sessions-title {
  color: #C7C8C9;
}