diff --git a/order-system/src/assets/user.png b/order-system/src/assets/user.png
new file mode 100644
index 0000000..c486256
Binary files /dev/null and b/order-system/src/assets/user.png differ
diff --git a/order-system/src/layout/header/LoginOut.vue b/order-system/src/layout/header/LoginOut.vue
index 48c7041..33469ec 100644
--- a/order-system/src/layout/header/LoginOut.vue
+++ b/order-system/src/layout/header/LoginOut.vue
@@ -1,13 +1,36 @@
 <template>
-  <div>
-    退出登录
-  </div>
+
+  <!-- 添加下拉菜单组件 -->
+  <el-dropdown>
+    <span class="el-dropdown-link">
+      <!-- <img src="../../assets/user.png" alt=""> -->
+      <!-- 将下拉菜单文字替换为用户头像 -->
+      <img class="uimage" src="@/assets/user.png" alt="">
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>退出登录</el-dropdown-item>
+
+        <!-- 目前只需要退出登录功能，注释掉多余action -->
+        <!-- <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item disabled>Action 4</el-dropdown-item>
+        <el-dropdown-item divided>Action 5</el-dropdown-item> -->
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
 </template>
 
 <script setup lang="ts">
 
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+  // 为下拉菜单的图片添加样式
+  .uimage{
+    height: 45px;
+    width: 45px;
+    border-radius: 50%;
+    cursor: pointer;
+  }
 </style>
\ No newline at end of file