创建MenuLogo文件

存放项目logo和title
并为其设置样式

将MenuLogo文件引入到Menu中
将logo和title放置在menu菜单栏顶部

调整适应样式

order-system/src/layout/Menu.vue

@@ -1,4 +1,9 @@
 <template>
+
+  <!-- 菜单logo区域 -->
+  <MenuLogo></MenuLogo>
+
+  <!-- 菜单区域 -->
   <el-menu background-color="#00c6bf" default-active="1" class="el-menu-vertical-demo">
   <!-- 注释掉暂时不需要的多余属性 -->
     <!-- <el-sub-menu index="1">
@@ -62,6 +67,9 @@
 
   // 局部引入菜单栏中所有选项的图标
   import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 
+
+  // 引入MenuLogo
+  import MenuLogo from './MenuLogo.vue'
 </script>
 
 <style scoped lang="scss">

order-system/src/layout/MenuLogo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="logo">
+    <img :src="MenuLogo">
+    <span class="logo-title">{{ title }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  const MenuLogo = ref(
+    "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png"
+  );
+
+  const title = ref('校园点餐系统')
+</script>
+
+<style scoped lang="scss">
+  .logo{
+    display: flex;
+    width: 100%;
+    height: 60px;//高度与头部区域header对应
+    line-height: 60px;
+    text-align: center;
+    align-items: center;
+    background-color: #00c6bf;
+    cursor: pointer;
+    img{
+      width: 36px;
+      height: 36px;
+      margin-left: 20px;
+      margin-right: 12px;
+    }
+  }
+
+  .logo-title{
+    color: #fff;
+    font-size: 25px;
+    font-weight: 800;
+    font-family: FangSong;
+  }
+</style>