diff --git a/src/App.vue b/src/App.vue
index 66cb6e3..182863e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,6 @@ export default {
 #app {
   width: 100vw;
   height: 100vh;
-  background-color: rgb(151,157,167);
+  background-color: rgb(255, 255, 255);
 }
 </style>
\ No newline at end of file
diff --git a/src/App2.vue b/src/App2.vue
new file mode 100644
index 0000000..45b46a5
--- /dev/null
+++ b/src/App2.vue
@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <Home></Home>
+    
+  </div>
+</template>
+
+<script>
+import Home from './view/home.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Home
+  }
+}
+</script>
+
+<style lang="scss">
+@import url(./assets/font/iconfont.css);
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  font-size: 25px;
+  vertical-align: middle;
+  color: rgb(117,120,137);
+  transition: .3s;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(255, 255, 255);
+}
+</style>
\ No newline at end of file
diff --git a/src/assets/1.jpg b/src/assets/1.jpg
new file mode 100644
index 0000000..acc56b0
Binary files /dev/null and b/src/assets/1.jpg differ
diff --git a/src/assets/2.jpg b/src/assets/2.jpg
new file mode 100644
index 0000000..d554942
Binary files /dev/null and b/src/assets/2.jpg differ
diff --git a/src/assets/3.jpg b/src/assets/3.jpg
new file mode 100644
index 0000000..aceb672
Binary files /dev/null and b/src/assets/3.jpg differ
diff --git a/src/assets/4.jpg b/src/assets/4.jpg
new file mode 100644
index 0000000..478bf81
Binary files /dev/null and b/src/assets/4.jpg differ
diff --git a/src/assets/5.jpg b/src/assets/5.jpg
new file mode 100644
index 0000000..ad2b5fa
Binary files /dev/null and b/src/assets/5.jpg differ
diff --git a/src/assets/6.jpg b/src/assets/6.jpg
new file mode 100644
index 0000000..df03bb9
Binary files /dev/null and b/src/assets/6.jpg differ
diff --git a/src/assets/R.jpg b/src/assets/R.jpg
new file mode 100644
index 0000000..4b1902f
Binary files /dev/null and b/src/assets/R.jpg differ
diff --git a/src/assets/background-blue.jpg b/src/assets/background-blue.jpg
new file mode 100644
index 0000000..6fd0c66
Binary files /dev/null and b/src/assets/background-blue.jpg differ
diff --git a/src/assets/img/103.png b/src/assets/img/103.png
new file mode 100644
index 0000000..01eaa18
Binary files /dev/null and b/src/assets/img/103.png differ
diff --git a/src/assets/nero.png b/src/assets/nero.png
new file mode 100644
index 0000000..704ac7b
Binary files /dev/null and b/src/assets/nero.png differ
diff --git a/src/components/Emoji.vue b/src/components/Emoji.vue
index e1c70bb..06b55d7 100644
--- a/src/components/Emoji.vue
+++ b/src/components/Emoji.vue
@@ -69,10 +69,10 @@ export default {
   .emoji {
   width: 400px;
   height: 200px;
-  background-color: rgb(39, 42, 55);
+  background-color: white;
   position: absolute;
   top: -220px;
-  left: -10px;
+  left: 12px;
   border-radius: 10px;
   transition: 0.3s;
   z-index: 3;
@@ -82,7 +82,7 @@ export default {
     display: block;
     width: 0;
     height: 0;
-    border-top: 10px solid rgb(39, 42, 55);
+    border-top: 10px solid whitesmoke;
     border-right: 10px solid transparent;
     border-left: 10px solid transparent;
     position: absolute;
@@ -91,28 +91,31 @@ export default {
     z-index: 100;
   }
   .emoji-wrapper {
+    background-color: whitesmoke;
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     padding: 10px;
     box-sizing: border-box;
     position: relative;
+    border-radius: 5px;
     &::-webkit-scrollbar {
       /*滚动条整体样式*/
-      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
-      height: 1px;
+      width: 0; /* Safari,Chrome 隐藏滚动条 */
+      height: 0; /* Safari,Chrome 隐藏滚动条 */
+      display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
     }
     &::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
       border-radius: 10px;
       box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
-      background: rgb(95, 101, 122);
+      background: white;
     }
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
       border-radius: 10px;
-      background: rgb(39, 42, 55);
+      background: white;
     }
     .emoji-list {
       display: flex;
@@ -128,7 +131,7 @@ export default {
         position: relative;
         cursor: pointer;
         &:hover {
-          background-color: rgb(50, 54, 68);
+          background-color: rgba(128, 128, 128, 0.158);
         }
         img {
           width: 35px;
diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue
index d14ec48..dd05a39 100644
--- a/src/components/FileCard.vue
+++ b/src/components/FileCard.vue
@@ -42,7 +42,7 @@ export default {
 .file-card {
   width: 250px;
   height: 100px;
-  background-color: rgb(45, 48, 63);
+  background-color: rgb(255, 255, 255);
   border-radius: 20px;
   display: flex;
   justify-content: center;
@@ -51,7 +51,7 @@ export default {
   box-sizing: border-box;
   cursor: pointer;
   &:hover {
-    background-color: rgb(33, 36, 54);
+    background-color: rgb(8, 250, 226);
   }
   img {
     width: 60px;
@@ -64,7 +64,7 @@ export default {
     span {
       width: 90%;
       display: inline-block;
-      color: #fff;
+      color: #090000;
     }
     span:first-child {
       font-size: 14px;
@@ -74,7 +74,7 @@ export default {
     }
     span:last-child {
       font-size: 12px;
-      color: rgb(180, 180, 180);
+      color: rgb(10, 0, 0);
     }
   }
 }
diff --git a/src/components/HeadPortrait.vue b/src/components/HeadPortrait.vue
index b82e98f..534ad5c 100644
--- a/src/components/HeadPortrait.vue
+++ b/src/components/HeadPortrait.vue
@@ -18,7 +18,7 @@ export default {
     height: 50px;
     border-radius: 50%;
     // border: 2px solid rgb(137,140,151);
-    border: 2px solid rgb(255, 255, 255);
+    border: 2px solid rgb(12, 12, 12);
     position:relative;
     &::before {
         content: '';
diff --git a/src/components/Navi.vue b/src/components/Navi.vue
new file mode 100644
index 0000000..e223719
--- /dev/null
+++ b/src/components/Navi.vue
@@ -0,0 +1,56 @@
+<template>
+    <nav class="navbar">
+      <ul class="nav-links">
+        <li><router-link to="/ChatHome">首页</router-link></li>
+        <li><router-link to="/ReCommend">匹配推荐</router-link></li>
+        <li><router-link to="/LinVite1n">个人资料</router-link></li>
+        <li><router-link to="#">设置</router-link></li>
+      </ul>
+    </nav>
+  </template>
+  
+  <script>
+  export default {
+  }
+  </script>
+  
+  <style scoped>
+ * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+      .navbar {
+            width: 100%;
+            background-color: #0073e6;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            font-family: 'Open Sans', sans-serif;
+        }
+
+      .nav-links {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            height: 50px;
+        }
+
+      .nav-links li {
+            font-weight: 600;
+        }
+
+      .nav-links li a {
+            text-decoration: none;
+            color: white;
+            font-size: 25px;
+            transition: color 0.3s;
+            padding: 0 15px;
+        }
+
+      .nav-links li a:hover {
+            color: #d0e7ff;
+        }
+  </style>
\ No newline at end of file
diff --git a/src/components/PersonCard.vue b/src/components/PersonCard.vue
index 1a9e5f1..ebb4324 100644
--- a/src/components/PersonCard.vue
+++ b/src/components/PersonCard.vue
@@ -4,7 +4,7 @@
           <HeadPortrait :imgUrl="personInfo.headImg"></HeadPortrait>
           <div class="info-detail">
             <div class="name">{{ personInfo.name }}</div>
-            <div class="detail">{{ personInfo.detail }}</div>
+            <!-- <div class="detail">{{ personInfo.detail }}</div> -->
           </div>
 
     </div>
@@ -47,12 +47,11 @@ export default {
 
 <style lang="scss" scoped>
 .person-card {
-  width: 250px;
+  width: 280px;
   height: 80px;
-  border-radius: 10px;
-  background-color: rgb(50, 54, 68);
+  border-radius: 0px;
+  background-color: white;
   position: relative;
-  margin: 25px 0;
   cursor: pointer;
   .info {
     position: absolute;
@@ -66,14 +65,14 @@ export default {
       margin-top: 5px;
       margin-left: 20px;
       .name {
-        color: #fff;
+        color: #070707;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         margin-bottom: 5px;
       }
       .detail {
-        color: #5c6675;
+        color: #3f5f8f;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -84,7 +83,7 @@ export default {
   &:hover {
     background-color: #1d90f5;
     transition: 0.3s;
-    box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
+    // box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
     // box-shadow:  0 5px 20px rgba(251, 152, 11, .5);
     .info {
       .info-detail {
@@ -98,7 +97,7 @@ export default {
 .activeCard {
     background-color: #1d90f5;
     transition: 0.3s;
-    box-shadow: 3px 2px 10px 0px rgba(0, 136, 255);
+    // box-shadow: 3px 2px 10px 0px rgba(0, 136, 255);
     .info {
       .info-detail {
         .detail {
diff --git a/src/mock/index.js b/src/mock/index.js
index 56671f2..6d485d5 100644
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -44,6 +44,16 @@ let friendList = Mock.mock(
             headImg: require("@/assets/img/head_portrait3.jpg"),
 
         },
+        {
+            img: "",
+            name: "小红",
+            detail: "我是喜欢音乐的有趣灵魂",
+            lastMsg: "to do",
+            id: "1005",
+            headImg: require("@/assets/img/head_portrait1.jpg"),
+
+        },
+        
     ]
 )
 
diff --git a/src/router/index.js b/src/router/index.js
index 8946a79..84c4139 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,19 +4,40 @@ import ChatHome from '../view/pages/chatHome/index.vue'
 import Video from '../view/pages/video.vue'
 import Lingting from '../view/pages/lingting.vue'
 import Setting from '../view/pages/setting.vue'
-import ChatWindow from '../view/pages/chatHome/chatwindow.vue'
- 
+import LinVite1n from '../view/pages/LnVite1n.vue'
+import ReCommend from '../view/pages/ReCommend.vue'
+import LoginPage from '@/view/LoginPage.vue'
+
 export default new VueRouter({
+    mode: 'hash',
     routes: [
+        
+        
+        {
+            path:'/',
+            name: 'Login',
+            component:LoginPage
+        },
         {
-            path: "/",
-            redirect: "/ChatHome",
-          },
+            path: "/home",
+            name: "Home",
+            redirect: '/ChatHome'
+        },
         {
             path: "/ChatHome",
             name: "ChatHome",
             component: ChatHome,
         },    
+        {
+            path: "/LinVite1n",
+            name: "LinVite1n",
+            component: LinVite1n
+        }, 
+        {
+            path: "/Recommend",
+            name: "Recommend",
+            component: ReCommend
+        }, 
         {
             path: "/Video",
             name: "Video",
diff --git a/src/view/HelloWorld.vue b/src/view/HelloWorld.vue
new file mode 100644
index 0000000..e602596
--- /dev/null
+++ b/src/view/HelloWorld.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="hello">
+    <h1>mian首页</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+div {
+  background-color: aqua;
+  padding: 0;
+  margin: 0;
+}
+</style>
diff --git a/src/view/LoginPage.vue b/src/view/LoginPage.vue
new file mode 100644
index 0000000..23eab5f
--- /dev/null
+++ b/src/view/LoginPage.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="app-background">
+      <div class="login-container">
+        <div class="login-box">
+          <h1>欢迎登录</h1>
+          <form @submit.prevent="login">
+            <div class="input-group">
+              <label for="username">用户名:</label>
+              <input type="text" v-model="formData.username" id="username" required />
+            </div>
+            <div class="input-group">
+              <label for="password">密码:</label>
+              <input type="password" v-model="formData.password" id="password" required />
+            </div>
+            <button type="submit">登录</button>
+          </form>
+          <button @click="register" class="register-button">注册账号</button>
+        </div>
+      </div>
+    </div>
+  </template>
+<script>
+  import axios from 'axios';
+  export default {
+    data() {
+      return {
+        formData:{
+            username: '',
+            password: ''     
+        }
+        
+      };
+    },
+    methods: {
+      async login() {
+        
+        const response = await axios.post('http://127.0.0.1:8000/login', this.formData);
+        console.log(response.data); // 后端返回的数据
+        if(response.data.code === 200){
+            alert("登录成功")
+            this.$router.push('/home').then(() => {
+              location.reload();//刷新页面
+            }).catch(() => {});
+        }else if (response.data.code === 400){
+            alert("密码错误")
+        }else{
+            alert("用户不存在")
+        }
+       
+      }
+    }
+  };
+</script>
+
+
+
+
+
+
+<style scoped>
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  overflow: hidden; /* 防止滚动条 */
+}
+
+.app-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url("../assets/R.jpg") no-repeat center center;
+  background-size: cover;
+  z-index: 1;
+}
+
+.login-container {
+  text-align: center;
+  max-width: 600px; /* 宽度 */
+  margin: 0 0 0 auto; 
+  background: rgba(255, 255, 255, 0.9);
+  background-color: hwb(207 71% 7% / 0.959);
+  border-radius: 50px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 200px; /* 内边距 */
+  box-sizing: border-box;
+  left: 150px;
+  z-index: 2; /* 确保登录框在背景图之上 */
+  position: relative;
+  left: -30px;
+  max-height: 700px;
+  top:16px;
+}
+
+.login-box h1 {
+  font-size: 3em;
+  margin-bottom: 20px;
+  color: #0b70b4c1;
+  position: relative;
+ bottom:  50px;
+}
+
+
+.input-group {
+  margin-bottom: 20px;
+  display: flex;
+   flex-direction: column; 
+   align-items: center;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.input-group input {
+  width: 180%;
+  padding: 15px;
+  margin-top: 5px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 1.2em;
+  margin: auto;
+  position: relative;
+  left: -80px;
+}
+
+button {
+  width: 180%;
+  padding: 15px;
+  background-color: #538edb;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  font-size: 1.2em;
+  position: relative;
+  left: -80px;
+  
+}
+.register-button { 
+  margin-top: 10px; /* 按钮与登录按钮之间的间距 */ 
+  padding: 5px; /* 内边距 */ 
+  background-color: transparent; /* */ 
+  color: rgb(27, 150, 227); 
+  border: none;
+   border-radius: 5px; 
+   cursor: pointer; 
+   transition: background-color 0.3s ease; 
+   font-size: 0.8em; /* 字体大小 */ 
+   width: 50%; /* 调整按钮宽度 */ 
+   align-self: center; /* 居中对齐按钮 */ 
+   position: relative;
+  left: 150px
+  }
+
+button:hover {
+  background-color: #e55b54;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/home.vue b/src/view/home.vue
index b4f67a9..ca575d3 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -1,10 +1,8 @@
 <template>
   <div class="home">
     <el-container height="100%">
-      <el-aside width="100px">
-        <Nav></Nav>
-      </el-aside>
-      <el-main>
+      <el-main style="padding: 0;">
+        <Navi></Navi>
         <router-view></router-view>
       </el-main>
     </el-container>
@@ -12,23 +10,24 @@
 </template>
 
 <script>
-import Nav from "../components/Nav.vue";
+import Navi from "@/components/Navi.vue";
 export default {
-  name: "App",
   components: {
-    Nav,
+    Navi,
   },
 };
 </script>
 
 <style lang="scss" scoped>
+
+//聊天背景颜色
 .home {
-  width: 90vw;
-  height: 90vh;
-  background-color: rgb(39, 42, 55);
+  width: 100vw;
+  height: 100vh;
+  background-color:rgb(255, 255, 255);
   border-radius: 15px;
   position: absolute;
-  left: 50%;
+  margin-left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
diff --git a/src/view/pages/LnVite1n.vue b/src/view/pages/LnVite1n.vue
new file mode 100644
index 0000000..25de230
--- /dev/null
+++ b/src/view/pages/LnVite1n.vue
@@ -0,0 +1,220 @@
+<template>
+
+<div class="user-info-page">
+    <div class="user-info-container">
+
+      <!-- 左侧用户基本信息 -->
+      <div class="user-basic-info">
+        <div class="user-details">
+          <img :src="userInfo.avatarUrl" alt="用户头像" />
+          <p class="nickname">{{ userInfo.nickname }}</p> <!-- 使用 nickname 类 -->
+          <p class="information">性别：{{ userInfo.gender }}</p>
+          <p class="information">年龄：{{ userInfo.age }}</p>
+          <p class="information">居住地：{{ userInfo.residence }}</p>
+        </div>
+      </div>
+
+      <!-- 右侧交友要求和基本资料 -->
+      <div class="user-other-info">
+        <div class="dating-requirements">
+          <h2>详细信息</h2>
+        </div>
+        <div class="basic-profile">
+          <div class="i1">
+            <p class="i11">昵称</p>
+            <p class="i12">{{userInfo.nickname }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">当前状态</p>
+            <p class="i12">{{ userInfo.currentStatus }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">我在寻找</p>
+            <p class="i12">{{ userInfo.lookingFor }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">性别</p>
+            <p class="i12">{{ userInfo.gender }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">年龄</p>
+            <p class="i12">{{ userInfo.age }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">身高</p>
+            <p class="i12">{{ userInfo.height }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">体重</p>
+            <p class="i12">{{ userInfo.weight }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">居住在</p>
+            <p class="i12">{{ userInfo.residence }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">学历</p>
+            <p class="i12">{{ userInfo.education }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">毕业院校</p>
+            <p class="i12">{{ userInfo.graduateSchool }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">行业</p>
+            <p class="i12">{{ userInfo.industry }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">工作单位</p>
+            <p class="i12">{{ userInfo.workUnit }}</p>
+          </div>
+          <div class="i1">
+            <p class="i11">目前职位</p>
+            <p class="i12">{{ userInfo.currentPosition }}</p>
+          </div>
+          <div class="i2">
+            <p class="i11">月收入</p>
+            <p class="i12">{{ userInfo.monthlyIncome }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: {
+        avatarUrl: "https://picture.gptkong.com/20241115/20437780c5227d4025ac097d3c32517fc7.jpg", // 头像URL
+        nickname: "abc",
+        gender: "男",
+        age: "20岁",
+        residence: "福建福州",
+        currentStatus: "未婚",
+        lookingFor: "恋人",
+        height: "173cm",
+        weight: "60kg",
+        education: "本科",
+        graduateSchool: "福州大学",
+        industry: "互联网/IT",
+        workUnit: "xxx",
+        currentPosition: "普通职员",
+        monthlyIncome: "4000-6000元",
+      },
+      datingLocation: "",
+      datingAgeMin: "",
+      datingAgeMax: "",
+    };
+  },
+  methods: {
+    saveInfo() {
+      alert("信息已保存（暂未与后端交互，仅为示例提示）");
+    },
+  },
+};
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #aeabab; 
+}
+
+.user-info-page {
+  margin-top: 0;
+}
+
+.user-info-container {
+  display: flex; /* 使用 Flexbox 布局 */
+  width: 100%; /* 让容器宽度填满网页 */
+  min-height: calc(100vh - 60px); /* 对应导航栏高度调整内容区 height */
+}
+
+.user-basic-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 15%; 
+  background-color: whitesmoke; /* 设置背景色 */
+  border-right: 1px solid gray;
+  height: 93.2vh;
+}
+
+.information {
+  font-size: 18px;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  background-color: whitesmoke;
+}
+
+.user-other-info {
+  width: 85%; 
+  background-color: whitesmoke; /* 设置背景色 */
+}
+
+img {
+  margin-top: 30px;
+  width: 145px; /* 调整头像宽度为160px */
+  height: 145px; /* 调整头像高度为160px */
+  border-radius: 50%; /* 圆形头像 */
+  border: 1px solid #000102; /* 头像边框 */
+}
+
+.nickname {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 40px; /* 增大昵称字体 */
+  color: #000000; /* 设置昵称的颜色 */
+}
+
+.basic-profile {
+  font-size: 16px; /* 可选择适当减小字体 */
+}
+
+.dating-requirements {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  text-align: center;
+  border-bottom: 1px solid gray;
+}
+.i1,.i2 { 
+  display: flex;
+  flex-direction: row;
+  height: 45.6px;
+  border-bottom: 1px solid gray;
+}
+
+.i1 { 
+  background-color: rgba(255, 255, 255, 0.43);
+}
+
+.i2 { 
+  background-color: rgba(15, 238, 238, 0.051);
+}
+
+.i11 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  border-right: 0.5px solid gray;
+}
+
+.i12 {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  width: 621px;
+}
+</style>
diff --git a/src/view/pages/ReCommend.vue b/src/view/pages/ReCommend.vue
new file mode 100644
index 0000000..e65a614
--- /dev/null
+++ b/src/view/pages/ReCommend.vue
@@ -0,0 +1,277 @@
+<template>
+ <div id="app">
+     <!-- 搜索框和关键词示例 -->
+     <div class="search-container">
+         <input type="text" v-model="searchQuery" placeholder="没有心仪的?尝试搜索一下吧">
+     </div>
+     <div class="keyword-suggestions">
+         <button @click="applyKeyword('杭州市')">杭州市</button>
+         <button @click="applyKeyword('跳舞')">跳舞</button>
+         <button @click="applyKeyword('健身')">健身</button>
+         <button @click="applyKeyword('美术')">美术</button>
+         <button @click="applyKeyword('文艺')">文艺</button>
+     </div>
+
+     <!-- 刷新按钮 -->
+     <div class="refresh-button" @click="refreshUsers" style=" margin-right: -500px">
+         🔄刷新一下
+     </div>
+
+     <!-- 推荐用户列表 -->
+     <div class="match-list">
+         <div class="match-card" v-for="user in filteredUsers" :key="user.name">
+             <img :src="user.avatar" alt="user-avatar">
+             <div class="match-info">
+                 <h3>{{ user.name }} ({{ user.age }}岁)</h3>
+                 <p>{{ user.city }}</p>
+                 <p>{{ user.description }}</p>
+                 <p>{{ user.hobby }}</p>
+             </div>
+             <div class="match-buttons">
+                 <a class="match-button" href="">了解详细信息</a>
+                 <router-link to="/home" class="chat-button">开始聊天</router-link>
+             </div>
+         </div>
+     </div>
+ </div>
+
+</template>
+
+<script>
+import Navi from "../../components/Navi.vue";
+
+export default{
+    data() {
+        return {
+            searchQuery: '', // 搜索框的输入内容
+            users: [ // 初始用户数据
+                { name: "小红", age: 22, hobby: "追剧，跳舞", city: "杭州市", description: "我是喜欢音乐的有趣灵魂", avatar: require('@/assets/1.jpg') },
+                { name: "李娜", age: 23, hobby: "唱歌，跳舞", city: "北京市", description: "我喜欢旅行和美食", avatar: require('@/assets/2.jpg') },
+                { name: "李华", age: 24, hobby: "吃饭，健身", city: "上海市", description: "热爱健身和阅读", avatar: require('@/assets/3.jpg') },
+                { name: "赵丽", age: 25, hobby: "美术，旅行", city: "广州市", description: "美术爱好者，喜欢安静", avatar: require('@/assets/4.jpg') },
+                { name: "孙甜", age: 26, hobby: "登山，篮球", city: "成都市", description: "科技迷，热衷编程", avatar: require('@/assets/5.jpg') },
+                { name: "王梅", age: 27, hobby: "跑步，跳舞", city: "重庆市", description: "热爱户外运动", avatar: require('@/assets/6.jpg') },
+                { name: "李蔷", age: 28, hobby: "唱歌，钢琴", city: "天津市", description: "文艺青年，诗词爱好者", avatar: require('@/assets/logo.png') }
+            ]
+        };
+    },
+    components: {
+    Navi,
+    },
+    computed: {
+        // 通过搜索关键词动态筛选用户
+        filteredUsers() {
+            const query = this.searchQuery.toLowerCase(); // 将搜索内容转为小写
+            return this.users.filter(user => {
+                // 匹配用户名、城市、描述或爱好中包含的内容
+                return (
+                    user.name.toLowerCase().includes(query) ||
+                    user.city.toLowerCase().includes(query) ||
+                    user.description.toLowerCase().includes(query) ||
+                    user.hobby.toLowerCase().includes(query)
+                );
+            });
+        }
+    },
+    methods: {
+        // 点击关键词按钮时设置搜索框内容
+        applyKeyword(keyword) {
+            this.searchQuery = keyword;
+        },
+        // 刷新推荐用户（随机排序并显示前4个）
+        refreshUsers() {
+            this.users = this.users.sort(() => Math.random() - 0.5); // 随机排序
+        }
+    }
+  };
+</script>
+
+<style scoped>
+  body {
+      font-family: Arial, sans-serif;
+      background-color: #87ceeb;
+      color: #333;
+      margin: 0;
+      padding: 0;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .navbar {
+  width: 100%;
+  background-color: #0073e6;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  margin-bottom: 10px;
+  font-family: "Open Sans", sans-serif;
+  position: fixed;  /* 设置为固定定位 */
+  top: 0;           /* 置顶 */
+  left: 0;          /* 对齐到左边 */
+  right: 0;         /* 对齐到右边 */
+  z-index: 1000;   /* 确保在其他元素之上 */
+}
+
+.nav-links {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 50px;
+}
+
+.nav-links li {
+  font-weight: 600;
+}
+
+.nav-links li router-link {
+    text-decoration: none;
+    color: white;
+    font-size: 25px;
+    transition: color 0.3s;
+    padding: 0 15px;
+}
+
+.nav-links li router-link:hover {
+    color: #d0e7ff;
+}
+
+#app {
+     display: flex;
+        background: #fff;
+        border-radius: 8px;
+        overflow: hidden;
+        flex-direction: column;
+        align-items: center;
+        height: 200vh;
+        max-height: 675px;
+        overflow-y: auto;
+       
+  }
+
+  .search-container {
+      width: 100%;
+      max-width: 600px;
+      margin-top: 50px;
+      margin-bottom: 15px;
+      position: relative;
+  }
+
+  .search-container input[type="text"] {
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      border: 1px solid #0073e6;
+      border-radius: 25px;
+      box-sizing: border-box;
+      outline: none;
+      padding-left: 40px;
+  }
+
+  .search-container::before {
+      content: "🔍";
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: #0073e6;
+  }
+
+  .keyword-suggestions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+  }
+
+  .keyword-suggestions button {
+      padding: 5px 12px;
+      background-color: transparent;
+      color: #0073e6;
+      border: 1px solid #0073e6;
+      border-radius: 20px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+  }
+
+  .keyword-suggestions button:hover {
+      background-color: #d0e7ff;
+  }
+
+  .match-list {
+      width: 100%;
+      max-width: 600px;
+      margin-top: 20px;
+  }
+
+  /* 刷新按钮 */
+  .refresh-button {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      color: #0073e6;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+  }
+
+  .match-card {
+      display: flex;
+      align-items: center;
+      padding: 15px;
+      border-radius: 8px;
+      background-color: #d0e7ff;
+      margin-bottom: 10px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .match-card img {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      margin-right: 15px;
+  }
+
+  .match-info {
+      flex: 1;
+  }
+
+  .match-info h3 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+  }
+
+  .match-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 30%;
+  }
+
+  .match-button,
+  .chat-button {
+      padding: 8px 12px;
+      background-color: #0073e6;
+      color: white;
+      font-size: 14px;
+      font-weight: bold;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      text-align: center;
+  }
+
+  .chat-button {
+      background-color: #ff6600;
+  }
+
+  .match-buttons a {
+      text-decoration: none;
+  }
+</style>
diff --git a/src/view/pages/chatHome/chatwindow.vue b/src/view/pages/chatHome/chatwindow.vue
index b3f8b39..c7ca4f7 100644
--- a/src/view/pages/chatHome/chatwindow.vue
+++ b/src/view/pages/chatHome/chatwindow.vue
@@ -6,11 +6,8 @@
       </div>
       <div class="info-detail">
         <div class="name">{{ frinedInfo.name }}</div>
-        <div class="detail">{{ frinedInfo.detail }}</div>
       </div>
       <div class="other-fun">
-        <span class="iconfont icon-shipin" @click="video"> </span>
-        <span class="iconfont icon-gf-telephone" @click="telephone"></span>
         <label for="docFile">
           <span class="iconfont icon-wenjian"></span>
         </label>
@@ -38,6 +35,10 @@
       <div class="chat-content" ref="chatContent">
         <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
           <div class="chat-friend" v-if="item.uid !== '1001'">
+            <div class="info-time">
+              <img :src="item.headImg" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
             <div class="chat-text" v-if="item.chatType == 0">
               {{ item.msg }}
             </div>
@@ -59,13 +60,13 @@
                 ></FileCard>
               </div>
             </div>
+            
+          </div>
+          <div class="chat-me" v-else>
             <div class="info-time">
-              <img :src="item.headImg" alt="" />
               <span>{{ item.name }}</span>
-              <span>{{ item.time }}</span>
+              <img :src="item.headImg" alt="" />
             </div>
-          </div>
-          <div class="chat-me" v-else>
             <div class="chat-text" v-if="item.chatType == 0">
               {{ item.msg }}
             </div>
@@ -92,11 +93,7 @@
                 ></FileCard>
               </div>
             </div>
-            <div class="info-time">
-              <span>{{ item.name }}</span>
-              <span>{{ item.time }}</span>
-              <img :src="item.headImg" alt="" />
-            </div>
+            
           </div>
         </div>
       </div>
@@ -113,7 +110,10 @@
         </div>
         <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
         <div class="send boxinput" @click="sendText">
-          <img src="@/assets/img/emoji/rocket.png" alt="" />
+          <!-- <img src="@/assets/img/emoji/rocket.png" alt="" /> -->
+          <div class="text">发送</div>
+
+           
         </div>
       </div>
     </div>
@@ -169,8 +169,6 @@ export default {
             this.srcImgList.push(item.msg);
           }
         });
-    this.scrollBottom();
-
       });
     },
     //发送信息
@@ -225,6 +223,7 @@ export default {
       };
       this.sendMsg(chatMsg);
       this.clickEmoji();
+      
     },
     //发送本地图片
     sendImg(e) {
@@ -311,15 +310,20 @@ export default {
 };
 </script>
 
+<!-- 左上角色的信息样式 -->
 <style lang="scss" scoped>
 .chat-window {
   width: 100%;
   height: 100%;
-  margin-left: 20px;
+  margin-left: 0px;
   position: relative;
 
   .top {
-    margin-bottom: 50px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-bottom: 0.5px solid rgba(128, 128, 128, 0.436);
+    height: 73px;
     &::after {
       content: "";
       display: block;
@@ -327,26 +331,30 @@ export default {
     }
     .head-pic {
       float: left;
+      margin-left: 15px;
     }
     .info-detail {
+      width:60px;
       float: left;
-      margin: 5px 20px 0;
+      margin-left: 5px;
+      text-align: center;
       .name {
         font-size: 20px;
         font-weight: 600;
-        color: #fff;
+        color: #070707;
       }
       .detail {
-        color: #9e9e9e;
+        color: #46658b;
         font-size: 12px;
         margin-top: 2px;
       }
     }
     .other-fun {
       float: right;
-      margin-top: 20px;
+      margin-left: 940px;
       span {
         margin-left: 30px;
+        margin-right: 30px;
         cursor: pointer;
       }
       // .icon-tupian {
@@ -359,15 +367,14 @@ export default {
   }
   .botoom {
     width: 100%;
-    height: 70vh;
-    background-color: rgb(50, 54, 68);
+    height: 80vh;
+    background-color: rgb(255, 255, 255);
     border-radius: 20px;
-    padding: 20px;
     box-sizing: border-box;
     position: relative;
     .chat-content {
       width: 100%;
-      height: 85%;
+      height: 90%;
       overflow-y: scroll;
       padding: 20px;
       box-sizing: border-box;
@@ -390,12 +397,9 @@ export default {
           .chat-text {
             max-width: 90%;
             padding: 20px;
-            border-radius: 20px 20px 20px 5px;
-            background-color: rgb(56, 60, 75);
-            color: #fff;
-            &:hover {
-              background-color: rgb(39, 42, 55);
-            }
+            border-radius: 20px 20px 20px 20px;
+            background-color: whitesmoke;
+            color: #0c0c0c;
           }
           .chat-img {
             img {
@@ -405,7 +409,7 @@ export default {
           }
           .info-time {
             margin: 10px 0;
-            color: #fff;
+            color: #090909;
             font-size: 14px;
             img {
               width: 30px;
@@ -415,7 +419,7 @@ export default {
               margin-right: 10px;
             }
             span:last-child {
-              color: rgb(101, 104, 115);
+              color: rgb(10, 10, 10);
               margin-left: 10px;
               vertical-align: middle;
             }
@@ -434,12 +438,9 @@ export default {
             float: right;
             max-width: 90%;
             padding: 20px;
-            border-radius: 20px 20px 5px 20px;
-            background-color: rgb(29, 144, 245);
-            color: #fff;
-            &:hover {
-              background-color: rgb(26, 129, 219);
-            }
+            border-radius: 20px 20px 20px 20px;
+            background-color: rgb(10, 154, 238);
+            color: #070707;
           }
           .chat-img {
             img {
@@ -450,7 +451,7 @@ export default {
           }
           .info-time {
             margin: 10px 0;
-            color: #fff;
+            color: #050505;
             font-size: 14px;
             display: flex;
             justify-content: flex-end;
@@ -466,7 +467,7 @@ export default {
               line-height: 30px;
             }
             span:first-child {
-              color: rgb(101, 104, 115);
+              color: rgb(7, 7, 7);
               margin-right: 10px;
               vertical-align: middle;
             }
@@ -475,15 +476,14 @@ export default {
       }
     }
     .chatInputs {
-      width: 90%;
+      width: 100%;
       position: absolute;
-      bottom: 0;
-      margin: 3%;
       display: flex;
+      margin-top: 22px;
       .boxinput {
         width: 50px;
         height: 50px;
-        background-color: rgb(66, 70, 86);
+        background-color: rgb(255, 255, 255);
         border-radius: 15px;
         border: 1px solid rgb(80, 85, 103);
         position: relative;
@@ -499,34 +499,42 @@ export default {
       }
       .emoji {
         transition: 0.3s;
+        margin-left: 10px;
+        border: none;
         &:hover {
-          background-color: rgb(46, 49, 61);
-          border: 1px solid rgb(71, 73, 82);
+          background-color: rgba(128, 128, 128, 0.299);
         }
       }
 
       .inputs {
-        width: 90%;
+        width: 1030px;
         height: 50px;
-        background-color: rgb(66, 70, 86);
-        border-radius: 15px;
-        border: 2px solid rgb(34, 135, 225);
+        background-color: rgb(255, 255, 255);
+        border-radius: 10px;
+        border: 2px solid rgb(15, 15, 15);
         padding: 10px;
         box-sizing: border-box;
         transition: 0.2s;
         font-size: 20px;
-        color: #fff;
+        color: #0f0f0f;
         font-weight: 100;
-        margin: 0 20px;
+        margin-top: 0px;
+        margin-left: 20px;
+        margin-right: 20px;
         &:focus {
           outline: none;
         }
       }
       .send {
-        background-color: rgb(29, 144, 245);
+        display: flex;
+        width: 100px;
+        background-color: rgb(255, 255, 255);
         border: 0;
         transition: 0.3s;
-        box-shadow: 0px 0px 5px 0px rgba(0, 136, 255);
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0px 0px 5px 0px rgb(125, 124, 124);
         &:hover {
           box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
         }
diff --git a/src/view/pages/chatHome/index.vue b/src/view/pages/chatHome/index.vue
index 5a76187..d92baac 100644
--- a/src/view/pages/chatHome/index.vue
+++ b/src/view/pages/chatHome/index.vue
@@ -1,46 +1,52 @@
 <template>
-  <div class="chatHome">
-    <div class="chatLeft">
-      <div class="title">
-        <h1>大猫聊天室</h1>
-      </div>
-      <div class="online-person">
-        <span class="onlin-text">聊天列表</span>
-        <div class="person-cards-wrapper">
-          <div
-            class="personList"
-            v-for="personInfo in personList"
-            :key="personInfo.id"
-            @click="clickPerson(personInfo)"
-          >
-            <PersonCard
-              :personInfo="personInfo"
-              :pcCurrent="pcCurrent"
-            ></PersonCard>
+    <div class="chatHome">
+      <div class="chatLeft">
+        <div class="online-person">
+          <div class="osearch">
+            <input
+            class="search"
+            type="text"
+            v-model="searchQuery"
+            placeholder="搜索"
+            @input="handleSearch"
+            />
+          </div>
+          <div class="person-cards-wrapper">
+            <div
+              class="personList"
+              v-for="personInfo in filteredItems"
+              :key="personInfo.id"
+              @click="clickPerson(personInfo)"
+            >
+              <PersonCard
+                :personInfo="personInfo"
+                :pcCurrent="pcCurrent"
+              ></PersonCard>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="chatRight">
-      <!-- <router-view></router-view> -->
-      <div v-if="showChatWindow">
-        <ChatWindow
-          :frinedInfo="chatWindowInfo"
-          @personCardSort="personCardSort"
-        ></ChatWindow>
-      </div>
-      <div class="showIcon" v-else>
-        <span class="iconfont icon-snapchat"></span>
-        <!-- <img src="@/assets/img/snapchat.png" alt="" /> -->
+      <div class="chatRight">
+        <!-- <router-view></router-view> -->
+        <div v-if="showChatWindow">
+          <ChatWindow
+            :frinedInfo="chatWindowInfo"
+            @personCardSort="personCardSort"
+          ></ChatWindow>
+        </div>
+        <div class="showIcon" v-else>
+          <span class="iconfont icon-snapchat"></span>
+          <!-- <img src="@/assets/img/snapchat.png" alt="" /> -->
+        </div>
       </div>
+      <!-- <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> -->
     </div>
-    <!-- <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> -->
-  </div>
 </template>
 
 <script>
 import PersonCard from "@/components/PersonCard.vue";
 import ChatWindow from "./chatwindow.vue";
+import Navi from "../../../components/Navi.vue";
 
 import { getFriend } from "@/api/getData";
 export default {
@@ -48,9 +54,12 @@ export default {
   components: {
     PersonCard,
     ChatWindow,
+    Navi,
   },
   data() {
     return {
+      filteredItems: [],
+      searchQuery: '',
       pcCurrent: "",
       personList: [],
       showChatWindow: false,
@@ -61,9 +70,17 @@ export default {
     getFriend().then((res) => {
       console.log(res);
       this.personList = res;
+      this.filteredItems = res;
     });
   },
   methods: {
+    handleSearch() {
+      const query = this.searchQuery.toLowerCase();
+      this.filteredItems = this.personList.filter(item =>
+        item.name.toLowerCase().includes(query)
+      );
+      console.log(this.filteredItems);
+    },
     clickPerson(info) {
       this.showChatWindow = true;
       this.chatWindowInfo = info;
@@ -90,24 +107,51 @@ export default {
 
 <style lang="scss" scoped>
 .chatHome {
-  // margin-top: 20px;
   display: flex;
   .chatLeft {
     width: 280px;
+    height: 93.2vh;
+    border-right: 0.5px solid rgba(128, 128, 128, 0.436);
     .title {
-      color: #fff;
+      width: 200px;
+      height: 50px;
+      border: #090909;
+      color: #090909;
       padding-left: 10px;
+      .h1 {
+        display: flex;
+       justify-content: center;
+      }
     }
     .online-person {
-      margin-top: 100px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .osearch {
+        height: 73px;
+        width: 100%;
+        display: flex;
+        margin-top: 0%;
+        justify-content: center;
+        align-items: center;
+        border-bottom: 0.5px solid rgba(128, 128, 128, 0.436);
+        .search {
+        background-color: rgba(128, 128, 128, 0.119);
+        font-size: 20px;
+        border: 1px solid gray;
+        border-radius: 3px;
+        width: 80%;
+        height: 30px;
+        text-align: center;
+      }
+      }
       .onlin-text {
         padding-left: 10px;
-        color: rgb(176, 178, 189);
+        color: rgb(6, 6, 6);
       }
       .person-cards-wrapper {
-        padding-left: 10px;
+        padding-left: 0px;
         height: 65vh;
-        margin-top: 20px;
         overflow: hidden;
         overflow-y: scroll;
         box-sizing: border-box;
@@ -122,7 +166,6 @@ export default {
 
   .chatRight {
     flex: 1;
-    padding-right: 30px;
     .showIcon {
       position: absolute;
       top: calc(50% - 150px); /*垂直居中 */