New
This commit is contained in:
saplf
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
16
src/views/Chain.vue
Normal file
16
src/views/Chain.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="chain-page">
|
||||
Chain
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Chain',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chain-page {
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,255 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<div class="side-menus" :class="{ collapsed: sideCollapsed || !isLogin }">
|
||||
<div class="side-title">
|
||||
<img src="../assets/images/logo.png" />
|
||||
<span class="white--text">TIME IN CHAIN</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="side-menu-item"
|
||||
v-for="menu in sideMenus"
|
||||
@click="updateRoute(menu.path)"
|
||||
:class="{ active: sideSelected === menu.path }"
|
||||
:key="menu.path">
|
||||
<v-icon dark x-large>{{ menu.icon }}</v-icon>
|
||||
<div class="title white--text">{{ $t(menu.title) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-body">
|
||||
<div class="app-header" :class="{ collapsed: !isLogin }">
|
||||
<div class="indicator" @click="toggleCollapse" :class="{ collapsed: sideCollapsed }">
|
||||
<v-icon class="right">chevron_right</v-icon>
|
||||
<v-icon class="left">chevron_left</v-icon>
|
||||
</div>
|
||||
|
||||
<div class="title primary--text">{{ $t('login.title') }}</div>
|
||||
|
||||
<v-select
|
||||
color="secondary"
|
||||
prepend-icon="language"
|
||||
:value="currentLang"
|
||||
@input="updateCurrentLang"
|
||||
:items="supportLangs"
|
||||
item-value="code"
|
||||
item-text="label"
|
||||
/>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<v-icon @click="logout">power_settings_new</v-icon>
|
||||
</div>
|
||||
|
||||
<router-view class="app-container" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
|
||||
data() {
|
||||
return {
|
||||
sideSelected: this.$route.path,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState([
|
||||
'sideMenus',
|
||||
'sideCollapsed',
|
||||
'supportLangs',
|
||||
'currentLang',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isLogin',
|
||||
]),
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'updateRoute',
|
||||
'toggleCollapse',
|
||||
'logout',
|
||||
]),
|
||||
...mapActions([
|
||||
'updateCurrentLang',
|
||||
]),
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'(to) {
|
||||
this.sideSelected = to
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/share";
|
||||
.home {
|
||||
&, .app-body {
|
||||
@include full-page;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
|
||||
$sideWidth: 260px;
|
||||
$headerHeight: 64px;
|
||||
.side-menus {
|
||||
&.collapsed {
|
||||
margin-left: -$sideWidth;
|
||||
}
|
||||
|
||||
width: $sideWidth;
|
||||
background: url('../assets/images/bg.jpg') center;
|
||||
background-size: cover;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
box-shadow: 1px 0 2px #ddd;
|
||||
transition: margin-left .4s;
|
||||
|
||||
.side-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
& > img {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-item {
|
||||
cursor: pointer;
|
||||
padding: 40px 0;
|
||||
|
||||
transition: background-color .4s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.v-icon {
|
||||
font-size: 48px!important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 4px 0;
|
||||
font-size: 1.2em!important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($secondaryColor, .15);
|
||||
}
|
||||
|
||||
$indicatorSize: 24px;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: $indicatorSize;
|
||||
height: $indicatorSize;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
right: -$indicatorSize*2;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
transition: right .4s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(white, .25);
|
||||
|
||||
&:before {
|
||||
right: -$indicatorSize/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.app-header {
|
||||
&.collapsed {
|
||||
margin-top: -$headerHeight;
|
||||
}
|
||||
|
||||
transition: margin-top .4s;
|
||||
|
||||
flex-shrink: 0;
|
||||
height: $headerHeight;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 2px #ddd;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.indicator {
|
||||
position: relative;
|
||||
$iconSize: 28px;
|
||||
width: $iconSize;
|
||||
align-self: stretch;
|
||||
margin: 0 40px;
|
||||
cursor: pointer;
|
||||
|
||||
.v-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
font-size: $iconSize!important;
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 45%;
|
||||
}
|
||||
.right {
|
||||
left: -15%;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.left {
|
||||
left: -15%;
|
||||
}
|
||||
.right {
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.v-select {
|
||||
width: 160px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
align-self: stretch;
|
||||
margin: 20px;
|
||||
width: 1px;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
& > .v-icon {
|
||||
margin: 0 40px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
106
src/views/Login.vue
Normal file
106
src/views/Login.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<img src="../assets/images/logo.png">
|
||||
|
||||
<h1 class="white--text">{{ $t('login.title') }}</h1>
|
||||
|
||||
<v-text-field
|
||||
color="secondary"
|
||||
dark autofocus
|
||||
single-line
|
||||
:error="inputError"
|
||||
:error-messages="errorMnemonic"
|
||||
:value="mnemonic"
|
||||
:loading="signing"
|
||||
@input="updateMnemonic"
|
||||
:label="$t('login.inputLabel')" />
|
||||
|
||||
<v-select
|
||||
color="secondary" dark
|
||||
prepend-icon="language"
|
||||
:value="currentLang"
|
||||
@input="updateCurrentLang"
|
||||
:items="supportLangs"
|
||||
item-value="code"
|
||||
item-text="label"
|
||||
/>
|
||||
|
||||
<v-btn :loading="signing" dark large color="transparent" @click="login">
|
||||
{{ $t('login.loginBtn') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
createNamespacedHelpers,
|
||||
mapState as mapRootState,
|
||||
mapActions as mapRootActions,
|
||||
} from 'vuex'
|
||||
|
||||
const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers('login')
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
|
||||
computed: {
|
||||
...mapState([
|
||||
'mnemonic',
|
||||
'errorMnemonic',
|
||||
'signing',
|
||||
]),
|
||||
...mapGetters([
|
||||
'inputError',
|
||||
]),
|
||||
...mapRootState([
|
||||
'supportLangs',
|
||||
'currentLang',
|
||||
]),
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'updateMnemonic',
|
||||
]),
|
||||
...mapActions([
|
||||
'login',
|
||||
]),
|
||||
...mapRootActions([
|
||||
'updateCurrentLang',
|
||||
]),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
background: url('../assets/images/bg.jpg') center;
|
||||
background-size: cover;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24%;
|
||||
|
||||
& > img {
|
||||
width: 120px;
|
||||
margin-top: -10%;
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
& /deep/ .v-text-field {
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
& /deep/ .v-btn {
|
||||
align-self: stretch;
|
||||
box-shadow: 0 4px 14px #111 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
src/views/Market.vue
Normal file
16
src/views/Market.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="market-page">
|
||||
Market
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Market',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.market-page {
|
||||
}
|
||||
</style>
|
||||
16
src/views/Network.vue
Normal file
16
src/views/Network.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="network-page">
|
||||
Network
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Network',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.network-page {
|
||||
}
|
||||
</style>
|
||||
16
src/views/Node.vue
Normal file
16
src/views/Node.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="node-page">
|
||||
Node
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Node',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.node-page {
|
||||
}
|
||||
</style>
|
||||
16
src/views/Owner.vue
Normal file
16
src/views/Owner.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="owner-page">
|
||||
Owner
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Owner',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.owner-page {
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user