產品組規范 · 嗨創開發規范

## 一. 組件詳解 1. 產品列表組件的定義：由一列的產品模塊組成，其中產品模塊由產品縮略圖，產品名稱，產品描述，查看更多組成。 2. 產品列表組件示例如下圖所示。 3. 產品列表組件結構刨析： ![](https://box.kancloud.cn/e1cf2a1ad82e464d7938433d653c9f3e_1200x880.png) 說明：（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.規范圖解： ![](https://box.kancloud.cn/7417c2d6365ceb1126dce25fc27ddc33_1200x880.png) * * * * * ## 四.代碼示例 #### 應用場景一： * 代碼 ~~~ <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> ~~~ * 效果： > ![](https://box.kancloud.cn/18cf5cb541d791dcf18df63ef040eb88_1200x333.png) * * * * * ## 五.補充說明按照規范開發的組件，嗨創將會為其提供以下功能 1.設置加載幾條產品 2.設置hover特效