中扬CRM客户关系管理系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
LSH
2023-11-03 5f7598b354fdab871ebaf767200078316562e0c9 
 src/main/webapp/views/login.html


@@ -1,318 +1,339 @@




<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>WMS管理系统 - 登录</title>


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    <meta http-equiv="Access-Control-Allow-Origin" content="*">


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <meta name="apple-mobile-web-app-status-bar-style" content="black">


    <meta name="apple-mobile-web-app-capable" content="yes">


    <meta name="format-detection" content="telephone=no">


    <link rel="icon" type="image/x-icon" href="../static/image/logo1.png" />


    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">


    <link rel="stylesheet" href="../static/css/admin.css?v=318">


    <link rel="stylesheet" href="../static/css/loader.css" media="all">


    <!--[if lt IE 9]>


    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>


    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>


    <![endif]-->


<html lang="ja">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>中扬 │ login of zoneyung crm</title>


    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">


    <meta name="description" content="study of Instancing with three.js">


    <meta name="keywords" content="undefined, Yoichi Kobayashi, WebGL, three.js">


    <meta name="theme-color" content="#111111">


    <meta name="msapplication-TileImage" content="/sketch-threejs/img/common/ms_tileimage.png">


    <meta name="msapplication-TileColor" content="#111111">


    <link rel="icon" type="image/x-icon" href="../static/image/favicon.ico" />


    <link rel="stylesheet" href="../static/css/font/font-awesome-4.7.0/css/font-awesome.css">


