welcome-1.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>首页二</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  10. <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
  11. <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
  12. <style>
  13. .layui-card {
  14. border: 1px solid #f2f2f2;
  15. border-radius: 5px;
  16. }
  17. .icon {
  18. margin-right: 10px;
  19. color: #1aa094;
  20. }
  21. .icon-cray {
  22. color: #ffb800 !important;
  23. }
  24. .icon-blue {
  25. color: #1e9fff !important;
  26. }
  27. .icon-tip {
  28. color: #ff5722 !important;
  29. }
  30. .layuimini-qiuck-module {
  31. text-align: center;
  32. margin-top: 10px
  33. }
  34. .layuimini-qiuck-module a i {
  35. display: inline-block;
  36. width: 100%;
  37. height: 60px;
  38. line-height: 60px;
  39. text-align: center;
  40. border-radius: 2px;
  41. font-size: 30px;
  42. background-color: #F8F8F8;
  43. color: #333;
  44. transition: all .3s;
  45. -webkit-transition: all .3s;
  46. }
  47. .layuimini-qiuck-module a cite {
  48. position: relative;
  49. top: 2px;
  50. display: block;
  51. color: #666;
  52. text-overflow: ellipsis;
  53. overflow: hidden;
  54. white-space: nowrap;
  55. font-size: 14px;
  56. }
  57. .welcome-module {
  58. width: 100%;
  59. height: 210px;
  60. }
  61. .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
  62. .panel-body {padding:10px}
  63. .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
  64. .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
  65. .layui-red {color:red}
  66. .main_btn > p {height:40px;}
  67. .layui-bg-number {background-color:#F8F8F8;}
  68. .layuimini-notice:hover {background:#f6f6f6;}
  69. .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
  70. .layuimini-notice-title,.layuimini-notice-label {
  71. padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
  72. .layuimini-notice-title {line-height:28px;font-size:14px;}
  73. .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
  74. </style>
  75. </head>
  76. <body>
  77. <div class="layuimini-container">
  78. <div class="layuimini-main">
  79. <div class="layui-row layui-col-space15">
  80. <div class="layui-col-md8">
  81. <div class="layui-row layui-col-space15">
  82. <div class="layui-col-md6">
  83. <div class="layui-card">
  84. <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
  85. <div class="layui-card-body">
  86. <div class="welcome-module">
  87. <div class="layui-row layui-col-space10">
  88. <div class="layui-col-xs6">
  89. <div class="panel layui-bg-number">
  90. <div class="panel-body">
  91. <div class="panel-title">
  92. <span class="label pull-right layui-bg-blue">实时</span>
  93. <h5>用户统计</h5>
  94. </div>
  95. <div class="panel-content">
  96. <h1 class="no-margins">1234</h1>
  97. <small>当前分类总记录数</small>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="layui-col-xs6">
  103. <div class="panel layui-bg-number">
  104. <div class="panel-body">
  105. <div class="panel-title">
  106. <span class="label pull-right layui-bg-cyan">实时</span>
  107. <h5>商品统计</h5>
  108. </div>
  109. <div class="panel-content">
  110. <h1 class="no-margins">1234</h1>
  111. <small>当前分类总记录数</small>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="layui-col-xs6">
  117. <div class="panel layui-bg-number">
  118. <div class="panel-body">
  119. <div class="panel-title">
  120. <span class="label pull-right layui-bg-orange">实时</span>
  121. <h5>浏览统计</h5>
  122. </div>
  123. <div class="panel-content">
  124. <h1 class="no-margins">1234</h1>
  125. <small>当前分类总记录数</small>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="layui-col-xs6">
  131. <div class="panel layui-bg-number">
  132. <div class="panel-body">
  133. <div class="panel-title">
  134. <span class="label pull-right layui-bg-green">实时</span>
  135. <h5>订单统计</h5>
  136. </div>
  137. <div class="panel-content">
  138. <h1 class="no-margins">1234</h1>
  139. <small>当前分类总记录数</small>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="layui-col-md6">
  150. <div class="layui-card">
  151. <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
  152. <div class="layui-card-body">
  153. <div class="welcome-module">
  154. <div class="layui-row layui-col-space10 layuimini-qiuck">
  155. <div class="layui-col-xs3 layuimini-qiuck-module">
  156. <a href="javascript:;" layuimini-content-href="page/menu.html" data-title="菜单管理" data-icon="fa fa-window-maximize">
  157. <i class="fa fa-window-maximize"></i>
  158. <cite>菜单管理</cite>
  159. </a>
  160. </div>
  161. <div class="layui-col-xs3 layuimini-qiuck-module">
  162. <a href="javascript:;" layuimini-content-href="page/setting.html" data-title="系统设置" data-icon="fa fa-gears">
  163. <i class="fa fa-gears"></i>
  164. <cite>系统设置</cite>
  165. </a>
  166. </div>
  167. <div class="layui-col-xs3 layuimini-qiuck-module">
  168. <a href="javascript:;" layuimini-content-href="page/table.html" data-title="表格示例" data-icon="fa fa-file-text">
  169. <i class="fa fa-file-text"></i>
  170. <cite>表格示例</cite>
  171. </a>
  172. </div>
  173. <div class="layui-col-xs3 layuimini-qiuck-module">
  174. <a href="javascript:;" layuimini-content-href="page/icon.html" data-title="图标列表" data-icon="fa fa-dot-circle-o">
  175. <i class="fa fa-dot-circle-o"></i>
  176. <cite>图标列表</cite>
  177. </a>
  178. </div>
  179. <div class="layui-col-xs3 layuimini-qiuck-module">
  180. <a href="javascript:;" layuimini-content-href="page/form.html" data-title="表单示例" data-icon="fa fa-calendar">
  181. <i class="fa fa-calendar"></i>
  182. <cite>表单示例</cite>
  183. </a>
  184. </div>
  185. <div class="layui-col-xs3 layuimini-qiuck-module">
  186. <a href="javascript:;" layuimini-content-href="page/404.html" data-title="404页面" data-icon="fa fa-hourglass-end">
  187. <i class="fa fa-hourglass-end"></i>
  188. <cite>404页面</cite>
  189. </a>
  190. </div>
  191. <div class="layui-col-xs3 layuimini-qiuck-module">
  192. <a href="javascript:;" layuimini-content-href="page/button.html" data-title="按钮示例" data-icon="fa fa-snowflake-o">
  193. <i class="fa fa-snowflake-o"></i>
  194. <cite>按钮示例</cite>
  195. </a>
  196. </div>
  197. <div class="layui-col-xs3 layuimini-qiuck-module">
  198. <a href="javascript:;" layuimini-content-href="https://www.baidu.com" data-title="百度搜索" data-icon="fa fa-search">
  199. <i class="fa fa-search"></i>
  200. <cite>百度搜索</cite>
  201. </a>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <div class="layui-col-md12">
  209. <div class="layui-card">
  210. <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
  211. <div class="layui-card-body">
  212. <div id="echarts-records" style="width: 100%;min-height:500px"></div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="layui-col-md4">
  219. <div class="layui-card">
  220. <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
  221. <div class="layui-card-body layui-text">
  222. <div class="layuimini-notice">
  223. <div class="layuimini-notice-title">修改选项卡样式</div>
  224. <div class="layuimini-notice-extra">2019-07-11 23:06</div>
  225. <div class="layuimini-notice-content layui-hide">
  226. 界面足够简洁清爽。<br>
  227. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  228. 支持多tab,可以打开多窗口。<br>
  229. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  230. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  231. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  232. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  233. 移动端的友好支持。<br>
  234. </div>
  235. </div>
  236. <div class="layuimini-notice">
  237. <div class="layuimini-notice-title">新增系统404模板</div>
  238. <div class="layuimini-notice-extra">2019-07-11 12:57</div>
  239. <div class="layuimini-notice-content layui-hide">
  240. 界面足够简洁清爽。<br>
  241. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  242. 支持多tab,可以打开多窗口。<br>
  243. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  244. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  245. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  246. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  247. 移动端的友好支持。<br>
  248. </div>
  249. </div>
  250. <div class="layuimini-notice">
  251. <div class="layuimini-notice-title">新增treetable插件和菜单管理样式</div>
  252. <div class="layuimini-notice-extra">2019-07-05 14:28</div>
  253. <div class="layuimini-notice-content layui-hide">
  254. 界面足够简洁清爽。<br>
  255. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  256. 支持多tab,可以打开多窗口。<br>
  257. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  258. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  259. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  260. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  261. 移动端的友好支持。<br>
  262. </div>
  263. </div>
  264. <div class="layuimini-notice">
  265. <div class="layuimini-notice-title">修改logo缩放问题</div>
  266. <div class="layuimini-notice-extra">2019-07-04 11:02</div>
  267. <div class="layuimini-notice-content layui-hide">
  268. 界面足够简洁清爽。<br>
  269. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  270. 支持多tab,可以打开多窗口。<br>
  271. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  272. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  273. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  274. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  275. 移动端的友好支持。<br>
  276. </div>
  277. </div>
  278. <div class="layuimini-notice">
  279. <div class="layuimini-notice-title">修复左侧菜单缩放tab无法移动</div>
  280. <div class="layuimini-notice-extra">2019-06-17 11:55</div>
  281. <div class="layuimini-notice-content layui-hide">
  282. 界面足够简洁清爽。<br>
  283. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  284. 支持多tab,可以打开多窗口。<br>
  285. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  286. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  287. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  288. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  289. 移动端的友好支持。<br>
  290. </div>
  291. </div>
  292. <div class="layuimini-notice">
  293. <div class="layuimini-notice-title">修复多模块菜单栏展开有问题</div>
  294. <div class="layuimini-notice-extra">2019-06-13 14:53</div>
  295. <div class="layuimini-notice-content layui-hide">
  296. 界面足够简洁清爽。<br>
  297. 一个接口几行代码而已直接初始化整个框架,无需复杂操作。<br>
  298. 支持多tab,可以打开多窗口。<br>
  299. 支持无限级菜单和对font-awesome图标库的完美支持。<br>
  300. 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验。<br>
  301. url地址hash定位,可以清楚看到当前tab的地址信息。<br>
  302. 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。<br>
  303. 移动端的友好支持。<br>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. <div class="layui-card">
  309. <div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
  310. <div class="layui-card-body layui-text">
  311. <table class="layui-table">
  312. <colgroup>
  313. <col width="100">
  314. <col>
  315. </colgroup>
  316. <tbody>
  317. <tr>
  318. <td>框架名称</td>
  319. <td>
  320. layuimini
  321. </td>
  322. </tr>
  323. <tr>
  324. <td>当前版本</td>
  325. <td>v2.0.0</td>
  326. </tr>
  327. <tr>
  328. <td>主要特色</td>
  329. <td>零门槛 / 响应式 / 清爽 / 极简</td>
  330. </tr>
  331. <tr>
  332. <td>演示地址</td>
  333. <td>
  334. iframe版-v2:<a href="http://layuimini.99php.cn/iframe/v2/index.html" target="_blank">点击查看</a><br>
  335. 单页版-v2:<a href="http://layuimini.99php.cn/onepage/v2/index.html" target="_blank">点击查看</a><br>
  336. </td>
  337. </tr>
  338. <tr>
  339. <td>下载地址</td>
  340. <td>
  341. iframe版-v2:<a href="https://github.com/zhongshaofa/layuimini/tree/v2" target="_blank">github</a> / <a href="https://gitee.com/zhongshaofa/layuimini/tree/v2" target="_blank">gitee</a><br>
  342. 单页版-v2:<a href="https://github.com/zhongshaofa/layuimini/tree/v2-onepage" target="_blank">github</a> / <a href="https://gitee.com/zhongshaofa/layuimini/tree/v2-onepage" target="_blank">gitee</a><br>
  343. </td>
  344. </tr>
  345. <tr>
  346. <td>Gitee</td>
  347. <td style="padding-bottom: 0;">
  348. <div class="layui-btn-container">
  349. <a href="https://gitee.com/zhongshaofa/layuimini" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/zhongshaofa/layuimini/badge/star.svg?theme=dark" alt="star"></a>
  350. <a href="https://gitee.com/zhongshaofa/layuimini" target="_blank"><img src="https://gitee.com/zhongshaofa/layuimini/badge/fork.svg?theme=dark" alt="fork"></a>
  351. </div>
  352. </td>
  353. </tr>
  354. <tr>
  355. <td>Github</td>
  356. <td style="padding-bottom: 0;">
  357. <div class="layui-btn-container">
  358. <iframe src="https://ghbtns.com/github-btn.html?user=zhongshaofa&repo=layuimini&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
  359. <iframe src="https://ghbtns.com/github-btn.html?user=zhongshaofa&repo=layuimini&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
  360. </div>
  361. </td>
  362. </tr>
  363. </tbody>
  364. </table>
  365. </div>
  366. </div>
  367. <div class="layui-card">
  368. <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
  369. <div class="layui-card-body layui-text layadmin-text">
  370. <p>本模板基于layui2.5.4以及font-awesome-4.7.0进行实现。layui开发文档地址:<a
  371. class="layui-btn layui-btn-xs layui-btn-danger" target="_blank"
  372. href="http://www.layui.com/doc">layui文档</a></p>
  373. <p>技术交流QQ群(1165301500):<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=eUm5xKG1"><img
  374. border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="layuimini"
  375. title="layuimini"></a>(加群请备注来源:如gitee、github、官网等)</p>
  376. <p>喜欢此后台模板的可以给我的GitHub和Gitee加个Star支持一下</p>
  377. </div>
  378. </div>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  384. <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
  385. <script>
  386. layui.use(['layer', 'miniTab', 'echarts'], function () {
  387. var $ = layui.jquery,
  388. layer = layui.layer,
  389. miniTab = layui.miniTab,
  390. echarts = layui.echarts;
  391. miniTab.listen();
  392. /**
  393. * 查看公告信息
  394. **/
  395. $('body').on('click', '.layuimini-notice', function () {
  396. var title = $(this).children('.layuimini-notice-title').text(),
  397. noticeTime = $(this).children('.layuimini-notice-extra').text(),
  398. content = $(this).children('.layuimini-notice-content').html();
  399. var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
  400. '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
  401. '<div style="font-size: 12px">' + content + '</div>\n' +
  402. '</div>\n';
  403. parent.layer.open({
  404. type: 1,
  405. title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
  406. area: '300px;',
  407. shade: 0.8,
  408. id: 'layuimini-notice',
  409. btn: ['查看', '取消'],
  410. btnAlign: 'c',
  411. moveType: 1,
  412. content:html,
  413. success: function (layero) {
  414. var btn = layero.find('.layui-layer-btn');
  415. btn.find('.layui-layer-btn0').attr({
  416. href: 'https://gitee.com/zhongshaofa/layuimini',
  417. target: '_blank'
  418. });
  419. }
  420. });
  421. });
  422. /**
  423. * 报表功能
  424. */
  425. var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
  426. var optionRecords = {
  427. tooltip: {
  428. trigger: 'axis'
  429. },
  430. legend: {
  431. data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
  432. },
  433. grid: {
  434. left: '3%',
  435. right: '4%',
  436. bottom: '3%',
  437. containLabel: true
  438. },
  439. toolbox: {
  440. feature: {
  441. saveAsImage: {}
  442. }
  443. },
  444. xAxis: {
  445. type: 'category',
  446. boundaryGap: false,
  447. data: ['周一','周二','周三','周四','周五','周六','周日']
  448. },
  449. yAxis: {
  450. type: 'value'
  451. },
  452. series: [
  453. {
  454. name:'邮件营销',
  455. type:'line',
  456. data:[120, 132, 101, 134, 90, 230, 210]
  457. },
  458. {
  459. name:'联盟广告',
  460. type:'line',
  461. data:[220, 182, 191, 234, 290, 330, 310]
  462. },
  463. {
  464. name:'视频广告',
  465. type:'line',
  466. data:[150, 232, 201, 154, 190, 330, 410]
  467. },
  468. {
  469. name:'直接访问',
  470. type:'line',
  471. data:[320, 332, 301, 334, 390, 330, 320]
  472. },
  473. {
  474. name:'搜索引擎',
  475. type:'line',
  476. data:[820, 932, 901, 934, 1290, 1330, 1320]
  477. }
  478. ]
  479. };
  480. echartsRecords.setOption(optionRecords);
  481. // echarts 窗口缩放自适应
  482. window.onresize = function(){
  483. echartsRecords.resize();
  484. }
  485. });
  486. </script>
  487. </body>
  488. </html>