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