xins
/
highwaysass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登陆界面

Browse Source
dev
夜笙歌 1 year ago
parent 5197b06abc
commit 900932e87f
1 changed files with 89 additions and 70 deletions
Show Stats Download Patch File Download Diff File

159
ruoyi-ui/src/views/login.vue
Unescape Escape View File

@ -1,68 +1,70 @@
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <div class="formBox">
<!--h3 class="title">{{ $t('login.title') }}</h3--> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<lang-select class="set-language" /> <!--h3 class="title">{{ $t('login.title') }}</h3-->
<el-form-item prop="username"> <lang-select class="set-language"/>
<el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.username')"> <el-form-item prop="username">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <el-input v-model="loginForm.username" :placeholder="$t('login.username')" auto-complete="off" type="text">
</el-input> <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
</el-form-item> </el-input>
<el-form-item prop="password"> </el-form-item>
<el-input <el-form-item prop="password">
v-model="loginForm.password" <el-input
type="password" v-model="loginForm.password"
auto-complete="off" :placeholder="$t('login.password')"
:placeholder="$t('login.password')" auto-complete="off"
@keyup.enter.native="handleLogin" type="password"
> @keyup.enter.native="handleLogin"
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> >
</el-input> <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/>
</el-form-item> </el-input>
<el-form-item prop="code"> </el-form-item>
<el-input <el-form-item prop="code">
v-model="loginForm.code" <el-input
auto-complete="off" v-model="loginForm.code"
placeholder="验证码" auto-complete="off"
style="width: 63%" placeholder="验证码"
@keyup.enter.native="handleLogin" style="width: 63%"
> @keyup.enter.native="handleLogin"
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> >
</el-input> <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/>
<div class="login-code"> </el-input>
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <div class="login-code">
</div> <img :src="codeUrl" class="login-code-img" @click="getCode"/>
</el-form-item> </div>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> </el-form-item>
<el-form-item style="width:100%;"> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-button <el-form-item style="width:100%;">
:loading="loading" <el-button
size="medium" :loading="loading"
type="primary" size="medium"
style="width:100%;" style="width:100%;"
@click.native.prevent="handleLogin" type="primary"
> @click.native.prevent="handleLogin"
<span v-if="!loading">{{ $t('login.logIn') }}</span> >
<span v-else>登 录 中...</span> <span v-if="!loading">{{ $t('login.logIn') }}</span>
</el-button> <span v-else>登 录 中...</span>
</el-form-item> </el-button>
</el-form> </el-form-item>
<!-- 底部 </el-form>
<div class="el-login-footer"> <!-- 底部
<span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span> <div class="el-login-footer">
</div>--> <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
</div>-->
</div>
</div> </div>
</template> </template>
<script> <script>
import LangSelect from '@/components/LangSelect' import LangSelect from '@/components/LangSelect'
import { getCodeImg } from "@/api/login"; import {getCodeImg} from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt' import {encrypt, decrypt} from '@/utils/jsencrypt'
export default { export default {
name: "Login", name: "Login",
components: { LangSelect }, components: {LangSelect},
data() { data() {
return { return {
codeUrl: "", codeUrl: "",
@ -76,12 +78,12 @@ export default {
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "用户名不能为空" } {required: true, trigger: "blur", message: "用户名不能为空"}
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "密码不能为空" } {required: true, trigger: "blur", message: "密码不能为空"}
], ],
code: [{ required: true, trigger: "change", message: "验证码不能为空" }] code: [{required: true, trigger: "change", message: "验证码不能为空"}]
}, },
loading: false, loading: false,
redirect: undefined redirect: undefined
@ -89,7 +91,7 @@ export default {
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
}, },
immediate: true immediate: true
@ -121,9 +123,9 @@ export default {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 }); Cookies.set("username", this.loginForm.username, {expires: 30});
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
} else { } else {
Cookies.remove("username"); Cookies.remove("username");
Cookies.remove("password"); Cookies.remove("password");
@ -133,7 +135,7 @@ export default {
.dispatch("Login", this.loginForm) .dispatch("Login", this.loginForm)
.then(() => { .then(() => {
this.loading = false; this.loading = false;
this.$router.push({ path: this.redirect || "/" }); this.$router.push({path: this.redirect || "/"});
}) })
.catch(() => { .catch(() => {
this.loading = false; this.loading = false;
@ -146,16 +148,17 @@ export default {
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style lang="scss" rel="stylesheet/scss">
.login { .login {
display: flex; position: absolute;
justify-content: right; top:0;
padding-right:260px; left: 0;
align-items: center;
height: 100%; height: 100%;
width: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: 100% 100%;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
@ -164,35 +167,42 @@ export default {
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; width: 100%;
width: 400px; height: 100%;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -209,4 +219,13 @@ export default {
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
.formBox{
position: absolute;
top: 50%;
left: 74.7%;
width: 26%;
//height: 400px;
transform: translate(-50%,-50%);
}
</style> </style>

Write Preview
Loading…
Cancel
Save