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
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18