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>
<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) ;">
<ul class="bg-bubbles" >
<li v-for="i in 10" :key="i"></li>
<!-- app移动端 -->
<div @mouseenter='ewm=true' @mouseleave="ewm=false" class="app"><i class="el-icon-mobile"></i>扫码下载移动端</div>
<div v-show="ewm" class="ewm"></div>
<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) ;">
<ul class="bg-bubbles">
<li v-for="i in 10" :key="i"></li>
</ul>
<!-- -->
<!-- -->
<h3 class="title">{{appName}}</h3>
<h3 class="title">{{appName}}</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<el-input v-model="loginForm.username" type="text" 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">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
<el-input v-model="loginForm.password" type="password" auto-complete="off" 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">
......@@ -56,22 +35,16 @@
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">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
class="btn btn-primary btn-ghost btn-shine"
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<el-button class="btn btn-primary btn-ghost btn-shine" :loading="loading" size="medium" type="primary"
style="width:100%;" @click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
......@@ -82,129 +55,153 @@
</el-form>
<!-- 底部 -->
<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>
</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"
export default {
name: "Login",
data() {
return {
appName:'',
codeUrl: "",
loginForm: {
username: "",
password: "",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
// 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;
}
});
},
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)
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 {
name: "Login",
data() {
return {
ewm:false,
appName: '',
codeUrl: "",
loginForm: {
username: "",
password: "",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [{
required: true,
trigger: "blur",
message: "请输入您的账号"
}],
password: [{
required: true,
trigger: "blur",
message: "请输入您的密码"
}],
code: [{
required: true,
trigger: "change",
message: "请输入验证码"
}]
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
};
},
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');
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
// 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(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
});
},
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() {
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>
<style rel="stylesheet/scss" lang="scss" scoped>
.btn {
--hue: 190;
padding: 0px!important;
padding: 0px !important;
// height:34px;
// line-height: 34px;
position: relative;
// padding: 1rem 3rem;
font-size: 1rem;
line-height: 30px;
line-height: 30px;
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 +211,7 @@ export default {
transition: 0.25s;
&:hover {
background:( #0389ff, 100%, 31%);
background: (#0389ff, 100%, 31%);
}
&-primary {
......@@ -241,12 +238,10 @@ export default {
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
hsla(var(--hue), 100%, 41%, 0.5),
transparent
);
background: linear-gradient(120deg,
transparent,
hsla(var(--hue), 100%, 41%, 0.5),
transparent);
transform: translateX(-100%);
transition: 0.6s;
}
......@@ -261,220 +256,274 @@ export default {
}
}
}
::v-deep .el-input__inner{
&:hover{
border: #014dff 1px solid;
}
::v-deep .el-input__inner {
&:hover {
border: #014dff 1px solid;
}
border: #0389ff 1px solid;
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;
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{
.newTitle {
position: absolute;
top: 0px;
height: 160px;
width: 100%;
background-color: #fff;
}
.login-bg{
.login-bg {
height: 98vh;
width: 100vw;
position: absolute;
}
.login {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
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;
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;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
.login {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
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;
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;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
.login-code {
width: 33%;
height: 38px;
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 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 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
li {
position: absolute;
bottom: -160px;
width:10px;
bottom: -160px;
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;
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;
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;
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);
}
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
}
@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);
}
&:nth-child(10) {
left: 85%;
width: 16px;
height: 16px;
animation-delay: 5s;
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