<template>
|
<div class="container">
|
<div class="background_img">
|
<img src="../assets/img/login/background.png" alt="" />
|
</div>
|
<div class="login-box">
|
<el-form
|
class="loginBox"
|
:model="loginForm"
|
:rules="rules"
|
ref="loginForm"
|
@keyup.enter.native="submitForm('loginForm')"
|
>
|
<el-form-item prop="loginname">
|
<div class="user-box">
|
<div class="imgbox">
|
<img src="../assets/img/login/user.png" alt="" />
|
</div>
|
<div class="titlebox">
|
<span>账户</span>
|
</div>
|
<div class="linebox">
|
<img src="../assets/img/login/line.png" alt="" />
|
</div>
|
<div class="inputbox">
|
<el-input
|
v-model="loginForm.loginname"
|
placeholder="输入您的账号"
|
class="nobr"
|
size="meddle"
|
autocomplete="off"
|
clearable
|
>
|
</el-input>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item prop="password">
|
<div class="user-box">
|
<div class="imgbox">
|
<img src="../assets/img/login/password.png" alt="" />
|
</div>
|
<div class="titlebox">
|
<span>密码</span>
|
</div>
|
<div class="linebox">
|
<img src="../assets/img/login/line.png" alt="" />
|
</div>
|
<div class="inputbox">
|
<el-input
|
show-password
|
v-model="loginForm.password"
|
placeholder="输入您的密码"
|
class="nobr"
|
autocomplete="off"
|
clearable
|
>
|
</el-input>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<div class="submitbox" @click="submitForm('loginForm')">
|
<img src="../assets/img/login/arrow.png" alt="" />
|
<span>登 录</span>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<ul class="bg-squares">
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import { login, loginFromThirdApp } from "@/api/api";
|
|
export default {
|
name: "login",
|
data() {
|
return {
|
loading: false,
|
randCodeImage: "",
|
loginForm: {
|
loginname: "",
|
password: "",
|
},
|
rules: {
|
loginname: [
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
],
|
password: [
|
{ required: true, message: "请输入登录密码", trigger: "blur" },
|
],
|
captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
},
|
};
|
},
|
created() {},
|
mounted() {
|
window.addEventListener("keydown", this.keyDown);
|
// if (
|
// window.location.href.match(/=(\S*)#/) &&
|
// window.location.href.match(/=(\S*)#/)[1] != ""
|
// ) {
|
// this.passFree();
|
// }
|
this.$router.push("/index");
|
// 京办免密登录（url带参"focus-open-code"）
|
// if (this.$route.query["focus-open-code"]) {
|
// this.passJBFree();
|
// }
|
// // CA免密登录（url带参"code"）
|
// if (this.$route.query["code"]) {
|
// this.passCAFree();
|
// }
|
},
|
destroyed() {
|
// 销毁事件
|
window.removeEventListener("keydown", this.keyDown, false);
|
},
|
methods: {
|
// 点击回车键登录
|
keyDown(e) {
|
// 回车则执行登录方法 enter键的ASCII是13
|
if (e.keyCode == 13 || e.keyCode == 100) {
|
this.submitForm("loginForm"); // 定义的登录方法
|
}
|
},
|
// 账号密码登录
|
submitForm(formName) {
|
this.$router.push("/index");
|
// this.$refs[formName].validate((valid) => {
|
// if (valid) {
|
// const loading = this.$loading({
|
// lock: true,
|
// text: "Loading",
|
// spinner: "el-icon-loading",
|
// background: "rgba(0, 0, 0, 0.7)",
|
// });
|
|
// login({
|
// username: this.loginForm.loginname,
|
// password: this.loginForm.password,
|
// })
|
// .then((res) => {
|
// loading.close();
|
// if (res.code !== 200) {
|
// this.$message.error(res.msg);
|
// } else {
|
// let tokenData = res.token;
|
// let times = new Date().getTime();
|
// window.localStorage.setItem("TokenTime", times);
|
// window.localStorage.setItem("TokenKey", tokenData);
|
// this.$router.push("/index");
|
// }
|
// })
|
// .catch((error) => {
|
// //网络超时异常处理
|
// loading.close();
|
// if (
|
// error.code === "ECONNABORTED" ||
|
// error.message === "Network Error" ||
|
// error.message.includes("timeout")
|
// ) {
|
// this.$message.error("请求超时，请稍后重试");
|
// }
|
// return Promise.resolve(error.response);
|
// // reject(error);
|
// });
|
|
// // //如果登录失败，需要刷新验证码的
|
// // this.$refs.refresh.createdCode();
|
// // this.validCode = ""; //清空验证码输入框的内容
|
// } else {
|
// // console.log("error submit!!");
|
// return false;
|
// }
|
// });
|
},
|
// CA免密登录
|
passCAFree() {
|
const CAloading = this.$loading({
|
lock: true,
|
text: "身份验证中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
loginFromThirdApp({
|
userType: "20",
|
code: this.$route.query["code"],
|
})
|
.then((res) => {
|
CAloading.close();
|
if (res.code == 200) {
|
let tokenData = res.token;
|
let times = new Date().getTime();
|
window.localStorage.setItem("TokenTime", times);
|
window.localStorage.setItem("TokenKey", tokenData);
|
this.$router.push("/index");
|
} else {
|
this.$message.error(res.message);
|
}
|
})
|
.catch((error) => {
|
CAloading.close();
|
return Promise.resolve(error.response);
|
});
|
},
|
// 京办免密登录
|
passJBFree() {
|
const JBloading = this.$loading({
|
lock: true,
|
text: "身份验证中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
loginFromThirdApp({
|
userType: "10",
|
code: this.$route.query["focus-open-code"],
|
})
|
.then((res) => {
|
JBloading.close();
|
if (res.code == 200) {
|
let tokenData = res.token;
|
let times = new Date().getTime();
|
window.localStorage.setItem("TokenTime", times);
|
window.localStorage.setItem("TokenKey", tokenData);
|
this.$router.push("/index");
|
} else {
|
this.$message.error(res.message);
|
}
|
})
|
.catch((error) => {
|
JBloading.close();
|
return Promise.resolve(error.response);
|
});
|
},
|
},
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0px;
|
left: 0px;
|
right: 0px;
|
}
|
|
.background_img {
|
width: 100%;
|
}
|
|
.background_img img {
|
width: 100%;
|
}
|
|
.login-box {
|
width: 533px;
|
height: 507px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
background-image: url("../assets/img/login/login.png");
|
box-sizing: border-box;
|
}
|
|
.loginBox {
|
/* background-color: #bfa; */
|
width: 397px;
|
height: 50%;
|
margin: 15% auto;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.el-form-item {
|
/* margin-bottom: 12px; */
|
height: 62px;
|
}
|
|
.user-box {
|
height: 62px;
|
width: 100%;
|
background-image: url("../assets/img/login/input.png");
|
display: flex;
|
align-items: flex-end;
|
justify-content: start;
|
}
|
|
.imgbox {
|
width: 13px;
|
height: 60%;
|
margin-left: 74px;
|
}
|
.imgbox img {
|
width: 100%;
|
}
|
.titlebox {
|
color: #fff;
|
font-size: 18px;
|
width: 40px;
|
margin-left: 10px;
|
}
|
|
.linebox {
|
height: 60%;
|
margin-left: 8px;
|
}
|
|
.submitbox {
|
width: 317px;
|
height: 61px;
|
margin: 0 auto;
|
cursor: pointer;
|
background-image: url("../assets/img/login/submit.png");
|
background-size: contain;
|
cursor: pointer;
|
}
|
|
.submitbox img {
|
display: block;
|
width: 26px;
|
height: 13px;
|
position: absolute;
|
left: 107px;
|
top: 30.5px;
|
}
|
|
.submitbox span {
|
position: absolute;
|
top: 16.5px;
|
left: 139px;
|
font-size: 16px;
|
font-weight: 600;
|
color: #fff;
|
margin-left: 95px;
|
}
|
|
.el-input /deep/ .el-input__inner {
|
background: transparent;
|
border-color: transparent;
|
color: #fff;
|
font-size: 18px;
|
}
|
|
.el-input /deep/ .el-input-group__prepend {
|
border: 0;
|
padding: 0 !important;
|
}
|
|
.el-form >>> .el-form-item__error {
|
left: 150px;
|
top: 106%;
|
}
|
|
/**动态效果 */
|
|
/* .rotate {
|
position: absolute;
|
top:60%;
|
left:50%;
|
transform: translate(-50%, -50%);
|
animation: run 10s linear infinite;
|
}
|
.rotate div{
|
background-color: white;
|
width: 30px;
|
height: 30px;
|
border-radius: 15px;
|
|
}
|
.rotate div:nth-child(1) {
|
transform: rotateY(0deg) translateZ(500px);
|
}
|
.rotate div:nth-child(2) {
|
transform: rotateY(0deg) translateZ(500px);
|
}
|
@keyframes run{
|
0%{
|
transform: rotateX(0deg) rotateY(0deg);
|
}
|
25%{
|
transform: rotateX(20deg) rotateY(90deg);
|
}
|
50%{
|
transform: rotateX(0deg) rotateY(180deg);
|
}
|
75%{
|
transform: rotateX(-20deg) rotateY(270deg);
|
}
|
100%{
|
transform: rotateX(0deg) rotateY(360deg);
|
}
|
} */
|
|
.bg-squares li {
|
width: 40px;
|
height: 40px;
|
background-color: rgba(255, 255, 255, 0.15);
|
position: absolute;
|
bottom: -160px;
|
animation: square 20s linear infinite;
|
border-radius: 45%;
|
box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
|
}
|
|
.bg-squares li:nth-child(1) {
|
left: 10%;
|
}
|
|
.bg-squares li:nth-child(2) {
|
left: 20%;
|
width: 80px;
|
height: 80px;
|
animation-delay: 2s;
|
animation-duration: 17s;
|
}
|
|
.bg-squares li:nth-child(3) {
|
left: 25%;
|
animation-delay: 4s;
|
}
|
|
.bg-squares li:nth-child(4) {
|
left: 40%;
|
width: 60px;
|
height: 60px;
|
background-color: rgba(255, 255, 255, 0.25);
|
animation-duration: 22s;
|
}
|
|
.bg-squares li:nth-child(5) {
|
left: 70%;
|
}
|
|
.bg-squares li:nth-child(6) {
|
left: 80%;
|
width: 120px;
|
height: 120px;
|
background-color: rgba(255, 255, 255, 0.2);
|
animation-delay: 3s;
|
}
|
|
.bg-squares li:nth-child(7) {
|
left: 32%;
|
width: 160px;
|
height: 160px;
|
animation-delay: 7s;
|
}
|
|
.bg-squares li:nth-child(8) {
|
left: 55%;
|
width: 20px;
|
height: 20px;
|
animation-delay: 15s;
|
animation-duration: 40s;
|
}
|
|
.bg-squares li:nth-child(9) {
|
left: 25%;
|
width: 10px;
|
height: 10px;
|
background-color: rgba(255, 255, 255, 0.3);
|
animation-delay: 2s;
|
animation-duration: 40s;
|
}
|
|
.bg-squares li:nth-child(10) {
|
left: 90%;
|
width: 160px;
|
height: 160px;
|
animation-delay: 11s;
|
}
|
|
.container.success h1 {
|
transform: translateY(75px);
|
}
|
|
.container.success .form {
|
opacity: 0;
|
visibility: hidden;
|
}
|
|
@keyframes square {
|
0% {
|
transform: translateY(0);
|
}
|
|
100% {
|
transform: translateY(-120vh) rotate(600deg);
|
}
|
}
|
</style>
|
