diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue
index 26f30a6..47139f0 100644
--- a/src/components/message/SessionBox.vue
+++ b/src/components/message/SessionBox.vue
@@ -2,16 +2,22 @@
 import { ref } from 'vue'
 import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
+import UserCard from '../user/UserCard.vue'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 
 const props = defineProps(['user'])
 const isPinToTop = ref(false)
 const isMute = ref(false)
+const isShowUserCard = ref(false)
+
+const handleUserCard = (flag) => {
+  isShowUserCard.value = flag
+}
 </script>
 
 <template>
   <div class="session-box">
-    <AvatarIcon :user="props.user"></AvatarIcon>
+    <AvatarIcon :user="props.user" @click="isShowUserCard = true"></AvatarIcon>
     <div class="content-box">
       <div class="header">
         <div class="title">
@@ -49,6 +55,7 @@ const isMute = ref(false)
       </div>
     </div>
   </div>
+  <UserCard :isShow="isShowUserCard" @update:isShow="handleUserCard" :user="props.user"></UserCard>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/navigate/MyCard.vue b/src/components/navigate/MyCard.vue
index 0edc537..9d885ce 100644
--- a/src/components/navigate/MyCard.vue
+++ b/src/components/navigate/MyCard.vue
@@ -85,7 +85,8 @@ defineExpose({
     z-index: 1;
 
     &:hover {
-      color: red;
+      color: #fff;
+      background-color: red;
     }
   }
 
@@ -121,6 +122,7 @@ defineExpose({
       font-size: 16px;
       text-align: center;
       color: black;
+      font-weight: bold;
     }
 
     .signature {
diff --git a/src/components/user/UserCard.vue b/src/components/user/UserCard.vue
new file mode 100644
index 0000000..ca72354
--- /dev/null
+++ b/src/components/user/UserCard.vue
@@ -0,0 +1,237 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { Close, Male, Female } from '@element-plus/icons-vue'
+
+const props = defineProps(['isShow', 'user'])
+const emit = defineEmits(['update:isShow'])
+
+const isLoading = ref(false)
+const userCardRef = ref()
+
+const preventClose = (event) => {
+  event.stopPropagation()
+}
+
+const closeCardIfOutside = (event) => {
+  if (!event.target.closest('.user-card') && !event.target.closest('.avatar-box') && props.isShow) {
+    emit('update:isShow', false)
+  }
+}
+
+const truncatedSignature = computed(() => {
+  const signature = props.user.signature || 'TA还没有个性签名。'
+  const lengthLimit = 50
+  return signature.length > lengthLimit ? signature.slice(0, lengthLimit) + '...' : signature
+})
+
+// 关闭的时候触发
+const onClose = () => {
+  console.log('onClose')
+  isLoading.value = false
+  emit('update:isShow', false)
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeCardIfOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeCardIfOutside)
+})
+</script>
+
+<template>
+  <div ref="userCardRef">
+    <transition name="fade">
+      <div v-if="isShow" class="overlay"></div>
+    </transition>
+    <transition name="fade">
+      <div
+        class="user-card"
+        v-if="isShow"
+        @update:isShow="emit('update:isShow', false)"
+        @click.self="preventClose($event)"
+      >
+        <div class="header">
+          <el-icon class="close-button" @click="onClose"><Close /></el-icon>
+          <div class="main">
+            <el-avatar class="avatar" :src="props.user.avatarThumb" />
+            <div class="gender">
+              <el-icon v-if="props.user.sex === 1" color="#508afe"><Male /></el-icon>
+              <el-icon v-if="props.user.sex === 2" color="#ff5722"><Female /></el-icon>
+            </div>
+            <div class="nickname text-ellipsis">{{ props.user.nickName || '未设置昵称' }}</div>
+          </div>
+        </div>
+
+        <div class="body">
+          <el-text class="signature">
+            {{ truncatedSignature }}
+          </el-text>
+          <div class="info-item phone">
+            <span class="label">手机：</span>
+            <space class="value">{{ props.user.phoneNum || '-' }}</space>
+          </div>
+          <div class="info-item email">
+            <span class="label">邮箱：</span>
+            <space class="value">{{ props.user.email || '-' }}</space>
+          </div>
+          <div class="info-item email">
+            <span class="label">驻地：</span>
+            <space class="value">{{ props.user.base || '-' }}</space>
+          </div>
+          <div class="info-item nickname">
+            <span class="label">部门：</span>
+            <space class="value">{{ props.user.organize || '-' }}</space>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-card {
+  width: 300px;
+  height: 500px;
+  border-radius: 10px;
+  padding: 0px;
+  box-shadow: 2px 2px 20px gray;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+
+  .header {
+    width: 100%;
+    height: 200px;
+    background: linear-gradient(to bottom, #a0cfff, #ecf5ff);
+
+    &::before {
+      width: 150px;
+      height: 150px;
+      content: '';
+      background: linear-gradient(to right, #79bbff, #fff);
+      position: absolute;
+      z-index: 1;
+      border-radius: 50%;
+      right: -25%;
+      top: -15%;
+    }
+
+    .close-button {
+      color: gray;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      z-index: 1;
+
+      &:hover {
+        color: #fff;
+        background-color: red;
+      }
+    }
+
+    .main {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      .avatar {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        top: 40px;
+      }
+
+      .gender {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left: 190px;
+        top: 125px;
+        border-radius: 50%;
+      }
+
+      .nickname {
+        position: absolute;
+        top: 160px;
+        width: 80%;
+        height: 24px;
+        font-size: 16px;
+        text-align: center;
+        color: black;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .body {
+    width: 100%;
+    height: 300px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .signature {
+      width: 80%;
+      margin-top: 16px;
+      margin-bottom: 10px;
+      padding: 5px;
+      border-radius: 4px;
+      background-color: #f5f5f5;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      white-space: normal; //允许文本内容自动换行
+      user-select: text;
+    }
+
+    .info-item {
+      margin-top: 10px;
+      width: 80%;
+      display: flex;
+      font-size: 15px;
+
+      .label {
+        color: #909399;
+        flex-shrink: 0;
+      }
+
+      .value {
+        margin-left: 10px;
+        color: #409eff;
+      }
+    }
+  }
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 58f37b3..f2d3b20 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -1,12 +1,12 @@
+<!-- eslint-disable prettier/prettier -->
 <script setup>
 import { ref } from 'vue'
 import DragLine from '@/components/common/DragLine.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import AddBotton from '@/components/common/AddBotton.vue'
 import SessionBox from '@/components/message/SessionBox.vue'
-import { userStore, settingStore } from '@/stores'
+import { settingStore } from '@/stores'
 
-const userData = userStore()
 const settingData = settingStore()
 const asideWidth = ref(settingData.sessionListDrag || 200)
 const widthMin = 200
@@ -16,6 +16,59 @@ const onDragUpdate = ({ width }) => {
   asideWidth.value = width
   settingData.setSessionListDrag(width)
 }
+
+const testUsers = [
+  {
+    account: 'a123456',
+    avatar: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/fc0eff1f-ac2e-4a09-abd0-f834615137e7/微信图片_20240327170045.jpg',
+    avatarThumb: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/e1c5b5d3-17d5-4603-9a3e-6985142455e3/微信图片_20240327170045-thumb.jpg',
+    birthday: '2000-01-01',
+    email: '312777916@qq.com',
+    level: 1,
+    nickName: '我是Bob呀！',
+    phoneNum: '13511111111',
+    sex: 1,
+    signature: '真的要坚持，才会有希望啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
+    organize: '消费者BG/2012实验室/海斯开发部/运营部/西安项目组/第五小组',
+    base: '西安'
+  },
+  {
+    account: 'Asdasdasd',
+    avatar: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/fc0eff1f-ac2e-4a09-abd0-f834615137e7/微信图片_20240327170045.jpg',
+    avatarThumb: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/e1c5b5d3-17d5-4603-9a3e-6985142455e3/微信图片_20240327170045-thumb.jpg',
+    birthday: '2000-01-01',
+    email: '312777916@qq.com',
+    level: 1,
+    nickName: '我是A',
+    phoneNum: '13511111111',
+    sex: 1,
+    signature: ''
+  },
+  {
+    account: 'Bsdasdasd',
+    avatar: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/fc0eff1f-ac2e-4a09-abd0-f834615137e7/微信图片_20240327170045.jpg',
+    avatarThumb: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/e1c5b5d3-17d5-4603-9a3e-6985142455e3/微信图片_20240327170045-thumb.jpg',
+    birthday: '2000-01-01',
+    email: '312777916@qq.com',
+    level: 1,
+    nickName: '我是B',
+    phoneNum: '13511111111',
+    sex: 1,
+    signature: 'AAAAAAAAAAAA'
+  },
+  {
+    account: 'Csdasdasd',
+    avatar: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/fc0eff1f-ac2e-4a09-abd0-f834615137e7/微信图片_20240327170045.jpg',
+    avatarThumb: 'http://127.0.0.1:9001/anyim/IMAGE/20240831/e1c5b5d3-17d5-4603-9a3e-6985142455e3/微信图片_20240327170045-thumb.jpg',
+    birthday: '2000-01-01',
+    email: '312777916@qq.com',
+    level: 1,
+    nickName: '我是C',
+    phoneNum: '13511111111',
+    sex: 1,
+    signature: 'AAAAAAAAAAAA'
+  },
+]
 </script>
 
 <template>
@@ -27,10 +80,7 @@ const onDragUpdate = ({ width }) => {
           <AddBotton></AddBotton>
         </div>
         <div class="session-list">
-          <SessionBox :user="userData.user"></SessionBox>
-          <SessionBox
-            :user="{ account: '22asdsss', avatarThumb: '', nickName: '李寻欢欢欢欢欢欢欢欢欢' }"
-          ></SessionBox>
+          <SessionBox v-for="user in testUsers" :key="user.account" :user="user"></SessionBox>
         </div>
       </div>