2018-03-29 15:41:28 +02:00
|
|
|
<template>
|
|
|
|
<div id="side_bar" v-if="openSideBar">
|
|
|
|
<div class="header">
|
|
|
|
<i class="el-icon-close" @click="close"></i>
|
|
|
|
</div>
|
2018-03-30 09:48:32 +02:00
|
|
|
<account-profile v-if="component === 1"></account-profile>
|
2018-03-29 15:41:28 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mapState } from 'vuex'
|
2018-03-30 09:48:32 +02:00
|
|
|
import AccountProfile from './SideBar/AccountProfile'
|
2018-03-29 15:41:28 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'side-bar',
|
2018-03-30 09:48:32 +02:00
|
|
|
components: {
|
|
|
|
AccountProfile
|
|
|
|
},
|
2018-03-29 15:41:28 +02:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2018-03-30 09:48:32 +02:00
|
|
|
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
|
|
|
component: state => state.TimelineSpace.Contents.SideBar.component
|
2018-03-29 15:41:28 +02:00
|
|
|
})
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
close () {
|
2018-03-29 17:20:15 +02:00
|
|
|
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
2018-03-29 15:41:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#side_bar {
|
|
|
|
position: fixed;
|
|
|
|
top: 48px;
|
|
|
|
right: 0;
|
2018-03-30 09:48:32 +02:00
|
|
|
width: 320px;
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
overflow: auto;
|
|
|
|
border-left: solid 1px #dcdfe6;
|
|
|
|
|
|
|
|
.header {
|
|
|
|
background-color: #f3f6fc;
|
|
|
|
padding: 4px 8px;
|
|
|
|
border-top: solid 1px #dcdfe6;
|
|
|
|
border-bottom: solid 1px #dcdfe6;
|
|
|
|
text-align: right;
|
2018-03-30 09:58:48 +02:00
|
|
|
|
|
|
|
.el-icon-close {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-03-30 09:48:32 +02:00
|
|
|
}
|
2018-03-29 15:41:28 +02:00
|
|
|
}
|
|
|
|
</style>
|