zoo-frontend/src/pages/ZooPanel.vue
2024-05-17 15:28:54 +08:00

75 lines
1.2 KiB
Vue

<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>