|
@@ -1,33 +1,50 @@
|
|
<template>
|
|
<template>
|
|
<div class="loginPanel">
|
|
<div class="loginPanel">
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="108px">
|
|
|
|
- <el-form-item label="用户名:" prop="username">
|
|
|
|
- <el-input
|
|
|
|
- placeholder="请输入"
|
|
|
|
- maxlength="30"
|
|
|
|
- v-autoTrim="{ obj: form, key: 'username' }"
|
|
|
|
- v-model="form.username"
|
|
|
|
- @keyup.enter.native="toLogin"
|
|
|
|
- >
|
|
|
|
- </el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- <el-form-item label="密码:" prop="password">
|
|
|
|
- <el-input
|
|
|
|
- placeholder="请输入"
|
|
|
|
- type="password"
|
|
|
|
- maxlength="16"
|
|
|
|
- v-autoTrim="{ obj: form, key: 'password' }"
|
|
|
|
- v-model="form.password"
|
|
|
|
- @keyup.enter.native="toLogin"
|
|
|
|
- >
|
|
|
|
- </el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- <div class="btns">
|
|
|
|
- <el-button type="primary" @click="toLogin">登录</el-button>
|
|
|
|
- </div>
|
|
|
|
- </el-form>
|
|
|
|
|
|
+ <div class="loginBox">
|
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="0">
|
|
|
|
+ <div class="formTop">
|
|
|
|
+ <img :src="formTopImg" width="100%" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+ <el-form-item label="" prop="username">
|
|
|
|
+ <div class="label username el-icon-user"></div>
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="请输入用户名"
|
|
|
|
+ maxlength="30"
|
|
|
|
+ v-autoTrim="{ obj: form, key: 'username' }"
|
|
|
|
+ v-model="form.username"
|
|
|
|
+ @keyup.enter.native="toLogin"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+
|
|
|
|
+ <!-- autocomplete="new-password" -->
|
|
|
|
+ <el-form-item label="" prop="password">
|
|
|
|
+ <div class="label password el-icon-lock"></div>
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="请输入密码"
|
|
|
|
+ type="password"
|
|
|
|
+ maxlength="16"
|
|
|
|
+ v-autoTrim="{ obj: form, key: 'password' }"
|
|
|
|
+ v-model="form.password"
|
|
|
|
+ @keyup.enter.native="toLogin"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+
|
|
|
|
+ <div class="btns">
|
|
|
|
+ <el-button type="primary" @click="toLogin">登录</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="top">
|
|
|
|
+ <img :src="topImg" width="100%" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="bottom">
|
|
|
|
+ ICP备案号: 京ICP备18035552号-1 All Rights Reserved: Copyright 2022
|
|
|
|
+ CICV
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -45,7 +62,11 @@ export default {
|
|
},
|
|
},
|
|
rules: {
|
|
rules: {
|
|
username: [
|
|
username: [
|
|
- { required: true, message: "请输入", trigger: "blur" },
|
|
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请输入用户名",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
],
|
|
],
|
|
password: [
|
|
password: [
|
|
{
|
|
{
|
|
@@ -56,6 +77,8 @@ export default {
|
|
],
|
|
],
|
|
},
|
|
},
|
|
i: 0,
|
|
i: 0,
|
|
|
|
+ formTopImg: require("@/assets/common/image/login/formTop.png"),
|
|
|
|
+ topImg: require("@/assets/common/image/login/top.png"),
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
|
|
@@ -71,7 +94,10 @@ export default {
|
|
data: this.form,
|
|
data: this.form,
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
if (res.code == 200 && res.info) {
|
|
if (res.code == 200 && res.info) {
|
|
- let Authorization = res.info.token_type + ' ' + res.info.access_token;
|
|
|
|
|
|
+ let Authorization =
|
|
|
|
+ res.info.token_type +
|
|
|
|
+ " " +
|
|
|
|
+ res.info.access_token;
|
|
let refreshToken = res.info.refresh_token;
|
|
let refreshToken = res.info.refresh_token;
|
|
let expiresTime = res.info.expires_time;
|
|
let expiresTime = res.info.expires_time;
|
|
|
|
|
|
@@ -82,19 +108,21 @@ export default {
|
|
);
|
|
);
|
|
localStorage.setItem("refreshToken", refreshToken);
|
|
localStorage.setItem("refreshToken", refreshToken);
|
|
localStorage.setItem("expiresTime", expiresTime);
|
|
localStorage.setItem("expiresTime", expiresTime);
|
|
- localStorage.setItem("username", this.form.username)
|
|
|
|
|
|
+ localStorage.setItem(
|
|
|
|
+ "username",
|
|
|
|
+ this.form.username
|
|
|
|
+ );
|
|
|
|
|
|
let tokenTimer = null;
|
|
let tokenTimer = null;
|
|
let toExpiresTime =
|
|
let toExpiresTime =
|
|
new Date(expiresTime).getTime() -
|
|
new Date(expiresTime).getTime() -
|
|
new Date().getTime();
|
|
new Date().getTime();
|
|
- if (toExpiresTime < 5*60 * 1000) {
|
|
|
|
- this.getRefreshToken()
|
|
|
|
- }else{
|
|
|
|
|
|
+ if (toExpiresTime < 5 * 60 * 1000) {
|
|
|
|
+ this.getRefreshToken();
|
|
|
|
+ } else {
|
|
this.getUserInfo();
|
|
this.getUserInfo();
|
|
// this.$router.push({ path: "/mainPage" });
|
|
// this.$router.push({ path: "/mainPage" });
|
|
}
|
|
}
|
|
-
|
|
|
|
} else {
|
|
} else {
|
|
this.$message.error(res.message || "登录失败");
|
|
this.$message.error(res.message || "登录失败");
|
|
}
|
|
}
|
|
@@ -111,7 +139,8 @@ export default {
|
|
},
|
|
},
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
if (res.code == 200 && res.info) {
|
|
if (res.code == 200 && res.info) {
|
|
- let Authorization = res.info.token_type + ' ' + res.info.access_token;
|
|
|
|
|
|
+ let Authorization =
|
|
|
|
+ res.info.token_type + " " + res.info.access_token;
|
|
let refreshToken = res.info.refresh_token;
|
|
let refreshToken = res.info.refresh_token;
|
|
let expiresTime = res.info.expires_time;
|
|
let expiresTime = res.info.expires_time;
|
|
|
|
|
|
@@ -122,7 +151,6 @@ export default {
|
|
|
|
|
|
this.getUserInfo();
|
|
this.getUserInfo();
|
|
// this.$router.push({ path: "/mainPage" });
|
|
// this.$router.push({ path: "/mainPage" });
|
|
-
|
|
|
|
} else {
|
|
} else {
|
|
this.$message.error(res.message || "获取refresh_token失败");
|
|
this.$message.error(res.message || "获取refresh_token失败");
|
|
}
|
|
}
|
|
@@ -154,38 +182,165 @@ export default {
|
|
this.$store.commit("getUserId", "");
|
|
this.$store.commit("getUserId", "");
|
|
this.$store.commit("getUsername", "");
|
|
this.$store.commit("getUsername", "");
|
|
this.$store.commit("getRoleCode", "");
|
|
this.$store.commit("getRoleCode", "");
|
|
- this.$store.commit("getUseType","");
|
|
|
|
|
|
+ this.$store.commit("getUseType", "");
|
|
},
|
|
},
|
|
|
|
|
|
- beforeRouteLeave (to, from, next) {
|
|
|
|
- if (!localStorage.getItem('Authorization')) {
|
|
|
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
|
+ if (!localStorage.getItem("Authorization")) {
|
|
// alert(666)
|
|
// alert(666)
|
|
return false;
|
|
return false;
|
|
- }else {
|
|
|
|
- next()
|
|
|
|
|
|
+ } else {
|
|
|
|
+ next();
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
.loginPanel {
|
|
.loginPanel {
|
|
|
|
+ position: relative;
|
|
padding: 100px;
|
|
padding: 100px;
|
|
|
|
|
|
|
|
+ .loginBox {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ background: url("../assets/common/image/login/bg0.png") center no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ // background-size: 100% 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .top {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 2.7%;
|
|
|
|
+ right: 1.41%;
|
|
|
|
+ width: 13.38%;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom {
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 2.7%;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
.el-form {
|
|
.el-form {
|
|
- width: 60%;
|
|
|
|
- margin: 0 auto;
|
|
|
|
- padding-bottom: 45px;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 22.5%;
|
|
|
|
+ left: 68.1%;
|
|
|
|
+ z-index: 3;
|
|
|
|
+ // width: 400px;
|
|
|
|
+ width: 21%;
|
|
|
|
+ min-width: 400px;
|
|
|
|
+ padding: 36px 60px 96px;
|
|
|
|
+ background-color: rgba(220, 220, 220, 0.2);
|
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
|
|
|
- /deep/ .el-input,
|
|
|
|
- .el-select {
|
|
|
|
|
|
+ /deep/ .el-input {
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ // color: #ffffff;
|
|
|
|
+
|
|
|
|
+ input,
|
|
|
|
+ input.el-input__inner {
|
|
|
|
+ padding-left: 36px;
|
|
|
|
+ background: transparent !important;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .el-form-item {
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .label {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 3;
|
|
|
|
+ width: 18px;
|
|
|
|
+ height: 18px;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #dcdcdc;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // .username {
|
|
|
|
+ // background: url("../assets/common/image/login/name.png") center
|
|
|
|
+ // no-repeat;
|
|
|
|
+ // background-size: contain;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // .password {
|
|
|
|
+ // background: url("../assets/common/image/login/pwd.png") center
|
|
|
|
+ // no-repeat;
|
|
|
|
+ // background-size: contain;
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input:-webkit-autofill {
|
|
|
|
+ box-shadow: 0 0 0 1000px #f00 inset; // 背景颜色
|
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px #f00 inset;
|
|
|
|
+ -webkit-text-fill-color: #fff; // input 的文字的颜色
|
|
|
|
+ border: 0;
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input:-internal-autofill-selected {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input:-webkit-autofill,
|
|
|
|
+ input:-webkit-autofill:hover,
|
|
|
|
+ input:-webkit-autofill:focus,
|
|
|
|
+ input:-webkit-autofill:active {
|
|
|
|
+ transition-delay: 5000s;
|
|
|
|
+ transition: color 5000s ease-out, background-color 5000s ease-out;
|
|
|
|
+ -webkit-transition-delay: 5000s;
|
|
|
|
+ -webkit-transition: color 5000s ease-out,
|
|
|
|
+ background-color 5000s ease-out;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input:-webkit-autofill,
|
|
|
|
+ input:-webkit-autofill:hover,
|
|
|
|
+ input:-webkit-autofill:focus {
|
|
|
|
+ color: #fff !important;
|
|
|
|
+ -webkit-text-fill-color: #fff;
|
|
|
|
+ -webkit-transition: background-color 99999999s ease-in-out 0s;
|
|
|
|
+ transition: background-color 99999999s ease-in-out 0s;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input:autofill,
|
|
|
|
+ input:autofill:hover,
|
|
|
|
+ input:autofill:focus {
|
|
|
|
+ -webkit-text-fill-color: #fff;
|
|
|
|
+ -webkit-transition: background-color 99999999s ease-in-out 0s;
|
|
|
|
+ transition: background-color 99999999s ease-in-out 0s;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .formTop {
|
|
|
|
+ width: 62.1%;
|
|
|
|
+ margin: 0 auto 20px;
|
|
|
|
+ // background: url("../assets/common/image/login/formTop.png") center
|
|
|
|
+ // no-repeat;
|
|
|
|
+ // background-size: contain;
|
|
}
|
|
}
|
|
|
|
|
|
.btns {
|
|
.btns {
|
|
- padding-top: 30px;
|
|
|
|
|
|
+ padding-top: 8px;
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
+
|
|
|
|
+ .el-button {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|