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>
|
<template>
|
||||||
<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">
|
<div class="layer flex-center">
|
||||||
<el-card class="form-group"></el-card>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -14,8 +47,36 @@ require('particles.js')
|
|||||||
// https://vincentgarreau.com/particles.js/#default
|
// https://vincentgarreau.com/particles.js/#default
|
||||||
import config from './config/default'
|
import config from './config/default'
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
formLogin: {
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
username: [
|
||||||
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
particlesJS('login', config)
|
particlesJS('login', config)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submit () {
|
||||||
|
this.$refs.loginForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
alert('submit!');
|
||||||
|
} else {
|
||||||
|
console.log('error submit!!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -30,10 +91,33 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 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 {
|
.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 {
|
.bg {
|
||||||
|
|||||||
Reference in New Issue
Block a user