16.后台页面布局和重定向之后台首页

src/assets/admin/css/home.css

@@ -0,0 +1,48 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 14px;
+}
+
+a {
+    outline: none;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+ul,
+li {
+    list-style: none;
+}
+
+/*.dr-home */
+.dr-home {
+    display: flex;
+    flex-direction: column; /* 容器内元素从上至下排列 */
+    height: 100vh;
+}
+
+.dr-home .header {
+    display: flex;
+    height: 55px;
+    background: #393d49;
+}
+
+.dr-home .main {
+    display: flex;
+    height: calc(100vh - 55px); /* 减去 header 高度  */
+}
+
+.dr-home .main .side {
+    width: 200px;
+    background: #545c64;
+}
+
+.dr-home .main .content {
+    padding: 5px;
+    flex: 1;
+    overflow-y: auto;
+}

src/router/index.js

@@ -1,6 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router"
 import {useAdminStore} from "@/stores/admin/admin.js";
 const routes= [
+    {
+        path: "/",  //http://localhost:5173/
+        redirect: "/admin" //重定向
+    },
     {
         path: "/login", // http://localhost:5173/login
         component: () => import("@/views/admin/login.vue")

src/views/admin/home.vue

@@ -1,9 +1,23 @@
 <script setup>
+import '@/assets/admin/css/home.css' //导入央视
 
 </script>
 
 <template>
-  <h3>后台页面</h3>
+  <div class="dr-home">
+    <div class="header">
+
+    </div>
+    <div class="main">
+      <div class="side">
+
+      </div>
+
+      <div class="content">
+
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>