|
@@ -1,6 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="login-container">
|
|
<div class="login-container">
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
|
|
|
|
+ label-position="left">
|
|
|
|
|
|
<div class="title-container">
|
|
<div class="title-container">
|
|
<h3 class="title">Login Form</h3>
|
|
<h3 class="title">Login Form</h3>
|
|
@@ -8,40 +9,42 @@
|
|
|
|
|
|
<el-form-item prop="username">
|
|
<el-form-item prop="username">
|
|
<span class="svg-container">
|
|
<span class="svg-container">
|
|
- <svg-icon icon-class="user" />
|
|
|
|
|
|
+ <svg-icon icon-class="user"/>
|
|
</span>
|
|
</span>
|
|
<el-input
|
|
<el-input
|
|
- ref="username"
|
|
|
|
- v-model="loginForm.username"
|
|
|
|
- placeholder="Username"
|
|
|
|
- name="username"
|
|
|
|
- type="text"
|
|
|
|
- tabindex="1"
|
|
|
|
- auto-complete="on"
|
|
|
|
|
|
+ ref="username"
|
|
|
|
+ v-model="loginForm.username"
|
|
|
|
+ placeholder="Username"
|
|
|
|
+ name="username"
|
|
|
|
+ type="text"
|
|
|
|
+ tabindex="1"
|
|
|
|
+ auto-complete="on"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item prop="password">
|
|
<el-form-item prop="password">
|
|
<span class="svg-container">
|
|
<span class="svg-container">
|
|
- <svg-icon icon-class="password" />
|
|
|
|
|
|
+ <svg-icon icon-class="password"/>
|
|
</span>
|
|
</span>
|
|
<el-input
|
|
<el-input
|
|
- :key="passwordType"
|
|
|
|
- ref="password"
|
|
|
|
- v-model="loginForm.password"
|
|
|
|
- :type="passwordType"
|
|
|
|
- placeholder="Password"
|
|
|
|
- name="password"
|
|
|
|
- tabindex="2"
|
|
|
|
- auto-complete="on"
|
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
|
|
|
+ :key="passwordType"
|
|
|
|
+ ref="password"
|
|
|
|
+ v-model="loginForm.password"
|
|
|
|
+ :type="passwordType"
|
|
|
|
+ placeholder="Password"
|
|
|
|
+ name="password"
|
|
|
|
+ tabindex="2"
|
|
|
|
+ auto-complete="on"
|
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
/>
|
|
/>
|
|
<span class="show-pwd" @click="showPwd">
|
|
<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>
|
|
</span>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
|
|
|
|
|
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
|
|
|
|
+ @click.native.prevent="handleLogin">Login
|
|
|
|
+ </el-button>
|
|
|
|
|
|
<div class="tips">
|
|
<div class="tips">
|
|
<span style="margin-right:20px;">username: admin</span>
|
|
<span style="margin-right:20px;">username: admin</span>
|
|
@@ -53,7 +56,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { validUsername } from '@/utils/validate'
|
|
|
|
|
|
+import {validUsername} from '@/utils/validate'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'Login',
|
|
name: 'Login',
|
|
@@ -78,8 +81,8 @@ export default {
|
|
password: '111111'
|
|
password: '111111'
|
|
},
|
|
},
|
|
loginRules: {
|
|
loginRules: {
|
|
- username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
|
|
|
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
|
|
|
|
|
+ username: [{required: true, trigger: 'blur', validator: validateUsername}],
|
|
|
|
+ password: [{required: true, trigger: 'blur', validator: validatePassword}]
|
|
},
|
|
},
|
|
loading: false,
|
|
loading: false,
|
|
passwordType: 'password',
|
|
passwordType: 'password',
|
|
@@ -88,7 +91,7 @@ export default {
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
$route: {
|
|
$route: {
|
|
- handler: function(route) {
|
|
|
|
|
|
+ handler: function (route) {
|
|
this.redirect = route.query && route.query.redirect
|
|
this.redirect = route.query && route.query.redirect
|
|
},
|
|
},
|
|
immediate: true
|
|
immediate: true
|
|
@@ -110,7 +113,7 @@ export default {
|
|
if (valid) {
|
|
if (valid) {
|
|
this.loading = true
|
|
this.loading = true
|
|
this.store.user.login(this.loginForm).then(() => {
|
|
this.store.user.login(this.loginForm).then(() => {
|
|
- this.$router.push({ path: this.redirect || '/' })
|
|
|
|
|
|
+ this.$router.push({path: this.redirect || '/'})
|
|
this.loading = false
|
|
this.loading = false
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
this.loading = false
|
|
this.loading = false
|
|
@@ -129,8 +132,8 @@ export default {
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
|
|
|
-$bg:#283443;
|
|
|
|
-$light_gray:#fff;
|
|
|
|
|
|
+$bg: #283443;
|
|
|
|
+$light_gray: #fff;
|
|
$cursor: #fff;
|
|
$cursor: #fff;
|
|
|
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
@@ -173,9 +176,9 @@ $cursor: #fff;
|
|
</style>
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-$bg:#2d3a4b;
|
|
|
|
-$dark_gray:#889aa4;
|
|
|
|
-$light_gray:#eee;
|
|
|
|
|
|
+$bg: #2d3a4b;
|
|
|
|
+$dark_gray: #889aa4;
|
|
|
|
+$light_gray: #eee;
|
|
|
|
|
|
.login-container {
|
|
.login-container {
|
|
min-height: 100%;
|
|
min-height: 100%;
|