no message
Former-commit-id: e286a71eca33b0cbd8d114906701f8c37ed2ce41 Former-commit-id: fac7c3582b5ce793db8c86579156b15dfee4faf5 Former-commit-id: 3abdc7ccbc4fed3d45949b9cc921beced6de46e0
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
59
src/pages/core/login/style.scss
Normal file
59
src/pages/core/login/style.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user