點選檢視程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>後臺首頁 - ICbA後臺模板 - 普通版演示</title>
<meta name="keywords" content="ICbA,ICbA模板,後臺模板,ICbA後臺模板">
<meta name="description" content="ICbA是一個輕量級後臺模板,基於layui框架開發,簡潔而不簡單">
<link rel="stylesheet" href="/_/_pc/_js/layui/css/layui.css">
<link rel="stylesheet" href="/_/_pc/_css/base.css">
<script src="/_/_pc/_js/layui/layui.js"></script>
<script src="/_/_pc/_js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="layui-side layui-bg-black">
<div class="layui-header"><a href="###">ICbA</a></div>
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"> <a class="" href="javascript:;"><i class="layui-icon"></i> <span>常用功能</span></a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;"><i class="layui-icon"></i><span> 個人資訊</span></a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;"><i class="layui-icon"></i><span> 退出後臺</span></a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">A 數學 </a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;" >A11 公式一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A12 公式一對多</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A21 單位一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A21 單位一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A22 單位一對多</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A31 計量一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A32 計價一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A91 數學應用題</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">B 商家</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">B11 商家資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">B21 商家賬單</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">C 顧客 </a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">C11 顧客資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">C21 顧客賬單</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">U 使用者</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U11 使用者資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U12 登陸資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U13 操作資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U21 使用者評價</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U31 使用者評分</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">E 教育</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E11 單選題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E12 多選題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E13 判斷題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E14 案例題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E21 小學一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E22 小學二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E23 小學三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E24 小學四年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E25 小學五年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E26 小學六年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E31 初中一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E32 初中二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E33 初中三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E41 高中一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E42 高中二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E43 高中三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E51 一建經濟</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E52 一建法規</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E53 一建管理</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E54 一建實務</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E61 一造管理</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E62 一造計量</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E63 一造計價</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E64 一造案例</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">T 專案</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">T11 測試</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">F 烹飪</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">F11 菜譜</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">F21 製作時間</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">N 筆記</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">N11 寫筆記</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">X 認物</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X11 食物</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X21 建築</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X31 自然</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">Y 監控</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y11 賬戶監控</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y12 影片監控</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y13 位置監控</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">Z 整理</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Z11 電腦資料</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Z21 手機資料</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon"></i><span> 退出後臺</span></a></li>
</ul>
</div>
<div class="t-container">
<div class="m-map g-c">
<a href="###"><i class="layui-icon g-l"></i></a>
<ul>
<li><a href="index.html">首頁</a> <span>/</span></li>
<li><a href="javascript:;">文章管理</a> <span>/</span></li>
<li><a href="###">文章管理</a> <span>/</span></li>
<li><span>A112415</span> <a href="###l"><i class="layui-icon"></i></a> </li>
</ul>
</div>
<div class="m-body">
<blockquote class="layui-elem-quote">
<h2>ICbA 三段式數字人生系統</h2>
<p>基於layui框架與Vue.js構建</p>
<p>輕量不復雜 簡潔不簡單</p>
</blockquote>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
<h2>ICbA 介紹</h2>
</div>
<div class="layui-card-body" style="height: 250px;">
<ul>
<li>ICbA 是一個輕量級的後臺模板,基於layui框架</li>
<li>風格簡潔簡單,中小型專案首選</li>
<li>不管你是初級還是高階工程師,都有可以快速上手</li>
<li>ICbA是由vue混合式開發,可以在模板任意使用jq或vue/layui</li>
<li>當前版本: <b id="version"></b></li>
<li><b>關注官網隨時下載最新版</b></li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
<h2>ICbA 特點</h2>
</div>
<div class="layui-card-body" style="height: 250px;">
<ul>
<li>輕量級</li>
<li>簡潔直爽</li>
<li>基於layui框架,上手快</li>
<li>支援jq/vue/layui</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md9" style="padding-right: 20px">
<h2>最新會員</h2>
<table class="layui-table layui-form">
<thead>
<tr>
<th><a href="###">編號</a></th>
<th>手機</th>
<th>使用者名稱</th>
<th>暱稱</th>
<th>郵箱</th>
<th><a href="###">註冊時間</a></th>
<th><a href="###">登入時間</a></th>
<th><a href="###">登入次數</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td></td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td></td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td></td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td></td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td>chaoyi</td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
<tr>
<td>36567</td>
<td>15912345678</td>
<td>YY187919</td>
<td></td>
<td>YY187919@flash127.com</td>
<td>2019-04-01 11:44:20</td>
<td>2019-04-01 11:44:20</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div class="layui-col-md3">
<h2>會員統計</h2>
<table class="layui-table layui-form">
<tr>
<th>今天登入</th>
<td>555</td>
</tr>
<tr>
<th>昨天登入</th>
<td>5552</td>
</tr>
<tr>
<th>會員總數</th>
<td>224555</td>
</tr>
<tr>
<th>月活躍數</th>
<td>55885</td>
</tr>
<tr>
<th>季活躍數</th>
<td>5485885</td>
</tr>
<tr>
<th>vip使用者</th>
<td>65885</td>
</tr>
<tr>
<th>過期vip</th>
<td>525885</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="layui-side layui-bg-black">
<div class="layui-header"><a href="###">ICbA</a></div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"> <a class="" href="javascript:;"><i class="layui-icon"></i> <span>常用功能</span></a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;"><i class="layui-icon"></i><span> 個人資訊</span></a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;"><i class="layui-icon"></i><span> 退出後臺</span></a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">A 數學 </a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;" >A11 公式一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A12 公式一對多</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A21 單位一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A21 單位一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A22 單位一對多</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A31 計量一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A32 計價一對一</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">A91 數學應用題</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">B 商家</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">B11 商家資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">B21 商家賬單</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">C 顧客 </a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">C11 顧客資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">C21 顧客賬單</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">U 使用者</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U11 使用者資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U12 登陸資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U13 操作資訊</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U21 使用者評價</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">U31 使用者評分</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">E 教育</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E11 單選題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E12 多選題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E13 判斷題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E14 案例題</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E21 小學一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E22 小學二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E23 小學三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E24 小學四年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E25 小學五年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E26 小學六年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E31 初中一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E32 初中二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E33 初中三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E41 高中一年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E42 高中二年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E43 高中三年級</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E51 一建經濟</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E52 一建法規</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E53 一建管理</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E54 一建實務</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E61 一造管理</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E62 一造計量</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E63 一造計價</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">E64 一造案例</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">T 專案</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">T11 測試</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">F 烹飪</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">F11 菜譜</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">F21 製作時間</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">N 筆記</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">N11 寫筆記</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">X 認物</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X11 食物</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X21 建築</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">X31 自然</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">Y 監控</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y11 賬戶監控</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y12 影片監控</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Y13 位置監控</a></dd>
</dl>
</li>
<li class="layui-nav-item"> <a href="javascript:;">Z 整理</a>
<dl class="layui-nav-child">
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Z11 電腦資料</a></dd>
<dd><a href="##" class="g-r"><i class="layui-icon"></i></a><a href="javascript:;">Z21 手機資料</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon"></i><span> 退出後臺</span></a></li>
</ul>
</div>
效果圖：
