zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
							<!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%;
    }

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

    .index-box {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 20;
        background: url("./login/img/bg_clgs.jpg");
        background-size: cover;
    }

    .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;
    }

    .index-bottom {
        background-color: #dedede;
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100%;
        text-align: center;
    }

</style>

<body>
<div class="index">
    <!--    <img class="video_back" src="./login/img/bg_clgs.jpg" type="image" muted autoplay="autoplay" loop="loop">-->
    <div class="logo1" style="background-color: #FFF;">
        <img src="./login/img/logo_clgs.jpg" alt="" style="width: 50rem;padding-left: 30px;">
    </div>
    <div class="index-box">
        <div style="text-align: center;color: #FFF;font-size: 30px; margin-top: 20px;">
            <h2>成乐高速公路（扩容建设项目）双重预防机制管理信息系统</h2>
        </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  style="-->
                    <!--    font-size: 16px;-->
                    <!--    color: #312929;-->
                    <!--    margin-bottom: 7px;-->
                    <!--">-->
                    <!--                            四川成乐高速公路有限责任公司-->
                    <!--                        </p>-->
                    <!--                        <p>-->
                    <!--                            @2020四川蜀兴优创安全科技有限公司提供技术支持-->
                    <!--                        </p>-->
                    <!--                    </div>-->

                </div>
            </div>
        </form>
    </div>
    <div class="index-bottom" style="text-align: center; font-size: 14px;line-height: 56px; letter-spacing: .5px;">
        <p>版权所有：成乐高速公路有限公司&nbsp;蜀ICP备18038273号-3 &nbsp;地址：四川省成都市高新区高彭大道17号&nbsp;技术支持：四川蜀兴优创安全科技有限公司 &nbsp;地址：成都市天府新区顺圣路172号&nbsp;
            网址：<a href="http://www.scsxyc.com" target="_blank">www.scsxyc.com</a></p>
    </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>
    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: 本地账号信息
         * @Data: 2020/1/3 10:39
         */
        const LocalInfo = {
            localInfoKey: 'user_account',
            accountList: [],
            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
             */
            getLocalInfo() {
                let localInfo = localStorage.getItem(this.localInfoKey);
                if (localInfo) {
                    this.accountList = JSON.parse(localInfo);
                }
            },
            /**
             * @Author: NanKeYang
             * @Description: 更新本地存储数据
             * @Data: 2019/12/30 17:09
             */
            updateLocalInfo() {
                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
             */
            rememberAccount(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
             */
            removeAccount(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
             */
            getAccountPassword(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
             */
            getDefaultAccount() {
                return this.accountList.length > 0 ? this.accountList[0] : null;
            }
        }

        LocalInfo.init()

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

        $('#username').blur(function () {
            let password = LocalInfo.getAccountPassword('system');
            if (password) {
                form.val('loginForm', {
                    password: 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>