商品列表
用法
| Class |
描述 |
| .baie-goods、.baie-goods-items |
父元素，商品列表、背景色商品列表。 |
| .baie-good |
子元素，商品列表项。 |
| .baie-good__cover |
次子元素，商品图片。 |
| .baie-good__info |
次子元素，商品信息。 |
| .pro-extra-left、pro-extra-right |
次次子元素，商品信息左下定位、商品信息右下定位 |
| .pro-cover、.pro-title、.pro-xxx |
次次子元素，商品封面、商品标题、商品xxx。 |
示例1：
示例2：
HTML：
<!-- 示例1 -->
<div class="baie-goods">
<div class="baie-good">
<div class="baie-good__cover baie-b-1px">
<img class="pro-cover" src="?x-oss-process=image/resize,m_fill,h_200,w_200" alt="">
</div>
<div class="baie-good__info">
<em class="pro-title line-clamp_1"></em>
<p class="pro-extra-left baie-color-orange"><i class="baie-rmb">¥</i></p>
<p class="pro-extra-right baie-color-orange">x31</p>
</div>
</div>
</div>
<!-- 示例2 -->
<div class="baie-goods baie-goods-items">
<div class="baie-good">
<div class="baie-good__cover baie-b-1px">
<img class="pro-cover" src="?x-oss-process=image/resize,m_fill,h_200,w_200" alt="">
</div>
<div class="baie-good__info">
<em class="pro-title line-clamp_1"></em>
<p class="pro-extra-left baie-color-orange"><i class="baie-rmb">¥</i></p>
<p class="pro-extra-right baie-color-orange">x31</p>
</div>
</div>
</div>