<!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="/base/css/font-awesome.min.css" rel="stylesheet">
    <link href="/base/css/animate.min.css" rel="stylesheet">
    <link href="/base/css/style.min.css" rel="stylesheet">
    <script src="/base/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="/base/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>