forked from macrozheng/mall-admin-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhh
committed
Nov 22, 2018
1 parent
5a2442f
commit 2e5753a
Showing
6 changed files
with
116 additions
and
162 deletions.
There are no files selected for viewing
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,182 +1,135 @@ | ||
<template> | ||
<div class="login-container"> | ||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"> | ||
<h3 class="title">mall-admin-web</h3> | ||
<el-form-item prop="username"> | ||
<span class="svg-container svg-container_login"> | ||
<svg-icon icon-class="user" /> | ||
</span> | ||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" /> | ||
</el-form-item> | ||
<el-form-item prop="password"> | ||
<span class="svg-container"> | ||
<svg-icon icon-class="password"></svg-icon> | ||
</span> | ||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" | ||
placeholder="password"></el-input> | ||
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span> | ||
</el-form-item> | ||
<el-form-item> | ||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> | ||
Sign in | ||
</el-button> | ||
</el-form-item> | ||
<div class="tips"> | ||
<span style="margin-right:20px;">username: admin</span> | ||
<span> password: 123456</span> | ||
</div> | ||
</el-form> | ||
<div> | ||
<el-card class="login-form-layout"> | ||
<el-form autoComplete="on" | ||
:model="loginForm" | ||
:rules="loginRules" | ||
ref="loginForm" | ||
label-position="left"> | ||
<div style="text-align: center"> | ||
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon> | ||
</div> | ||
<h2 class="login-title color-main">mall-admin-web</h2> | ||
<el-form-item prop="username"> | ||
<el-input name="username" | ||
type="text" | ||
v-model="loginForm.username" | ||
autoComplete="on" | ||
placeholder="请输入用户名"> | ||
<span slot="prefix"> | ||
<svg-icon icon-class="user" class="color-main"></svg-icon> | ||
</span> | ||
</el-input> | ||
</el-form-item> | ||
<el-form-item prop="password"> | ||
<el-input name="password" | ||
:type="pwdType" | ||
@keyup.enter.native="handleLogin" | ||
v-model="loginForm.password" | ||
autoComplete="on" | ||
placeholder="请输入密码"> | ||
<span slot="prefix"> | ||
<svg-icon icon-class="password" class="color-main"></svg-icon> | ||
</span> | ||
<span slot="suffix" @click="showPwd"> | ||
<svg-icon icon-class="eye" class="color-main"></svg-icon> | ||
</span> | ||
</el-input> | ||
</el-form-item> | ||
<el-form-item style="margin-bottom: 60px"> | ||
<el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin"> | ||
登录 | ||
</el-button> | ||
</el-form-item> | ||
</el-form> | ||
</el-card> | ||
<img :src="login_center_bg" class="login-center-layout"> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { isvalidUsername } from '@/utils/validate' | ||
import {isvalidUsername} from '@/utils/validate'; | ||
import login_center_bg from '@/assets/images/login_center_bg.png' | ||
export default { | ||
name: 'login', | ||
data() { | ||
const validateUsername = (rule, value, callback) => { | ||
if (!isvalidUsername(value)) { | ||
callback(new Error('请输入正确的用户名')) | ||
} else { | ||
callback() | ||
} | ||
} | ||
const validatePass = (rule, value, callback) => { | ||
if (value.length < 3) { | ||
callback(new Error('密码不能小于3位')) | ||
} else { | ||
callback() | ||
} | ||
} | ||
return { | ||
loginForm: { | ||
username: 'admin', | ||
password: '123456' | ||
}, | ||
loginRules: { | ||
username: [{ required: true, trigger: 'blur', validator: validateUsername }], | ||
password: [{ required: true, trigger: 'blur', validator: validatePass }] | ||
}, | ||
loading: false, | ||
pwdType: 'password' | ||
} | ||
}, | ||
methods: { | ||
showPwd() { | ||
if (this.pwdType === 'password') { | ||
this.pwdType = '' | ||
} else { | ||
this.pwdType = 'password' | ||
export default { | ||
name: 'login', | ||
data() { | ||
const validateUsername = (rule, value, callback) => { | ||
if (!isvalidUsername(value)) { | ||
callback(new Error('请输入正确的用户名')) | ||
} else { | ||
callback() | ||
} | ||
}; | ||
const validatePass = (rule, value, callback) => { | ||
if (value.length < 3) { | ||
callback(new Error('密码不能小于3位')) | ||
} else { | ||
callback() | ||
} | ||
}; | ||
return { | ||
loginForm: { | ||
username: 'admin', | ||
password: '123456' | ||
}, | ||
loginRules: { | ||
username: [{required: true, trigger: 'blur', validator: validateUsername}], | ||
password: [{required: true, trigger: 'blur', validator: validatePass}] | ||
}, | ||
loading: false, | ||
pwdType: 'password', | ||
login_center_bg | ||
} | ||
}, | ||
handleLogin() { | ||
this.$refs.loginForm.validate(valid => { | ||
if (valid) { | ||
this.loading = true | ||
this.$store.dispatch('Login', this.loginForm).then(() => { | ||
this.loading = false | ||
this.$router.push({ path: '/' }) | ||
}).catch(() => { | ||
this.loading = false | ||
}) | ||
methods: { | ||
showPwd() { | ||
if (this.pwdType === 'password') { | ||
this.pwdType = '' | ||
} else { | ||
console.log('error submit!!') | ||
return false | ||
this.pwdType = 'password' | ||
} | ||
}) | ||
} | ||
} | ||
} | ||
</script> | ||
|
||
<style rel="stylesheet/scss" lang="scss"> | ||
$bg:#2d3a4b; | ||
$light_gray:#eee; | ||
/* reset element-ui css */ | ||
.login-container { | ||
.el-input { | ||
display: inline-block; | ||
height: 47px; | ||
width: 85%; | ||
input { | ||
background: transparent; | ||
border: 0px; | ||
-webkit-appearance: none; | ||
border-radius: 0px; | ||
padding: 12px 5px 12px 15px; | ||
color: $light_gray; | ||
height: 47px; | ||
&:-webkit-autofill { | ||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important; | ||
-webkit-text-fill-color: #fff !important; | ||
}, | ||
handleLogin() { | ||
this.$refs.loginForm.validate(valid => { | ||
if (valid) { | ||
this.loading = true; | ||
this.$store.dispatch('Login', this.loginForm).then(() => { | ||
this.loading = false; | ||
this.$router.push({path: '/'}) | ||
}).catch(() => { | ||
this.loading = false | ||
}) | ||
} else { | ||
console.log('参数验证不合法!'); | ||
return false | ||
} | ||
}) | ||
} | ||
} | ||
} | ||
.el-form-item { | ||
border: 1px solid rgba(255, 255, 255, 0.1); | ||
background: rgba(0, 0, 0, 0.1); | ||
border-radius: 5px; | ||
color: #454545; | ||
} | ||
} | ||
</style> | ||
</script> | ||
|
||
<style rel="stylesheet/scss" lang="scss" scoped> | ||
$bg:#2d3a4b; | ||
$dark_gray:#889aa4; | ||
$light_gray:#eee; | ||
.login-container { | ||
position: fixed; | ||
height: 100%; | ||
width: 100%; | ||
background-color: $bg; | ||
.login-form { | ||
<style scoped> | ||
.login-form-layout { | ||
position: absolute; | ||
left: 0; | ||
right: 0; | ||
width: 520px; | ||
padding: 35px 35px 15px 35px; | ||
margin: 120px auto; | ||
} | ||
.tips { | ||
font-size: 14px; | ||
color: #fff; | ||
margin-bottom: 10px; | ||
span { | ||
&:first-of-type { | ||
margin-right: 16px; | ||
} | ||
} | ||
} | ||
.svg-container { | ||
padding: 6px 5px 6px 15px; | ||
color: $dark_gray; | ||
vertical-align: middle; | ||
width: 30px; | ||
display: inline-block; | ||
&_login { | ||
font-size: 20px; | ||
} | ||
width: 360px; | ||
margin: 140px auto; | ||
border-top: 10px solid #409EFF; | ||
} | ||
.title { | ||
font-size: 26px; | ||
font-weight: 400; | ||
color: $light_gray; | ||
margin: 0px auto 40px auto; | ||
.login-title { | ||
text-align: center; | ||
font-weight: bold; | ||
} | ||
.show-pwd { | ||
position: absolute; | ||
right: 10px; | ||
top: 7px; | ||
font-size: 16px; | ||
color: $dark_gray; | ||
cursor: pointer; | ||
user-select: none; | ||
.login-center-layout { | ||
background: #409EFF; | ||
width: auto; | ||
height: auto; | ||
max-width: 100%; | ||
max-height: 100%; | ||
margin-top: 200px; | ||
} | ||
} | ||
</style> |