login.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>登录</title>
  8. <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../assets/css/login.css?v=315">
  10. <link rel="stylesheet" href="../../assets/module/admin.css?v=315">
  11. <!--[if lt IE 9]>
  12. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  13. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  14. <![endif]-->
  15. <script>
  16. if (window != top) {
  17. top.location.replace(location.href);
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <div class="login-wrapper">
  23. <div class="login-header">
  24. <img src="../../assets/images/logo.png"> EasyWeb后台开发框架
  25. </div>
  26. <div class="login-body">
  27. <div class="layui-card">
  28. <div class="layui-card-header">
  29. <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
  30. </div>
  31. <form class="layui-card-body layui-form layui-form-pane">
  32. <div class="layui-form-item">
  33. <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
  34. <div class="layui-input-block">
  35. <input name="username" type="text" placeholder="账号" class="layui-input"
  36. lay-verType="tips" lay-verify="required" required/>
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
  41. <div class="layui-input-block">
  42. <input name="password" type="password" placeholder="密码" class="layui-input"
  43. lay-verType="tips" lay-verify="required" required/>
  44. </div>
  45. </div>
  46. <div class="layui-form-item">
  47. <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
  48. <div class="layui-input-block">
  49. <div class="layui-row inline-block">
  50. <div class="layui-col-xs7">
  51. <input name="code" type="text" placeholder="验证码" class="layui-input"
  52. autocomplete="off" lay-verType="tips" lay-verify="required" required/>
  53. </div>
  54. <div class="layui-col-xs5" style="padding-left: 6px;">
  55. <img class="login-captcha" src="https://www.oschina.net/action/user/captcha">
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="layui-form-item">
  61. <a href="javascript:;" class="layui-link">帐号注册</a>
  62. <a href="javascript:;" class="layui-link pull-right">忘记密码?</a>
  63. </div>
  64. <div class="layui-form-item">
  65. <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
  66. </div>
  67. <div class="layui-form-item login-other">
  68. <label>第三方登录</label>
  69. <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
  70. <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
  71. <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
  72. </div>
  73. </form>
  74. </div>
  75. </div>
  76. <div class="login-footer">
  77. <p>© 2019 easyweb.vip 版权所有</p>
  78. <p>
  79. <span><a href="https://easyweb.vip" target="_blank">获取授权</a></span>
  80. <span><a href="https://easyweb.vip/doc/" target="_blank">开发文档</a></span>
  81. <span><a href="https://demo.easyweb.vip/spa/" target="_blank">单页面版</a></span>
  82. </p>
  83. </div>
  84. </div>
  85. <!-- js部分 -->
  86. <script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
  87. <script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
  88. <script>
  89. layui.use(['layer', 'form'], function () {
  90. var $ = layui.jquery;
  91. var layer = layui.layer;
  92. var form = layui.form;
  93. // 表单提交
  94. form.on('submit(login-submit)', function (obj) {
  95. console.log(obj.field);
  96. layer.msg('登录成功', {icon: 1, time: 1500}, function () {
  97. location.replace('../../index.html')
  98. });
  99. return false;
  100. });
  101. // 图形验证码
  102. $('.login-captcha').click(function () {
  103. this.src = this.src + '?t=' + (new Date).getTime();
  104. });
  105. });
  106. </script>
  107. </body>
  108. </html>