增加单页应用的layui-admin
This commit is contained in:
387
single/res/views/index.html
Normal file
387
single/res/views/index.html
Normal file
@@ -0,0 +1,387 @@
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">快捷方式</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-shortcut">
|
||||
<div carousel-item>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="home/homepage1">
|
||||
<i class="layui-icon layui-icon-console"></i>
|
||||
<cite>主页一</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="home/homepage2">
|
||||
<i class="layui-icon layui-icon-chart"></i>
|
||||
<cite>主页二</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="component/layer/list">
|
||||
<i class="layui-icon layui-icon-template-1"></i>
|
||||
<cite>弹层</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="/senior/im/">
|
||||
<i class="layui-icon layui-icon-chat"></i>
|
||||
<cite>聊天</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="component/progress/index">
|
||||
<i class="layui-icon layui-icon-find-fill"></i>
|
||||
<cite>进度条</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="app/workorder/list">
|
||||
<i class="layui-icon layui-icon-survey"></i>
|
||||
<cite>工单</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="user/user/list">
|
||||
<i class="layui-icon layui-icon-user"></i>
|
||||
<cite>用户</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/system/website">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>设置</cite>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">待办事项</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-backlog">
|
||||
<div carousel-item>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="app/content/comment" class="layadmin-backlog-body">
|
||||
<h3>待审评论</h3>
|
||||
<p><cite>66</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="app/forum/list" class="layadmin-backlog-body">
|
||||
<h3>待审帖子</h3>
|
||||
<p><cite>12</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="template/goodslist" class="layadmin-backlog-body">
|
||||
<h3>待审商品</h3>
|
||||
<p><cite>99</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});" class="layadmin-backlog-body">
|
||||
<h3>待发货</h3>
|
||||
<p><cite>20</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;" class="layadmin-backlog-body">
|
||||
<h3>待审友情链接</h3>
|
||||
<p><cite style="color: #FF5722;">5</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">数据概览</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
|
||||
<div carousel-item id="LAY-index-dataview">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
<!--<div></div>-->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">访客地区分布</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm4">
|
||||
<table class="layui-table layuiadmin-page-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>地区</th>
|
||||
<th>人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>浙江</td>
|
||||
<td>62310</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>上海</td>
|
||||
<td>59190</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>广东</td>
|
||||
<td>55891</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>北京</td>
|
||||
<td>51919</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>山东</td>
|
||||
<td>39231</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>湖北</td>
|
||||
<td>37109</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="layui-col-sm8">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagethree-home">
|
||||
<div carousel-item id="LAY-index-pagethree-home">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-tab layui-tab-brief layadmin-latestData">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">今日热搜</li>
|
||||
<li>今日热帖</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<table id="LAY-index-topSearch"></table>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<table id="LAY-index-topCard"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">版本信息</div>
|
||||
<div class="layui-card-body layui-text layadmin-version">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="100">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>页面模式</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
{{ layui.admin.mode === 'spa' ? '单页面' : layui.admin.mode }}
|
||||
</script>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
v{{ layui.admin.v }}
|
||||
</script>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Layui</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
v{{ layui.v }}
|
||||
</script>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主要特色</td>
|
||||
<td>单页面 / 响应式 / 清爽 / 极简</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">效果报告</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>
|
||||
<div class="layui-progress-bar" lay-percent="65%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
|
||||
<div class="layui-progress-bar" lay-percent="32%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进度占用</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>CPU使用率</h3>
|
||||
<div class="layui-progress-bar" lay-percent="58%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>内存占用率</h3>
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">项目进展</div>
|
||||
<div class="layui-card-body" style="padding: 22px 15px;">
|
||||
<table id="LAY-home-homepage-console"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">产品动态</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade" lay-filter="news">
|
||||
<div carousel-item>
|
||||
<div><a href="#" class="layui-bg-red">layuiAdmin 快速上手文档</a></div>
|
||||
<div><a href="#" class="layui-bg-green">layuiAdmin 技术问答专区</a></div>
|
||||
<div><a href="#" class="layui-bg-blue">layuiAdmin 模板官网</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
模板心语
|
||||
<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
|
||||
</div>
|
||||
<div class="layui-card-body layui-text layadmin-text">
|
||||
<blockquote class="layui-elem-quote">
|
||||
<p>所谓“单页版”，即 SPA（单页面应用系统）开发模式，也就是所有的页面动作都是在一个宿主页面中完成，通常用于前后端分离。其中视图层全权由前端把控，数据一律走 Ajax 异步请求。layuiAdmin 内部实现了一套基于 location.hash 的路由和模板机制，这使得你可以很轻松地实现界面的跳转与渲染。另外注意的是，接口鉴权不再适用于传统的 session 模式，一般需要采用 JWT。总体来说，刚开始使用会相对有些复杂，但使用习惯后，项目会更易维护。</p>
|
||||
<p>子曰：君子不用防，小人防不住。</p>
|
||||
<p>请尊重知识产权，尊重他人劳动成果。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
//加载 modules 目录下的对应模块
|
||||
/*
|
||||
|
||||
小贴士：
|
||||
这里 console 模块对应 的 console.js 并不会重复加载，
|
||||
然而该页面的视图则是重新插入到容器，那如何保证能重新来控制视图？有两种方式：
|
||||
1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
|
||||
2): 直接在 layui.use 方法的回调中书写业务代码，即:
|
||||
layui.use('console', function(){
|
||||
//同 console.js 中的 layui.define 回调中的代码
|
||||
});
|
||||
|
||||
这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。
|
||||
|
||||
*/
|
||||
layui.use('console', layui.factory('console'));
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user