编写基本布局

src/assets/main.css

@@ -1,14 +1,37 @@
+/*浏览器默认margin为8px，会出现滚动条的问题，因此此处设置为0*/
+body {
+    margin: 0;
+}
+
 /*相对定位*/
 .relative {
     position: relative;
 }
 
+/*绝对定位*/
+.absolute {
+    position: absolute;
+}
+
+.flex {
+    display: flex;
+}
+
+/*左浮动*/
+.left {
+    float: left;
+}
+
+/*右浮动*/
+.right {
+    float: right;
+}
+
 /*水平、垂直居中*/
 .center {
     position: absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    margin:auto;
-}
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+

src/components/ZooAside.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  name: "ZooAside"
+}
+</script>
+
+<template>
+  <div id="aside">
+    <slot>我是侧栏插槽</slot>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/ZooFooter.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  name: "ZooFooter"
+}
+</script>
+
+<template>
+  <div id="footer">
+    <slot>我是底栏插槽</slot>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/ZooHeader.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  name: "ZooHeader"
+}
+</script>
+
+<template>
+  <div id="header">
+    <slot>我是头部插槽</slot>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/ZooMain.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  name: "ZooMain"
+}
+</script>
+
+<template>
+  <div id="main">
+    <slot>我是主内容插槽</slot>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/pages/ZooLogin.vue

@@ -3,9 +3,9 @@ export default {
   name: "ZooContainer",
   data() {
     return {
-      form:{
-        name:'张三',
-        password:'123456'
+      form: {
+        name: '张三',
+        password: '123456'
       }
     }
   },
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <div class="root">
+  <div class="root center">
     <el-card style="width: 480px" shadow="always">
       <el-form :model="form" label-width="auto" style="max-width: 600px">
         <el-form-item label="用户名">
@@ -37,18 +37,16 @@ export default {
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">Create</el-button>
-          <el-button>Cancel</el-button>
+          <el-button type="primary" @click="onSubmit">登录</el-button>
+          <el-button>重置</el-button>
         </el-form-item>
       </el-form>
     </el-card>
   </div>
-
 </template>
 
 <style scoped>
 .root {
-  position: relative;
-}
 
+}
 </style>

src/pages/ZooPanel.vue

@@ -1,43 +1,74 @@
 <script>
+// import {
+//   Document,
+//   Menu as IconMenu,
+//   Location,
+//   Setting,
+// } from '@element-plus/icons-vue'
+import ZooHeader from "@/components/ZooHeader.vue";
+import ZooAside from "@/components/ZooAside.vue";
+import ZooMain from "@/components/ZooMain.vue";
+import ZooFooter from "@/components/ZooFooter.vue";
+
 export default {
-  name: "ZooPanel"
+  name: "ZooPanel",
+  data() {
+    return {
+
+    }
+  },
+  components: {
+    // Document,
+    // IconMenu,
+    // Location,
+    // Setting
+    ZooHeader,
+    ZooAside,
+    ZooMain,
+    ZooFooter
+  }
+
 }
 </script>
 
 <template>
-  <div class="root relative">
-    <div class="center">
-      <el-container>
-        <el-container>
-          <el-aside class="aside">Aside</el-aside>
-          <el-container>
-            <el-header class="header">动物信息管理系统</el-header>
-            <el-main class="main"><router-view></router-view></el-main>
-            <el-footer class="footer">Footer</el-footer>
-          </el-container>
-        </el-container>
-      </el-container>
-    </div>
-
+  <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: 100%;
-  height: 750px;
+  width: 1300px;
+  height: 700px;
   background-color: pink;
 }
-.header, footer {
-  height: 60px;
-}
 .aside {
   width: 200px;
+  height: 698px;
+}
+.header {
+  height: 60px;
+  top: 0;
+}
+.footer {
+  height: 60px;
+  bottom: 0;
 }
 .main {
-  height: 630px;
+  height: 576px;
+  top: 61px;
+
 }
-.header, .aside, .main, footer {
+.aside, .header, .main, .footer {
   border: black solid 1px;
 }
+.header, .main, .footer {
+  width: 1098px;
+  right: 0;
+}
+
 </style>

src/router/index.js

@@ -9,8 +9,9 @@ const router = createRouter({
     history: createWebHashHistory(),
     routes: [
         {
+            // 重定向至面板主页
             path: '/',
-            redirect: '/panel'
+            redirect: '/login'
         },
         {
             path: '/panel',