index.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. {include file='common/_header'}
  2. <body>
  3. <div class="lyear-layout-web">
  4. <div class="lyear-layout-container">
  5. {include file='common/_menu'}
  6. <!--头部信息-->
  7. <header class="lyear-layout-header">
  8. <nav class="navbar navbar-default">
  9. <div class="topbar">
  10. <div class="topbar-left">
  11. <div class="lyear-aside-toggler">
  12. <span class="lyear-toggler-bar"></span>
  13. <span class="lyear-toggler-bar"></span>
  14. <span class="lyear-toggler-bar"></span>
  15. </div>
  16. <span class="navbar-page-title"> 后台首页 </span>
  17. </div>
  18. <ul class="topbar-right">
  19. <li class="dropdown dropdown-profile">
  20. <a href="javascript:void(0)" data-toggle="dropdown">
  21. <img class="img-avatar img-avatar-48 m-r-10" src="static/images/users/avatar.jpg" alt="笔下光年" />
  22. <span>笔下光年 <span class="caret"></span></span>
  23. </a>
  24. <ul class="dropdown-menu dropdown-menu-right">
  25. <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
  26. <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
  27. <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
  28. <li class="divider"></li>
  29. <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
  30. </ul>
  31. </li>
  32. <!--切换主题配色-->
  33. <li class="dropdown dropdown-skin">
  34. <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
  35. <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
  36. <li class="drop-title"><p>主题</p></li>
  37. <li class="drop-skin-li clearfix">
  38. <span class="inverse">
  39. <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
  40. <label for="site_theme_1"></label>
  41. </span>
  42. <span>
  43. <input type="radio" name="site_theme" value="dark" id="site_theme_2">
  44. <label for="site_theme_2"></label>
  45. </span>
  46. <span>
  47. <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
  48. <label for="site_theme_3"></label>
  49. </span>
  50. </li>
  51. <li class="drop-title"><p>LOGO</p></li>
  52. <li class="drop-skin-li clearfix">
  53. <span class="inverse">
  54. <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
  55. <label for="logo_bg_1"></label>
  56. </span>
  57. <span>
  58. <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
  59. <label for="logo_bg_2"></label>
  60. </span>
  61. <span>
  62. <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
  63. <label for="logo_bg_3"></label>
  64. </span>
  65. <span>
  66. <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
  67. <label for="logo_bg_4"></label>
  68. </span>
  69. <span>
  70. <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
  71. <label for="logo_bg_5"></label>
  72. </span>
  73. <span>
  74. <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
  75. <label for="logo_bg_6"></label>
  76. </span>
  77. <span>
  78. <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
  79. <label for="logo_bg_7"></label>
  80. </span>
  81. <span>
  82. <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
  83. <label for="logo_bg_8"></label>
  84. </span>
  85. </li>
  86. <li class="drop-title"><p>头部</p></li>
  87. <li class="drop-skin-li clearfix">
  88. <span class="inverse">
  89. <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
  90. <label for="header_bg_1"></label>
  91. </span>
  92. <span>
  93. <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
  94. <label for="header_bg_2"></label>
  95. </span>
  96. <span>
  97. <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
  98. <label for="header_bg_3"></label>
  99. </span>
  100. <span>
  101. <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
  102. <label for="header_bg_4"></label>
  103. </span>
  104. <span>
  105. <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
  106. <label for="header_bg_5"></label>
  107. </span>
  108. <span>
  109. <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
  110. <label for="header_bg_6"></label>
  111. </span>
  112. <span>
  113. <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
  114. <label for="header_bg_7"></label>
  115. </span>
  116. <span>
  117. <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
  118. <label for="header_bg_8"></label>
  119. </span>
  120. </li>
  121. <li class="drop-title"><p>侧边栏</p></li>
  122. <li class="drop-skin-li clearfix">
  123. <span class="inverse">
  124. <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
  125. <label for="sidebar_bg_1"></label>
  126. </span>
  127. <span>
  128. <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
  129. <label for="sidebar_bg_2"></label>
  130. </span>
  131. <span>
  132. <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
  133. <label for="sidebar_bg_3"></label>
  134. </span>
  135. <span>
  136. <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
  137. <label for="sidebar_bg_4"></label>
  138. </span>
  139. <span>
  140. <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
  141. <label for="sidebar_bg_5"></label>
  142. </span>
  143. <span>
  144. <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
  145. <label for="sidebar_bg_6"></label>
  146. </span>
  147. <span>
  148. <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
  149. <label for="sidebar_bg_7"></label>
  150. </span>
  151. <span>
  152. <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
  153. <label for="sidebar_bg_8"></label>
  154. </span>
  155. </li>
  156. </ul>
  157. </li>
  158. <!--切换主题配色-->
  159. </ul>
  160. </div>
  161. </nav>
  162. </header>
  163. <!--End 头部信息-->
  164. <!--页面主要内容-->
  165. <main class="lyear-layout-content">
  166. <div class="container-fluid">
  167. <div class="row">
  168. <div class="col-sm-6 col-lg-3">
  169. <div class="card bg-primary">
  170. <div class="card-body clearfix">
  171. <div class="pull-right">
  172. <p class="h6 text-white m-t-0">今日收入</p>
  173. <p class="h3 text-white m-b-0 fa-1-5x">102,125.00</p>
  174. </div>
  175. <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="col-sm-6 col-lg-3">
  180. <div class="card bg-danger">
  181. <div class="card-body clearfix">
  182. <div class="pull-right">
  183. <p class="h6 text-white m-t-0">用户总数</p>
  184. <p class="h3 text-white m-b-0 fa-1-5x">920,000</p>
  185. </div>
  186. <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="col-sm-6 col-lg-3">
  191. <div class="card bg-success">
  192. <div class="card-body clearfix">
  193. <div class="pull-right">
  194. <p class="h6 text-white m-t-0">下载总量</p>
  195. <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
  196. </div>
  197. <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="col-sm-6 col-lg-3">
  202. <div class="card bg-purple">
  203. <div class="card-body clearfix">
  204. <div class="pull-right">
  205. <p class="h6 text-white m-t-0">新增留言</p>
  206. <p class="h3 text-white m-b-0 fa-1-5x">153 条</p>
  207. </div>
  208. <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="row">
  214. <div class="col-lg-6">
  215. <div class="card">
  216. <div class="card-header">
  217. <h4>每周用户</h4>
  218. </div>
  219. <div class="card-body">
  220. <canvas class="js-chartjs-bars"></canvas>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="col-lg-6">
  225. <div class="card">
  226. <div class="card-header">
  227. <h4>交易历史记录</h4>
  228. </div>
  229. <div class="card-body">
  230. <canvas class="js-chartjs-lines"></canvas>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. <div class="row">
  236. <div class="col-lg-12">
  237. <div class="card">
  238. <div class="card-header">
  239. <h4>项目信息</h4>
  240. </div>
  241. <div class="card-body">
  242. <div class="table-responsive">
  243. <table class="table table-hover">
  244. <thead>
  245. <tr>
  246. <th>#</th>
  247. <th>项目名称</th>
  248. <th>开始日期</th>
  249. <th>截止日期</th>
  250. <th>状态</th>
  251. <th>进度</th>
  252. </tr>
  253. </thead>
  254. <tbody>
  255. <tr>
  256. <td>1</td>
  257. <td>设计新主题</td>
  258. <td>10/02/2019</td>
  259. <td>12/05/2019</td>
  260. <td><span class="label label-warning">待定</span></td>
  261. <td>
  262. <div class="progress progress-striped progress-sm">
  263. <div class="progress-bar progress-bar-warning" style="width: 45%;"></div>
  264. </div>
  265. </td>
  266. </tr>
  267. <tr>
  268. <td>2</td>
  269. <td>网站重新设计</td>
  270. <td>01/03/2019</td>
  271. <td>12/04/2019</td>
  272. <td><span class="label label-success">进行中</span></td>
  273. <td>
  274. <div class="progress progress-striped progress-sm">
  275. <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
  276. </div>
  277. </td>
  278. </tr>
  279. <tr>
  280. <td>3</td>
  281. <td>模型设计</td>
  282. <td>10/10/2019</td>
  283. <td>12/11/2019</td>
  284. <td><span class="label label-warning">待定</span></td>
  285. <td>
  286. <div class="progress progress-striped progress-sm">
  287. <div class="progress-bar progress-bar-warning" style="width: 25%;"></div>
  288. </div>
  289. </td>
  290. </tr>
  291. <tr>
  292. <td>4</td>
  293. <td>后台管理系统模板设计</td>
  294. <td>25/01/2019</td>
  295. <td>09/05/2019</td>
  296. <td><span class="label label-success">进行中</span></td>
  297. <td>
  298. <div class="progress progress-striped progress-sm">
  299. <div class="progress-bar progress-bar-success" style="width: 55%;"></div>
  300. </div>
  301. </td>
  302. </tr>
  303. <tr>
  304. <td>5</td>
  305. <td>前端设计</td>
  306. <td>10/10/2019</td>
  307. <td>12/12/2019</td>
  308. <td><span class="label label-danger">未开始</span></td>
  309. <td>
  310. <div class="progress progress-striped progress-sm">
  311. <div class="progress-bar progress-bar-danger" style="width: 0%;"></div>
  312. </div>
  313. </td>
  314. </tr>
  315. <tr>
  316. <td>6</td>
  317. <td>桌面软件测试</td>
  318. <td>10/01/2019</td>
  319. <td>29/03/2019</td>
  320. <td><span class="label label-success">进行中</span></td>
  321. <td>
  322. <div class="progress progress-striped progress-sm">
  323. <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
  324. </div>
  325. </td>
  326. </tr>
  327. <tr>
  328. <td>7</td>
  329. <td>APP改版开发</td>
  330. <td>25/02/2019</td>
  331. <td>12/05/2019</td>
  332. <td><span class="label label-danger">暂停</span></td>
  333. <td>
  334. <div class="progress progress-striped progress-sm">
  335. <div class="progress-bar progress-bar-danger" style="width: 15%;"></div>
  336. </div>
  337. </td>
  338. </tr>
  339. <tr>
  340. <td>8</td>
  341. <td>Logo设计</td>
  342. <td>10/02/2019</td>
  343. <td>01/03/2019</td>
  344. <td><span class="label label-warning">完成</span></td>
  345. <td>
  346. <div class="progress progress-striped progress-sm">
  347. <div class="progress-bar progress-bar-success" style="width: 100%;"></div>
  348. </div>
  349. </td>
  350. </tr>
  351. </tbody>
  352. </table>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </main>
  360. <!--End 页面主要内容-->
  361. </div>
  362. </div>
  363. <script type="text/javascript">
  364. $(document).ready(function(e) {
  365. var $dashChartBarsCnt = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
  366. $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
  367. var $dashChartBarsData = {
  368. labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  369. datasets: [
  370. {
  371. label: '注册用户',
  372. borderWidth: 1,
  373. borderColor: 'rgba(0,0,0,0)',
  374. backgroundColor: 'rgba(51,202,185,0.5)',
  375. hoverBackgroundColor: "rgba(51,202,185,0.7)",
  376. hoverBorderColor: "rgba(0,0,0,0)",
  377. data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
  378. }
  379. ]
  380. };
  381. var $dashChartLinesData = {
  382. labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
  383. datasets: [
  384. {
  385. label: '交易资金',
  386. data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
  387. borderColor: '#358ed7',
  388. backgroundColor: 'rgba(53, 142, 215, 0.175)',
  389. borderWidth: 1,
  390. fill: false,
  391. lineTension: 0.5
  392. }
  393. ]
  394. };
  395. new Chart($dashChartBarsCnt, {
  396. type: 'bar',
  397. data: $dashChartBarsData
  398. });
  399. var myLineChart = new Chart($dashChartLinesCnt, {
  400. type: 'line',
  401. data: $dashChartLinesData,
  402. });
  403. });
  404. </script>
  405. {include file='common/_header'}