H5Goodslist
功能描述
使用aui.css,仿天猫商品列表页面。
商品名称超过两行后省略号显示。
商品副标题超过一行后省略号显示。
新增功能
商品详情页面。
修复发现的问题。
依赖的模块
暂无
快速使用
1、引用aui.css, zknight_h5goodslist_index.css。
2、热度标识是32*32的图片,注意引用对路径。
3、使用zknight_h5goodslist_index.html即可。
4、根据各自需求可上下移动代码(价格,标签,已售)位置。
一个商品块,示例:
<div class="aui-padded-5">
<div class="zknight-h5goodslist-main">
<!-- 商品图片 -->
<div class="zknight-h5goodslist-img">
<img width="100%" src="image/zknight_h5goodslist_demo.jpg">
</div>
<div class=" aui-padded-l-10 aui-padded-r-10">
<!-- 商品标题 -->
<div class="zknight-h5goodslist-goodsname aui-padded-b-5 aui-font-size-14 aui-ellipsis-2">
<!-- 热度 ,根据需求是否展示-->
<span class="zknight-h5goodslist-tag zknight-h5goodslist-tag-hot"></span>
【两套减30元】蓝月亮 洗衣液机洗14斤套装3kg+2kg*1+1kg*2
</div>
<!-- 副标题 -->
<div class="aui-font-size-12 aui-margin-t-5 aui-margin-b-5 aui-ellipsis-1 zknight-h5goodslist-999">
蓝月亮的瓶子真的是蓝色的欸蓝月亮的瓶子真的是蓝色的欸
</div>
<!-- 商品标签 -->
<div class="aui-font-size-12 aui-margin-t-10 aui-margin-b-10">
<span class="zknight-h5goodslist-tab">包邮</span>
<span class="zknight-h5goodslist-tab">护肤品</span>
<span class="zknight-h5goodslist-tab">无忧退货</span>
</div>
<!-- 价钱 -->
<div class="aui-font-size-20 zknight-h5goodslist-red">
¥199.00
<span class="zknight-h5goodslist-delline zknight-h5goodslist-gray aui-font-size-12">¥299.00</span>
</div>
<!-- 已售 -->
<div class="aui-padded-b-5 aui-font-size-14 zknight-h5goodslist-999">
<span class="aui-chat-right aui-font-size-12 zknight-h5goodslist-gray">已售 2222 件</span>
</div>
</div>
</div>
</div>
特别说明
若有建议请发邮箱:284179192@qq.com