123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="renderer" content="webkit">
- <title>管理后台</title>
- <meta name="keywords" content="管理后台">
- <link href="/base/css/bootstrap.min.css" rel="stylesheet">
- <link href="/assets/css/style.min.css" rel="stylesheet">
- <link href="/assets/css/style.min.css" rel="stylesheet">
- <link href="/assets/css/style.min.css" rel="stylesheet">
- <script src="/assets/js/jquery-2.1.1.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
- <style type="text/css">
- .sg-form-group {
- display: flex;
- align-items: center;
- border-bottom: 1px solid #DCDCDC;
- }
- .sg-form-group input {
- border-width: 0;
- }
- .sg-form-group i {
- border-right: 2px solid #3A62D7;
- padding-right: 10px;
- color: #3A62D7;
- }
- .sg-form-group.sg-selected {
- border-color: #3A62D7;
- }
- .sg-checked {
- display: flex;
- align-items: center;
- cursor: pointer;
- user-select: none;
- }
- .sg-checked input {
- margin-right: 10px;
- }
- </style>
- </head>
- <body class="gray-bg">
- <div class="sg-login-container" id="sg-vue-app">
- <div class="sg-login-box text-center loginscreen animated fadeInDown">
- <div class="sg-login-left">
- <h3><b>中铁二局小程序</b></h3>
- <img src="/images/login-left.png">
- </div>
- <div class="sg-login-right">
- <div class="sg-login-header">
- <h3>@{{ type == 'login' ? '欢迎登陆' : '找回密码' }}</h3>
- </div>
- <form class="m-t" role="form" accept-charset="UTF-8" method="post" v-show="type == 'login'" autocomplete="off">
- {{ csrf_field() }}
- <div :class="{ 'sg-selected': nameFocus, 'form-group sg-form-group': true }">
- <i class="glyphicon glyphicon-user"></i>
- <input name="name" class="form-control" placeholder="用户名" required="" autocomplete="off" @focus="inputChange('name', true)" @blur="inputChange('name', false)" value="{{ session('sg-name') }}">
- </div>
- <div :class="{ 'sg-selected': passwordFocus, 'form-group sg-form-group': true }">
- <i class="glyphicon glyphicon-lock"></i>
- <input type="password" name="password" class="form-control" placeholder="密码" required="" autocomplete="off" @focus="inputChange('pass', true)" @blur="inputChange('pass', false)" value="{{ session('sg-password') }}">
- </div>
- <div class="form-group">
- <div class="sg-checked" @click="switchChecked">
- <input type="checkbox" v-model="checked" name="remember"><div>记住密码</div>
- </div>
- </div>
- {{--<div class="form-group">--}}
- {{--{!! Geetest::render() !!}--}}
- {{--</div>--}}
- <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"/>
- <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
- {{--<a @click.stop="switchType('forget')" class="sg-forget">忘记密码</a>--}}
- </form>
- <div class="sg-forget-box" v-show="type == 'forget'">
- <div class="sg-forget-btn">请联系管理员重置密码</div>
- <button class="btn btn-primary" @click="switchType('login')">返回</button>
- </div>
- </div>
- </div>
- </div>
- <!-- 全局js -->
- <script src="/assets/js/bootstrap.min.js?v=3.4.0"></script>
- <!--统计代码,可删除-->
- <style type="text/css">
- body {
- background: url("/images/login-bg.jpg") 100% 100% no-repeat fixed;
- }
- .sg-login-container {
- background: rgba(58, 98, 215, 0.5);
- height: 100vh;
- padding: 10%;
- display: flex;
- }
- .sg-login-box {
- display: flex;
- margin: auto;
- }
- .sg-login-left {
- background: rgba(58, 98, 215, 0.85);
- color: white;
- padding: 30px;
- }
- .sg-login-left img {
- width: 20vw;
- }
- .sg-login-right {
- background: white;
- padding: 30px 50px;
- }
- .sg-login-header h3 {
- color: rgba(16, 16, 16, 100);
- border-bottom: 2px solid rgba(58, 98, 215, 100);
- padding: 8px;
- width: 80px;
- margin: auto;
- }
- .sg-login-right button.btn-primary.btn {
- background: rgba(58, 98, 215, 100);
- border-color: rgba(58, 98, 215, 100);
- }
- .sg-login-right button.btn-primary.btn:focus {
- outline: none;
- }
- .sg-forget {
- float: right;
- }
- .sg-forget-btn {
- padding: 30px;
- border: 1px solid rgba(217, 217, 217);
- margin: 30px 0;
- }
- </style>
- <script type="text/javascript">
- $(function() {
- new Vue({
- el: '#sg-vue-app',
- data: {
- // login, forget
- type: 'login',
- nameFocus: false,
- passwordFocus: false,
- checked: false
- },
- methods: {
- switchType(type) {
- this.type = type;
- },
- switchChecked() {
- this.checked = !this.checked;
- },
- inputChange(name, flag) {
- if(name === 'name') {
- this.nameFocus = flag;
- this.passwordFocus = !flag;
- } else {
- this.nameFocus = !flag;
- this.passwordFocus = flag;
- }
- }
- }
- })
- })
- </script>
- </body>
- </html>
|