<template>
|
<div>
|
<div class="container">
|
<div class="forms-container">
|
<div class="signin-signup">
|
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="sign-in-form">
|
<h2 class="title">登录</h2>
|
<el-form-item class="input-form" prop="username">
|
<el-input class="input" v-model="loginForm.username" placeholder="账号"></el-input>
|
</el-form-item>
|
<el-form-item class="input-form" prop="password">
|
<el-input class="input" type="password" v-model="loginForm.password" placeholder="密码"></el-input>
|
</el-form-item>
|
<el-form-item class="input-form" prop="captcha">
|
<div style="display: flex;flex-direction: row">
|
<el-input class="input" v-model="loginForm.captcha" placeholder="验证码" @keyup.enter="login"></el-input>
|
<img id="verfyImg" :src="verfyUrl" alt="加载失败" @click="getVerfyCode">
|
</div>
|
</el-form-item>
|
<el-button class="btn solid" type="primary" @click="login">立即登录</el-button>
|
<p class="social-text">通过其他方式</p>
|
<div class="social-media">
|
<a href="#" class="social-icon">
|
<i class="fab fa-qq"></i>
|
</a>
|
<a href="#" class="social-icon">
|
<i class="fab fa-weixin"></i>
|
</a>
|
<a href="#" class="social-icon">
|
<i class="fab fa-weibo"></i>
|
</a>
|
<a href="#" class="social-icon">
|
<i class="fab fa-alipay"></i>
|
</a>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
|
<div class="panels-container">
|
<div class="panel left-panel">
|
<div class="content">
|
<h3>加入我们</h3>
|
<p>
|
加入我们，成为本站的一份子。
|
</p>
|
<button class="btn transparent" id="sign-up-btn">
|
去注册
|
</button>
|
</div>
|
<img src="@/assets/log.svg" class="image" alt="" />
|
</div>
|
<div class="panel right-panel">
|
<div class="content">
|
<h3>已有帐号？</h3>
|
<p>
|
立即登录已有帐号，享受独家权益。
|
</p>
|
<button class="btn transparent" id="sign-in-btn">
|
去登录
|
</button>
|
</div>
|
<img src="@/assets/register.svg" class="image" alt="" />
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {getVerfyCode} from '../api/login'
|
import {login} from '../api/login'
|
export default {
|
name: "LoginView",
|
data() {
|
return {
|
verfyUrl: "",
|
loginForm: {
|
username: '',
|
password: '',
|
captchaId: '',
|
captcha: ''
|
},
|
loginRules: {
|
username: [
|
{ required: true, message: '请输入账号', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, message: '请输入密码', trigger: 'blur' }
|
],
|
captcha: [
|
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
],
|
}
|
}
|
},
|
methods: {
|
getVerfyCode() {
|
getVerfyCode().then((res) => {
|
this.verfyUrl = res.data.data.image;
|
this.loginForm.captchaId = res.data.data.captchaId;
|
})
|
},
|
|
login(){
|
this.$refs['loginForm'].validate((valid) => {
|
if (valid) {
|
login(this.loginForm).then((res) => {
|
if(res.data.code === 200) {
|
this.$store.commit("dynamicRouters", res.data.data.menuPermissions);
|
sessionStorage.setItem("token",res.headers.authentication);
|
// 菜单权限
|
sessionStorage.setItem("permissions", JSON.stringify(res.data.data.menuPermissions));
|
// 按钮权限
|
sessionStorage.setItem("button-permissions", JSON.stringify(res.data.data.buttonPermissions));
|
sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
|
this.$router.push("/home");
|
} else {
|
this.$message.error(res.data.msg);
|
this.getVerfyCode();
|
}
|
}).catch((res) => {
|
this.$message.error(res.data.msg);
|
this.getVerfyCode();
|
})
|
} else {
|
return false;
|
}
|
});
|
|
},
|
createRouter(item) {
|
let newRouter = {
|
path: item.menuPath,
|
name: item.routerName,
|
meta: {
|
title: item.menuName
|
},
|
component: () => import(`@/views/${item.routerComponent}.vue`)
|
}
|
return newRouter;
|
}
|
},
|
created() {
|
this.getVerfyCode();
|
},
|
mounted() {
|
|
},
|
}
|
</script>
|
|
<style scoped>
|
#verfyImg {
|
margin-left: 10px;
|
border: 1px solid;
|
border-color: #b7bec9;
|
}
|
#verfyImg:hover {
|
cursor: pointer;
|
}
|
|
.input-form {
|
width: 400px;
|
margin-bottom: 20px;
|
}
|
|
.input {
|
/*font-size: 18px;*/
|
}
|
|
::v-deep .input .el-input__inner {
|
line-height: 50px !important;
|
height: 50px !important;
|
font-size: 1.1rem;
|
padding-left: 60px;
|
}
|
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
|
body,
|
|
.container {
|
position: relative;
|
width: 100%;
|
background-color: #fff;
|
min-height: 100vh;
|
overflow: hidden;
|
}
|
|
.forms-container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
}
|
|
.signin-signup {
|
position: absolute;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
left: 75%;
|
width: 50%;
|
transition: 1s 0.7s ease-in-out;
|
display: grid;
|
grid-template-columns: 1fr;
|
z-index: 5;
|
}
|
|
|
form.sign-up-form {
|
opacity: 0;
|
z-index: 1;
|
}
|
|
.title {
|
font-size: 2.2rem;
|
color: #444;
|
margin-bottom: 20px;
|
}
|
|
.social-text {
|
padding: 0.7rem 0;
|
font-size: 1rem;
|
}
|
|
.social-media {
|
display: flex;
|
justify-content: center;
|
}
|
|
.social-icon {
|
height: 46px;
|
width: 46px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 0 0.45rem;
|
color: #333;
|
border-radius: 50%;
|
border: 1px solid #333;
|
text-decoration: none;
|
font-size: 1.1rem;
|
transition: 0.3s;
|
}
|
|
.social-icon:hover {
|
color: #4481eb;
|
border-color: #4481eb;
|
}
|
|
.btn {
|
width: 150px;
|
background-color: #5995fd;
|
border: none;
|
outline: none;
|
height: 49px;
|
border-radius: 49px;
|
color: #fff;
|
text-transform: uppercase;
|
font-weight: 600;
|
margin: 10px 0;
|
cursor: pointer;
|
transition: 0.5s;
|
}
|
|
.btn:hover {
|
background-color: #4d84e2;
|
}
|
.panels-container {
|
position: absolute;
|
height: 100%;
|
width: 100%;
|
top: 0;
|
left: 0;
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.container:before {
|
content: "";
|
position: absolute;
|
height: 2000px;
|
width: 2000px;
|
top: -10%;
|
right: 48%;
|
transform: translateY(-50%);
|
background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
|
transition: 1.8s ease-in-out;
|
border-radius: 50%;
|
z-index: 6;
|
}
|
|
form {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
padding: 0rem 5rem;
|
transition: all 0.2s 0.7s;
|
overflow: hidden;
|
grid-column: 1 / 2;
|
grid-row: 1 / 2;
|
}
|
|
.image {
|
width: 100%;
|
transition: transform 1.1s ease-in-out;
|
transition-delay: 0.4s;
|
}
|
|
.panel {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
justify-content: space-around;
|
text-align: center;
|
z-index: 6;
|
}
|
|
.left-panel {
|
pointer-events: all;
|
padding: 3rem 17% 2rem 12%;
|
}
|
|
.right-panel {
|
pointer-events: none;
|
padding: 3rem 12% 2rem 17%;
|
}
|
|
.panel .content {
|
color: #fff;
|
transition: transform 0.9s ease-in-out;
|
transition-delay: 0.6s;
|
}
|
|
.panel h3 {
|
font-weight: 600;
|
line-height: 1;
|
font-size: 1.5rem;
|
}
|
|
.panel p {
|
font-size: 0.95rem;
|
padding: 0.7rem 0;
|
}
|
|
.btn.transparent {
|
margin: 0;
|
background: none;
|
border: 2px solid #fff;
|
width: 130px;
|
height: 41px;
|
font-weight: 600;
|
font-size: 0.8rem;
|
}
|
|
.right-panel .image,
|
.right-panel .content {
|
transform: translateX(800px);
|
}
|
|
/* ANIMATION */
|
|
.container.sign-up-mode:before {
|
transform: translate(100%, -50%);
|
right: 52%;
|
}
|
|
.container.sign-up-mode .left-panel .image,
|
.container.sign-up-mode .left-panel .content {
|
transform: translateX(-800px);
|
}
|
|
.container.sign-up-mode .signin-signup {
|
left: 25%;
|
}
|
|
.container.sign-up-mode form.sign-up-form {
|
opacity: 1;
|
z-index: 2;
|
}
|
|
.container.sign-up-mode form.sign-in-form {
|
opacity: 0;
|
z-index: 1;
|
}
|
|
.container.sign-up-mode .right-panel .image,
|
.container.sign-up-mode .right-panel .content {
|
transform: translateX(0%);
|
}
|
|
.container.sign-up-mode .left-panel {
|
pointer-events: none;
|
}
|
|
.container.sign-up-mode .right-panel {
|
pointer-events: all;
|
}
|
|
@media (max-width: 870px) {
|
.container {
|
min-height: 800px;
|
height: 100vh;
|
}
|
.signin-signup {
|
width: 100%;
|
top: 95%;
|
transform: translate(-50%, -100%);
|
transition: 1s 0.8s ease-in-out;
|
}
|
|
.signin-signup,
|
.container.sign-up-mode .signin-signup {
|
left: 50%;
|
}
|
|
.panels-container {
|
grid-template-columns: 1fr;
|
grid-template-rows: 1fr 2fr 1fr;
|
}
|
|
.panel {
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
padding: 2.5rem 8%;
|
grid-column: 1 / 2;
|
}
|
|
.right-panel {
|
grid-row: 3 / 4;
|
}
|
|
.left-panel {
|
grid-row: 1 / 2;
|
}
|
|
.image {
|
width: 200px;
|
transition: transform 0.9s ease-in-out;
|
transition-delay: 0.6s;
|
}
|
|
.panel .content {
|
padding-right: 15%;
|
transition: transform 0.9s ease-in-out;
|
transition-delay: 0.8s;
|
}
|
|
.panel h3 {
|
font-size: 1.2rem;
|
}
|
|
.panel p {
|
font-size: 0.7rem;
|
padding: 0.5rem 0;
|
}
|
|
.btn.transparent {
|
width: 110px;
|
height: 35px;
|
font-size: 0.7rem;
|
}
|
|
.container:before {
|
width: 1500px;
|
height: 1500px;
|
transform: translateX(-50%);
|
left: 30%;
|
bottom: 68%;
|
right: initial;
|
top: initial;
|
transition: 2s ease-in-out;
|
}
|
|
.container.sign-up-mode:before {
|
transform: translate(-50%, 100%);
|
bottom: 32%;
|
right: initial;
|
}
|
|
.container.sign-up-mode .left-panel .image,
|
.container.sign-up-mode .left-panel .content {
|
transform: translateY(-300px);
|
}
|
|
.container.sign-up-mode .right-panel .image,
|
.container.sign-up-mode .right-panel .content {
|
transform: translateY(0px);
|
}
|
|
.right-panel .image,
|
.right-panel .content {
|
transform: translateY(300px);
|
}
|
|
.container.sign-up-mode .signin-signup {
|
top: 5%;
|
transform: translate(-50%, 0);
|
}
|
}
|
|
@media (max-width: 570px) {
|
form {
|
padding: 0 1.5rem;
|
}
|
|
.image {
|
display: none;
|
}
|
.panel .content {
|
padding: 0.5rem 1rem;
|
}
|
.container {
|
padding: 1.5rem;
|
}
|
|
.container:before {
|
bottom: 72%;
|
left: 50%;
|
}
|
|
.container.sign-up-mode:before {
|
bottom: 28%;
|
left: 50%;
|
}
|
}
|
|
</style>
|
