。。

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import './style.css'
+import './style.scss'
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'

src/style.scss

@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  font-size:18px;
 }
 
 h1 {
@@ -81,3 +82,20 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+.el-header {
+background: #ddd;
+  position: relative;
+ 
+  .right-menu {
+    position: absolute;
+    right:20px;
+    height:60px;
+    line-height: 60px;
+  }
+  .middle-menu {
+    height:60px;
+    position: absolute;
+    left:50%;
+    line-height: 60px;
+  }
+}

src/views/Home.vue

@@ -1,10 +1,10 @@
 <template>
     <el-container>
         <el-header>
-            <el-card>
-                项目管理
+            <div class="middle-menu">项目管理</div>
+            <div class="right-menu">
                 <el-button type="danger" @click="logout">退出</el-button>
-            </el-card>
+            </div>
         </el-header>
         <el-main>
             <el-card class="home-div">
@@ -61,7 +61,7 @@
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, SwitchButton } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import myApi from "@/api/myApi.js";
 import { useRouter } from 'vue-router'

src/views/Room.vue

@@ -1,9 +1,7 @@
 <template>
     <el-container>
         <el-header>
-            <el-card>
-                项目编辑
-            </el-card>
+            <div class="middle-menu">项目编辑</div>
         </el-header>
         <el-main>
             <div class="room-div">
@@ -574,6 +572,10 @@ const radioGroup5 = reactive([
             .el-divider {
                 background-color: #409eff;
             }
+            .room-list {
+                height: 60%;
+                overflow: auto;
+            }
         }
     }