captain-ui/lib/ump-timelimited-discount/src/styles/base.css

有赞vue wap业务组件库

@import '../../../common/var.css';

.cap-ump-limitdiscount {
  margin-bottom: 10px;
}

.cap-ump-limitdiscount-goods {
  display: block;

  &__title {
    margin-bottom: 8px;
    color: $text-color;
    font-size: 14px;
    word-break: break-all;

    @mixin multi-ellipsis 2;
  }

  &__discount {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    height: 14px;
    padding: 0 5px;
    line-height: 14px;
    border-radius: 2px;
    color: $red;
    font-size: 10px;
    text-align: center;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $red;
      opacity: .1;
    }
  }

  &__header {
    position: relative;
  }

  &__tag-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  &__content {
    position: relative;
  }

  &__bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background-color: rgba(229, 229, 229, .5);

    &-inner {
      height: 100%;
      border-radius: 3px;
      background-image: linear-gradient(to right, #ff7979, $red);
    }
  }

  &__sales-info {
    margin-top: 6px;
    overflow: hidden;
    color: $gray-dark;
    font-size: 10px;
    line-height: 12px;
  }

  &__detail {
    margin-top: 6px;
  }

  &__sales {
    float: left;
  }

  &__rest {
    float: right;
  }

  &__rest-num {
    color: #ff423d;
  }

  &__price,
  &__origin-price {
    display: inline-block;
  }

  &__price {
    color: $red;

    &-symbol {
      margin-right: 3px;
    }
  }

  &__origin-price {
    color: $gray-dark;
    font-size: 10px;
    text-decoration: line-through;

    &-symbol {
      margin-right: 2px;
    }
  }

  .cap-countdown {
    .cap-countdown__day,
    .cap-countdown__hour,
    .cap-countdown__minute,
    .cap-countdown__second,
    .cap-countdown__time-text {
      background-color: transparent;
      color: $white;
    }
  }

  &--soldout,
  &--end {
    .cap-ump-limitdiscount-goods__mask {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-image: url('https://img.yzcdn.cn/v2/image/wsc-wap/showcase/end.png');
        background-size: contain;
      }
    }
  }

  &--soldout {

    .cap-ump-limitdiscount-goods__mask {

      &::after {
        background-image: url('https://img.yzcdn.cn/v2/image/wsc-wap/showcase/soldout.png');
      }
    }
  }
}