<template>
  <div class="pageBox">
    <div class="header" :style="{ background: '#1f2632',zIndex: 1, height: headerHeight + 'px' }">
      <HeaderMenu :isRecent="headerHeight === 100" />
    </div>
    <div class="content">
      <router-view :key="$route.fullPath" v-if="isShowContent" />
    </div>
  </div>
</template>

<script>
import HeaderMenu from "./components/HeaderMenu/index.vue";
import Adaptation from "./components/Adaptation.vue";
import getBoardBaseData from '@/common/getBoardBaseData'
import { mapGetters } from "vuex";

export default {
  name: "ji_ze_gao_su",
  components: {
    HeaderMenu,
    Adaptation,
    // ...modules
  },
  data() {
    return {

      isShowContent: false,
      headerHeight: 100,
    };
  },
  watch: {
    isRecentOpen: {
      handler(newV) {
        if (newV) {
          this.headerHeight = 100;
        } else {
          this.headerHeight = 68;
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters("menu", ["isRecentOpen"]),
    headerStyle() {
      return {
        width: `${this.header.originW}px`,
        height: `${this.header.originH}px`,
        transform: `scale(${this.header.scale}, ${this.header.scale})`
      }
    }
  },
  mounted() {
    getBoardBaseData().then(res => {
      this.isShowContent = true;
    });;
  },
  methods: {

  }
};
</script>

<style lang="scss" scope src="./scss/reset.scss" />
<style lang="scss" scope src="./scss/el-reset.scss" />
<style scoped lang="scss">
.pageBox {
  background: #13272F;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .24s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .content {
    flex: 1;
    width: 100%;
  }

  .header {
    transition: all ease-out 0.3s;
  }
}
</style>
