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

有赞vue wap业务组件库

/* 一行三个 */
.cap-goods-list__container--three {
  padding: 0 12px;
 
  .cap-goods-list__wrapper {
    float: left;
    width: 33.33%;
  }

  .cap-goods-list__buy-btn-wrapper--2 {
    right: 0;
    bottom: 5px;
    z-index: 5;
    .cap-goods-list__buy-btn-loading {
      width: 18px;
      height: 18px;
      line-height: inherit;
    }
  }

  .cap-goods-list__buy-btn-2 {
    font-size: 18px;
  }

  &.nowrap {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-bottom: -10px;

    .cap-goods-list__wrapper {
      flex: 0 0 30%;
      width: 30%;
      float: none;
    }

    .cap-goods-list__item--three {
      white-space: normal;
    }
  }
}

.cap-goods-list__item--three {
  margin: 5px 3px;

  .cap-goods-list__photo--soldout {
    &::after {
      background-size: 60px 60px;
    }
  }

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

  .cap-goods-list__photo {
    min-height: 0;
    padding-top: 100%;
    height: 0;
  }
}