Skip to content

Z
zghywpc-vue
Commit b4535679 authored by 李苏's avatar 李苏 💬
Browse files
Options

登录调整

parent 5c4ff22c
Show whitespace changes
Inline Side-by-side
Showing with 423 additions and 382 deletions
src/views/login.vue
View file @ b4535679
<template> <template>
<div class="login"> <div class="login">
<vue-particles <!-- 新登录按钮-->
class="login-bg" <div @click="dialogVisible=true" class="nbt flex-center">
color="#34a4ea" 登录系统
:particleOpacity="0.8" </div>
:particlesNumber="19" <el-dialog
shapeType="circle" :show-close='false'
:particleSize="5" :visible.sync="dialogVisible"
linesColor="#8DD1FE" width="28%">
:linesWidth="1" <div class="flex-center">
:lineLinked="true" <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" >
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="1"
:hoverEffect="false"
hoverMode="repulse"
:clickEffect="false"
clickMode="push"
>
</vue-particles>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: absolute;right: 5px;background-color:rgba(0, 0, 0, 0.4) ;">
<ul class="bg-bubbles" > <ul class="bg-bubbles" >
<li v-for="i in 10" :key="i"></li> <li v-for="i in 10" :key="i"></li>
</ul> </ul>
<!-- -->
<!-- -->
<h3 class="title">{{appName}}</h3> <h3 class="title">{{appName}}</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
...@@ -34,7 +21,7 @@ ...@@ -34,7 +21,7 @@
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
...@@ -45,17 +32,10 @@ ...@@ -45,17 +32,10 @@
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
> -->
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
...@@ -80,25 +60,36 @@ ...@@ -80,25 +60,36 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <span>Copyright © 2016-2022 gavelinfo All Rights Reserved.</span> -->
</div> </div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { getCodeImg } from "@/api/login"; import {
import Cookies from "js-cookie"; getCodeImg
import { encrypt, decrypt } from '@/utils/jsencrypt' } from "@/api/login";
import md5 from '@/utils/md5.js' import Cookies from "js-cookie";
import {systeminfo} from "@/api/common/common.js" import {
encrypt,
decrypt
} from '@/utils/jsencrypt'
import md5 from '@/utils/md5.js'
import {
systeminfo
} from "@/api/common/common.js"
export default { export default {
name: "Login", name: "Login",
data() { data() {
return { return {
appName:'', dialogVisible:false,
appName: '',
codeUrl: "", codeUrl: "",
loginForm: { loginForm: {
username: "", username: "",
...@@ -108,13 +99,21 @@ export default { ...@@ -108,13 +99,21 @@ export default {
uuid: "" uuid: ""
}, },
loginRules: { loginRules: {
username: [ username: [{
{ required: true, trigger: "blur", message: "请输入您的账号" } required: true,
], trigger: "blur",
password: [ message: "请输入您的账号"
{ required: true, trigger: "blur", message: "请输入您的密码" } }],
], password: [{
code: [{ required: true, trigger: "change", message: "请输入验证码" }] required: true,
trigger: "blur",
message: "请输入您的密码"
}],
code: [{
required: true,
trigger: "change",
message: "请输入验证码"
}]
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
...@@ -137,20 +136,14 @@ export default { ...@@ -137,20 +136,14 @@ export default {
// this.getCode(); // this.getCode();
this.getCookie(); this.getCookie();
systeminfo({}).then(res=>{ systeminfo({}).then(res => {
this.appName=res.data.records.appName||'' this.appName = res.data.records.appName || ''
document.title=this.appName document.title = this.appName
}) })
}, },
methods: { methods: {
getCode() { getCode() {
// getCodeImg().then(res => {
// this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
// if (this.captchaEnabled) {
// this.codeUrl = "data:image/gif;base64," + res.img;
// this.loginForm.uuid = res.uuid;
// }
// });
}, },
getCookie() { getCookie() {
const username = Cookies.get("username"); const username = Cookies.get("username");
...@@ -167,16 +160,24 @@ export default { ...@@ -167,16 +160,24 @@ 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, {
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); expires: 30
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30
});
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30
});
} else { } else {
Cookies.remove("username"); Cookies.remove("username");
Cookies.remove("password"); Cookies.remove("password");
Cookies.remove('rememberMe'); Cookies.remove('rememberMe');
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({path:'index'}) this.$router.push({
path: 'index'
})
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
...@@ -188,13 +189,36 @@ export default { ...@@ -188,13 +189,36 @@ export default {
}); });
} }
} }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.nbt {
height: 120px;
width: 298px;
background-color: #1abc9c;
position: absolute;
left: 50%;
bottom: 4%;
transform: translate(-50%, 0);
border-radius: 12px;
border: 4px solid #fff;
line-height: 120px;
color: #fff;
cursor: pointer;
font-size: 50px;
font-weight: 550;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.32),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.nbt:hover{
font-size: 55px;
}
.btn { .btn {
--hue: 190; --hue: 190;
padding: 0px!important; padding: 0px !important;
// height:34px; // height:34px;
// line-height: 34px; // line-height: 34px;
position: relative; position: relative;
...@@ -204,7 +228,7 @@ export default { ...@@ -204,7 +228,7 @@ export default {
color: white; color: white;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-color:(#0389ff, 100%, 41%); background-color: (#0389ff, 100%, 41%);
border: 1px solid #0389ff; border: 1px solid #0389ff;
outline: transparent; outline: transparent;
overflow: hidden; overflow: hidden;
...@@ -214,7 +238,7 @@ export default { ...@@ -214,7 +238,7 @@ export default {
transition: 0.25s; transition: 0.25s;
&:hover { &:hover {
background:( #0389ff, 100%, 31%); background: (#0389ff, 100%, 31%);
} }
&-primary { &-primary {
...@@ -227,12 +251,12 @@ export default { ...@@ -227,12 +251,12 @@ export default {
border-color: (#0389ff, 100%, 41%); border-color: (#0389ff, 100%, 41%);
&:hover { &:hover {
color: white; color: #1abc9c;
} }
} }
&-shine { &-shine {
color: white; color: #1abc9c;
&::before { &::before {
position: absolute; position: absolute;
...@@ -241,18 +265,16 @@ export default { ...@@ -241,18 +265,16 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(120deg,
120deg,
transparent, transparent,
hsla(var(--hue), 100%, 41%, 0.5), hsla(var(--hue), 100%, 41%, 0.5),
transparent transparent);
);
transform: translateX(-100%); transform: translateX(-100%);
transition: 0.6s; transition: 0.6s;
} }
&:hover { &:hover {
background: transparent; // background: transparent;
box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5); box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
} }
...@@ -261,106 +283,111 @@ export default { ...@@ -261,106 +283,111 @@ export default {
} }
} }
} }
::v-deep .el-input__inner{
&:hover{ ::v-deep .el-input__inner {
&:hover {
border: #014dff 1px solid; border: #014dff 1px solid;
} }
border: #0389ff 1px solid; border: #0389ff 1px solid;
color: #fff; color: #888;
background-color:rgba(0, 0, 0, 0.039) ; background-color:rgba(0, 0, 0, 0.039);
} }
.buttonClass {
font-size:15px; .buttonClass {
font-family:Arial; font-size: 15px;
font-family: Arial;
// width:100px; // width:100px;
height:34px; height: 34px;
border-width:1px; border-width: 1px;
color:#ffffff; color: #ffffff;
border-color:#0389ff; border-color: #0389ff;
border-top-left-radius:3px; border-top-left-radius: 3px;
border-top-right-radius:3px; border-top-right-radius: 3px;
border-bottom-left-radius:3px; border-bottom-left-radius: 3px;
border-bottom-right-radius:3px; border-bottom-right-radius: 3px;
box-shadow:inset 0px 1px 0px 0px #54a3f7; box-shadow: inset 0px 1px 0px 0px #54a3f7;
text-shadow:inset 0px 1px 0px #154682; text-shadow: inset 0px 1px 0px #154682;
background:linear-gradient(#0389ff, #00aaff); background: linear-gradient(#0389ff, #00aaff);
} }
.buttonClass:hover { .buttonClass:hover {
background: linear-gradient(#00aaff, #007dc1); background: linear-gradient(#00aaff, #007dc1);
} }
.newTitle{ .newTitle {
position: absolute; position: absolute;
top: 0px; top: 0px;
height: 160px; height: 160px;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} }
.login-bg{
.login-bg {
height: 98vh; height: 98vh;
width: 100vw; width: 100vw;
position: absolute; position: absolute;
} }
.login {
.login {
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login-rj.jpg"); background-image: url("../assets/images/login.jpg");
background-size: cover; background-size: cover;
} }
.title {
.title {
font-family: Georgia, 'Times New Roman', Times, serif; font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #ffffff; color: #1abc9c;
} font-size: 24px;
font-weight: 600;
.login-form { }
box-shadow:
5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039), .login-form {
12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083),
63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101),
146px 38px 80px rgba(0, 0, 0, 0.14)
;
/* */
margin-top: 50px;
margin-right: 200px;
border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; height: 100%;
width: 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: #1abc9c;
} }
.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;
position: fixed; position: fixed;
...@@ -371,10 +398,11 @@ export default { ...@@ -371,10 +398,11 @@ export default {
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img {
.login-code-img {
height: 38px; height: 38px;
} }
</style> </style>
<style lang='scss'> <style lang='scss'>
.bg-bubbles { .bg-bubbles {
...@@ -384,18 +412,21 @@ export default { ...@@ -384,18 +412,21 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
li { li {
position: absolute; position: absolute;
bottom: -160px; bottom: -160px;
width:10px; width: 10px;
height: 10px; height: 10px;
background-color: rgba(62, 146, 255, 0.5); background-color: rgba(62, 146, 255, 0.5);
list-style: none; list-style: none;
animation: square 15s infinite; animation: square 15s infinite;
transition-timing-function: linear; transition-timing-function: linear;
&:nth-child(1) { &:nth-child(1) {
left: 10%; left: 10%;
} }
&:nth-child(2) { &:nth-child(2) {
left: 20%; left: 20%;
width: 13px; width: 13px;
...@@ -404,10 +435,12 @@ export default { ...@@ -404,10 +435,12 @@ export default {
animation-duration: 7s; animation-duration: 7s;
background-color: rgba(97, 158, 255, 0.2); background-color: rgba(97, 158, 255, 0.2);
} }
&:nth-child(3) { &:nth-child(3) {
left: 25%; left: 25%;
animation-delay: 4s; animation-delay: 4s;
} }
&:nth-child(4) { &:nth-child(4) {
left: 40%; left: 40%;
width: 7px; width: 7px;
...@@ -415,9 +448,11 @@ export default { ...@@ -415,9 +448,11 @@ export default {
animation-duration: 8s; animation-duration: 8s;
background-color: rgba(84, 115, 255, 0.8); background-color: rgba(84, 115, 255, 0.8);
} }
&:nth-child(5) { &:nth-child(5) {
left: 70%; left: 70%;
} }
&:nth-child(6) { &:nth-child(6) {
left: 80%; left: 80%;
width: 35px; width: 35px;
...@@ -425,6 +460,7 @@ export default { ...@@ -425,6 +460,7 @@ export default {
animation-delay: 3s; animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2); background-color: rgba(255, 88, 119, 0.2);
} }
&:nth-child(7) { &:nth-child(7) {
left: 32%; left: 32%;
width: 42px; width: 42px;
...@@ -432,6 +468,7 @@ export default { ...@@ -432,6 +468,7 @@ export default {
animation-delay: 2s; animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2); background-color: rgba(170, 170, 127, 0.2);
} }
&:nth-child(8) { &:nth-child(8) {
left: 55%; left: 55%;
width: 12px; width: 12px;
...@@ -440,6 +477,7 @@ export default { ...@@ -440,6 +477,7 @@ export default {
animation-duration: 15s; animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2); background-color: rgba(126, 255, 28, 0.2);
} }
&:nth-child(9) { &:nth-child(9) {
left: 25%; left: 25%;
width: 10px; width: 10px;
...@@ -448,6 +486,7 @@ export default { ...@@ -448,6 +486,7 @@ export default {
animation-duration: 12s; animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5); background-color: rgba(53, 134, 255, 0.5);
} }
&:nth-child(10) { &:nth-child(10) {
left: 85%; left: 85%;
width: 16px; width: 16px;
...@@ -456,25 +495,27 @@ export default { ...@@ -456,25 +495,27 @@ export default {
background-color: rgba(85, 85, 127, 0.2); background-color: rgba(85, 85, 127, 0.2);
} }
} }
@keyframes square { @keyframes square {
0% { 0% {
opacity: 0.5; opacity: 0.5;
transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg);
} }
25% { 25% {
opacity: 0.75; opacity: 0.75;
transform: translateY(-400px) rotate(90deg) transform: translateY(-400px) rotate(90deg)
} }
50% { 50% {
opacity: 1; opacity: 1;
transform: translateY(-600px) rotate(135deg); transform: translateY(-600px) rotate(135deg);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: translateY(-1000px) rotate(180deg); transform: translateY(-1000px) rotate(180deg);
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment