2018-03-08 09:41:39 +01:00
|
|
|
<template>
|
2018-03-08 15:08:33 +01:00
|
|
|
<div id="login">
|
2018-03-10 14:44:15 +01:00
|
|
|
<instance-form v-if="page == 1"></instance-form>
|
|
|
|
<login-form v-if="page == 2"></login-form>
|
2018-03-08 15:08:33 +01:00
|
|
|
</div>
|
2018-03-08 09:41:39 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-03-10 14:44:15 +01:00
|
|
|
import InstanceForm from './Login/InstanceForm'
|
|
|
|
import LoginForm from './Login/LoginForm'
|
2018-03-08 15:08:33 +01:00
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
2018-03-08 09:41:39 +01:00
|
|
|
export default {
|
|
|
|
name: 'login',
|
2018-03-08 15:08:33 +01:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2018-03-10 14:44:15 +01:00
|
|
|
page: state => state.Login.page
|
2018-03-08 15:08:33 +01:00
|
|
|
})
|
|
|
|
},
|
2018-03-10 14:44:15 +01:00
|
|
|
components: { InstanceForm, LoginForm }
|
2018-03-08 09:41:39 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2018-03-09 08:14:47 +01:00
|
|
|
<style lang="scss">
|
|
|
|
body { font-family: 'Source Sans Pro', sans-serif; }
|
|
|
|
|
2018-03-14 08:12:44 +01:00
|
|
|
html, body, #app {
|
2018-03-10 14:44:15 +01:00
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
2018-03-08 09:41:39 +01:00
|
|
|
#login {
|
2018-03-10 14:44:15 +01:00
|
|
|
background-color: #292f3f;
|
|
|
|
color: #ffffff;
|
2018-03-08 09:41:39 +01:00
|
|
|
text-align: center;
|
2018-03-14 08:12:44 +01:00
|
|
|
min-height: 100%;
|
2018-03-08 15:08:33 +01:00
|
|
|
|
2018-03-10 14:44:15 +01:00
|
|
|
.el-form-item__label {
|
|
|
|
color: #f0f3f9;
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
background-color: #373d48;
|
|
|
|
color: #ffffff;
|
|
|
|
border: 0;
|
2018-03-08 15:08:33 +01:00
|
|
|
}
|
2018-03-08 09:41:39 +01:00
|
|
|
}
|
|
|
|
</style>
|