<template>
  <ui-container>
    <ui-header slot="header" v-if="group">
      {{title}}
    </ui-header>
    <transition>
      <router-view class="content"></router-view>
    </transition>
  </ui-container>
</template>
<script>
const route = '$route';

export default {
  data() {
    return {
      title: '',
      group: false,
    };
  },
  methods: {
    setHeader() {
      this.title = this.$route.meta.title;
      this.group = this.$route.meta.group;
    },
  },
  mounted() {
    this.setHeader();
  },
  watch: {
    [route]() {
      this.setHeader();
    },
  },
};

</script>
<style lang="postcss">
@import '../src/styles/index';
@import 'icon';

html,
body {
  margin: 0;
  height: 100%;
  background-color: #f4f4f2;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

</style>
