## 一. 组件详解
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.删除可重复单位
