数据统计部件
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
典型结构
-
当前数据统计
-
总收入(元)
共 157 笔
30,000.00
-
总支出(元)
共 2508 笔
23,000.00
可提现金额结构
可提金额
单位:元
7,000,000,00
提现
未来7天内可提金额
单位:元
3,000,000,00
日 期
金额(元)
-
-
2015-11-01
10,000.00
-
2015-11-02
25,000.00
-
2015-11-03
188,000.00
-
2015-11-04
178,800.00
-
2015-11-05
1,112,580,000.00
-
2015-11-06
9,000.00
-
2015-11-07
9,200.00
隐藏
<div class="data-count-wrap">
<div>
<ul class="date-count-ul">
<li class="count-title">
<h4> xxx </h4>
<span class="arrows-shadow"></span>
<span class="arrows"></span>
</li>
<li>
<h5>
<span> xxx </span>
</h5>
<h2> 30,000.00 </h2>
</li>
<li class="last-li">
<h5>
<span> xxx </span>
</h5>
<h2> 620,120.00 </h2>
</li>
</ul>
</div>
</div>
步骤
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
在组件结构的顶级块化父元素中添加.steps-wrap
类,由继承类.pass1
,.pass2
,.pass3
控制展示的步骤流程,
如:class="steps-wrap ( pass1,pass2,pass3 )"
step one
1
2
3
step one
step two
step three
step two
1
2
3
step one
step two
step three
step three
1
2
3
step one
step two
step three
<div class="steps-wrap ( pass1,pass2,pass3 )">
<div class="steps-box">
<div class="step-bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
</div>
<span class="step step1"></span>
<span class="step step2"></span>
<span class="step step3"></span>
<p class="step-title title1"> ... </p>
<p class="step-title title2"> ... </p>
<p class="step-title title3"> ... </p>
</div>
</div>
主导航
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
nav
标签添加类.main-nav-wrap
,子级ul
添加类.main-nav
<nav class="main-nav-wrap">
<ul class="main-nav">
<li class="current">
<a href="###"> ... </a>
</li>
<li>
<a href="###"> ... </a>
</li>
<li>
<a href="###"> ... </a>
</li>
<li>
<a href="###"> ... </a>
</li>
</ul>
</nav>
密码状态标示
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
notice it
已设置
|
支付密码
|
用于付款或修改账户信息时,保护账户资金安全
|
重置
|
未设置
|
支付密码
|
用于付款或修改账户信息时,保护账户资金安全
|
重置
|
<div class="password-status-wrap">
<table class="password-status-table">
<colgroup class="current">
<col style="width: 92px;"/>
<col style="width: 92px;"/>
<col/>
<col style="width: 60px;"/>
</colgroup>
<tbody>
<td>
<span class="password-status-label ( done,notdone )">
<b></b>
...
</span>
</td>
<td>
<strong>
...
</strong>
</td>
<td class="viceText-FontColor>
...
</td>
<td class="text-align-right>
...
</td>
</tbody>
</table>
</div>
银行卡列表
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
结构中的li
标签即为“一张银行卡”,通过.work
,.notwork
,.waiting
三个类的切换,实现银行卡的“已验证”,“重新验证”,“验证中”三种状态的切换
如:<li class="( work,notwork,waiting )">
-
**********6877
已验证
审核中
-
**********6877
已验证
审核中
-
**********6877
已验证
审核中
-
**********6877
已验证
审核中
-
+ 添加银行卡
<div class="bankcard-list-wrap">
<ul class="bankcard-list">
<li class="( work,notwork,waiting )">
<div class="bank-box">
<div class="bank-icon icon-银行英文简写">
银行名称
</div>
<h3>
卡号
</h3>
<span class="work-tag">
已验证
</span>
<div class="notwork">
审核不通过
<a href="###" class="bank-card-btn">
重新绑定
</a>
</div>
<div class="waiting">
审核中
</div>
</li>
<li class="add-card">
<a href="###" class="link-standard"> + 添加银行卡 </a>
</li>
</ul>
</div>
过滤器行内结构
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
结构中用到的所有表单元素,均不用套用标准表单的结构,直接在元素用引用对应的表单样式即可,不明问ray
<div class="fliter-inline-wrap">
<span class="lt">
...
</span>
<div class="fliter-inline-width1">
...
</div>
<div class="fliter-inline-bar">
...
</div>
<button class="btn primary small-btn" type="submit">
...
</button>
</div>
网上银行选择
这里的实例结构对于不同项目的UI的兼容性较差,在不同项目上,可能需要进行二次定义,或者直接重构
notice it
<div class="ebank-wrap">
<ul class="ebanks">
<li class="active">
<label class="ebank-label">
<i></i>
<span class="etag"> 企业(个人) </span>
<span class="bank-bg (bank-...)"></span>
<input type="radio" style="display: none;" name="ebank/>
</label>
</li>
<li>
<label class="more-ebank">
查看更多
</label>
</li>
</ul>
</div>