login.blade.php 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="renderer" content="webkit">
  7. <title>管理后台</title>
  8. <meta name="keywords" content="管理后台">
  9. <link href="/base/css/bootstrap.min.css" rel="stylesheet">
  10. <link href="/assets/css/style.min.css" rel="stylesheet">
  11. <link href="/assets/css/style.min.css" rel="stylesheet">
  12. <link href="/assets/css/style.min.css" rel="stylesheet">
  13. <script src="/assets/js/jquery-2.1.1.min.js"></script>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  15. <style type="text/css">
  16. .sg-form-group {
  17. display: flex;
  18. align-items: center;
  19. border-bottom: 1px solid #DCDCDC;
  20. }
  21. .sg-form-group input {
  22. border-width: 0;
  23. }
  24. .sg-form-group i {
  25. border-right: 2px solid #3A62D7;
  26. padding-right: 10px;
  27. color: #3A62D7;
  28. }
  29. .sg-form-group.sg-selected {
  30. border-color: #3A62D7;
  31. }
  32. .sg-checked {
  33. display: flex;
  34. align-items: center;
  35. cursor: pointer;
  36. user-select: none;
  37. }
  38. .sg-checked input {
  39. margin-right: 10px;
  40. }
  41. </style>
  42. </head>
  43. <body class="gray-bg">
  44. <div class="sg-login-container" id="sg-vue-app">
  45. <div class="sg-login-box text-center loginscreen animated fadeInDown">
  46. <div class="sg-login-left">
  47. <h3><b>中铁二局小程序</b></h3>
  48. <img src="/images/login-left.png">
  49. </div>
  50. <div class="sg-login-right">
  51. <div class="sg-login-header">
  52. <h3>@{{ type == 'login' ? '欢迎登陆' : '找回密码' }}</h3>
  53. </div>
  54. <form class="m-t" role="form" accept-charset="UTF-8" method="post" v-show="type == 'login'" autocomplete="off">
  55. {{ csrf_field() }}
  56. <div :class="{ 'sg-selected': nameFocus, 'form-group sg-form-group': true }">
  57. <i class="glyphicon glyphicon-user"></i>
  58. <input name="name" class="form-control" placeholder="用户名" required="" autocomplete="off" @focus="inputChange('name', true)" @blur="inputChange('name', false)" value="{{ session('sg-name') }}">
  59. </div>
  60. <div :class="{ 'sg-selected': passwordFocus, 'form-group sg-form-group': true }">
  61. <i class="glyphicon glyphicon-lock"></i>
  62. <input type="password" name="password" class="form-control" placeholder="密码" required="" autocomplete="off" @focus="inputChange('pass', true)" @blur="inputChange('pass', false)" value="{{ session('sg-password') }}">
  63. </div>
  64. <div class="form-group">
  65. <div class="sg-checked" @click="switchChecked">
  66. <input type="checkbox" v-model="checked" name="remember"><div>记住密码</div>
  67. </div>
  68. </div>
  69. {{--<div class="form-group">--}}
  70. {{--{!! Geetest::render() !!}--}}
  71. {{--</div>--}}
  72. <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"/>
  73. <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
  74. {{--<a @click.stop="switchType('forget')" class="sg-forget">忘记密码</a>--}}
  75. </form>
  76. <div class="sg-forget-box" v-show="type == 'forget'">
  77. <div class="sg-forget-btn">请联系管理员重置密码</div>
  78. <button class="btn btn-primary" @click="switchType('login')">返回</button>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <!-- 全局js -->
  84. <script src="/assets/js/bootstrap.min.js?v=3.4.0"></script>
  85. <!--统计代码,可删除-->
  86. <style type="text/css">
  87. body {
  88. background: url("/images/login-bg.jpg") 100% 100% no-repeat fixed;
  89. }
  90. .sg-login-container {
  91. background: rgba(58, 98, 215, 0.5);
  92. height: 100vh;
  93. padding: 10%;
  94. display: flex;
  95. }
  96. .sg-login-box {
  97. display: flex;
  98. margin: auto;
  99. }
  100. .sg-login-left {
  101. background: rgba(58, 98, 215, 0.85);
  102. color: white;
  103. padding: 30px;
  104. }
  105. .sg-login-left img {
  106. width: 20vw;
  107. }
  108. .sg-login-right {
  109. background: white;
  110. padding: 30px 50px;
  111. }
  112. .sg-login-header h3 {
  113. color: rgba(16, 16, 16, 100);
  114. border-bottom: 2px solid rgba(58, 98, 215, 100);
  115. padding: 8px;
  116. width: 80px;
  117. margin: auto;
  118. }
  119. .sg-login-right button.btn-primary.btn {
  120. background: rgba(58, 98, 215, 100);
  121. border-color: rgba(58, 98, 215, 100);
  122. }
  123. .sg-login-right button.btn-primary.btn:focus {
  124. outline: none;
  125. }
  126. .sg-forget {
  127. float: right;
  128. }
  129. .sg-forget-btn {
  130. padding: 30px;
  131. border: 1px solid rgba(217, 217, 217);
  132. margin: 30px 0;
  133. }
  134. </style>
  135. <script type="text/javascript">
  136. $(function() {
  137. new Vue({
  138. el: '#sg-vue-app',
  139. data: {
  140. // login, forget
  141. type: 'login',
  142. nameFocus: false,
  143. passwordFocus: false,
  144. checked: false
  145. },
  146. methods: {
  147. switchType(type) {
  148. this.type = type;
  149. },
  150. switchChecked() {
  151. this.checked = !this.checked;
  152. },
  153. inputChange(name, flag) {
  154. if(name === 'name') {
  155. this.nameFocus = flag;
  156. this.passwordFocus = !flag;
  157. } else {
  158. this.nameFocus = !flag;
  159. this.passwordFocus = flag;
  160. }
  161. }
  162. }
  163. })
  164. })
  165. </script>
  166. </body>
  167. </html>