出事页面配置效果

src/App.vue

@@ -1,21 +1,23 @@
 <template>
   <a-layout>
-    <a-layout-sider>
-      中间值
+    <a-layout-sider style="background-color: rgba(0,81,255,0.57);">
+
     </a-layout-sider>
     <a-layout>
-      <a-layout-header>Header</a-layout-header>
-      <a-layout-content>Content</a-layout-content>
-      <a-layout-footer>Footer</a-layout-footer>
+      <a-layout-header style="background-color: rgba(188,245,179,0.69);">
+        <header-view></header-view>
+      </a-layout-header>
+      <a-layout-content>
+        <router-view></router-view>
+      </a-layout-content>
+      <a-layout-footer style="background-color: azure">Footer</a-layout-footer>
     </a-layout>
   </a-layout>
 </template>
 <style>
-.ant-layout-sider {
-  background-color: lightgreen;
-}
-.ant-layout-header {
-  background-color: blue;
-  color: white;
-}
-</style>
+
+
+</style>
+<script setup>
+import HeaderView from "@/views/HeaderView.vue";
+</script>

src/views/HeaderView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <h1>不可被察觉 不可被认知,明月会给出解释</h1>
+  </div>
+</template>
+
+<style >
+
+</style>