参数说明
参数 说明
piclist-16-9 图片比例：16：9
piclist-1-1 图片比例：1：1
piclist-3-2 图片比例：3：2
piclist-4-3 图片比例：4：3
piclist-col-2 一行两列
piclist-col-3 一行三列
piclist-col-4 一行四列
piclist-col-5 一行五列
piclist-100 图片高度不留白（图片可能会变形）
默认
商品名称1商品名称1商品名称1商品名称1商品名称1商品名品名称1商品名称1
商品名称1
商品名称1
商品名称1
<div class="piclist piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1商品名称1商品名称1商品名称1商品名称1商品名品名称1商品名称1</div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide text-center">商品名称1</div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide text-center">商品名称1</div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide text-center">商品名称1</div> </div> </div> </div>
一行两列
限时优惠
新疆若羌红枣 2500g 灰枣 枣子5斤箱装
￥298￥398
购买
限时优惠
商品名称1
￥298￥398
购买
限时优惠
商品名称1
￥298￥398
购买
限时优惠
商品名称1
￥298￥398
购买
<div class="piclist piclist-col-2 piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"><em>限时优惠</em></div> <div class="piclist-body"> <div class="piclist-title text-hide">新疆若羌红枣 2500g 灰枣 枣子5斤箱装</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"><em>限时优惠</em></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"><em>限时优惠</em></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"><em>限时优惠</em></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>
一行三列
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
<div class="piclist piclist-col-3 piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>
一行五列
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
<div class="piclist piclist-col-5 piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>
图片比例：3:2
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
<div class="piclist piclist-3-2 piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>
图片比例：16:9
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
<div class="piclist piclist-16-9 piclist-100"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>
图片比例：3:4
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
商品名称1
￥298￥398
购买
<div class="piclist piclist-3-4"> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/1.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/2.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/3.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> <div class="piclist-item"> <div class="piclist-image"><img src="static/picture/4.jpg"></div> <div class="piclist-body"> <div class="piclist-title text-hide">商品名称1</div> <div class="piclist-flex"> <div class="piclist-price"><strong>￥298</strong><del>￥398</del></div> <div class="action"><a href="" class="btn btn-blue">购买</a></div> </div> </div> </div> </div>