修改聊天和个人中心的样式板块

src/views/liveChat/index.vue

@@ -247,22 +247,6 @@ const fileChangeMsg = async (val) => {
   sendId.value = val.id;
   websoctStore.sendMessage(message);
 };
-const getNewMsgList=async ()=>{
-  const resFriend = await msgFriend();
-    personList.data = resFriend.rows;
-  //圆点======
-  searchData.value.map((i) => {
-    personList.data.map((v)=>{
-      if (v.fromId == websoctStore.messOne?.fromId) {
-      v.showCircel = true;
-    }
-       if(i.msgId==v.msgId){
-        i=v
-       }
-    })
-  });
-  console.log('searchData.value', searchData.value)
-}
 //点击发送文件图标
 const fileUserTreeData = reactive({ data: {} });
 const sendFileClick = async () => {
@@ -274,15 +258,16 @@ const sendFileClick = async () => {
 //获取用户聊天记录
 const handleNewMessage = async () => {
   if (websoctStore.newMessage) {
-    msgRecordEvent(sendCont.data.toId); //获取用户的聊天记录  
-    getNewMsgList();
+    msgRecordEvent(sendCont.data.toId); //获取用户的聊天记录
+     const resFriend = await msgFriend();
+    getMsgList();
     websoctStore.newMessage = false; // 重置新消息标记
   }
 };
 watchEffect(() => {
   if (websoctStore.messOne?.fromId) {
     msgRecordEvent(websoctStore.messOne.fromId);
-    getNewMsgList();
+    getMsgList();
   }
 });
 // 滚动翻页========

src/views/system/user/profile/index.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="app-container">
-      <el-row :gutter="20">
-         <el-col :span="6" :xs="24">
+      <div class="main">
+         <div class="right-main">
             <el-card class="box-card">
                <template v-slot:header>
                  <div class="clearfix">
@@ -11,37 +11,39 @@
                <div>
                   <div class="text-center">
                      <userAvatar :user="state.user" />
+                     <div class="user-name">{{ state.user.userName }}</div>
+                     <div class="emails">{{ state.user.email }}sfsdf</div>
                   </div>
-                  <ul class="list-group list-group-striped">
-                     <li class="list-group-item">
+                  <ul class="list-group list-group-striped" style="color: #505870 !important;">
+                     <!-- <li class="list-group-item">
                         <svg-icon icon-class="user" />用户名称
                         <div class="pull-right">{{ state.user.userName }}</div>
-                     </li>
+                     </li> -->
                      <li class="list-group-item">
-                        <svg-icon icon-class="phone" />手机号码
+                        <svg-icon icon-class="phone" class="tubiao"/>手机号码
                         <div class="pull-right">{{ state.user.phonenumber }}</div>
                      </li>
-                     <li class="list-group-item">
+                     <!-- <li class="list-group-item">
                         <svg-icon icon-class="email" />用户邮箱
                         <div class="pull-right">{{ state.user.email }}</div>
-                     </li>
+                     </li> -->
                      <li class="list-group-item">
-                        <svg-icon icon-class="tree" />所属部门
+                        <svg-icon icon-class="tree" class="tubiao"/>所属部门
                         <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
                      </li>
                      <li class="list-group-item">
-                        <svg-icon icon-class="peoples" />所属角色
+                        <svg-icon icon-class="peoples" class="tubiao"/>所属角色
                         <div class="pull-right">{{ state.roleGroup }}</div>
                      </li>
                      <li class="list-group-item">
-                        <svg-icon icon-class="date" />创建日期
+                        <svg-icon icon-class="date" class="tubiao"/>创建日期
                         <div class="pull-right">{{ state.user.createTime }}</div>
                      </li>
                   </ul>
                </div>
             </el-card>
-         </el-col>
-         <el-col :span="18" :xs="24">
+         </div>
+         <div class="left-main">
             <el-card>
                <template v-slot:header>
                  <div class="clearfix">
@@ -57,8 +59,8 @@
                   </el-tab-pane>
                </el-tabs>
             </el-card>
-         </el-col>
-      </el-row>
+         </div>
+      </div>
    </div>
 </template>
 
@@ -85,3 +87,54 @@ function getUser() {
 
 getUser();
 </script>
+<style lang="scss" scoped>
+
+.app-container {
+    padding: 20px;
+    height: 89vh; /* 设置高度为视口的100% */
+    display: flex;
+    flex-direction: column;
+  }
+  .main{
+   display: flex;justify-content: space-around;height: 100%;
+  }
+  .right-main{
+   width: 36%;margin-right: 16px;height: 100%;
+   border: 1px solid #C1CCE3;
+  }
+  .left-main{
+   flex: 1;height: 100%;
+   border: 1px solid #C1CCE3;
+  }
+  :deep(.el-card){
+   border: none !important;
+   --el-box-shadow-light:none;
+   .list-group-item{
+      border: none;
+   }
+  }
+ :deep(.el-card__header){
+   border: none !important;
+  }
+  .text-center{
+     .user-name{
+      margin-top: 8px;
+      font-size: 20px;
+     }
+   .emails{
+      margin-top: 8px;
+      font-size: 14px;
+      color: #06286C;
+   }
+  }
+  .list-group-item{
+   color: #505870;
+   .pull-right{
+   color: #000;
+  }
+  .tubiao{
+   margin-right: 4px;
+  }
+  }
+
+</style>

src/views/system/user/profile/userAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user-info-head" @click="editCropper()">
     <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <img :src="PencilSimple" title="点击上传头像" class="img-bianji" />
     <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
       <el-row>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
@@ -62,6 +63,7 @@
 import "vue-cropper/dist/index.css";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
+import PencilSimple from "@/assets/images/perCenter/PencilSimple.png";
 import useUserStore from "@/store/modules/user";
 
 const userStore = useUserStore();
@@ -166,4 +168,11 @@ function closeDialog() {
   line-height: 110px;
   border-radius: 50%;
 }
+.img-bianji{
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  width: 27.5px;
+  height: 27.5px;
+}
 </style>