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>
  9.             <div class=" aui-padded-l-10 aui-padded-r-10">
  10.                 <!-- 商品标题 -->
  11.                 <div class="zknight-h5goodslist-goodsname aui-padded-b-5 aui-font-size-14 aui-ellipsis-2">
  12.                     <!-- 热度 ，根据需求是否展示-->
  13.                     <span class="zknight-h5goodslist-tag zknight-h5goodslist-tag-hot"></span>
  14.                     【两套减30元】蓝月亮 洗衣液机洗14斤套装3kg+2kg*1+1kg*2
  15.                 </div>
  17.                 <!-- 副标题 -->
  18.                 <div class="aui-font-size-12 aui-margin-t-5 aui-margin-b-5 aui-ellipsis-1 zknight-h5goodslist-999">
  19.                     蓝月亮的瓶子真的是蓝色的欸蓝月亮的瓶子真的是蓝色的欸
  20.                 </div>
  22.                 <!-- 商品标签 -->
  23.                 <div class="aui-font-size-12 aui-margin-t-10 aui-margin-b-10">
  24.                     <span class="zknight-h5goodslist-tab">包邮</span>
  25.                     <span class="zknight-h5goodslist-tab">护肤品</span>
  26.                     <span class="zknight-h5goodslist-tab">无忧退货</span>
  27.                 </div>
  29.                 <!-- 价钱 -->
  30.                 <div class="aui-font-size-20 zknight-h5goodslist-red">
  31.                     ¥199.00
  32.                     <span class="zknight-h5goodslist-delline zknight-h5goodslist-gray aui-font-size-12">¥299.00</span>
  33.                 </div>
  35.                 <!-- 已售 -->
  36.                 <div class="aui-padded-b-5 aui-font-size-14 zknight-h5goodslist-999">
  37.                     <span class="aui-chat-right aui-font-size-12 zknight-h5goodslist-gray">已售 2222 件</span>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>

特别说明

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