diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d89ee8c4833d5972293125ae111ea45d41f2e83
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d398e16fe92958b4b2a7b84a1e7fd7f6678402f3
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanSearch: typeof import('vant/es')['Search']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTabs: typeof import('vant/es')['Tabs']
+  }
+}
diff --git a/package.json b/package.json
index 5775601b664385cf1bc4dd4877a953f096f00426..a210daccafa8f4c3492105889462de0319932fc5 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,15 @@
   },
   "dependencies": {
     "@vant/compat": "1",
+    "@vueuse/core": "^10.11.0",
     "animate": "^1.0.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
     "less": "^4.2.0",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
+    "sass": "^1.77.6",
+    "socket.io-client": "^4.7.5",
     "vant": "4",
     "vue": "^3.4.29",
     "vue-router": "^4.4.0"
diff --git a/public/send.png b/public/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..798f3601e115730cc02797de7f2eb864a4db7165
Binary files /dev/null and b/public/send.png differ
diff --git a/public/zhangjie.jpg b/public/zhangjie.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..49d2fd9dcd6b08eb1f7ba2696c5b06aedffc5f35
Binary files /dev/null and b/public/zhangjie.jpg differ
diff --git a/src/main.js b/src/main.js
index 0a9cb76f3aeee41ae680cb2e97d7655c74587a91..2183b67ff4995ceab29c027ea7d1cc65d716819b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-// import Vant from 'vant';
+import Vant from 'vant';
 import 'vant/lib/index.css';
 import { createPinia } from 'pinia'
 
@@ -10,5 +10,5 @@ const app = createApp(App)
 
 app.use(pinia)
 app.use(router)
-// app.use(Vant);
+app.use(Vant);
 app.mount('#app')
diff --git a/src/request.js b/src/request.js
index 772db9c8d252f5ae3534fdc3841f2a72f9024658..32a8681e74a3f8fe53e5180231d52ff205b6a224 100644
--- a/src/request.js
+++ b/src/request.js
@@ -9,6 +9,34 @@ import emitt from './tools/emitt'
     ——————需要标注代码注释，越详细越好——————
 */
 
+// 获取用户信息
+export const getUserInfo = async(userId)=>{
+    const res = await axios.get(`/users/userInfo?userId=${userId}`)
+    return res.data.data
+}
+
+
+// 获取聊天室的信息
+export const getConversation = async (friendId,userId)=>{
+    const res = await axios.get(`/conv/find/${friendId}/${userId}`)
+    return res.data
+}
+
+//获取到当前聊天室的所有消息
+export const getMessage = async (conversationId)=>{
+    const res = await axios.get('/mess/' + conversationId)
+    return res.data
+}
+
+// 发送消息
+export const sendMessage = async (message)=>{
+    try{
+        const res = await axios.post('/mess',message)
+        return res.data
+    }catch (err){
+        console.log(err)
+    }
+}
 //登入--邵文凯
 export const loginAPI = async(params) => axios.post('/phoneLogin', params)
 
@@ -25,4 +53,4 @@ export const PsswordLoginAPI = async(params) => axios.post('/PsswordLoginAPI', p
 export const updatePasswordAPI = async(params) => axios.put('/updatePasswordAPI', params)
 
 //找回密码--邮箱找回--邵文凯
-export const EmailUpdatePasswordAPI = async(params) => axios.put('/EmailUpdatePasswordAPI', params)
\ No newline at end of file
+export const EmailUpdatePasswordAPI = async(params) => axios.put('/EmailUpdatePasswordAPI', params)
diff --git a/src/router/index.js b/src/router/index.js
index ad55d0c8458bfec0eb16415fdbb5ad3d7e3cb20f..18faf08ba9bb03c829a53e31790b85dadad4101a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,6 +71,10 @@ const routes = [
     path: "/search",
     component: () => import("../views/gzt_Home/Search.vue") //搜索页面---郭周童负责
   },
+  {
+    path:"/message",
+    component: () => import('../views/ssb_Message/component/message/Message.vue') //消息内容页面---孙少波
+  },
   {
     path:"/video/video_search",
     component:import ("../views/wk_Video/wk_Video_search.vue")
diff --git a/src/views/gzt_Home/components/BlogList.vue b/src/views/gzt_Home/components/BlogList.vue
index 4bfd9faaef8724487dc119e2ad6c54988046527d..0f00426d52d5b4078408b47e43bc3214dd9434af 100644
--- a/src/views/gzt_Home/components/BlogList.vue
+++ b/src/views/gzt_Home/components/BlogList.vue
@@ -21,7 +21,7 @@
         </div>
         <div class="blog-picture">
           <img
-            src="../../../../public/e639994661714beca0075b5399e395e4.jpeg"
+            src="/e639994661714beca0075b5399e395e4.jpeg"
             alt=""
             class="blog-img"
           />
diff --git a/src/views/ssb_Message/Message.vue b/src/views/ssb_Message/Message.vue
index 2376542c7010662c507b519120a13dfd924becec..6478d88622829471b65efe9f98747d3a29c6526f 100644
--- a/src/views/ssb_Message/Message.vue
+++ b/src/views/ssb_Message/Message.vue
@@ -1,10 +1,44 @@
 <template>
-  <div>消息</div>
+  <div class="my_message">
+    <div class="message_top">
+      <div class="message_title">消息</div>
+      <div class="message_set"><van-icon name="ellipsis" /></div>
+    </div>
+    <div class="message_nav">
+      <div class="message_nav_item">
+        <van-icon name="chat-o" size="26" class="item_icon" />
+        <div class="item_child">回复我的</div>
+      </div>
+      <div class="message_nav_item">
+        <van-icon name="envelop-o" size="26" class="item_icon" />
+        <div class="item_child">@我</div>
+      </div>
+      <div class="message_nav_item">
+        <van-icon name="good-job-o" size="26" class="item_icon" />
+        <div class="item_child">被赞</div>
+      </div>
+      <div class="message_nav_item">
+        <van-icon name="contact-o" size="26" class="item_icon" />
+        <div class="item_child">粉丝</div>
+      </div>
+    </div>
+    <div v-for="item in userInfo.follow" :key="item">
+      <Chat :followId="item" />
+    </div>
+  </div>
 </template>
-  
-  <script setup>
-  
-  </script>
-  
-  <style scoped>
-</style>
\ No newline at end of file
+
+<script setup>
+import "./style/Message.scss";
+import { ref, onMounted } from "vue";
+import Chat from "./component/chat/Chat.vue";
+import { getUserInfo } from "../../request";
+let userInfo = ref({});
+//获取到用户ID
+let userId = localStorage.getItem("userId");
+onMounted(() => {
+  getUserInfo(userId).then((res) => {
+    userInfo.value = res;
+  });
+});
+</script>
diff --git a/src/views/ssb_Message/component/Info/Info.scss b/src/views/ssb_Message/component/Info/Info.scss
new file mode 100644
index 0000000000000000000000000000000000000000..330dbfc2c91c4b271597a0f71c6e2167a33a74a0
--- /dev/null
+++ b/src/views/ssb_Message/component/Info/Info.scss
@@ -0,0 +1,28 @@
+.info{
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0px;
+    .info_top{
+        display: flex;
+        img{
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin: 0px 10px;
+        }
+        .info_text{
+            padding: 10px;
+            border-radius: 10px;
+            max-width: 230px;
+            background-color: white;
+        }
+    }
+}
+.info.own{
+    align-items: flex-end;
+    .info_text {
+        color: black;
+        background-color: #89d961;
+    }
+}
\ No newline at end of file
diff --git a/src/views/ssb_Message/component/Info/Info.vue b/src/views/ssb_Message/component/Info/Info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..11b685ca1524b75f48dfb94be206351650466503
--- /dev/null
+++ b/src/views/ssb_Message/component/Info/Info.vue
@@ -0,0 +1,36 @@
+<template>
+  <div :class="own ? 'info own' : 'info'">
+    <div class="info_top">
+      <img
+        :src="friend ? friend.img : '/zhangjie.jpg'"
+        alt=""
+        :style="{ display: own ? 'none' : 'block' }"
+      />
+      <p class="info_text">{{ obj.text }}</p>
+      <img
+        :src="user ? user.img : '/zhangjie.jpg'"
+        alt=""
+        :style="{ display: own ? 'block' : 'none' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "./Info.scss";
+import { onMounted, ref } from "vue";
+import { getUserInfo } from "../../../../request";
+const { obj, own, friend } = defineProps({
+  obj: Object,
+  own: Boolean,
+  friend: Object,
+});
+// 获取当前用户信息
+let userId = localStorage.getItem("userId");
+let user = ref(null);
+onMounted(() => {
+  getUserInfo(userId).then((res) => {
+    user.value = res;
+  });
+});
+</script>
diff --git a/src/views/ssb_Message/component/chat/Chat.vue b/src/views/ssb_Message/component/chat/Chat.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48d67d560561aff14e33a942d16780c7969d3e2b
--- /dev/null
+++ b/src/views/ssb_Message/component/chat/Chat.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="chat"
+    @click="router.push({ path: '/message', query: { friendId: friend._id } })"
+  >
+    <div>
+      <img :src="friend.img ? friend.img : '/zhangjie.jpg'" alt="" />
+    </div>
+    <div class="chat_count">
+      <div class="count_title">
+        <h4>{{ friend.username }}</h4>
+        <span>2024-12-26</span>
+      </div>
+      <div class="count_message">
+        <div>你好，你能将PRD模板链接能共享一下吗？</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "./chat.scss";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { getUserInfo } from "../../../../request";
+const followId = defineProps(["followId"]);
+const router = useRouter();
+
+const friend = ref({});
+
+//获取朋友的基本信息
+onMounted(() => {
+  getUserInfo(followId.followId).then((res) => {
+    friend.value = res;
+  });
+});
+</script>
diff --git a/src/views/ssb_Message/component/chat/chat.scss b/src/views/ssb_Message/component/chat/chat.scss
new file mode 100644
index 0000000000000000000000000000000000000000..12dc33b3e08011cf8761e53940ec1550d4b56e58
--- /dev/null
+++ b/src/views/ssb_Message/component/chat/chat.scss
@@ -0,0 +1,34 @@
+.chat{
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    img{
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+   .count_title{
+    width: 300px;
+    display: flex;
+    justify-content: space-between;
+    h4{
+        font-weight: 500;
+    }
+    span{
+        color:gray;
+        font-size: 14px;
+    }
+   }
+   .count_message{
+        div{
+            width: 285px;
+            color:gray;
+            font-size: 14px;
+            white-space: nowrap; /* 确保文本在一行内显示 */
+            overflow: hidden; /* 隐藏溢出的内容 */
+            text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
+         }
+    }
+}
\ No newline at end of file
diff --git a/src/views/ssb_Message/component/message/Message.vue b/src/views/ssb_Message/component/message/Message.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9198127e214bb23e62e9066e660ad5b8f02c3720
--- /dev/null
+++ b/src/views/ssb_Message/component/message/Message.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="message">
+    <van-nav-bar
+      :title="friend.username"
+      left-arrow
+      @click-left="onClickLeft"
+    />
+    <div class="message_content" v-bind="containerProps">
+      <div v-bind="wrapperProps">
+        <div
+          v-for="(item, index) in list"
+          :key="item.data._id"
+          class="message_item"
+        >
+          <div class="info">
+            <p
+              v-if="
+                (new Date(item.data.createdAt) -
+                  new Date(list[index - 1]?.data.createdAt)) /
+                  (1000 * 60) >
+                5
+              "
+              class="time"
+            >
+              {{ dayjs(item.data.createdAt).format("YYYY-MM-DD HH:mm") }}
+            </p>
+            <Info
+              :own="item.data.sender == userId"
+              :obj="item.data"
+              :friend="friend"
+            />
+          </div>
+        </div>
+        <div v-if="message.length == 0" class="messageNo">
+          您们已经互相关注，打个招呼吧
+        </div>
+      </div>
+    </div>
+    <div class="message_bottom">
+      <div>
+        <input type="text" v-model="text" @keyup.enter="handleSubmit" />
+      </div>
+      <div><img src="/send.png" alt="" @click="handleSubmit" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "./message.scss";
+import { ref, onMounted, watch, nextTick } from "vue";
+import { useVirtualList } from "@vueuse/core";
+import { useRouter, useRoute } from "vue-router";
+import Info from "../Info/Info.vue";
+import { io } from "socket.io-client";
+import {
+  getConversation,
+  getUserInfo,
+  getMessage,
+  sendMessage,
+} from "../../../../request.js";
+import dayjs from "dayjs";
+
+const router = useRouter();
+const route = useRoute();
+const onClickLeft = () => {
+  router.back(-1);
+};
+
+//获取到用户Id
+let userId = localStorage.getItem("userId");
+// 根据路由传参获取到朋友的ID
+const friendId = route.query.friendId;
+
+//朋友的信息
+let friend = ref({});
+
+//获取到当前聊天室的信息
+let conversation = ref({});
+
+// 聊天信息
+let message = ref([]);
+
+//发送的消息
+let text = ref("");
+
+//连接socket
+const socket = io("ws://localhost:8900");
+
+socket.on("getMessage", (data) => {
+  data.text = data.message;
+  message.value.push(data);
+});
+
+onMounted(async () => {
+  socket.emit("addUser", userId);
+  await nextTick();
+  scrollTo(message.value.length - 1); // 滚动到最后一项
+});
+socket.on("getUsers", (users) => {
+  console.log(users);
+});
+
+// 发送消息
+const handleSubmit = () => {
+  if (text.value.trim()) {
+    const newMessage = {
+      sender: userId,
+      text: text.value,
+      conversationId: conversation.value._id,
+    };
+
+    socket.emit("sendMessage", {
+      senderId: userId,
+      receiverId: friendId,
+      message: text.value,
+    });
+
+    sendMessage(newMessage).then((res) => {
+      message.value.push(res);
+      text.value = "";
+    });
+  }
+};
+
+onMounted(() => {
+  //获取到朋友的基本信息
+  getUserInfo(friendId).then((res) => {
+    friend.value = res;
+  });
+  // 获取到聊天室的信息
+  getConversation(friendId, userId)
+    .then((res) => {
+      conversation.value = res;
+      return conversation;
+    })
+    .then((res) => {
+      getMessage(res.value._id).then((res) => {
+        message.value = res;
+      });
+    });
+});
+
+// 虚拟列表
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+  message,
+  {
+    // Keep `itemHeight` in sync with the item's row.
+    itemHeight: 60,
+  }
+);
+
+// 当新消息到达时滚动到最新消息
+watch(
+  message,
+  async () => {
+    await nextTick();
+    scrollTo(message.value.length - 1); // 滚动到最后一项
+  },
+  { deep: true }
+);
+</script>
diff --git a/src/views/ssb_Message/component/message/message.scss b/src/views/ssb_Message/component/message/message.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f2cf3120ff7d4ed4921f306f9d652a8ba1805d4
--- /dev/null
+++ b/src/views/ssb_Message/component/message/message.scss
@@ -0,0 +1,47 @@
+.message{
+    height: 100vh;
+    background-color: rgb(244, 238, 238);
+    .message_content{
+        height: calc(100vh - 100px);
+        box-sizing: border-box;
+        overflow-y: auto;
+        .message_item{
+            height: 50px;
+            .info{
+                .time{
+                    color: gray;
+                    font-size: 14px;
+                    text-align: center;
+                    box-sizing: border-box;
+                }
+            }
+        }
+        .messageNo{
+            padding: 10px;
+            text-align: center;
+            font-size: 14px;
+            box-sizing: border-box;
+        }
+    }
+    .message_bottom{
+        width: 100vw;
+        height: 50px;
+        position: fixed;
+        bottom: 0px;
+        padding: 10px 15px;
+        display:flex;
+        box-sizing: border-box;
+        background-color:white;
+        input{
+            width: 300px;
+            height: 30px;
+            outline: none;
+            text-indent: 10px;
+            border-radius: 10px;
+            border: 1px solid salmon;
+        }
+        img{
+            width: 35px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/ssb_Message/style/Message.scss b/src/views/ssb_Message/style/Message.scss
new file mode 100644
index 0000000000000000000000000000000000000000..676dc3199f366685a48be26c50e0f2de39782bde
--- /dev/null
+++ b/src/views/ssb_Message/style/Message.scss
@@ -0,0 +1,35 @@
+.my_message{
+    .message_top{
+        display: flex;
+        padding: 10px;
+        box-sizing: border-box;
+        justify-content: flex-end;
+        .message_title{
+            width: 90%;
+            font-size: 16px;
+            font-weight: 500;
+            text-align: center;
+        }
+    }
+    .message_nav{
+        width: 95%;
+        display: flex;
+        padding: 10px;
+        margin: 0px auto;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+        justify-content: space-between;
+        border-bottom: 2px solid rgb(240, 237, 237);
+        .message_nav_item{
+            width: 20%;
+            text-align: center;
+            .item_icon{
+                margin-bottom: 5px;
+            }
+            .item_child{
+                font-size: 13px;
+            }
+        }
+    }
+}
+