<!--    <link rel="stylesheet" href="../static/css/main.min.css">-->


    <link rel="stylesheet" href="../static/css/login.css">


    <style>


        html, body {width: 100%;height: 100%;overflow: hidden}


        body {background: #1E9FFF;}


        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}


        .layui-container {width: 100%;height: 100%;overflow: hidden}


        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}


        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}


        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}


        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}


        .login-form .layui-form-item {position:relative;}


        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}


        .login-form .layui-form-item input {padding-left:36px;}


        .captcha {width:60%;display:inline-block;}


        .captcha-img {display:inline-block;width:34%;float:right;}


        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:34px;width:100%;}


      #sidebar{


        /*定位*/


        position: absolute;


        top: 50%;


        right: 1%;


        transform: translateY(-50%);


        width: 20%;


        height: 95%;


        /*特效*/


        background: rgba(255, 255, 255, 0.5);


        border-radius: 5px;


        color: #ffffff;


        z-index: 99;


        /*box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);*/


      }




      .login-contain {


        position: relative;


        width: 100%;


        height: 100%;


      }


      .login-box {


        position: absolute;


        top: 50%;


        left: 50%;


        transform: translate(-50%, -50%);


        width: 100%;


        text-align: center;


      }




        .layui-container {


            margin: 0;


            padding: 0;


            width: 78%;


        }


        .side {


            position: relative;


            float: left;


            width: 22%;


            height: 100%;


            background-color: #f8f8f8;


            box-shadow: 0 0 3px #eeeeee;


        }


        .banner {


            position: absolute;


            top: 40%;


            width: 100%;


            height: 350px;


            transform:translateY(-50%);


            -webkit-transform:translateY(-50%);  /*兼容-webkit-引擎浏览器*/


            -moz-transform:translateY(-50%);     /*兼容-moz-引擎浏览器*/


        }


        #item-img {


            background-size: 100% 100%;


            width: 100%;


            height: 100%;


            transition: 0.5s;


        }


        .img-1 {


            background-image: url(../static/image/loginSide1.png);


        }


        .img-2 {


            background-image: url(../static/image/loginSide2.png);


        }


        .desc p {


            padding: 0 35px;


            font-size: 20px;


            color: rgba(59, 73, 156, 0.95);


            font-family: 'Bahnschrift',serif !important;


        }


        .loginbm {


            color: #0b3a58;


            font: 12px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;


            height: 32px;


            line-height: 32px;


            text-align: center;


            background: url(../static/image/loginbg2.png) repeat-x;


            position: absolute;


            bottom: 0;


            width: 100%;


        }


        #pda-content {


            z-index: 1;


            position: absolute;


            bottom: 40px;


            width: 100%;


            padding: 0 20px;


            text-align: center;


        }


        .qrcode-desc {


            font-weight: bold;


            margin-left: 10px;


            display: inline-block;


            font-family: 'Bahnschrift',serif;


            font-size: 14px;


            vertical-align: middle;


            color: #515a6e;


        }


      #background_video {


        position: absolute;




        .layui-form-checked[lay-skin=primary] i {


            border-color: #1e9fff!important;


            background-color: #1e9fff;


            color: #fff;


        top: 50%; left: 39.55%;


        transform: translate(-50%, -50%);




        object-fit: cover;


        height: 100%; width: 79%;


      }




      .s-video-all {


        width: 100%;


        position: relative;


      }




      .s-full {


        position: absolute;


        right: 10px;


        bottom: 20px;




        width: 40px;


        color: white;


        padding-right: 10px;


        font-size: 20px;


        cursor: pointer;


      }




      .videocontainer{


        /*filter:brightness(0.5);*/


        z-index: -999;


      }


      #girlwu{


        margin-left: 58%;


        margin-top: 45%;


        z-index: 999;


      }


      .pText{


        /*color: #0C0C0C;*/


        font-weight:800;


        font-style:italic;


        mix-blend-mode: difference;


        color: white;


        /*filter: invert(100%)*/


      /*  normal、oblique 或 italic*/


      }




      @media screen and (min-width:300px) and (min-width:650px){


        .pTextFont{


          font-size:0.75rem;


        }


        .layui-form-checkbox[lay-skin=primary]:hover i {


            border-color: #1e9fff;


            color: #fff;


      }


      @media screen and (min-width:650px) and (min-width:1080px){


        .pTextFont{


          font-size:1.125rem;


        }


      }




      @media screen and (min-width:300px) and (min-width:1380px){


        .pTextFont{


          font-size:1.5rem;


        }


      }




    </style>


</head>


<body>


<div class="side">


    <div class="banner">


        <div id="item-img" class="img-1"></div>


        <div class="desc">


            <p>


                Warehouse Management System、通过对仓库的分区管理、采用货架、货位的应用、让仓库管理更规范、人员拣货效率更高。


            </p>


        </div>


    </div>


    <div id="pda-content">


        <img id="pda-link" src="" width="50px">


        <div class="qrcode-desc">


            <div>PDA端</div>


            <div>扫码登录</div>


        </div>


    </div>


</div>


<div class="layui-container">


    <div class="admin-login-background">


        <div class="layui-form login-form">


            <form class="layui-form" action="">


                <div class="layui-form-item logo-title">


                    <h1>WMS系统登录</h1>


                </div>


                <div class="layui-form-item">


                    <label class="layui-icon layui-icon-username"></label>


                    <input type="text" id="username" name="username" placeholder="登录账号" autocomplete="off" class="layui-input">


                </div>


                <div class="layui-form-item">


                    <label class="layui-icon layui-icon-password"></label>


                    <input type="password" id="password" name="password" placeholder="请输入登录密码" autocomplete="off" class="layui-input">


                </div>


                <div id="code-box" class="layui-form-item">


                    <label class="layui-icon layui-icon-vercode"></label>


                    <input type="text" id="code" name="code" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">


                    <div class="captcha-img" style="margin-right: 5px">


                        <img id="codeImg" title="看不清？点击换一张。">


                    </div>


                </div>


                <div class="layui-form-item">


                    <input type="checkbox" id="rememberPwd" value="true" lay-skin="primary" title="记住密码">


                </div>


                <div class="layui-form-item">


                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>


                </div>


            </form>


        </div>


    </div>


    <div class="loginbm">技术支持：&nbsp;&nbsp;绍兴孚惠科技有限公司&nbsp;&nbsp;CopyRight@&nbsp;2021&nbsp;&nbsp;</div>


</div>


  </head>


  <body>


    <div class="">


      <div class="videocontainer">


        <video id="background_video" style="z-index: -999" src="../static/image/banner.mp4" height="100%" loop autoplay muted="false" controlslist="nodownload" disablepictureinpicture></video>


      </div>


      <div id="girlwu">


        <p class="pText pTextFont">助力智能制造&emsp;&emsp;赋能智慧物流</p>


        <p class="pText pTextFont">&emsp;&emsp;让制造与物流更高效</p>


      </div>


<!--      <div class="l-page l-page&#45;&#45;white " data-id="easy_glitch" style="z-index: 99">-->


<!--        <div style="position: fixed;-->


<!--                    z-index: 100;-->


<!--                    top: 22px;-->


<!--                    left: 20px;">-->


<!--          &lt;!&ndash;        <img src="../static/image/logo.png" alt="" style="width: 15%">&ndash;&gt;-->


<!--        </div>-->


<!--        <div class="p-preloader">-->


<!--          <div class="p-preloader__box p-preloader__box&#45;&#45;white p-preloader__box&#45;&#45;01"></div>-->


<!--          <div class="p-preloader__box p-preloader__box&#45;&#45;white p-preloader__box&#45;&#45;02"></div>-->


<!--          <div class="p-preloader__box p-preloader__box&#45;&#45;white p-preloader__box&#45;&#45;03"></div>-->


<!--        </div>-->


<!--        <div class="p-sketch-outline">-->


<!--          <h2 class="p-sketch-outline__title" style="z-index: 99">Customer Relationship Management</h2>-->


<!--          <p class="p-sketch-outline__date" style="z-index: 99">posted: 2018.01.01 / update: 2022.03.18-->


<!--          </p>-->


<!--          <p class="p-sketch-outline__description" style="z-index: 99">crm made with various simple objects.</p>-->


<!--        </div>-->




<!--初始化加载层-->


<div class="layuimini-loader">


    <div class="layuimini-loader-inner"></div>


</div>


<!--      </div>-->


      <!-- 侧边栏 -->


      <div id="sidebar">


        <div class="login-contain">


          <div class="login-box">


            <img src="../static/image/logo.png" alt="" style="width: 80%">


            <!--          <span class="login100-form-title p-t-20 p-b-45">中扬立库</span>-->


            <span class="login100-form-title p-t-20 p-b-45" style="margin: 15px 0;color: #868686;font-size: 24px">CRM</span>


            <div id="passwdContent" style="display: none;">


              <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">


                <input id="username" class="input100" type="text" name="username" placeholder="username" autocomplete="off">


                <span class="focus-input100"></span>


                <span class="symbol-input100">


              <i class="fa fa-user"></i>


            </span>


              </div>


              <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">


                <input id="password" class="input100" type="password" name="pass" placeholder="password">


                <span class="focus-input100"></span>


                <span class="symbol-input100">


              <i class="fa fa-lock"></i>


            </span>


              </div>


              <div style="text-align: right;">


                <button onclick="switchLogin('sms')">短信登录</button>


              </div>


              <div class="container-login100-form-btn p-t-10">


                <button id="passLogin" class="login100-form-btn login-btn">Login</button>


              </div>


            </div>


            <div id="smsContent">


              <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">


                <input id="phone" class="input100" type="text" name="phone" placeholder="手机号" autocomplete="off">


                <span class="focus-input100"></span>


                <span class="symbol-input100">


              <i class="fa fa-user"></i>


            </span>


              </div>


              <div style="display: flex;justify-content: center;align-items: center;">


                <div class="wrap-input100 validate-input m-b-10" style="width: 60%" data-validate="请输入验证码">


                  <input id="code" class="input100" type="text" name="code" placeholder="验证码">


                  <span class="focus-input100"></span>


                  <span class="symbol-input100">


                <i class="fa fa-lock"></i>


              </span>


                </div>


                <div style="width: 20%;">


                  <div id="getCodeBox"><button onclick="getCode()">获取验证码</button></div>


                  <div id="getCodeTime"></div>


                </div>


              </div>


<!--              <div style="text-align: right;">-->


<!--                <button onclick="switchLogin('password')">密码登录</button>-->


<!--              </div>-->


              <div class="container-login100-form-btn p-t-10">


                <button id="smsLogin" class="login100-form-btn login-btn">Login</button>


              </div>


            </div>


          </div>


        </div>


      </div>


    </div>




<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>


<script type="text/javascript" src="../static/js/jquery/jquery.particleground.min.js" charset="utf-8"></script>


<script type="text/javascript" src="../static/js/tools/md5.js"></script>


<script type="text/javascript" src="../static/layui/layui.js"></script>


<script type="text/javascript" src="../static/js/common.js"></script>


    <script type="text/javascript" src="../static/js/tools/main.min.js"></script>


    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>


    <script type="text/javascript" src="../static/js/tools/md5.js"></script>


    <script type="text/javascript" src="../static/layer/layer.js"></script>


    <script type="text/javascript" src="../static/js/common.js"></script>


    <script>


      console.log('%c CRM %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');


      window.onload = function(){document.getElementById("username").focus();}




<script type="text/javascript">


    console.log('%c WMS %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');


    $('#pda-link').attr("src", baseUrl+"/qrcode.do?param=http://" + window.location.host+baseUrl+"/pda");


    var codeSwitch = 'Y';


    var oldUserName = localStorage.getItem('oldUserName');


    var oldPass = localStorage.getItem('oldPass');


    var rememberSwitch = localStorage.getItem('rememberSwitch');


    var loop = true;


    setInterval(function () {


        if (loop) {


            $('#item-img').attr("class", "img-1");


            loop = false;


        } else {


            $('#item-img').attr("class", "img-2");


            loop = true;


      $(document).on('click','#passLogin', function () {


        let username = $("#username").val();


        if (username === "") {


          layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});


          return;


        }


    }, 3000);


    // 加载动画


    setTimeout(function () {


        $('.layuimini-loader').fadeOut();


    }, 500)


    $(document).ready(function(){


        // 验证码开关


        let password = $("#password").val();


        if (password === "") {


          layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});


          return;


        }


        $.ajax({


            url: baseUrl+"/code/switch.action",


            async: false,


            success: function (res) {


                if (res.data === 'N'){


                    codeSwitch = res.data;


                    $('#code-box').css("display", "none");


                }


          url: baseUrl+"/login.action",


          data: {


            username: username,


            password: hex_md5(password)


          },


          method: 'POST',


          success: function (res) {


            if (res.code === 200){


              localStorage.setItem("token", res.data.token);


              localStorage.setItem("nickname", res.data.nickname);


              window.location.href = "index.html";


            } else if (res.code === 10001) {


              layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});


            } else if (res.code === 10002) {


              layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});


            } else if (res.code === 10003) {


              layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});


            } else {


              layer.tips(res.msg, '#passLogin', {tips: [3, '#ff0000']});


            }


          }


        });


        // 验证码


        initCode();


        // 粒子线条背景


        $('.layui-container').particleground({


            dotColor:'#7ec7fd',


            lineColor:'#7ec7fd'


      });




      $(document).on('click','#smsLogin', function () {


        let phone = $("#phone").val();


        if (phone === "") {


          layer.tips('请输入手机号', '#phone', {tips: [4, '#ff0000']});


          return;


        }


        let code = $("#code").val();


        if (code === "") {


          layer.tips('请输入验证码', '#code', {tips: [4, '#ff0000']});


          return;


        }


        $.ajax({


          url: baseUrl+"/smsLogin.action",


          data: {


            phone: phone,


            code: code


          },


          method: 'POST',


          success: function (res) {


            if (res.code === 200){


              localStorage.setItem("token", res.data.token);


              localStorage.setItem("nickname", res.data.nickname);


              window.location.href = "index.html";


            } else if (res.code === 10001) {


              layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});


            } else if (res.code === 10002) {


              layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});


            } else {


              layer.tips(res.msg, '#smsLogin', {tips: [3, '#ff0000']});


            }


          }


        });


        if(oldUserName){


            $('#username').val(oldUserName);


        }


        if(oldPass){


            $('#password').val(oldPass);


        }


        if (rememberSwitch === 'true') {


            $('#rememberPwd').attr("checked", true);


        }


    });


      });




    layui.config({


        base: baseUrl + "/static/layui/lay/modules/"


    }).extend({


        notice: 'notice/notice',


    }).use(['form','layer', 'notice'],function () {


        var form = layui.form;


        var layer = layui.layer;


        var notice = layui.notice;


      $('body').keydown(function () {


        if (event.keyCode === 13) {


          $(".login-btn").click();


        }


      });




        // 进行登录操作


        form.on('submit(login)', function (data) {


            data = data.field;


            if (data.username === '') {


                $("#username").focus();


                notice.msg('登录账号不能为空', {icon: 2});


                return false;


            }


            if (data.password === '') {


                $("#password").focus();


                notice.msg('密码不能为空', {icon: 2});


                return false;


            }


            if (data.code === '' && codeSwitch === 'Y') {


                $("#code").focus();


                notice.msg('验证码不能为空', {icon: 2});


                return false;


            }


            if (sessionStorage.getItem("code").toUpperCase() !== data.code.toUpperCase() && codeSwitch==='Y'){


                $("#code").focus();


                notice.msg('验证码错误', {icon: 2});


                return false;


            }


            var user = {


                username: data.username,


                password: hex_md5(data.password)


            };


            $.ajax({


                url: baseUrl+"/login.action",


                data: user,


                method: 'POST',


                success: function (res) {


                    if (res.code === 200){


                        // 记住密码


                        if($('#rememberPwd').is(':checked')){


                            localStorage.setItem('oldUserName', user.username);


                            localStorage.setItem('oldPass', data.password);


                            localStorage.setItem('rememberSwitch', true);


                        } else {


                            localStorage.removeItem('oldUserName');


                            localStorage.removeItem('oldPass');


                            localStorage.setItem('rememberSwitch', false);


                        }


                        localStorage.setItem("token", res.data.token);


                        localStorage.setItem("nickname", res.data.nickname);


                        window.location.href = "index.html";


                    } else {


                        notice.msg(res.msg, {icon: 2});


                    }


      function switchLogin(type) {


        if(type === 'sms'){


          //短信登录


          $("#passwdContent").hide()


          $("#smsContent").show()


        }else {


          //密码登录


          $("#passwdContent").show()


          $("#smsContent").hide()


        }


      }




      function getCode() {


        //获取验证码


        let phone = $("#phone").val();


        if (phone === "") {


          layer.tips('请输入手机号', '#phone', {tips: [4, '#ff0000']});


          return;


        }




        $.ajax({


          url: baseUrl+"/smsCode/sendCode",


          data: {


            phone: phone


          },


          method: 'POST',


          success: function (res) {


            if (res.code === 200){


              $("#getCodeBox").hide()


              $("#getCodeTime").show()


              let tmp = null;


              let time = 60


              tmp = setInterval(() => {


                if (time <= 0) {


                  $("#getCodeTime").hide()


                  $("#getCodeBox").show()


                  clearInterval(tmp)


                }else {


                  $("#getCodeTime").text(time + "秒")


                  time--;


                }


            });


            return false;


              },1000)


            } else {


              layer.tips(res.msg, '#getCodeBox', {tips: [3, '#ff0000']});


            }


          }


        });


    });






    // 初始化验证码


    $('#codeImg').click(function () {


        initCode();


    });


    function initCode() {


        var random = Math.random();


        $('#codeImg').attr("src", baseUrl+"/code.action?sd="+random);


        setTimeout(function () {


            $.ajax({


                url: baseUrl+"/code.do",


                data: {sd: random},


                method: 'POST',


                async: false,


                success: function (code) {


                    sessionStorage.setItem("code", code);


                }


            });


        }, 100);


    }


</script>


</body>


      }


    </script>


  </body>


</html>