262 lines
8.7 KiB
Vue
262 lines
8.7 KiB
Vue
<template>
|
|
<div class="sys-login" style="overflow: hidden;">
|
|
<div class="login-logo" style="display:flex;">
|
|
<img style="width:50px;height:50px;" :src="companyInfo.logoUrl" alt />
|
|
<h2 style="margin-left:10px;color:#fff">{{ companyInfo.name }}</h2>
|
|
</div>
|
|
<!-- <div class="login-slogan">
|
|
赋能万物 连接未来
|
|
</div> -->
|
|
<div class="login-area">
|
|
<el-divider class="login-divider">
|
|
<div class="login-title">登录</div>
|
|
</el-divider>
|
|
<div class="form-group1">
|
|
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top" label-width="">
|
|
<el-form-item prop="name">
|
|
<el-input v-model="loginForm.name" type="text" placeholder="请输入用户名"
|
|
prefix-icon="iconfont icon-iLinkapp-"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password" class="login-psw">
|
|
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
|
|
@keyup.enter.native="submitForm()" show-password></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item>-->
|
|
<!-- <el-checkbox v-model="loginForm.auto">自动登录</el-checkbox>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item>
|
|
<el-button type="primary" ref="loginBtn" class="login-btn" @click="submitForm()">登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions, mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginForm: {
|
|
name: "",
|
|
password: "",
|
|
auto: false
|
|
},
|
|
loginRules: {
|
|
name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
|
password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
|
|
},
|
|
sysMsg: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
companyInfo: state => state.common.companyInfo
|
|
}),
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
login: "auth/loginByUser",
|
|
getNavList: "auth/getNavList",
|
|
}),
|
|
|
|
submitForm() {
|
|
var self = this;
|
|
this.$refs.loginForm.validate(valid => {
|
|
if (valid) {
|
|
this.login({
|
|
name: this.loginForm.name,
|
|
password: this.loginForm.password
|
|
})
|
|
.then(res => {
|
|
if (res.code === 0) {
|
|
localStorage.removeItem("permissionList");
|
|
self.getNavList().then(res => {
|
|
if (res.code == 0) {
|
|
this.$router.push("home");
|
|
}
|
|
});
|
|
} else {
|
|
this.$alert(res.msg, "提示", { type: "warning" });
|
|
}
|
|
})
|
|
.catch(reason => {
|
|
this.$alert("用户名或密码错误", "提示", { type: "warning" });
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.sys-login {
|
|
height: 100%;
|
|
/* background: #fff; */
|
|
background-image: url(../../assets/bg_login.png);
|
|
background-position: center center;
|
|
/* 图片居中 */
|
|
background-repeat: no-repeat;
|
|
/* 不重复 */
|
|
background-size: cover;
|
|
/* 覆盖整个屏幕 */
|
|
/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='35.605' cx='185.1' cy='286.35' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.8' cx='57.44' cy='151.68' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='27.595' cx='843.22' cy='195.61' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='55.4' cx='79.95' cy='304.45' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.2' cx='419.65' cy='331.62' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='33.66' cx='1110.51' cy='176.8' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='24.325' cx='51.8' cy='349.83' fill='url(%26quot%3b%23SvgjsLinearGradient1047%26quot%3b)'%3e%3c/circle%3e%3ccircle r='43.22' cx='693.82' cy='50.84' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1041'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='113.89' y1='286.35' x2='256.31' y2='286.35' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='788.03' y1='195.61' x2='898.41' y2='195.61' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-30.849999999999994' y1='304.45' x2='190.75' y2='304.45' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='385.25' y1='331.62' x2='454.05' y2='331.62' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1043.19' y1='176.8' x2='1177.83' y2='176.8' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='3.1499999999999986' y1='349.83' x2='100.44999999999999' y2='349.83' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1047'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.login-logo {
|
|
padding: 2%;
|
|
}
|
|
|
|
.login-logo img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.login-logo img:first-child {
|
|
width: 10%;
|
|
max-width: 97px;
|
|
}
|
|
|
|
.login-logo img:last-child {
|
|
width: 18%;
|
|
max-width: 294px;
|
|
}
|
|
|
|
/* .login-logo span {
|
|
margin: 0px 1%;
|
|
display: inline-block;
|
|
height: 37px;
|
|
width: 1px;
|
|
background: #fff;
|
|
vertical-align: middle;
|
|
} */
|
|
.login-slogan {
|
|
position: fixed;
|
|
left: 25%;
|
|
top: 40%;
|
|
transform: translate(0px, -50%);
|
|
/* color: white; */
|
|
color: #333;
|
|
font-size: 2em;
|
|
width: 8em;
|
|
height: 1.5em;
|
|
border-right: 1px solid transparent;
|
|
animation: login-slogan 2s steps(42, end), blink-caret 0.75s step-end infinite;
|
|
font-family: Consolas, Monaco;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 打印效果 */
|
|
@keyframes login-slogan {
|
|
from {
|
|
width: 0;
|
|
}
|
|
|
|
to {
|
|
width: 8em;
|
|
}
|
|
}
|
|
|
|
/* 光标 */
|
|
@keyframes blink-caret {
|
|
|
|
from,
|
|
to {
|
|
border-color: transparent;
|
|
}
|
|
|
|
50% {
|
|
border-color: currentColor;
|
|
}
|
|
}
|
|
|
|
.login-area {
|
|
position: fixed;
|
|
right: 6%;
|
|
top: 55%;
|
|
transform: translate(0px, -50%);
|
|
width: 240px;
|
|
height: auto;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: 0 0 5px 0 #f2f2f2;
|
|
background: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
/* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
|
|
/* background-image: linear-gradient(
|
|
-225deg,
|
|
#5d9fff 0%,
|
|
#b8dcff 48%,
|
|
#6bbbff 100%
|
|
); */
|
|
/* background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); */
|
|
padding: 90px 60px;
|
|
}
|
|
|
|
.login-divider {
|
|
position: absolute !important;
|
|
top: 10px;
|
|
left: 0px;
|
|
right: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-title {
|
|
/* position: absolute;
|
|
top: 10px;
|
|
left: 0px;
|
|
right: 0px;
|
|
text-align: center; */
|
|
font-size: 18px;
|
|
color: #3d69e1;
|
|
}
|
|
|
|
.login-area input.el-input__inner {
|
|
margin-bottom: 5px;
|
|
padding-left: 45px;
|
|
/* height: 40px;
|
|
line-height: 40px; */
|
|
border-radius: 5px;
|
|
color: #2591ed;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.login-area input.el-input__inner::placeholder {
|
|
color: #2591ed;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.login-area .el-input__icon {
|
|
padding-left: 10px;
|
|
color: #2591ed;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.login-area .el-checkbox {
|
|
color: #fff;
|
|
}
|
|
|
|
.login-psw {
|
|
margin: 20px 0 !important;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
font-size: 16px !important;
|
|
border-radius: 5px;
|
|
letter-spacing: 8px;
|
|
background: #3d69e1;
|
|
margin-top: 50px !important;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background: #3457b2 !important;
|
|
}
|
|
</style>
|