no message

Former-commit-id: e286a71eca33b0cbd8d114906701f8c37ed2ce41
Former-commit-id: fac7c3582b5ce793db8c86579156b15dfee4faf5
Former-commit-id: 3abdc7ccbc4fed3d45949b9cc921beced6de46e0
This commit is contained in:
李杨
2018-01-25 20:03:59 +08:00
parent 526eef827e
commit d4db050cce
3 changed files with 83 additions and 81 deletions

View File

@@ -3,19 +3,18 @@ import Mock from 'mockjs'
const userDB = [ const userDB = [
{ {
username: 'admin', username: 'admin',
password: 'admin' password: 'admin',
}, avatar: 'http://fairyever.qiniudn.com/d2-admin-user.jpg'
{
username: 'FairyEver',
password: '000000'
}, },
{ {
username: 'user1', username: 'user1',
password: '111111' password: '111111',
avatar: 'http://fairyever.qiniudn.com/d2-admin-user-2.jpg'
}, },
{ {
username: 'user2', username: 'user2',
password: '222222' password: '222222',
avatar: ''
} }
] ]
@@ -25,7 +24,10 @@ Mock.mock('/login', 'post', ({url, type, body}) => {
if (user) { if (user) {
return { return {
code: 0, code: 0,
msg: '登陆成功' msg: '登陆成功',
data: {
...user
}
} }
} else { } else {
return { return {

View File

@@ -2,9 +2,11 @@
<div class="login-page"> <div class="login-page">
<div class="layer bg" id="login"></div> <div class="layer bg" id="login"></div>
<div class="layer flex-center"> <div class="layer flex-center">
<!-- logo部分 -->
<div class="logo-group"> <div class="logo-group">
<img src="@/assets/image/logo/w500.png" alt="logo"> <img src="@/assets/image/logo/w500.png" alt="logo">
</div> </div>
<!-- 表单部分 -->
<div class="form-group"> <div class="form-group">
<el-card> <el-card>
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin"> <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
@@ -21,13 +23,14 @@
<el-button @click="submit" type="primary" class="button-login">登陆</el-button> <el-button @click="submit" type="primary" class="button-login">登陆</el-button>
</el-form> </el-form>
</el-card> </el-card>
</div>
<!-- 帮助按钮 -->
<el-button type="info" class="button-help"> <el-button type="info" class="button-help">
需要帮助 需要帮助
<i class="fa fa-question-circle"></i> <i class="fa fa-question-circle"></i>
</el-button> </el-button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -40,8 +43,8 @@ export default {
data () { data () {
return { return {
formLogin: { formLogin: {
username: '', username: 'admin',
password: '' password: 'admin'
}, },
rules: { rules: {
username: [ username: [
@@ -62,6 +65,7 @@ export default {
submit () { submit () {
this.$refs.loginForm.validate((valid) => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
// 开始请求登录接口
this.$http({ this.$http({
method: 'post', method: 'post',
url: '/login', url: '/login',
@@ -71,14 +75,9 @@ export default {
} }
}) })
.then (res => { .then (res => {
if (res.data.code === 0) { console.group('登录')
this.$message.success(res.data.msg) console.log(res)
setTimeout(() => { console.groupEnd()
this.$router.push('index')
}, 300);
} else {
this.$message.error(res.data.msg)
}
}) })
} else { } else {
return false return false
@@ -90,64 +89,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~@/assets/style/public.scss'; @import './style.scss';
.login-page {
background-color: #EDF4FA;
height: 100%;
position: relative;
// 层
.layer {
position: absolute;
height: 100%;
width: 100%;
&.flex-center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
// logo
.logo-group {
margin-top: -75px - 70px;
position: relative;
top: 75px;
img {
height: 140px;
}
}
// 登陆表单
.form-group {
width: 300px;
// 重新设置卡片阴影
.el-card {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
.el-card__body {
padding-top: 70px;
}
}
// 登陆按钮
.button-login {
width: 100%;
}
// 输入框左边的图表区域缩窄
.el-input-group__prepend {
padding: 0px 14px;
}
}
// 帮助按钮
.button-help {
width: 100%;
margin-top: $margin;
}
// 背景
.bg {
canvas {
display: block;
margin: 0px;
padding: 0px;
}
}
}
</style> </style>

View File

@@ -0,0 +1,59 @@
@import '~@/assets/style/public.scss';
.login-page {
background-color: #EDF4FA;
height: 100%;
position: relative;
// 层
.layer {
position: absolute;
height: 100%;
width: 100%;
&.flex-center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
// 背景
.bg {
canvas {
display: block;
margin: 0px;
padding: 0px;
}
}
// logo
.logo-group {
margin-top: -75px - 70px;
position: relative;
top: 75px;
img {
height: 140px;
}
}
// 登陆表单
.form-group {
width: 300px;
// 重新设置卡片阴影
.el-card {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
.el-card__body {
padding-top: 70px;
}
}
// 登陆按钮
.button-login {
width: 100%;
}
// 输入框左边的图表区域缩窄
.el-input-group__prepend {
padding: 0px 14px;
}
}
// 帮助按钮
.button-help {
width: 300px;
margin-top: $margin;
}
}