no message
Former-commit-id: 7aa8f366ef880ea13096cbef9b91d049dcdb20a0 Former-commit-id: 14bbcaa524412baed2e9ae04c7dbf42cd1c0b228 Former-commit-id: 7c9aa33bd00c573e4d9a2b19ed2917dba41a484e
This commit is contained in:
@@ -1 +0,0 @@
|
||||
183e2862510cac25d289c2d00765144d685eb6fa
|
||||
1
src/assets/image/logo/w500.png.REMOVED.git-id
Normal file
1
src/assets/image/logo/w500.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
a6df8e4324acd50c885bf16a4eddfe9895775dc7
|
||||
@@ -1,8 +1,41 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="layer bg" id="login"></div>
|
||||
<div class="layer">
|
||||
<el-card class="form-group"></el-card>
|
||||
<div class="layer flex-center">
|
||||
<div class="logo-group">
|
||||
<img src="@/assets/image/logo/w500.png" alt="logo">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
:model="formLogin">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formLogin.username"
|
||||
placeholder="用户名">
|
||||
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="formLogin.password"
|
||||
placeholder="密码">
|
||||
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button @click="submit" type="primary" class="button-login">登陆</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-button type="info" class="button-help">
|
||||
需要帮助
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,8 +47,36 @@ require('particles.js')
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
import config from './config/default'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formLogin: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
particlesJS('login', config)
|
||||
},
|
||||
methods: {
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -30,10 +91,33 @@ export default {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// logo
|
||||
.logo-group {
|
||||
margin-top: -100px;
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
// 登陆表单
|
||||
.form-group {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
width: 300px;
|
||||
.el-card {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
}
|
||||
.button-login {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.button-help {
|
||||
width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
// 背景
|
||||
.bg {
|
||||
|
||||
Reference in New Issue
Block a user