1

13693261870

2023-04-28 ff2900b88dcf48a4224a3260f36fde4a3802b703

1

 src/main/resources/static/css/earth/style.css

@@ -1,86 +1,154 @@
html, body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 0;
  overflow: hidden;
  font-family: 'Lato', sans-serif;

  color: #fff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #fff;
    background: url("../../images/login/login.jpg") no-repeat center;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    overflow: hidden;
}

.title {
    position: absolute;
    z-index: 1;
    width: 425em;
    height: 84em;
    white-space: nowrap;
    top: 8%;
    left: 18%;
}

    .title img {
        height: auto;
        width: auto;
        transform: translate(0%, 0%);
    }

#main {
    width: 472px;
    height: 570px;
    position: absolute;
    background: hsla(0,0%,100%,.9);
    border-radius: 8px;
    margin-left: 62%;
    margin-top: 10%;
    z-index: 2;
}

.main_title {
    font-size: 25px;
    color: #3b4d6e;
    font-weight: 700;
    margin-top: 48px;
    margin-left: 48px;
}

.main_form {
    margin-top: 48px;
    margin-left: 48px;
    box-sizing: border-box;
    width: 376px;
}

.main_txt {
    width: 100%;
    height: 41px;
    background-color: grey;
    border-radius: 5px;
    vertical-align: central;
}

    .main_txt img {
        padding: 0 5px 0 5px;
    }

    .main_txt input {
        height: 41px;
        width: 341px;
        border: none;
        font-size: 15px;
        padding-left: 15px;
    }

        .main_txt input:focus {
            outline: 0;
        }

.world {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

.world-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
}

.world-globe {
  position: absolute;
  left: 29%;
  top: 50%;
  width: 0;
  height: 0;
    position: absolute;
    left: 30%;
    top: 55%;
    width: 0;
    height: 0;
}

.world-globe-pole {
  position: absolute;
  width: 530px;
  height: 530px;
  left: -265px;
  top: -265px;
  border-radius: 50% 50%;
  background-color: #fff;
    position: absolute;
    width: 530px;
    height: 530px;
    left: calc(50% - 265px);
    top: calc(50% - 265px);
    border-radius: 50% 50%;
    background-color: #fff;
}

.world-globe-doms-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}

.world-globe-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 730px;
  height: 715px;
  margin-left: -368px;
  margin-top: -350px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 720px;
    height: 720px;
    margin-left: -370px;
    margin-top: -350px;
}

.info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
}

.info-desc {
  color: #ddd;
  font-size: 10px;
    color: #ddd;
    font-size: 10px;
}

a {
  color: #ff5f5f;
}
    color: #ff5f5f;
}

 src/main/resources/static/css/login.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#main {
    width: 472px;
    height: 570px;
    position: absolute;
    background: hsla(0,0%,100%,.9);
    border-radius: 8px;
    margin-left: 62%;
    margin-top: 50px;
    z-index: 2;
}


 src/main/resources/static/html/login.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<!DOCTYPE>
<html>
<head>
  <title>管道基础大数据平台服务-登录</title>
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Cache" content="no-cache" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  <link href="../css/earth/css.css" rel="stylesheet">
  <link href="../css/earth/style.css" rel="stylesheet">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/jquery.cookie.min.js"></script>
  <script src="../js/rsa.min.js"></script>
  <script src="../js/login.js"></script>
  <script>
    $(function () {
      //createCode();
      //getPublicKey();
      //document.getElementById('inputCode').focus();
    });
  </script>
</head>
<body>
  <div class="world">
    <div class="world-bg"></div>
    <div class="world-globe">
      <div class="world-globe-pole"></div>
      <div class="world-globe-doms-container"></div>
      <div class="world-globe-halo"></div>
    </div>
  </div>

  <div id="main">
    <div class="main_title">
      <span>用户登录</span>
    </div>
    <form class="main_form">
      <div class="main_txt">
        <img src="../images/login/user.png" alt="" />
        <input type="text" value="admin" maxlength="30" placeholder="请输入用户名" />
      </div>

      <div class="main_txt" style="margin-top: 48px;">
        <img src="../images/login/pwd.png" alt="" />
        <input type="password" maxlength="30" value="" placeholder="请输入密码" />
      </div>

      <div class="main_txt" style="margin-top: 48px; width: 256px !important;">
        <img src="../images/login/code.png" alt="" />
        <input type="text" value="" maxlength="8" style="width: 221px;" placeholder="请输入验证码" />
      </div>
    </form>
  </div>

  <div class="title">
    <img src="../images/login/lg_03.png" alt=""/>
  </div>

  <script src='../js/earth/dat.gui.min.js'></script>
  <script src='../js/earth/Stats.js'></script>
  <script src='../js/earth/css_globe_PerspectiveTransform.js'></script>
  <script src='../js/earth/TweenMax.min.js'></script>
  <script src="../js/earth/script.js"></script>
