Skip to content

D
dxgaqgl-vue
Commit fcef6f36 authored by 李苏's avatar 李苏 💬
Browse files
Options

首先增加app下载

parent 0ed89ef8
Hide whitespace changes
Inline Side-by-side
Showing with 394 additions and 345 deletions
src/views/login.vue
View file @ fcef6f36
<template> <template>
<div class="login"> <div class="login">
<vue-particles <!-- app移动端 -->
class="login-bg" <div @mouseenter='ewm=true' @mouseleave="ewm=false" class="app"><i class="el-icon-mobile"></i>扫码下载移动端</div>
color="#34a4ea" <div v-show="ewm" class="ewm"></div>
:particleOpacity="0.8" <vue-particles class="login-bg" color="#34a4ea" :particleOpacity="0.8" :particlesNumber="19" shapeType="circle"
:particlesNumber="19" :particleSize="5" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
shapeType="circle" :moveSpeed="1" :hoverEffect="false" hoverMode="repulse" :clickEffect="false" clickMode="push">
:particleSize="5" </vue-particles>
linesColor="#8DD1FE" <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
:linesWidth="1" style="position: absolute;right:5px;background-color:rgba(0, 0, 0, 0.4) ;">
:lineLinked="true" <ul class="bg-bubbles">
:lineOpacity="0.4" <li v-for="i in 10" :key="i"></li>
: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" >
<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 v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> --> <!-- <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">
<el-input <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
v-model="loginForm.password" @keyup.enter.native="handleLogin">
type="password" <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
auto-complete="off"
placeholder="密码"
@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-form-item prop="code" v-if="captchaEnabled">
...@@ -56,22 +35,16 @@ ...@@ -56,22 +35,16 @@
style="width: 63%" style="width: 63%"
@keyup.enter.native="handleLogin" @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">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button <el-button class="btn btn-primary btn-ghost btn-shine" :loading="loading" size="medium" type="primary"
class="btn btn-primary btn-ghost btn-shine" style="width:100%;" @click.native.prevent="handleLogin">
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
...@@ -82,129 +55,153 @@ ...@@ -82,129 +55,153 @@
</el-form> </el-form>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<!-- <span>Copyright © 2016-2022 gavelinfo All Rights Reserved.</span> --> <!-- <span>Copyright © 2016-2022 gavelinfo All Rights Reserved.</span> -->
</div> </div>
</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,
export default { decrypt
name: "Login", } from '@/utils/jsencrypt'
data() { import md5 from '@/utils/md5.js'
return { import {
appName:'', systeminfo
codeUrl: "", } from "@/api/common/common.js"
loginForm: {
username: "", export default {
password: "", name: "Login",
rememberMe: false, data() {
code: "", return {
uuid: "" ewm:false,
}, appName: '',
loginRules: { codeUrl: "",
username: [ loginForm: {
{ required: true, trigger: "blur", message: "请输入您的账号" } username: "",
], password: "",
password: [ rememberMe: false,
{ required: true, trigger: "blur", message: "请输入您的密码" } code: "",
], uuid: ""
code: [{ required: true, trigger: "change", message: "请输入验证码" }] },
}, loginRules: {
loading: false, username: [{
// 验证码开关 required: true,
captchaEnabled: true, trigger: "blur",
// 注册开关 message: "请输入您的账号"
register: false, }],
redirect: undefined password: [{
}; required: true,
}, trigger: "blur",
watch: { message: "请输入您的密码"
$route: { }],
handler: function(route) { code: [{
this.redirect = route.query && route.query.redirect; required: true,
}, trigger: "change",
immediate: true message: "请输入验证码"
} }]
}, },
created() { loading: false,
// 验证码开关
captchaEnabled: true,
// this.getCode(); // 注册开关
this.getCookie(); register: false,
systeminfo({}).then(res=>{ redirect: undefined
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");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
}; };
}, },
handleLogin() { watch: {
this.$refs.loginForm.validate(valid => { $route: {
if (valid) { handler: function(route) {
this.loading = true; this.redirect = route.query && route.query.redirect;
if (this.loginForm.rememberMe) { },
Cookies.set("username", this.loginForm.username, { expires: 30 }); immediate: true
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); }
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); },
} else { created() {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe'); // this.getCode();
this.getCookie();
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;
} }
this.$store.dispatch("Login", this.loginForm).then(() => { });
this.$router.push({path:'index'}) },
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); getCookie() {
}).catch(() => { const username = Cookies.get("username");
this.loading = false; const password = Cookies.get("password");
if (this.captchaEnabled) { const rememberMe = Cookies.get('rememberMe')
this.getCode(); this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
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
});
} 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: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
}
} }
} };
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.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;
// padding: 1rem 3rem; // padding: 1rem 3rem;
font-size: 1rem; font-size: 1rem;
line-height: 30px; line-height: 30px;
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 +211,7 @@ export default { ...@@ -214,7 +211,7 @@ export default {
transition: 0.25s; transition: 0.25s;
&:hover { &:hover {
background:( #0389ff, 100%, 31%); background: (#0389ff, 100%, 31%);
} }
&-primary { &-primary {
...@@ -241,12 +238,10 @@ export default { ...@@ -241,12 +238,10 @@ 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;
} }
...@@ -261,220 +256,274 @@ export default { ...@@ -261,220 +256,274 @@ export default {
} }
} }
} }
::v-deep .el-input__inner{
&:hover{ ::v-deep .el-input__inner {
border: #014dff 1px solid; &:hover {
} border: #014dff 1px solid;
}
border: #0389ff 1px solid; border: #0389ff 1px solid;
color: #fff; color: #fff;
background-color:rgba(0, 0, 0, 0.039) ; background-color:rgba(0, 0, 0, 0.039);
}
.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 {
background: linear-gradient(#00aaff, #007dc1);
} }
.buttonClass {
font-size:15px; .newTitle {
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 {
background: linear-gradient(#00aaff, #007dc1);
}
.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 {
display: flex; .login {
justify-content: right; display: flex;
align-items: center; justify-content: right;
height: 100%; align-items: center;
background-image: url("../assets/images/login-rj.jpg"); height: 100%;
background-size: cover; background-image: url("../assets/images/login-rj.jpg");
} background-size: cover;
.title { }
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0px auto 30px auto; .title {
text-align: center; font-family: Georgia, 'Times New Roman', Times, serif;
color: #ffffff; 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), .login-form {
12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057), box-shadow:
21.7px 5.6px 10px rgba(0, 0, 0, 0.07), 5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039),
36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083), 12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101), 21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
146px 38px 80px rgba(0, 0, 0, 0.14) 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; margin-top: 50px;
border-radius: 6px; margin-right: 200px;
background: #ffffff; border-radius: 6px;
width: 400px; background: #ffffff;
padding: 25px 25px 5px 25px; width: 400px;
.el-input { padding: 25px 25px 5px 25px;
height: 38px;
input { .el-input {
height: 38px; height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
} }
} }
.input-icon {
height: 39px; .login-tip {
width: 14px; font-size: 13px;
margin-left: 2px; text-align: center;
color: #bfbfbf;
} }
}
.login-tip { .login-code {
font-size: 13px; width: 33%;
text-align: center; height: 38px;
color: #bfbfbf; float: right;
}
.login-code { img {
width: 33%; cursor: pointer;
height: 38px; vertical-align: middle;
float: right; }
img { }
cursor: pointer;
vertical-align: middle; .el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
} }
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style> </style>
<style lang='scss'> <style lang='scss'>
.app {
z-index: 999999;
position: absolute;
right: 16px;
top: 15px;
line-height: 20px;
font-size: 13px;
color: #fff;
cursor: pointer;
}
@keyframes example {
0% { right: 300px; top: -200px;}
50% { right: 300px; top: 15px;}
100% { right: 150px; top: 15px;}
}
.ewm {
position: absolute;
top: 15px;
right: 150px;
height: 200px;
width: 200px;
background-image: url("../assets/images/2wm.png");
background-size: 100% 100%;
animation-name: example;
animation-duration: 1s;
}
.bg-bubbles { .bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
li {
position: absolute; position: absolute;
top: 0; bottom: -160px;
left: 0; width: 10px;
width: 100%; height: 10px;
height: 100%; background-color: rgba(62, 146, 255, 0.5);
overflow: hidden; list-style: none;
li { animation: square 15s infinite;
position: absolute; transition-timing-function: linear;
bottom: -160px;
width:10px; &:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 13px;
height: 13px;
animation-delay: 2s;
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;
height: 7px;
animation-duration: 8s;
background-color: rgba(84, 115, 255, 0.8);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 35px;
height: 35px;
animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 42px;
height: 42px;
animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2);
}
&:nth-child(8) {
left: 55%;
width: 12px;
height: 12px;
animation-delay: 4s;
animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2);
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px; height: 10px;
background-color: rgba(62, 146, 255, 0.5); animation-delay: 2s;
list-style: none; animation-duration: 12s;
animation: square 15s infinite; background-color: rgba(53, 134, 255, 0.5);
transition-timing-function: linear;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 13px;
height: 13px;
animation-delay: 2s;
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;
height: 7px;
animation-duration: 8s;
background-color: rgba(84, 115, 255, 0.8);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 35px;
height: 35px;
animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 42px;
height: 42px;
animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2);
}
&:nth-child(8) {
left: 55%;
width: 12px;
height: 12px;
animation-delay: 4s;
animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2);
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
}
&:nth-child(10) {
left: 85%;
width: 16px;
height: 16px;
animation-delay: 5s;
background-color: rgba(85, 85, 127, 0.2);
}
} }
@keyframes square {
0% { &:nth-child(10) {
opacity: 0.5; left: 85%;
transform: translateY(0px) rotate(45deg); width: 16px;
} height: 16px;
25% { animation-delay: 5s;
opacity: 0.75; background-color: rgba(85, 85, 127, 0.2);
transform: translateY(-400px) rotate(90deg)
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
} }
} }
@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> </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