<script>
import ZooHeader from "@/components/ZooHeader.vue";
import ZooAside from "@/components/ZooAside.vue";
import ZooMain from "@/components/ZooMain.vue";
import ZooFooter from "@/components/ZooFooter.vue";
import {SwitchButton} from "@element-plus/icons-vue";

export default {
  name: "ZooPanel",
  computed: {
    SwitchButton() {
      return SwitchButton
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // touser() {
    //   $router.push('/panel/user')
    // }
  },
  components: {
    ZooHeader,
    ZooAside,
    ZooMain,
    ZooFooter
  }

}
</script>

<template>
  <div class="root center">
    <ZooAside class="aside absolute"></ZooAside>
    <ZooHeader class="header absolute"></ZooHeader>
    <ZooMain class="main absolute"><router-view></router-view></ZooMain>
    <ZooFooter class="footer absolute"></ZooFooter>
  </div>
</template>

<style scoped>
.root {
  width: 1300px;
  height: 700px;
  /*background-color: pink;*/
}
.aside {
  width: 200px;
  height: 698px;
}
.header {
  height: 60px;
  top: 0;
}
.footer {
  height: 60px;
  bottom: 0;
}
.main {
  height: 576px;
  top: 61px;

}
.aside, .header, .main, .footer {
  border: black solid 1px;
}
.header, .main, .footer {
  width: 1098px;
  right: 0;
}

</style>