|
|
@@ -5,127 +5,119 @@
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
- <title>Anlapus smart Login</title>
|
|
|
+ <title>Anlapus Login</title>
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
|
|
|
</head>
|
|
|
<style type="text/css">
|
|
|
- html, body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- * {
|
|
|
- margin: 0px;
|
|
|
- padding: 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- #t_div {
|
|
|
- width: 100%;
|
|
|
- /*height: 200px;*/
|
|
|
- height: 25%;
|
|
|
- background-color: #66677C;
|
|
|
- margin-top: 0px;
|
|
|
- margin-bottom: -20px;
|
|
|
- /*border-bottom: solid 1px red;*/
|
|
|
- }
|
|
|
-
|
|
|
- #c_div {
|
|
|
- width: 100%;
|
|
|
- /*height: 430px ;*/
|
|
|
- height: 50%;
|
|
|
- margin-top: 0px;
|
|
|
- margin-bottom: 0px;
|
|
|
- border-top: solid 1px #66677C;
|
|
|
- position: relative;
|
|
|
- background-color: yellow;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- #c_leftdiv {
|
|
|
- width: 50%;
|
|
|
- /*height: 430px;*/
|
|
|
- height: 100%;
|
|
|
- margin: 0px;
|
|
|
- background-color: #7ab6b6;
|
|
|
- float: left;
|
|
|
- /*position: relative;*/
|
|
|
- /*left: 50px;
|
|
|
- top: 100px;*/
|
|
|
- }
|
|
|
-
|
|
|
- #c_rightdiv {
|
|
|
- width: 50%;
|
|
|
- /*height: 430px;*/
|
|
|
- height: 100%;
|
|
|
- margin: 0px;
|
|
|
- background-color: #e5cfaa;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- /*阴影部分*/
|
|
|
- /*#c_centerdiv-shadow{
|
|
|
- width: 350px;
|
|
|
- height: 390px;
|
|
|
- background-color: #a09177;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin-left: 37.3%;
|
|
|
- margin-top: 3.5%;
|
|
|
- z-index: 1;
|
|
|
- }*/
|
|
|
-
|
|
|
- #c_centerdiv > p {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 100;
|
|
|
- margin-left: 100px;
|
|
|
- margin: 10px auto;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- #c_centerdiv > img {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- #password_text {
|
|
|
- width: 90%;
|
|
|
- height: 50px;
|
|
|
- line-height: 30px;
|
|
|
- /*background-color: red;*/
|
|
|
- font-size: 40px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- #c_centerdiv > img {
|
|
|
- display: block;
|
|
|
- position: relative;
|
|
|
- left: 0px;
|
|
|
- top: 10px;
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- #c_centerdiv {
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- top: 50%;
|
|
|
- margin-top: -193px;
|
|
|
- /*margin-top: -15.1%;*/
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
-
|
|
|
- #c_centerdiv {
|
|
|
- width: 350px;
|
|
|
- height: 390px;
|
|
|
- padding: 50px 30px;
|
|
|
- }
|
|
|
-
|
|
|
- #c_center_title {
|
|
|
+ html,body{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px;
|
|
|
+ }
|
|
|
+ *{
|
|
|
+ margin: 0px;
|
|
|
+ padding: 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ #t_div{
|
|
|
+ width: 100%;
|
|
|
+ /*height: 200px;*/
|
|
|
+ height: 25%;
|
|
|
+ background-color:#66677C;
|
|
|
+ margin-top: 0px;
|
|
|
+ margin-bottom: -20px;
|
|
|
+ /*border-bottom: solid 1px red;*/
|
|
|
+ }
|
|
|
+ #c_div{
|
|
|
+ width: 100%;
|
|
|
+ /*height: 430px ;*/
|
|
|
+ height: 50%;
|
|
|
+ margin-top: 0px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ border-top: solid 1px #66677C;
|
|
|
+ position: relative;
|
|
|
+ background-color: yellow;
|
|
|
+
|
|
|
+ }
|
|
|
+ #c_leftdiv{
|
|
|
+ width: 50%;
|
|
|
+ /*height: 430px;*/
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px;
|
|
|
+ background-color: #7ab6b6;
|
|
|
+ float: left;
|
|
|
+ /*position: relative;*/
|
|
|
+ /*left: 50px;
|
|
|
+ top: 100px;*/
|
|
|
+ }
|
|
|
+ #c_rightdiv{
|
|
|
+ width: 50%;
|
|
|
+ /*height: 430px;*/
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px;
|
|
|
+ background-color: #e5cfaa;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ /*阴影部分*/
|
|
|
+ /*#c_centerdiv-shadow{
|
|
|
+ width: 350px;
|
|
|
+ height: 390px;
|
|
|
+ background-color: #a09177;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin-left: 37.3%;
|
|
|
+ margin-top: 3.5%;
|
|
|
+ z-index: 1;
|
|
|
+ }*/
|
|
|
+
|
|
|
+ #c_centerdiv > p{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 100;
|
|
|
+ margin-left: 100px;
|
|
|
+ margin: 10px auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #c_centerdiv > img{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #password_text{
|
|
|
+ width: 90%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 30px;
|
|
|
+ /*background-color: red;*/
|
|
|
+ font-size: 40px;
|
|
|
+
|
|
|
+ }
|
|
|
+ #c_centerdiv > img{
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ left: 0px;
|
|
|
+ top: 10px;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #c_centerdiv{
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -193px;
|
|
|
+ /*margin-top: -15.1%;*/
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ #c_centerdiv{
|
|
|
+ width: 350px;
|
|
|
+ height: 390px;
|
|
|
+ padding: 50px 30px;
|
|
|
+ }
|
|
|
+ #c_center_title{
|
|
|
width: 100%;
|
|
|
height: 19%;
|
|
|
/*height: 55px;*/
|
|
|
@@ -136,161 +128,215 @@
|
|
|
text-align: center;
|
|
|
/*background-color: red;*/
|
|
|
}
|
|
|
-
|
|
|
- #c_center_div1 {
|
|
|
- width: 100%;
|
|
|
- height: 19%;
|
|
|
- /*height: 55px;*/
|
|
|
- color: #555;
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 600;
|
|
|
- font-family: 'Arimo', sans-serif;
|
|
|
- text-align: center;
|
|
|
- /*background-color: red;*/
|
|
|
- }
|
|
|
-
|
|
|
- #c_center_div2 {
|
|
|
- width: 100%;
|
|
|
- height: 13.8%;
|
|
|
- text-align: center;
|
|
|
- padding: 0px;
|
|
|
- position: relative;
|
|
|
- /*background-color: yellow;*/
|
|
|
- margin-top: 0px;
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- /*图片*/
|
|
|
- #c_center_div2 > img {
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- #user_text {
|
|
|
- width: 100%;
|
|
|
- /*width: 80%;*/
|
|
|
- height: 40px;
|
|
|
- float: right;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 17px;
|
|
|
- letter-spacing: 1px;
|
|
|
- box-shadow: 0 0 0 0 transparent;
|
|
|
- border: none;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 0;
|
|
|
- display: inline-block;
|
|
|
- font-family: "微软雅黑";
|
|
|
- }
|
|
|
-
|
|
|
- #password_text {
|
|
|
- width: 100%;
|
|
|
- /*width: 80%;*/
|
|
|
- height: 40px;
|
|
|
- float: right;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 17px;
|
|
|
- letter-spacing: 1px;
|
|
|
- box-shadow: 0 0 0 0 transparent;
|
|
|
- border: none;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 0;
|
|
|
- display: inline-block;
|
|
|
- font-family: "微软雅黑";
|
|
|
- }
|
|
|
-
|
|
|
- #c_center_div4 {
|
|
|
- width: 100%;
|
|
|
- height: 16%;
|
|
|
- text-align: center;
|
|
|
- padding: 0px;
|
|
|
- position: relative;
|
|
|
- /* background-color: yellow;*/
|
|
|
- margin-top: 0px;
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- #login_button {
|
|
|
- width: 50.7%;
|
|
|
- height: 100%;
|
|
|
- /*background-image: url(img/按钮初始界面.png);*/
|
|
|
- outline: none;
|
|
|
- border: none;
|
|
|
- background-color: #7ab6b6;
|
|
|
- border-radius: 30px;
|
|
|
- font-size: large;
|
|
|
- color: white;
|
|
|
- font-family: Arial;
|
|
|
- }
|
|
|
-
|
|
|
- #login_button:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- #b_div {
|
|
|
- width: 100%;
|
|
|
- /*height: 120px;*/
|
|
|
- height: 27.2%;
|
|
|
- background-color: #66677C;
|
|
|
-
|
|
|
- }
|
|
|
+ #c_center_div1{
|
|
|
+ width: 100%;
|
|
|
+ height: 19%;
|
|
|
+ /*height: 55px;*/
|
|
|
+ color: #555;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: 'Arimo', sans-serif;
|
|
|
+ text-align: center;
|
|
|
+ /*background-color: red;*/
|
|
|
+ }
|
|
|
+ #c_center_div2{
|
|
|
+ width: 100%;
|
|
|
+ height: 13.8%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0px;
|
|
|
+ position: relative;
|
|
|
+ /*background-color: yellow;*/
|
|
|
+ margin-top: 0px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ /*图片*/
|
|
|
+ #c_center_div2 > img{
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
+ #user_text{
|
|
|
+ width: 100%;
|
|
|
+ /*width: 80%;*/
|
|
|
+ height: 40px;
|
|
|
+ float: right;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 17px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ box-shadow: 0 0 0 0 transparent;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0;
|
|
|
+ display: inline-block;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+ }
|
|
|
+
|
|
|
+ #password_text{
|
|
|
+ width: 100%;
|
|
|
+ /*width: 80%;*/
|
|
|
+ height: 40px;
|
|
|
+ float: right;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 17px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ box-shadow: 0 0 0 0 transparent;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0;
|
|
|
+ display: inline-block;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+ }
|
|
|
+ #password_icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #c_center_div4{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 16%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0px;
|
|
|
+ position: relative;
|
|
|
+/* background-color: yellow;*/
|
|
|
+ margin-top: 0px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ #login_button{
|
|
|
+ width: 50.7%;
|
|
|
+ height: 100%;
|
|
|
+ /*background-image: url(img/按钮初始界面.png);*/
|
|
|
+ outline:none;
|
|
|
+ border:none;
|
|
|
+ background-color: #7ab6b6;
|
|
|
+ border-radius:30px;
|
|
|
+ font-size: large;
|
|
|
+ color: white;
|
|
|
+ font-family: Arial;
|
|
|
+ }
|
|
|
+ #login_button:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #login_button:disabled {
|
|
|
+ background-color: #ccc; /* 灰色背景 */
|
|
|
+ cursor: not-allowed; /* 禁用指针样式 */
|
|
|
+ }
|
|
|
+
|
|
|
+ #b_div{
|
|
|
+ width: 100%;
|
|
|
+ /*height: 120px;*/
|
|
|
+ height: 27.2%;
|
|
|
+ background-color:#66677C;
|
|
|
+
|
|
|
+ }
|
|
|
+ #loading_icon{
|
|
|
+ position: absolute;
|
|
|
+ right: 89px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .loading-icon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .loading-icon.visible {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
|
|
<body marginheight="0px" marginwidth="0px">
|
|
|
<div id="t_div">
|
|
|
</div>
|
|
|
<div id="c_div">
|
|
|
- <div id="c_leftdiv"></div>
|
|
|
- <div id="c_rightdiv"></div>
|
|
|
- <div id="c_centerdiv">
|
|
|
+ <div id="c_leftdiv"></div>
|
|
|
+ <div id="c_rightdiv"></div>
|
|
|
+ <div id="c_centerdiv">
|
|
|
<div id="c_center_title">
|
|
|
- ANLAPUS
|
|
|
+ Anlapus
|
|
|
</div>
|
|
|
- <div id="c_center_div1">
|
|
|
+ <div id="c_center_div1">
|
|
|
Please enter your Anlapus account for association
|
|
|
- </div>
|
|
|
- <div id="c_center_div2">
|
|
|
- <!--<img src="img/用户.png"/>-->
|
|
|
- <input id="user_text" type="text" placeholder="Account"/>
|
|
|
- </div>
|
|
|
- <div id="c_center_div2">
|
|
|
- <!--<img src="img/密码.png"/>-->
|
|
|
- <input id="password_text" type="password" placeholder="Password"/>
|
|
|
- </div>
|
|
|
- <div id="c_center_div4">
|
|
|
- <input type="button" id="login_button" value="LOGIN" onclick="Login();return false;"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--阴影部分-->
|
|
|
- <!-- <div id="c_centerdiv-shadow">-->
|
|
|
-
|
|
|
-</div>
|
|
|
+ </div>
|
|
|
+ <div id="c_center_div2">
|
|
|
+ <!--<img src="img/用户.png"/>-->
|
|
|
+ <input id="user_text" type="text" placeholder="Account"/>
|
|
|
+ </div>
|
|
|
+ <div id="c_center_div2">
|
|
|
+ <!--<img src="img/密码.png"/>-->
|
|
|
+ <input id="password_text" type="password" placeholder="Password"/>
|
|
|
+ <i
|
|
|
+ id="password_icon"
|
|
|
+ class="far fa-eye-slash"
|
|
|
+ onclick="togglePasswordVisibility()"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <div id="c_center_div4">
|
|
|
+ <input type="button" id="login_button" value="LOGIN" onclick="Login();return false"/>
|
|
|
+ <i id="loading_icon" class="fas fa-spinner fa-spin loading-icon"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--阴影部分-->
|
|
|
+<!-- <div id="c_centerdiv-shadow">-->
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div id="b_div">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
+ function showLoadingIcon() {
|
|
|
+ var loginButton = document.getElementById("login_button");
|
|
|
+ var loadingIcon = document.getElementById("loading_icon");
|
|
|
+ loginButton.disabled = true;
|
|
|
+ loadingIcon.classList.add("visible");
|
|
|
+ }
|
|
|
+
|
|
|
+ function hideLoadingIcon() {
|
|
|
+ var loginButton = document.getElementById("login_button");
|
|
|
+ var loadingIcon = document.getElementById("loading_icon");
|
|
|
+ loginButton.disabled = false;
|
|
|
+ loadingIcon.classList.remove("visible");
|
|
|
+ }
|
|
|
+
|
|
|
+ function togglePasswordVisibility() {
|
|
|
+ var passwordInput = document.getElementById("password_text");
|
|
|
+ var passwordIcon = document.getElementById("password_icon");
|
|
|
+ if (passwordInput.type === "password") {
|
|
|
+ passwordInput.type = "text";
|
|
|
+ passwordIcon.classList.remove("fa-eye-slash");
|
|
|
+ passwordIcon.classList.add("fa-eye");
|
|
|
+ } else {
|
|
|
+ passwordInput.type = "password";
|
|
|
+ passwordIcon.classList.remove("fa-eye");
|
|
|
+ passwordIcon.classList.add("fa-eye-slash");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function Login() {
|
|
|
var user = document.getElementById("user_text");
|
|
|
var pwd = document.getElementById("password_text");
|
|
|
if (user.value.length > 0) {
|
|
|
+ showLoadingIcon();
|
|
|
//console.log("user: " + user.value);
|
|
|
//console.log("pwd: " + pwd.value);
|
|
|
|
|
|
var params = ("user=" + user.value + "&pwd=" + pwd.value + "&state={{ state }}" + "&client_id={{ client_id }}"
|
|
|
- + "&response_type={{ response_type }}" + "&scope={{ scope }}" + "&redirect_uri={{ redirect_uri }}
|
|
|
+ + "&response_type={{ response_type }}" + "&scope={{ scope }}" + "&redirect_uri={{ redirect_uri }}"
|
|
|
+ "&skill_name={{ skill_name }}");
|
|
|
$.get("/oa2/login", params, function (reUrl) {
|
|
|
//alert(reUrl);
|
|
|
let data = JSON.parse(reUrl)
|
|
|
- if (data['code'] === 0) {
|
|
|
+ if(data['code']===0){
|
|
|
console.log('request start')
|
|
|
window.location = data['res'];
|
|
|
- } else {
|
|
|
+ }else{
|
|
|
alert(data['msg'])
|
|
|
}
|
|
|
-
|
|
|
+ hideLoadingIcon();
|
|
|
});
|
|
|
} else {
|
|
|
alert("please input user and password");
|
