中扬CRM客户关系管理系统
#
LSH
2023-11-03 5f7598b354fdab871ebaf767200078316562e0c9
src/main/webapp/views/login.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>中扬 │ login of zoneyung wms</title>
    <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">
@@ -12,7 +12,7 @@
    <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/main.min.css">-->
    <link rel="stylesheet" href="../static/css/login.css">
    <style>
      #sidebar{
@@ -24,11 +24,11 @@
        width: 20%;
        height: 95%;
        /*特效*/
        background: rgba(255,255,255,0.6);
        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);
        /*box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);*/
      }
      .login-contain {
@@ -45,53 +45,157 @@
        text-align: center;
      }
      #background_video {
        position: absolute;
        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;
        }
      }
      @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="l-page l-page--white" data-id="easy_glitch">
      <div style="position: fixed;
                    z-index: 100;
                    top: 22px;
                    left: 20px;">
        <img src="../static/image/logo.png" alt="" style="width: 20%">
    <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 class="p-preloader">
        <div class="p-preloader__box p-preloader__box--white p-preloader__box--01"></div>
        <div class="p-preloader__box p-preloader__box--white p-preloader__box--02"></div>
        <div class="p-preloader__box p-preloader__box--white p-preloader__box--03"></div>
      <div id="girlwu">
        <p class="pText pTextFont">助力智能制造&emsp;&emsp;赋能智慧物流</p>
        <p class="pText pTextFont">&emsp;&emsp;让制造与物流更高效</p>
      </div>
      <div class="p-sketch-outline">
        <h2 class="p-sketch-outline__title">Customer Relationship Management</h2>
        <p class="p-sketch-outline__date">posted: 2018.01.01 / update: 2022.03.18
        </p>
        <p class="p-sketch-outline__description">wcs made with various simple objects.</p>
      </div>
      <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
<!--      <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>
    <!-- 侧边栏 -->
    <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 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">
<!--      </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">
              </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 class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn login-btn">Login</button>
              </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>
@@ -103,6 +207,133 @@
    <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();}
      $(document).on('click','#passLogin', function () {
        let username = $("#username").val();
        if (username === "") {
          layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});
          return;
        }
        let password = $("#password").val();
        if (password === "") {
          layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});
          return;
        }
        $.ajax({
          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']});
            }
          }
        });
      });
      $(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']});
            }
          }
        });
      });
      $('body').keydown(function () {
        if (event.keyCode === 13) {
          $(".login-btn").click();
        }
      });
      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--;
                }
              },1000)
            } else {
              layer.tips(res.msg, '#getCodeBox', {tips: [3, '#ff0000']});
            }
          }
        });
      }
    </script>
  </body>
</html>