<template>
  <div class="message-containers">
    <HtPerSideBar @alis="alisShow"></HtPerSideBar>

    <component :is="active"></component>
  </div>
</template>

<script>
  import Setting from '@/views/personal/setting/index.vue'
  import information from '@/views/personal/information/index.vue'
  import security from '@/views/personal/security/index.vue'
  import HtPerSideBar from '@/components/layouts/HtPerSideBar/index.vue'
  export default {
    components: { Setting, information, security, HtPerSideBar },
    data() {
      return {
        active: '',
      }
    },
    computed: {},
    watch: {},
    methods: {
      alisShow(key) {
        this.active = key
      },
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
  }
</script>
<style lang="scss" scoped>
  //@import url(); 引入公共css类
  .message-containers {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: calc(100% - 0px);
    &_right {
      border-radius: 12px 12px 12px 12px;
      background: $base-color-white !important;
      width: 100%;
      height: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
