## 一. 組件詳解
1. 圖文組件的定義：由一些列有規律，可重復的的圖文組合所構成的組件。
2. 圖文組示例如下圖所示。
3. 圖文組結構刨析：
說明：
（1）圖文組：圖文組件最外層的盒子。
（2）圖文組行：是指圖文組中的可重復單位所組成的一排。
（3）可重復單位：是由文字和一張圖片組成的，具有可復制性，重復性；圖文組中所有的可重復單位都是相同的。
* * * * *
## 二.功能描述
1. 圖文組件能夠很好的展示一些具有列表性質的信息，他能夠讓訪問者快速瀏覽，接受這些信息。
2. 可用于團隊介紹，或者不需要有詳情頁的產品等。
* * * * *
## 三.代碼規范
* 1.圖文組件代碼中必需含有三層結構，分別是圖文組，圖文組行，可重復單位。他們之間由左至右必需是**父子關系**。
* 2.圖文組需要data-type="imgFont-group-common"屬性做標識，其style必需含有position:relative樣式。
* 3.圖文組行需要data-type="imgFont-row"屬性做標識，其style必需含有position:relative樣式，并且添加data-num="num"(num,是指該行最多可以放多少個可重復單位，一般為3，4或則6個)屬性。
* 4.可重復單位需要data-type="imgFont-el"屬性做標識，其style必需含有position:relative樣式。
* 5.可重復單位是由一張圖片和一行或多行文字組合而成，其中文字部分應遵循**文字規范**（文字部分需添加data-effect="edit"屬性），圖片部分應遵循**圖片規范**（圖片添加**data-type="imgFont-img"**，onerror屬性）。
* 6.應支持響應式布局（**建議用bootstrap**）。
* 7.在該組件下邊需要引入`<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/imgFontBase.js" onload=imgFontInit(this); onclick=imgFontInit(this);></script>`。
* 8.規范圖解：
> 
* * * * *
## 四.代碼示例
#### 應用場景一：
* 代碼
~~~
<section id="h5c_m_uHoiadatDVMJ" class="h5c_BvkpsTXEnmsPH" style="position: relative;">
<h1 class="text-center" data-effect="edit">熱門主題</h1>
<div class="container">
/*******************以下是圖文組件**********************/
<div data-type="imgFont-group-common" style="position: relative;"> //***規范2****
<style>
.h5c_BvkpsTXEnmsPH .thumbnail{background-color:#fff;padding: 0;border-radius: 0;border: none;}
.h5c_BvkpsTXEnmsPH .thumbnail .subsection-subheadline{font-size:2.8vh;}
.h5c_BvkpsTXEnmsPH .thumbnail .copy-wrapper{font-size:16px;}
.h5c_BvkpsTXEnmsPH .thumbnail .more-l{font-size: 16px;}
</style>
<div class="row" style="margin:0 0 10% 0;position: relative;" data-type="imgFont-row" data-num="2">//***規范3****
<div class="col-xs-12 col-sm-6" style="position: relative;" data-type="imgFont-el">//***規范4****
<div class="thumbnail">
<img src="/diy/asyn.file/jsb/module/imgFont/imgFont-13/img/a.jpg" data-type="imgFont-img" onerror="javascript:this.src='/diy/asyn.file/jsb/module/imgFont/imgFont-13/img/a.jpg'" class="img-responsive" alt="">//***規范5****
<div>
<h3 data-effect="edit" class="subsection-subheadline">拍攝和管理照片</h3>//***規范5****
<p data-effect="edit" class="copy-wrapper">輕點手指，捕捉所有音樂靈感，<br>隨后將它們轉變為佳作。</p>//***規范5****
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" style="position: relative;" data-type="imgFont-el">
<div class="thumbnail">
<img src="/diy/asyn.file/jsb/module/imgFont/imgFont-13/img/a.jpg" data-type="imgFont-img" onerror="javascript:this.src='/diy/asyn.file/jsb/module/imgFont/imgFont-13/img/a.jpg'" class="img-responsive" alt="">
<div>
<h3 data-effect="edit" class="subsection-subheadline">拍攝和管理照片</h3>
<p data-effect="edit" class="copy-wrapper">輕點手指，捕捉所有音樂靈感，<br>隨后將它們轉變為佳作。</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/imgFontBase.js" onload="imgFontInit(this);" onclick="imgFontInit(this);"></script>//***規范7****
/*******************以上是圖文組件**********************/
</div>
</section>
~~~
* 效果：
> 
* * * * *
## 五.補充說明
按照規范開發的組件，嗨創將會為其提供以下功能
1.添加可重復單位
2.添加hover特效
3.修改文字
4.修改圖片
5.刪除可重復單位
