H5Goodslist

功能描述

  1. 使用aui.css,仿天猫商品列表页面。
  2. 商品名称超过两行后省略号显示。
  3. 商品副标题超过一行后省略号显示。

新增功能

  1. 商品详情页面。
  2. 修复发现的问题。

依赖的模块

  1. 暂无

快速使用

  1. 1、引用aui.css, zknight_h5goodslist_index.css
  2. 2、热度标识是32*32的图片,注意引用对路径。
  3. 3、使用zknight_h5goodslist_index.html即可。
  4. 4、根据各自需求可上下移动代码(价格,标签,已售)位置。
  1. 一个商品块,示例:
  2. <div class="aui-padded-5">
  3. <div class="zknight-h5goodslist-main">
  4. <!-- 商品图片 -->
  5. <div class="zknight-h5goodslist-img">
  6. <img width="100%" src="image/zknight_h5goodslist_demo.jpg">
  7. </div>
  8. <div class=" aui-padded-l-10 aui-padded-r-10">
  9. <!-- 商品标题 -->
  10. <div class="zknight-h5goodslist-goodsname aui-padded-b-5 aui-font-size-14 aui-ellipsis-2">
  11. <!-- 热度 ,根据需求是否展示-->
  12. <span class="zknight-h5goodslist-tag zknight-h5goodslist-tag-hot"></span>
  13. 【两套减30元】蓝月亮 洗衣液机洗14斤套装3kg+2kg*1+1kg*2
  14. </div>
  15. <!-- 副标题 -->
  16. <div class="aui-font-size-12 aui-margin-t-5 aui-margin-b-5 aui-ellipsis-1 zknight-h5goodslist-999">
  17. 蓝月亮的瓶子真的是蓝色的欸蓝月亮的瓶子真的是蓝色的欸
  18. </div>
  19. <!-- 商品标签 -->
  20. <div class="aui-font-size-12 aui-margin-t-10 aui-margin-b-10">
  21. <span class="zknight-h5goodslist-tab">包邮</span>
  22. <span class="zknight-h5goodslist-tab">护肤品</span>
  23. <span class="zknight-h5goodslist-tab">无忧退货</span>
  24. </div>
  25. <!-- 价钱 -->
  26. <div class="aui-font-size-20 zknight-h5goodslist-red">
  27. ¥199.00
  28. <span class="zknight-h5goodslist-delline zknight-h5goodslist-gray aui-font-size-12"299.00</span>
  29. </div>
  30. <!-- 已售 -->
  31. <div class="aui-padded-b-5 aui-font-size-14 zknight-h5goodslist-999">
  32. <span class="aui-chat-right aui-font-size-12 zknight-h5goodslist-gray">已售 2222 件</span>
  33. </div>
  34. </div>
  35. </div>
  36. </div>

特别说明

  1. 若有建议请发邮箱:284179192@qq.com