2018-01-20 10:17:35 +08:00
|
|
|
<template>
|
2018-01-21 23:30:01 +08:00
|
|
|
<div class="login-page">
|
|
|
|
|
<div class="layer bg" id="login"></div>
|
|
|
|
|
<div class="layer">
|
|
|
|
|
<el-card class="form-group"></el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-01-20 10:17:35 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
/* eslint-disable */
|
|
|
|
|
require('particles.js')
|
|
|
|
|
// 配置地址
|
|
|
|
|
// https://vincentgarreau.com/particles.js/#default
|
2018-01-21 23:03:28 +08:00
|
|
|
import config from './config/default'
|
2018-01-20 10:17:35 +08:00
|
|
|
export default {
|
|
|
|
|
mounted () {
|
|
|
|
|
particlesJS('login', config)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2018-01-21 23:19:19 +08:00
|
|
|
<style lang="scss">
|
2018-01-21 23:30:01 +08:00
|
|
|
.login-page {
|
2018-01-21 23:19:19 +08:00
|
|
|
background-color: #EDF4FA;
|
2018-01-20 10:17:35 +08:00
|
|
|
height: 100%;
|
2018-01-21 23:30:01 +08:00
|
|
|
position: relative;
|
|
|
|
|
// 层
|
|
|
|
|
.layer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
// 登陆表单
|
|
|
|
|
.form-group {
|
|
|
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
|
|
|
|
}
|
|
|
|
|
// 背景
|
|
|
|
|
.bg {
|
|
|
|
|
canvas {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
2018-01-21 23:19:19 +08:00
|
|
|
}
|
2018-01-20 10:17:35 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|