Skip to content

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

首先增加app下载

parent 0ed89ef8
Show 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"
>
<!-- 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" >
<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>
<!-- -->
......@@ -28,23 +17,13 @@
<!-- -->
<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"
>
<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>
......@@ -59,19 +38,13 @@
<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"/>
<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>
......@@ -88,17 +61,25 @@
</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:'',
ewm:false,
appName: '',
codeUrl: "",
loginForm: {
username: "",
......@@ -108,13 +89,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,9 +126,9 @@ 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: {
......@@ -167,16 +156,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 +185,13 @@ export default {
});
}
}
};
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.btn {
--hue: 190;
padding: 0px!important;
padding: 0px !important;
// height:34px;
// line-height: 34px;
position: relative;
......@@ -204,7 +201,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 +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,
background: linear-gradient(120deg,
transparent,
hsla(var(--hue), 100%, 41%, 0.5),
transparent
);
transparent);
transform: translateX(-100%);
transition: 0.6s;
}
......@@ -261,71 +256,76 @@ 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) ;
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-size: cover;
}
.title {
}
.title {
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0px auto 30px auto;
text-align: center;
color: #ffffff;
}
}
.login-form {
.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)
;
146px 38px 80px rgba(0, 0, 0, 0.14);
/* */
margin-top: 50px;
......@@ -334,33 +334,40 @@ export default {
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;
}
}
.login-tip {
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
}
.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,12 +378,41 @@ export default {
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
}
.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;
......@@ -384,18 +420,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 +443,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 +456,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 +468,7 @@ export default {
animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 42px;
......@@ -432,6 +476,7 @@ export default {
animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2);
}
&:nth-child(8) {
left: 55%;
width: 12px;
......@@ -440,6 +485,7 @@ export default {
animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2);
}
&:nth-child(9) {
left: 25%;
width: 10px;
......@@ -448,6 +494,7 @@ export default {
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
}
&:nth-child(10) {
left: 85%;
width: 16px;
......@@ -456,25 +503,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