captain-ui/lib/goods-list/src/styles/list-layout.css

有赞vue wap业务组件库

@import "../../../common/var";

$cardWidth: 118px;
$cardHeight: 118px;
$cardImgMarginRight: 10px;
$soldNumColor: #9b9b9b;

/* 详情模式 */
.cap-goods-list__item--list {
  .cap-goods-list__photo {
    float: left;

    &--soldout {
      &::after {
        background-size: 60px 60px;
      }
    }
  }

  .cap-goods-list__info {
    .title {
      padding-top: 2px;
      margin-bottom: 12px;

      @mixin multi-ellipsis 2;
    }

    .sale-info {
      position: absolute;
      left: 0;
      bottom: 10px;
    }

    .sold-num {
      margin-left: 15px;
      font-size: 12px;
      color: $soldNumColor;
    }
  }

  &.cap-goods-list__item--btn1 {
    .cap-goods-list__info {
      .sale-info {
        line-height: 24px;
      }
    }
  }

  &.cap-goods-list__item--btn2 {
    .cap-goods-list__info {
      .sale-info {
        line-height: 20px;
      }
    }
  }

  &.cap-goods-list__item--btn3 {
    .cap-goods-list__info {
      .sale-info {
        line-height: 28px;
      }
    }
  }

  &.cap-goods-list__item--btn4 {
    .cap-goods-list__info {
      .sale-info {
        line-height: 26px;
      }
    }
  }

  &.card,
  &.card2 {
    min-height: auto;
    margin: 15px;

    &::after {
      @mixin border-retina;
    }

    .cap-goods-list__photo {
      margin-right: $cardImgMarginRight;
      width: $cardWidth;
      height: $cardHeight;
      min-height: auto;
    }

    .cap-goods-list__info {
      margin-left: calc($cardWidth + $cardImgMarginRight);
      height: $cardHeight;
      margin-right: 10px;

      .title {
        padding-top: 10px;
      }
    }

    .cap-goods-list__buy-btn-wrapper {
      right: 15px;
      bottom: 10px;
    }
  }
}