zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
</head>

<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    html, body {
        width: 100%;
        height: 100%;
        font-size: 10px;
    }

    img {
        display: block;
    }

    .index {
        width: 100%;
        height: 100%;
        background: url("./login/img/bg_one.png");
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: fixed;
        z-index: 10;
    }

    .index-box {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 20;

    }

    .logo {
        margin: 1rem 2rem;
    }

    .logo img {
        width: 26rem;
    }

    .logo-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70rem;
        height: 44rem;
        margin-top: -22rem;
        margin-left: -35rem;

    }

    .logo-box > img {
        width: 100%;
        position: absolute;
    }

    .main {
        width: 34.5rem;
        height: 41rem;
        position: absolute;
        z-index: 30;
        /*background: red;*/
        right: 2.4rem;
        bottom: 0px;
    }

    .title {
        font-size: 2rem;
        color: #222222;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 6rem;
    }

    .title span {
        color: #00A8FF;
    }

    .username {
        margin-left: 3.5rem;
    }

    .username .user-top {
        display: flex;
        font-size: 1.4rem;
        color: #555555;
    }

    .username .user-top img {
        width: 1.4rem;
        height: 1.6rem;
        margin-right: 1rem;
    }

    .username input {
        width: 25rem;
        height: 3.5rem;
        background: rgba(242, 242, 242, 1);
        border-radius: 0.4rem;
        border: none;
        font-size: 1.4rem;
        margin-top: 0.5rem;
        text-indent: 1rem;
        color: #555;
    }

    input::-webkit-input-placeholder {
        color: #999999;
    }

    .pwd {
        margin-top: 1.5rem;
    }

    .btn {
        margin-top: 4rem;
        margin-left: 3.5rem;
        overflow: hidden;

    }

    .btn-left {
        display: flex;
        align-items: center;
        float: left;
        margin-top: 1rem;
    }

    .btn-left input {
        width: 2rem;
        height: 2rem;

    }

    .btn-left span {
        margin-left: 0.5rem;
        font-size: 1.4rem;

    }

    .btn-right {
        float: right;
        margin-right: 5.8rem;
    }

    .btn-right p {
        width: 10rem;
        height: 3.5rem;
        background: linear-gradient(135deg, rgba(0, 168, 255, 1), rgba(26, 92, 225, 1));
        box-shadow: 0.1rem 0.1rem 1.6rem 0px rgba(34, 98, 225, 0.45);
        border-radius: 0.4rem;
        font-size: 1.4rem;
        color: #FFFFFF;
        text-align: center;
        line-height: 3.5rem;
    }

    .tip {
        margin-top: 4rem;
        text-align: center;
        font-size: 1.2rem;
        color: #999999;
        margin-right: 2.5rem;
    }


</style>

<body>
<div class="index">
    <video id="page-video-bg" class="video_back" src="./login/img/background.mp4" type="video/mp4" muted
           autoplay="autoplay" loop="loop">
    </video>
    <div class="index-box">
        <div class="logo">
            <img src="./login/img/logo.png" alt="">
        </div>
        <form class="layui-form" lay-filter="loginForm">
            <div class="logo-box">
                <img src="./login/img/login_bg.png" alt="">
                <div class="main">
                    <p class="title">
                        账号
                        <span>安全登录</span>
                    </p>
                    <div class="username">
                        <div class="user-top">
                            <img src="./login/img/icon_common_user.png" alt="">
                            <span>用户名</span>
                        </div>
                        <div class="bottom">
                            <input type="text" id="username" name="username" placeholder="请输入用户名" lay-verType="tips"
                                   lay-verify="required" required>
                        </div>
                    </div>

                    <div class="username pwd">
                        <div class="user-top">
                            <img src="./login/img/icon_common_user.png" alt="">
                            <span>密 &nbsp;&nbsp;&nbsp;码</span>
                        </div>
                        <div class="bottom">
                            <input type="password" name="password" placeholder="请输入密码" lay-verType="tips"
                                   lay-verify="required" required>
                        </div>
                    </div>

                    <div class="btn">
                        <div class="btn-left">
                            <input type="checkbox" name="checkbox" lay-skin="primary" title="记住密码" checked="">
                        </div>
                        <div class="btn-right">
                            <p id="btn1" lay-filter="login" lay-submit>登录</p>
                            <!--                            <button lay-filter="login" id="btn1" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>-->
                        </div>
                    </div>
                    <div class="tip">
                        <p>
                            @2019陕西云康电子信息技术有限公司
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="./assets/js/common.js?v=312"></script>
<script type="text/javascript">
    document.getElementById("page-video-bg").playbackRate = .5;
