@tower1229/flow-ui
Version:
Highly customizable UI framework based Seajs/jQuery
274 lines (273 loc) • 11.9 kB
HTML
<div class="p">
<div class="row m-b">
<div class="span-3">
<div class="card card-primary card-inverse">
<div class="card-body">
<div class="row tc">
<div class="span-3">
<i class="ion" style="font-size: 4em"></i>
</div>
<div class="span-9">
<h2>4.589</h2>
<h4 class="text-muted">CLIENTS</h4>
</div>
</div>
</div>
</div>
</div>
<div class="span-3">
<div class="card card-success card-inverse">
<div class="card-body">
<div class="row tc">
<div class="span-3">
<i class="ion" style="font-size: 4em"></i>
</div>
<div class="span-9">
<h2>789</h2>
<h4 class="text-muted">DEALS</h4>
</div>
</div>
</div>
</div>
</div>
<div class="span-3">
<div class="card card-warning card-inverse">
<div class="card-body">
<div class="row tc">
<div class="span-3">
<i class="ion" style="font-size: 4em"></i>
</div>
<div class="span-9">
<h2>$1.999,50</h2>
<h4 class="text-muted">INCOME</h4>
</div>
</div>
</div>
</div>
</div>
<div class="span-3">
<div class="card card-danger card-inverse">
<div class="card-body">
<div class="row tc">
<div class="span-3">
<i class="ion" style="font-size: 4em"></i>
</div>
<div class="span-9">
<h2>999</h2>
<h4 class="text-muted">ACCOUNT</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-b">
<div class="span-9">
<div class="card card-bordered">
<div class="card-head">
<div class="card-title">图表</div>
<div class="card-extra">
<a href="###" id="reset-index-charts"><i class="ion"></i></a>
</div>
</div>
<div class="card-body">
<div id="index-charts" style="height: 400px"></div>
</div>
</div>
</div>
<div class="span-3">
<div class="card card-bordered">
<div class="card-head">
<div class="card-title">指数</div>
</div>
<div class="card-body">
<div style="height: 400px">
<p class="m-b-sm">Visits (40% - 29.703 Users)</p>
<div class="progress progress-success progress-show-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 45%;"></div>
</div>
<span class="progress-text"><span class="progress-text-inner">45%</span></span>
</div>
<p class="m-b-sm">Unique (20% - 24.093 Unique Users)</p>
<div class="progress progress-info progress-show-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 25%;"></div>
</div>
<span class="progress-text"><span class="progress-text-inner">25%</span></span>
</div>
<p class="m-b-sm">Pageviews (60% - 78.706 Views)</p>
<div class="progress progress-warning progress-show-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 65%;"></div>
</div>
<span class="progress-text"><span class="progress-text-inner">65%</span></span>
</div>
<p class="m-b-sm">New Users (80% - 22.123 Users)</p>
<div class="progress progress-danger progress-show-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 80%;"></div>
</div>
<span class="progress-text"><span class="progress-text-inner">80%</span></span>
</div>
<p class="m-b-sm">Bounce Rate (40.15%)</p>
<div class="progress progress-success progress-show-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 40%;"></div>
</div>
<span class="progress-text"><span class="progress-text-inner">40%</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-b">
<div class="span-3">
<div class="card card-bordered">
<div class="card-body">
<div id="index-echarts-2" style="height: 300px"></div>
</div>
<div class="card-foot">
<div class="p-sm">
$11.234,00
<div class="r">
<span class="text-danger"><i class="ion"></i></span> 15%
</div>
</div>
</div>
</div>
</div>
<div class="span-9">
<div id="index-table" style="height: 400px"></div>
</div>
</div>
<div class="row m-b">
<div class="span-6">
<div class="card card-bordered">
<div class="card-head">
<div class="card-title">
简单表格
</div>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samppa Nori</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="label label-success">Active</span>
</td>
</tr>
<tr>
<td>Estavan Lykos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="label label-danger">Banned</span>
</td>
</tr>
<tr>
<td>Chetan Mohamed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="label label-default">Inactive</span>
</td>
</tr>
<tr>
<td>Derick Maximinus</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="label label-warning">Pending</span>
</td>
</tr>
<tr>
<td>Friderik Dávid</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="label label-success">Active</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="span-6">
<div class="card card-bordered">
<div class="card-head">
<div class="card-title">
边框线/hover
</div>
</div>
<div class="card-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samppa Nori</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="label label-success">Active</span>
</td>
</tr>
<tr>
<td>Estavan Lykos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="label label-danger">Banned</span>
</td>
</tr>
<tr>
<td>Chetan Mohamed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="label label-default">Inactive</span>
</td>
</tr>
<tr>
<td>Derick Maximinus</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="label label-warning">Pending</span>
</td>
</tr>
<tr>
<td>Friderik Dávid</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="label label-success">Active</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>