<template>
|
<div id="login">
|
<!-- 装饰元素 -->
|
<div class="decoration decoration-1"></div>
|
<div class="decoration decoration-2"></div>
|
<!-- <div class="lang-box">{{ $t('login.lang') }}
|
<el-select v-model="language" size="mini" @change="changeLang">
|
<el-option :label="$t('common.chinese')" value="zh"></el-option>
|
<el-option :label="$t('common.english')" value="en"></el-option>
|
<el-option :label="$t('common.spanish')" value="es"></el-option>
|
<el-option :label="$t('common.french')" value="fr"></el-option>
|
<el-option :label="$t('common.german')" value="de"></el-option>
|
<el-option :label="$t('common.russian')" value="ru"></el-option>
|
<el-option :label="$t('common.arabic')" value="ar"></el-option>
|
<el-option :label="$t('common.portuguese')" value="pt"></el-option>
|
<el-option :label="$t('common.korean')" value="ko"></el-option>
|
</el-select>
|
</div> -->
|
<div class="loginMain">
|
<div class="loginForm">
|
<div class="formTop">{{ $t('login.systemname') }}</div>
|
<div class="formMain">
|
<el-form :model="loginForm" status-icon :rules="rulesForm" ref="loginForm">
|
<!-- 密码 -->
|
<el-form-item prop="userPassword" :label="$t('login.pwd')" :label-width="language == 'zh' ? '40px' : '70px'">
|
<el-input type="password" v-model="loginForm.userPassword" :placeholder="$t('login.pwd_label')"
|
prefix-icon="iconfont icon-mima"></el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="submitForm" class="loginFormBut">
|
{{ $t('login.login') }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data () {
|
// 密码
|
var userPassword = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error(this.$t('login.pwd_label')));
|
} else {
|
callback();
|
}
|
};
|
return {
|
language: 'zh',
|
loginForm: {
|
userPassword: "",
|
},
|
// input验证
|
rulesForm: {
|
userPassword: [{ validator: userPassword, trigger: "blur" }],
|
},
|
};
|
},
|
created () {
|
this.getPublicConfig()
|
},
|
mounted () {
|
window.addEventListener('keydown', this.keyDown, false);
|
},
|
methods: {
|
async getPublicConfig() {
|
try {
|
const res = await this.$http.post('/getPublicConfig', {})
|
if (res.code == 200) {
|
sessionStorage.setItem("publicConfig", JSON.stringify(res.data))
|
let { language} = res.data
|
this.language = language
|
this.$i18n.locale = language
|
} else {
|
this.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
},
|
|
|
keyDown (e) {
|
//如果是回车则执行登录方法
|
if (e.keyCode == 13) {
|
e.preventDefault()
|
this.submitForm();
|
}
|
},
|
|
submitForm () {
|
this.$refs.loginForm.validate(async (valid) => {
|
if (valid) {
|
const res = await this.$http.post("/login", this.loginForm);
|
if (res.code == 200) {
|
this.$message({
|
message: this.$t('login.success_msg'),
|
type: 'success'
|
});
|
this.$router.push({ path: "/config" }),
|
sessionStorage.setItem("token", res.data.accessToken)
|
} else {
|
this.$message.error(this.$t('login.error_name'));
|
return false
|
}
|
} else {
|
this.$message.error(this.$t('login.error_res'));
|
return false
|
}
|
});
|
}
|
|
},
|
destroyed () {
|
window.removeEventListener('keydown', this.keyDown, false);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
#login {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background-image: url(../../assets/bg.png);
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
.lang-box {
|
position: absolute;
|
top: 30px;
|
right: 30px;
|
font-size: 14px;
|
color: white;
|
z-index: 10;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.loginMain {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 2;
|
width: 100%;
|
|
.loginForm {
|
width: 430px;
|
background-color: rgba(255, 255, 255, 0.95);
|
border-radius: 16px;
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
overflow: hidden;
|
backdrop-filter: blur(10px);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
animation: fadeIn 0.8s ease-out;
|
|
.formTop {
|
width: 100%;
|
font-size: 32px;
|
font-weight: 700;
|
text-align: center;
|
padding: 40px 0 30px;
|
color: #333;
|
background: linear-gradient(to right, #667eea, #764ba2);
|
letter-spacing: 1px;
|
}
|
|
.formMain {
|
width: 80%;
|
margin: 0 auto;
|
padding-bottom: 40px;
|
|
.el-form {
|
margin-top: 20px;
|
|
.el-form-item {
|
margin-bottom: 28px;
|
|
.el-form-item__label {
|
font-weight: 600;
|
color: #555;
|
font-size: 14px;
|
padding-bottom: 8px;
|
display: block;
|
}
|
|
.el-input {
|
width: 100%;
|
}
|
|
.el-input__inner {
|
height: 50px;
|
border-radius: 10px;
|
border: 2px solid #e1e5e9;
|
font-size: 16px;
|
padding-left: 45px;
|
transition: all 0.3s ease;
|
background-color: #f8f9fa;
|
}
|
|
.el-input__inner:focus {
|
border-color: #667eea;
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
background-color: white;
|
}
|
|
.el-input__prefix {
|
left: 15px;
|
display: flex;
|
align-items: center;
|
}
|
|
.iconfont {
|
font-size: 20px;
|
color: #7b8a9b;
|
}
|
|
.el-input__inner:focus+.el-input__prefix .iconfont {
|
color: #667eea;
|
}
|
|
.loginFormBut {
|
width: 100%;
|
height: 50px;
|
border-radius: 10px;
|
font-size: 16px;
|
font-weight: 600;
|
background: linear-gradient(to right, #667eea, #764ba2);
|
color: white;
|
border: none;
|
transition: all 0.3s ease;
|
margin-top: 10px;
|
letter-spacing: 1px;
|
}
|
|
.loginFormBut:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 7px 14px rgba(102, 126, 234, 0.3);
|
}
|
|
.loginFormBut:active {
|
transform: translateY(0);
|
}
|
}
|
}
|
}
|
}
|
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
}
|
}
|
|
#login::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.4);
|
z-index: 1;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.loginForm {
|
width: 90%;
|
max-width: 400px;
|
}
|
|
.formTop {
|
font-size: 28px;
|
padding: 30px 0 20px;
|
}
|
|
.formMain {
|
width: 85%;
|
}
|
|
.el-input__inner {
|
height: 46px;
|
font-size: 15px;
|
}
|
|
.loginFormBut {
|
height: 46px;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.loginForm {
|
width: 95%;
|
}
|
|
.formMain {
|
width: 90%;
|
}
|
|
.lang-box {
|
top: 20px;
|
right: 20px;
|
}
|
}
|
|
/* 添加一些装饰元素 */
|
.decoration {
|
position: absolute;
|
z-index: 1;
|
}
|
|
.decoration-1 {
|
top: 10%;
|
left: 10%;
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.1);
|
}
|
|
.decoration-2 {
|
bottom: 15%;
|
right: 12%;
|
width: 120px;
|
height: 120px;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.05);
|
}
|
</style>
|
