11-main/src/views/login.vue
2022-11-03 16:16:18 +08:00

416 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="login-container">
<div class="login-background" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
<div class="login-background-container">
<div class="back-title">
Wel<span>come</span>
<p title="合肥新能源数字工厂"><span class="back-title-point" />合肥新能源数字工厂</p>
</div>
<img :src="require('../assets/img/login.gif')" style="width: 100%" alt="">
</div>
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<div class="title-container">
<h3 class="title" title="合肥新能源数字工厂">
<img src="../assets/img/cnbm.png" style="width: 1em; height: 1em; position: relative; top: .15em;" alt="">
合肥新能源数字工厂
</h3>
</div>
<el-form-item prop="username" style="margin: 0px 8.3%">
<el-input
ref="username"
v-model="loginForm.username"
placeholder="请输入用户名"
name="username"
type="text"
tabindex="1"
autocomplete="on"
/>
</el-form-item>
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-form-item prop="password" style="margin: 8px 8.3%">
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
autocomplete="on"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
</el-tooltip>
<!-- <lang-select class="login-language" /> -->
<el-button :loading="loading" type="primary" style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh" @click.native.prevent="handleLogin">
登 录
</el-button>
<el-row class="login-footer">
<!-- <el-row class="login-language">
<el-col
:span="2"
:offset="8"
:class="['login-language-box', language === 'zh' ? 'isActive' : '']"
@click.native="changeLanguage('zh')"
>
中文
</el-col>
<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col>
<el-col
:span="2"
:offset="1"
:class="['login-language-box', language === 'en' ? 'isActive' : '']"
@click.native="changeLanguage('en')"
>
English
</el-col>
</el-row> -->
<el-row class="login-copyright">
版权所有:中建材智能自动化研究院有限公司&nbsp;&nbsp;&nbsp;&nbsp;版本1.0
</el-row>
</el-row>
<!-- <div style="position:relative">
<div class="tips">
<span>Username : admin</span>
<span>Password : any</span>
</div>
<div class="tips">
<span style="margin-right:18px;">Username : editor</span>
<span>Password : any</span>
</div>
</div> -->
</el-form>
</div>
</template>
<script>
export default {
name: 'LoginPage',
data() {
const validateUsername = (rule, value, callback) => {
if (!value) {
callback(new Error('Please enter user name or mobile'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits'))
} else {
callback()
}
}
return {
baseImg: require('../assets/img/login-back.png'),
coverImgUrl: '',
loginForm: {
username: '18099288101',
password: '18072965424'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
passwordType: 'password',
capsTooltip: false,
loading: false,
otherQuery: {}
}
},
watch: {
$route: {
handler: function(route) {
const { username, password } = route.query
if (username && password) {
this.loginForm = {
username,
password
}
this.$nextTick(() => {
this.handleLogin()
})
}
},
immediate: true
}
},
created() {
// window.addEventListener('storage', this.afterQRScan)
},
mounted() {
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
// this.getPic()
},
destroyed() {
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
checkCapslock(e) {
const { key } = e
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
},
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: '/index' })
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
}
return acc
}, {})
}
}
}
</script>
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
// $bg:#283443;
$light_gray:#fff;
$cursor: #161616;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
height: 6vh !important;
}
}
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
}
}
.el-form-item {
border: 1px solid #D7D8D9;
border-radius: 5px;
color: #454545;
height: 6vh;
.el-form-item__content {
height: calc(6vh - 2px);
line-height: 6vh;
.el-input {
height: calc(6vh - 2px);
}
}
}
}
</style>
<style lang="scss" scoped>
// $bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$cursor: #161616;
.login-container {
min-height: 100%;
width: 100%;
background-size: cover;
// background-color: $bg;
overflow: hidden;
.login-background{
position: absolute;
width: 60%;
top: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.login-background-container{
width: 95%;
.back-title{
color: #26B9DE;
font-size: 88px;
margin-left: 17%;
span {
color: #fff;
}
p {
font-size: 22px;
letter-spacing: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.back-title-point {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #26B9DE;
margin-right: 14px;
}
}
}
}
}
.login-form {
position: absolute;
width: 40%;
max-width: 100%;
top: 0;
right: 0;
bottom: 0;
padding: 0 6.67%;
margin: 0 auto;
overflow: hidden;
background: rgba($color: #fff, $alpha: 1);
backdrop-filter: blur(10px);
box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: .1);
.login-footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-bottom: 5vh;
}
.login-language{
font-size: 15px;
text-align: center;
color: $cursor;
margin-bottom: 12px;
.login-language-box {
cursor: pointer;
}
.isActive {
color: #0B58FF;
cursor: auto;
}
}
.login-copyright{
text-align: center;
color: #C7C7C7;
font-size: 15px;
line-height: 28px;
padding: 0 16%;
}
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #000;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
margin-top: 18vh;
.title {
font-size: 34px;
line-height: 6vh;
margin: 0px auto 40px auto;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
letter-spacing: 2px;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 0;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.thirdparty-button {
position: absolute;
right: 0;
bottom: 6px;
}
@media only screen and (max-width: 470px) {
.thirdparty-button {
display: none;
}
}
}
.line{
width: 1px;
height: 45px;
border-right: solid #000 3px;
margin-right: 12px;
}
</style>