## 一. 组件详解
1. 产品列表组件的定义：由一列的产品模块组成，其中产品模块由产品缩略图，产品名称，产品描述，查看更多组成。
2. 产品列表组件示例如下图所示。
3. 产品列表组件结构刨析：
说明：
（1）产品组件：如图所示
（2）产品行：是指图文组中的产品所组成的一排
（3）产品：由**缩略图**，**产品名称**，**产品描述**，**查看更多**组成。
* * * * *
## 二.功能描述
1. 产品列表组件中的产品与产品的详情页挂钩，当点击产品中的查看更多是，会打开产品的详细信息（这一点是与图文组件最重要的区别，另外产品列表组件对信息以及图片的要求会更高）。
2. 美化页面。
* * * * *
## 三.代码规范
* 1.产品列表组件代码中必需含有三层结构，分别是**产品列表组件，产品行，产品**。他们之间由左至右必需是**父子关系**。
* 2.产品由必须包含四个部分，分别是产品缩略图，产品名称，产品描述，查看更多。
* 3.**产品列表组件**需要 **data-type="products"**属性做标识，其style必需还有**position:relative**样式，添加data-num="num"（num 是该产品默认加载几个产品，例如：**data-num="3"** 默认加载3条） 属性。
* 4.**产品行**需要 data-type="product-row" 属性做标识，其style必需还有position:relative样式，并且添加data-num="num"(num,是指该行最多可以放多少个产品，一般为3，4或则6个)属性。
* 5.**产品**需要data-type="product"属性做标识，其style必需还有position:relative样式。
* 6.**产品缩略图**需要data-type="product-img“属性做标识，添加onerror属性（**图片的宽高比采用4：3**）。
* 7.**产品名称**需要data-type="product-title”属性做标识。
* 8.**产品描述信息**需要data-type="product-desc"属性做标识。
* 9.**产品详情**需要product-see-more属性做标识（采用a标签）。
* 10.应支持响应式布局（**建议用bootstrap**）。
* 11.在该组件下边需要引入`<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productAjax.js" onclick=productAjax(this,32);></script>`
`<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productBase.js" onclick=productInit(this); onload=productInit(this)></script>`
* 12.规范图解：
* * * * *
## 四.代码示例
#### 应用场景一：
* 代码
~~~
<div id="h5c_g_htmlb_tuwen" class="h5c_EAWhnOMQGtaOa" style="background-color: rgb(233,237,240);padding:2% 0;" data="8" data-type="le">
<div class="container">
<style>
h1,h2,h3,h4,h5,p{margin: 0;}
.h5c_EAWhnOMQGtaOa div.row .thumbnail h4{
font-family: "PT Sans", sans-serif;
float: left;
color: #000;
padding: 10px;
margin: 30px 0 120px 30px;
background-color: #fff;
}
.h5c_EAWhnOMQGtaOa .row h2::before{
height: 8px;
width: 271px;
content: "";
display: block;
position: absolute;
left:-120px;
top: 38px;
background: url('/diy/asyn.file/jsb/module/product/product-1/img/line.png') no-repeat;
}
.h5c_EAWhnOMQGtaOa .row h2::after{
height: 8px;
width: 271px;
content: "";
display: block;
position: absolute;
right:-120px;
top: 38px;
background: url('/diy/asyn.file/jsb/module/product/product-1/img/line.png') no-repeat;
}
@media screen and (max-width: 982px){
.h5c_EAWhnOMQGtaOa .row h2:before{width: 0;}
.h5c_EAWhnOMQGtaOa .row h2:after{width: 0;}
}
</style>
/*************************以下是产品列表组件******************************************/
<div class="row" style="margin: 0;position:relative;" data-type="products" data-num="3">//***规范3***
<h2 class="text-center" style="font-family: 微软雅黑;padding: 2% 0 3% 0;position: relative;" data-type="products-title" data-effect="edit">热销产品</h2>
<div class="row" data-type="product-row" data-num="3" style="position:relative;">//***规范4***
<div class="col-xs-12 col-sm-4" style="position:relative;" data-type="product">//***规范5***
<div class="thumbnail" style="border: none;background-color: #fff;padding: 0;">
<img src="/diy/asyn.file/jsb/module/product/product-1/img/pic.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/product/product-1/img/pic.jpg'" data-type="product-img" class="img-responsive" alt="" style="width: 100%;">//***规范6***
<div style="position: absolute;left: 5%;top: 5%;">
<h4 class="text-center" data-type="product-title">嗨创H5</h4>//***规范7***
</div>
<a style="list-style:none;color:#000;display:block;padding:13px 18px;line-height: 140%;font-family: '微软雅黑';letter-spacing: 1px;" class="text-center" data-type="product-desc" product-see-more>//***规范8，9***
嗨创―HI Create，围绕“PC+移动+平板+微站”多屏自适应的交互设计，为你打开脑洞！
</a>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="position:relative;" data-type="product">
<div class="thumbnail" style="border: none;background-color:#fff;padding: 0;">
<img src="/diy/asyn.file/jsb/module/product/product-1/img/pic1.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/product/product-1/img/pic.jpg'" data-type="product-img" class="img-responsive" alt="" style="width: 100%;">
<div style="position: absolute;left: 5%;top: 5%;">
<h4 class="text-center" data-type="product-title">嗨创H5</h4>
</div>
<a style="list-style:none;color:#000;display:block;padding:13px 18px;line-height: 140%;font-family: '微软雅黑';letter-spacing: 1px;" class="text-center" data-type="product-desc" product-see-more>
嗨创―HI Create，围绕“PC+移动+平板+微站”多屏自适应的交互设计，为你打开脑洞！
</a>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="position:relative;" data-type="product">
<div class="thumbnail" style="border: none;background-color:#fff;padding: 0;">
<img src="/diy/asyn.file/jsb/module/product/product-1/img/pic2.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/product/product-1/img/pic.jpg'" data-type="product-img" class="img-responsive" alt="" style="width: 100%;">
<div style="position: absolute;left: 5%;top: 5%;">
<h4 class="text-center" data-type="product-title">嗨创H5</h4>
</div>
<a style="list-style:none;color:#000;display:block;padding:13px 18px;line-height: 140%;font-family: '微软雅黑';letter-spacing: 1px;" class="text-center" data-type="product-desc" product-see-more>
嗨创―HI Create，围绕“PC+移动+平板+微站”多屏自适应的交互设计，为你打开脑洞！
</a>
</div>
</div>
</div>
<a class="text-center" products-see-more style="float:left;width: 100%;display: block;padding-bottom: 5px;">更多..</a>
</div>
/*************************以上是产品列表组件******************************************/
</div>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productAjax.js" onclick=productAjax(this,32);></script>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productBase.js" onclick=productInit(this); onload=productInit(this)></script>
</div>
~~~
* 效果：
> 
* * * * *
## 五.补充说明
按照规范开发的组件，嗨创将会为其提供以下功能
1.设置加载几条产品
2.设置hover特效
