From 7fafbc75e4d8fedb11725c6351a8d959d9050817 Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 15:47:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAMenuLogo=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E5=AD=98=E6=94=BE=E9=A1=B9=E7=9B=AElogo=E5=92=8Ctitle=20?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=BA=E5=85=B6=E8=AE=BE=E7=BD=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

调整适应样式
---
 order-system/src/layout/Menu.vue     |  8 ++++++
 order-system/src/layout/MenuLogo.vue | 41 ++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 order-system/src/layout/MenuLogo.vue

diff --git a/order-system/src/layout/Menu.vue b/order-system/src/layout/Menu.vue
index 5756a91..d3989f7 100644
--- a/order-system/src/layout/Menu.vue
+++ b/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">
diff --git a/order-system/src/layout/MenuLogo.vue b/order-system/src/layout/MenuLogo.vue
new file mode 100644
index 0000000..e6e5cac
--- /dev/null
+++ b/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>
\ No newline at end of file