</body>
</html>

 src/main/resources/static/images/login/code.png

 src/main/resources/static/images/login/lg_03.png

 src/main/resources/static/images/login/login.jpg

 src/main/resources/static/images/login/pwd.png

 src/main/resources/static/images/login/user.png

 src/main/resources/static/js/login.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,151 @@
window.isBusy = false;

window.code = "";

// åˆ›å»ºéªŒè¯ç 
function createCode() {
    var codeLength = 4; // éªŒè¯ç çš„长度
    var checkCode = document.getElementById("checkCode");

    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
    for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 10);
        code += codeChars[charNum];
    }
    if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
    }
}

// èŽ·å–公钥
function getPublicKey() {
    $.get("getPublicKey", function (rs) {
        if (rs && rs.code == 200) {
            window.encrypt = new JSEncrypt();
            encrypt.setPublicKey(rs.result);
        }
    });
}

// éªŒè¯
function sysValidate() {
    // éªŒè¯ç”¨æˆ·åä¸Žå¯†ç 
    var theUsername = document.getElementById("username").value;
    if (theUsername.length <= 0) {
        $("#eMsg").html("提示：请输入用户名！");
        $("#username").focus();
        return false;
    }
    var thePassword = document.getElementById("password").value;
    if (thePassword.length <= 0) {
        $("#eMsg").html("提示：请输入密码！");
        $("#password").focus();
        return false;
    }
    /*if (!isValid(thePassword)) {
      $("#eMsg").html("提示：密码为8-20位包含字母、数字和特殊字符！");
      $("#password").focus();
      return false;
    }*/

    // éªŒè¯éªŒè¯ç 
    var inputCode = document.getElementById("inputCode").value;
    if (inputCode.length <= 0) {
        $("#eMsg").html("提示：请输入验证码！");
        $("#inputCode").focus();
        return false;
    }
    if (inputCode.toUpperCase() != code.toUpperCase()) {
        $("#eMsg").html("提示：验证码输入有误！");
        $("#inputCode").val("").focus();
        createCode();
        return false;
    }

    return true;
}

// login
function sysLogin() {
    if (isBusy || !sysValidate()) {
        return;
    }

    isBusy = true;
    var username = $.trim($("#username").val());
    var password = $("#password").val();
    var service = getQueryStr("service");

    var data = {
        "uid": encrypt.encrypt(username),
        "pwd": encrypt.encrypt(password)
    };
    ajax("login", "POST", JSON.stringify(data), null, null, function (rs) {
        isBusy = false;
        if (!rs || rs.code !== 200) {
            createCode();
            var msg = rs && rs.msg ? rs.msg : "登录失败！";
            $("#eMsg").html(msg);
            return;
        }
        if (rs.msg) alert(rs.msg);

        var service = getQueryStr("service");
        if (service) {
            service += (service.indexOf("?") > -1 ? "&" : "?") + "token=" + rs.result.token;
            location.href = service;
            return;
        }

        location.href = location.href.replace("/sign/toLogin", "/sign/toIndex");
    }, function () {
        isBusy = false;
        alert("登录出错，请联系管理员！");
    });
}

// Ajax
function ajax(url, type, data, dataType, contentType, fn, ex) {
    $.ajax({
        url: url,
        type: type,
        data: data,
        dataType: dataType || "json", // html、json、jsonp、script、text
        contentType: contentType || "application/json", // "application/x-www-form-urlencoded"
        success: function (data) {
            fn(data);
        },
        error: function (e) {
            console.error(e);
            ex(e);
        }
    });
}

// èŽ·å–URL参数
function getQueryStr(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURI(r[2]);
    }
    return null;
}

// é”®ç›˜æŒ‰ä¸‹äº‹ä»¶
document.onkeydown = function (e) {
    var ev = window.event || e;
    var code = ev.keyCode || ev.which || ev.charCode;
    if (code == 13) {
        sysLogin();
    }
}

// å¯†ç æ˜¯å¦åˆè§„
function isValid(pwd) {
    if (!pwd) return false;

    var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$');
    return regex.test(pwd);
}