mbui.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="renderer" content="webkit" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8. <title>{:get_system_config('web','admin_title')}</title>
  9. <link rel="stylesheet" href="{__GOUGU__}/layui/css/layui.css?v={:get_system_config('web','version')}" media="all">
  10. <style type="text/css">
  11. html,body {width: 100%;height: 100%;background: #EAF3FF;}
  12. canvas{display:block;width:100%;height:100%; position: fixed; top: 0;left: 0;}
  13. input:-webkit-autofill {
  14. -webkit-box-shadow: 0 0 0px 1000px white inset;
  15. }
  16. #container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99;
  17. background: url({__IMG__}/bg.png);
  18. background-size: cover;
  19. }
  20. #container .lock{width: 100%;height: 100%; position:absolute; top:0; left:0;
  21. background:#000 url({__IMG__}/lock_bg.svg);
  22. background-size: cover;
  23. opacity:0.72
  24. }
  25. .login {width: 360px; text-align: center; position: absolute; top: 50%; left: 50%; margin-top: -240px; margin-left: -180px; border-radius: 12px; box-shadow: 0 2px 6px rgba(92, 110, 136, .32);}
  26. .login .top {width: 360px;height: 117px; background-color: #fbbc05; border-radius: 12px 12px 0 0; line-height: 117px; text-align: center; overflow: hidden;
  27. -webkit-transform: rotate(0deg);
  28. -moz-transform: rotate(0deg);
  29. -ms-transform: rotate(0deg);
  30. -o-transform: rotate(0deg);
  31. transform: rotate(0deg);
  32. }
  33. .login .top .bg1 {display: inline-block;width: 72px;height: 72px;background: #fff;opacity: .1;border-radius: 0 72px 0 0;position: absolute;left: 0;top: 42px;}
  34. .login .top .bg2 {display: inline-block;width: 92px;height: 92px;background: #fff;opacity: .1;border-radius: 50%;position: absolute;right: -16px;top: -16px;}
  35. .login .bottom {background-color: #fff;padding:26px 24px;border-radius: 0 0 12px 12px;}
  36. .layui-input,.layui-textarea {height: 44px;border: 1px solid #ddd;}
  37. .captcha_img img{width:142px; height:44px; cursor:pointer;}
  38. .layui-btn {height: 45px;font-size: 16px;margin-top: 6px;background-color: #FF6347!important}
  39. </style>
  40. </head>
  41. <body>
  42. <div id="container">
  43. <div class="lock"></div>
  44. <canvas id="canvas"></canvas>
  45. <div class="login">
  46. <div class="top">
  47. <img src="{__IMG__}/login_logo.png" height="60" width="200">
  48. <span class="bg1"></span>
  49. <span class="bg2"></span>
  50. </div>
  51. <div class="bottom">
  52. <form class="layui-form" id="gougu-lock">
  53. <div class="layui-form-item" style="font-size:32px; color:#FF6347; padding:16px 0">
  54. 当前是锁屏状态
  55. </div>
  56. <div class="layui-form-item">
  57. <input type="password" name="lock_password" lay-verify="required" value="" placeholder="请输入登录密码解锁" lay-reqText="请输入登录密码" autocomplete="off" class="layui-input">
  58. </div>
  59. <button id="lock-submit" class="layui-btn layui-btn-fluid layui-bg-cyan" lay-submit lay-filter="lock-submit">解锁进入系统</button>
  60. </form>
  61. </div>
  62. </div>
  63. </div>
  64. <script type="text/javascript">
  65. const moduleInit = [];
  66. function mbuiInit() {
  67. let tool = mbui.tool;
  68. let a = tool.ucfirst('avf');
  69. tool.log(a);
  70. }
  71. </script>
  72. <script src="{__STATIC__}/jquery.min.js"></script>
  73. <script src="{__GOUGU__}/mbui/mbui.js?v={:get_system_config('web','version')}"></script>
  74. </body>
  75. </html>