captain-ui/es/goods-list/src/styles/small-layout.css

有赞vue wap业务组件库

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

/* 小图模式 */
.cap-goods-list__container--small {
  overflow: hidden;
  padding: 0 12px;

  .cap-goods-list__wrapper {
    float: left;
    width: 50%;
  }

  &.cap-goods-list__container--540 {
    .cap-goods-list__wrapper {
      width: 33.33%;
    }
  }
}

.cap-goods-list__container--card2 {
  padding: 0 7px 0 8px;
}

.cap-goods-list__item--small {
  margin: 3px;

  /* 小图基础样式 */
  .cap-goods-list__photo {
    min-height: 0;
    padding-top: 100%;
    height: 0;

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

  .cap-goods-list__info {
    padding: 10px;

    .title {
      height: 36px;
      @mixin multi-ellipsis 2;
    }

    .sub-title {
      margin-bottom: 10px;
    }

    &.has-price {
      text-align: center;

      .sale-info {
        line-height: 1;
      }
    }

    &.has-title,
    &.has-btn {
      text-align: left;
    }

    /* 标题和商品简介都显示时，标题只显示一行 */
    &.has-title.has-subtitle {
      .title {
        height: 18px;
        @mixin multi-ellipsis 1;
      }

      .sub-title {
        margin-bottom: 0;
      }
    }

    &.has-title.has-subtitle.has-btn {
      .sub-title {
        margin-bottom: 6px;
      }
    }

    &.has-title.has-subtitle,
    &.has-title.has-price,
    &.has-title.has-btn {
      .title {
        margin-bottom: 6px;
      }
    }

    &.has-subtitle.has-price {
      .sub-title {
        margin-bottom: 10px;
      }
    }

    &.has-btn.has-price {
      .sale-info {
        position: absolute;
        bottom: 10px;
        left: 10px;
      }
    }
  }

  /* 小图：马上抢按钮 */
  .cap-goods-list__buy-btn-wrapper .cap-goods-list__buy-btn-3 {
    padding: 0;
    width: 52px;
    min-width: auto;
    font-size: 12px;
    line-height: 22px;
    height: 24px;
    border-radius: 12px;
  }

  &.cap-goods-list__item--btn1,
  &.cap-goods-list__item--btn3 {
    .cap-goods-list__info {
      &.has-btn {
        padding-bottom: 34px;

        .sale-info {
          line-height: 24px;
        }
      }
    }
  }

  &.cap-goods-list__item--btn2 {
    .cap-goods-list__info {
      &.has-btn {
        padding-bottom: 30px;

        .sale-info {
          line-height: 20px;
        }
      }
    }
  }

  &.cap-goods-list__item--btn4 {
    .cap-goods-list__info {
      &.has-btn {
        padding-bottom: 36px;

        .sale-info {
          line-height: 26px;
        }
      }
    }
  }

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

.cap-goods-list__item--hybrid-small {
  .cap-goods-list__img {
    position: absolute;
  }
}