my_loan/htmldev/wxMini/pages/collection/collection.scss

.wrapper {
  padding-top: 20rpx;
}

.margin-bottom-20 {
  margin-bottom: 20rpx;
}

.main {
  padding: 58rpx 0 220rpx;
}

.list {
  display: flex;
  align-items: center;
  width: 690rpx;
  min-height: 278rpx;
  padding: 20rpx 22rpx 34rpx 28rpx;
  margin: 0 auto 20rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}

.goods-cover-wrap {
  width: 224rpx;
  height: 224rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .goods-cover {
    display: block;
    width: 100%;
    height: 100%;
    background: pink;
  }
}

.goods-describe {
  width: calc(100% - 224rpx);
  padding-left: 24rpx;
}

.name-wrap {
  display: flex;

  &.has-tag {
    .name {
      max-width: calc(100% - 46rpx);
    }
  }

  .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 32rpx;
    line-height: 46rpx;
    color: rgba(31, 51, 73, 1);
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
  }

  .tag {
    width: 46rpx;
    height: 26rpx;
    margin-top: 10rpx;
    margin-left: 6rpx;
    border-radius: 12rpx;
    background: rgba(255, 76, 44, 1);
    font-size: 16rpx;
    line-height: 26rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.price-wrap {
  display: flex;
  align-items: flex-end;
  margin-top: 16rpx;

  .now {
    display: flex;
    align-items: center;

    view {
      font-size: 28rpx;
      line-height: 32rpx;
      color: rgba(31, 51, 73, 1);
    }
  }

  .old {
    margin-left: 26rpx;
    font-size: 20rpx;
    line-height: 28rpx;
    color: rgba(31, 51, 73, 0.6);
    text-decoration: line-through;
  }
}

.star-words {
  display: flex;
  flex-flow: row wrap;
  margin-top: 16rpx;

  text {
    margin-left: 6rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    color: rgba(183, 191, 206, 1);
  }
}

.key-words-list {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding-top: 14rpx;
  margin-top: 14rpx;
  border-top: 1rpx solid rgba(183, 191, 206, 1);

  .key-words {
    display: flex;
    align-items: center;
    margin-left: 12rpx;
    margin-top: 14rpx;
  }

  .key-words:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  .label {
    width: 12rpx;
    height: 22rpx;
    background-color: pink;
  }

  .value {
    width: 125rpx;
    margin-left: 2rpx;
    font-size: 16rpx;
    line-height: 24rpx;
    color: rgba(128, 128, 128, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}