|
|
@@ -2,6 +2,7 @@
|
|
|
<div class="login-container">
|
|
|
<div id="particles-js">
|
|
|
<vue-particles
|
|
|
+ v-if="refreshParticles"
|
|
|
color="#dedede"
|
|
|
:particle-opacity="0.7"
|
|
|
:particles-number="80"
|
|
|
@@ -28,8 +29,15 @@
|
|
|
</div>
|
|
|
<div class="login-border">
|
|
|
<div class="login-main">
|
|
|
- <div class="login-title"> 用户登录 </div>
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
|
|
|
+ <div class="login-title">用户登录</div>
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ autocomplete="on"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
<el-form-item prop="username">
|
|
|
<span class="svg-container">
|
|
|
<i class="el-icon-user" />
|
|
|
@@ -45,7 +53,12 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
|
|
|
+ <el-tooltip
|
|
|
+ v-model="capsTooltip"
|
|
|
+ content="Caps lock is On"
|
|
|
+ placement="right"
|
|
|
+ manual
|
|
|
+ >
|
|
|
<el-form-item prop="password">
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="password" />
|
|
|
@@ -64,11 +77,15 @@
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
/>
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ <svg-icon
|
|
|
+ :icon-class="
|
|
|
+ passwordType === 'password' ? 'eye' : 'eye-open'
|
|
|
+ "
|
|
|
+ />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
</el-tooltip>
|
|
|
- <el-form-item prop="code" style="width: 66%;float: left;">
|
|
|
+ <el-form-item prop="code" style="width: 66%; float: left">
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="validCode" />
|
|
|
</span>
|
|
|
@@ -81,26 +98,49 @@
|
|
|
tabindex="3"
|
|
|
maxlength="5"
|
|
|
autocomplete="off"
|
|
|
- style=" width: 75%;"
|
|
|
+ style="width: 75%"
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <div class="login-code" style="cursor:pointer; width: 30%;height: 48px;float: right;background-color: #f0f1f5;">
|
|
|
- <img style="height: 48px;width: 100%;border: 1px solid rgba(0,0,0, 0.1);border-radius:5px;" :src="codeUrl" @click="getCode">
|
|
|
+ <div
|
|
|
+ class="login-code"
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30%;
|
|
|
+ height: 48px;
|
|
|
+ float: right;
|
|
|
+ background-color: #f0f1f5;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="
|
|
|
+ height: 48px;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ "
|
|
|
+ :src="codeUrl"
|
|
|
+ @click="getCode"
|
|
|
+ >
|
|
|
</div>
|
|
|
|
|
|
- <el-button :loading="loading" type="primary" style="width:100%;padding:12px 20px;margin-bottom:30px;" @click.native.prevent="handleLogin">
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%; padding: 12px 20px; margin-bottom: 30px"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >
|
|
|
<span v-if="!loading">登 录</span>
|
|
|
<span v-else>登 录 中...</span>
|
|
|
</el-button>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
<el-dialog title="Or connect with" :visible.sync="showDialog">
|
|
|
- Can not be simulated on local, so please combine you own business simulation! ! !
|
|
|
+ Can not be simulated on local, so please combine you own business
|
|
|
+ simulation! ! !
|
|
|
<br>
|
|
|
<br>
|
|
|
<br>
|
|
|
@@ -110,7 +150,6 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
import { getCodeImg } from '@/api/login'
|
|
|
import moment from 'moment'
|
|
|
import SocialSign from './components/SocialSignin'
|
|
|
@@ -122,6 +161,7 @@ export default {
|
|
|
return {
|
|
|
codeUrl: '',
|
|
|
cookiePassword: '',
|
|
|
+ refreshParticles: true,
|
|
|
loginForm: {
|
|
|
username: 'admin',
|
|
|
password: '123456',
|
|
|
@@ -136,7 +176,9 @@ export default {
|
|
|
password: [
|
|
|
{ required: true, trigger: 'blur', message: '密码不能为空' }
|
|
|
],
|
|
|
- code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
|
|
|
+ code: [
|
|
|
+ { required: true, trigger: 'change', message: '验证码不能为空' }
|
|
|
+ ]
|
|
|
},
|
|
|
passwordType: 'password',
|
|
|
capsTooltip: false,
|
|
|
@@ -172,26 +214,30 @@ export default {
|
|
|
} else if (this.loginForm.password === '') {
|
|
|
this.$refs.password.focus()
|
|
|
}
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this.refreshParticles = false
|
|
|
+ this.$nextTick(() => (this.refreshParticles = true))
|
|
|
+ })
|
|
|
},
|
|
|
destroyed() {
|
|
|
clearInterval(this.timer)
|
|
|
+ window.removeEventListener('resize', () => {})
|
|
|
// window.removeEventListener('storage', this.afterQRScan)
|
|
|
},
|
|
|
methods: {
|
|
|
getSystemSetting() {
|
|
|
- this.$store.dispatch('system/settingDetail')
|
|
|
- .then(ret => {
|
|
|
- this.sysInfo = ret
|
|
|
- document.title = ret.name
|
|
|
- })
|
|
|
+ this.$store.dispatch('system/settingDetail').then((ret) => {
|
|
|
+ this.sysInfo = ret
|
|
|
+ document.title = ret.name
|
|
|
+ })
|
|
|
},
|
|
|
getCurrentTime() {
|
|
|
- this.timer = setInterval(_ => {
|
|
|
+ this.timer = setInterval((_) => {
|
|
|
this.currentTime = moment().format('YYYY-MM-DD HH时mm分ss秒')
|
|
|
}, 1000)
|
|
|
},
|
|
|
getCode() {
|
|
|
- getCodeImg().then(res => {
|
|
|
+ getCodeImg().then((res) => {
|
|
|
if (res !== undefined) {
|
|
|
this.codeUrl = res.data
|
|
|
this.loginForm.uuid = res.id
|
|
|
@@ -200,7 +246,10 @@ export default {
|
|
|
},
|
|
|
checkCapslock({ shiftKey, key } = {}) {
|
|
|
if (key && key.length === 1) {
|
|
|
- if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
|
|
|
+ if (
|
|
|
+ (shiftKey && key >= 'a' && key <= 'z') ||
|
|
|
+ (!shiftKey && key >= 'A' && key <= 'Z')
|
|
|
+ ) {
|
|
|
this.capsTooltip = true
|
|
|
} else {
|
|
|
this.capsTooltip = false
|
|
|
@@ -221,12 +270,15 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
handleLogin() {
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.loading = true
|
|
|
- this.$store.dispatch('user/login', this.loginForm)
|
|
|
+ this.$store
|
|
|
+ .dispatch('user/login', this.loginForm)
|
|
|
.then(() => {
|
|
|
- this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
|
|
|
+ this.$router
|
|
|
+ .push({ path: this.redirect || '/', query: this.otherQuery })
|
|
|
+ .catch(() => {})
|
|
|
this.loading = false
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -255,44 +307,44 @@ export default {
|
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
|
|
|
-$bg:#283443;
|
|
|
-$light_gray:#fff;
|
|
|
+$bg: #283443;
|
|
|
+$light_gray: #fff;
|
|
|
$cursor: #fff;
|
|
|
|
|
|
-.login-container{
|
|
|
- display: -webkit-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- -webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- background: url("../../assets/login.png") no-repeat;
|
|
|
- background-color: #0e6cff;
|
|
|
- position: relative;
|
|
|
- background-size: cover;
|
|
|
- height: 100vh;
|
|
|
- background-position: 50%;
|
|
|
+.login-container {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: url("../../assets/login.png") no-repeat;
|
|
|
+ background-color: #0e6cff;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ height: 100vh;
|
|
|
+ background-position: 50%;
|
|
|
}
|
|
|
|
|
|
-#particles-js{
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
+#particles-js {
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
|
|
|
-.login-weaper{
|
|
|
+.login-weaper {
|
|
|
margin: 0 auto;
|
|
|
width: 1000px;
|
|
|
- -webkit-box-shadow: -4px 5px 10px rgba(0,0,0,.4);
|
|
|
- box-shadow: -4px 5px 10px rgba(0,0,0,.4);
|
|
|
+ -webkit-box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
|
|
|
+ box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
|
|
|
-.login-left{
|
|
|
+.login-left {
|
|
|
border-top-left-radius: 5px;
|
|
|
border-bottom-left-radius: 5px;
|
|
|
-webkit-box-pack: center;
|
|
|
@@ -302,32 +354,32 @@ $cursor: #fff;
|
|
|
-webkit-box-direction: normal;
|
|
|
-ms-flex-direction: column;
|
|
|
flex-direction: column;
|
|
|
- background-color: rgba(64,158,255,0);
|
|
|
+ background-color: rgba(64, 158, 255, 0);
|
|
|
color: #fff;
|
|
|
float: left;
|
|
|
width: 50%;
|
|
|
position: relative;
|
|
|
- min-height: 500px;
|
|
|
- -webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
- display: -webkit-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- .login-time{
|
|
|
+ min-height: 500px;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ .login-time {
|
|
|
position: absolute;
|
|
|
left: 25px;
|
|
|
top: 25px;
|
|
|
width: 100%;
|
|
|
color: #fff;
|
|
|
- opacity: .9;
|
|
|
+ opacity: 0.9;
|
|
|
font-size: 18px;
|
|
|
overflow: hidden;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.login-left .img{
|
|
|
+.login-left .img {
|
|
|
width: 90px;
|
|
|
height: 90px;
|
|
|
border-radius: 3px;
|
|
|
@@ -341,36 +393,36 @@ $cursor: #fff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
-.login-border{
|
|
|
+.login-border {
|
|
|
position: relative;
|
|
|
- min-height: 500px;
|
|
|
- -webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
- display: -webkit-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- border-left: none;
|
|
|
- border-top-right-radius: 5px;
|
|
|
- border-bottom-right-radius: 5px;
|
|
|
- color: #fff;
|
|
|
- background-color: hsla(0,0%,100%,.9);
|
|
|
- width: 50%;
|
|
|
- float: left;
|
|
|
+ min-height: 500px;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ border-left: none;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: hsla(0, 0%, 100%, 0.9);
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
-.login-main{
|
|
|
- margin: 0 auto;
|
|
|
- width: 65%;
|
|
|
+.login-main {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 65%;
|
|
|
}
|
|
|
|
|
|
-.login-title{
|
|
|
+.login-title {
|
|
|
color: #333;
|
|
|
- margin-bottom: 40px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 22px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 4px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 4px;
|
|
|
}
|
|
|
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
@@ -404,18 +456,17 @@ $cursor: #fff;
|
|
|
}
|
|
|
|
|
|
.el-form-item {
|
|
|
- border: 1px solid rgba(0,0,0, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
border-radius: 5px;
|
|
|
color: #454545;
|
|
|
}
|
|
|
}
|
|
|
-$bg:#2d3a4b;
|
|
|
-$dark_gray:#889aa4;
|
|
|
-$light_gray:#eee;
|
|
|
+$bg: #2d3a4b;
|
|
|
+$dark_gray: #889aa4;
|
|
|
+$light_gray: #eee;
|
|
|
|
|
|
.login-container {
|
|
|
-
|
|
|
.tips {
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
@@ -468,6 +519,21 @@ $light_gray:#eee;
|
|
|
.thirdparty-button {
|
|
|
display: none;
|
|
|
}
|
|
|
+ .login-weaper {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .login-main{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ .login-left {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ .login-border {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
wangxiaobing