</script>
<script>
    layui.use(['layer', 'form', 'uParas', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var uParas = layui.uParas;
        var admin = layui.admin;

        /**
         * @Author: NanKeYang
         * @Description: 本地信息Cookie
         * @Data: 2020/1/19 11:08
         */
        var LocalInfoCookie = function () {
            this.localInfoKey = 'user_account';
            this.accountList = [];
            this.init = function () {
                this.getLocalInfo();
                let accountInfo = this.getDefaultAccount();
                if (accountInfo) {
                    form.val('loginForm', {
                        username: accountInfo.username,
                        password: accountInfo.password
                    });
                }
            };
            /**
             * @Author = NanKeYang
             * @Description = 获取本地账号信息
             * @Data = 2019/12/30 16:55
             */
            this.getLocalInfo = function () {
                let localInfo = localStorage.getItem(this.localInfoKey);
                if (localInfo) {
                    this.accountList = JSON.parse(localInfo);
                }
            };
            /**
             * @Author = NanKeYang
             * @Description = 更新本地存储数据
             * @Data = 2019/12/30 17:09
             */
            this.updateLocalInfo = function () {
                if (this.accountList.length > 0) {
                    localStorage.setItem(this.localInfoKey, JSON.stringify(this.accountList));
                } else {
                    localStorage.removeItem(this.localInfoKey);
                }

            };
            /**
             * @Author = NanKeYang
             * @Description = 记住账号
             * @Data = 2019/12/30 16:44
             */
            this.rememberAccount = function (username, password) {
                this.removeAccount(username);
                let appendData = [{
                    username: username,
                    password: password
                }]
                this.accountList = appendData.concat(this.accountList);
            };
            /**
             * @Author = NanKeYang
             * @Description = 删除账号
             * @Data = 2019/12/30 17:07
             */
            this.removeAccount = function (username) {
                let removeIndex = null;
                for (let i = 0; i < this.accountList.length; i++) {
                    if (username === this.accountList[i].username) {
                        removeIndex = i;
                        break;
                    }
                }
                if (removeIndex !== null) {
                    this.accountList.splice(removeIndex, 1);
                }
            };
            /**
             * @Author = NanKeYang
             * @Description = 获取账号密码
             * @Data = 2019/12/30 17:13
             */
            this.getAccountPassword = function (username) {
                for (let i = 0; i < this.accountList.length; i++) {
                    if (username === this.accountList[i].username) {
                        return this.accountList[i].password;
                    }
                }
            };
            /**
             * @Author = NanKeYang
             * @Description = 获取默认账号
             * @Data = 2019/12/30 17:41
             */
            this.getDefaultAccount = function () {
                return this.accountList.length > 0 ? this.accountList[0] : null;
            }
        };

        var localInfo = new LocalInfoCookie();
        localInfo.init();

        /**
         * @Author: NanKeYang
         * @Description: 处理回车登录
         * @Data: 2020/1/3 10:39
         */
        document.onkeydown = (e) => {
            const key = window.event.keyCode
            if (key == 13) {
                $('#btn1').click();
            }
        }

        /**
         * @Author: NanKeYang
         * @Description: 用户名失去焦点时候获取密码
         * @Data: 2020/1/19 11:13
         */
        $('#username').blur(function (v) {
            let username = $(this).val();
            let password = localInfo.getAccountPassword(username);
            if (password) {
                form.val('loginForm', {
                    password: password
                });
            } else {
                form.val('loginForm', {
                    password: ''
                });
            }
        })

        // 表单提交
        uParas.clearCache();
        form.on('submit(login)', function (obj) {
            admin.btnLoading('#btn1', '登录中。。。。');
            admin.req(uParas.baseUrl + '/login', obj.field, function (resp) {
                //debugger
                if (resp.code == 1) {
                    if (obj.field.checkbox) {
                        localInfo.rememberAccount(obj.field.username, obj.field.password)
                    } else {
                        localInfo.removeAccount(obj.field.username)
                    }
                    localInfo.updateLocalInfo();
                    uParas.loginCache(resp);

                    location.href = "./index.html"
                } else {
                    layer.msg(resp.msg)
                    admin.btnLoading('#btn1', '登录', false);
                }
            }, 'POST');
            return false;
        });


        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });
    });
</script>
</html>