Add: 搜索框上面增加用户头像和昵称

src/views/MeetPandaFirstPageView.vue

@@ -5,6 +5,13 @@
     </div>
 
     <div class="main-content">
+      <div class="user-avatars-section">
+        <div v-for="user in topUsers" :key="user.id" class="user-avatar-item">
+          <img :src="user.avatar" :alt="user.name" class="top-user-avatar" />
+          <div class="top-user-nickname">{{ user.nickname }}</div>
+        </div>
+      </div>
+
       <div class="search-section">
         <div class="search-box">
           <input 
@@ -79,6 +86,49 @@ const router = useRouter()
 
 const searchQuery = ref('')
 
+const topUsers = ref([
+  {
+    id: 1,
+    name: '张三',
+    nickname: '旅行达人',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
+    status: 'online',
+    statusText: '在线'
+  },
+  {
+    id: 2,
+    name: '李四',
+    nickname: '美食博主',
+    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
+    status: 'online',
+    statusText: '在线'
+  },
+  {
+    id: 3,
+    name: '王五',
+    nickname: '摄影爱好者',
+    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
+    status: 'online',
+    statusText: '在线'
+  },
+  {
+    id: 4,
+    name: '赵六',
+    nickname: '攻略达人',
+    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop',
+    status: 'offline',
+    statusText: '离线'
+  },
+  {
+    id: 5,
+    name: '孙七',
+    nickname: '城市探索者',
+    avatar: 'https://images.unsplash.com/photo-1438761681033-6361e6a8b?w=100&h=100&fit=crop',
+    status: 'online',
+    statusText: '在线'
+  }
+])
+
 const hotTags = ref([
   '洛杉矶旅游',
   '美食推荐',
@@ -215,6 +265,40 @@ const showComments = (dynamic) => {
   text-align: center;
 }
 
+.user-avatars-section {
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.user-avatar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.top-user-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #42b883;
+}
+
+.top-user-nickname {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  max-width: 100%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .main-content {
   padding: 16px;
 }