debug

src/assets/less/custom.less

@@ -157,3 +157,9 @@ p {
 .link {
   color: rgb(18, 100, 149);
 }
+
+.sub-title-g{
+  margin-top: @padding-page;
+  color: @second-text-color;
+  font-size: 1.2rem;
+}

src/pages/message/Message.vue

@@ -360,12 +360,16 @@
     </div>
 
     <div class="searching" v-show="searching">
-      <Search class="m2r" v-model="searchKey"
+      <Search v-model="searchKey"
               right-text="取消"
               right-text-color="white"
               @notice="searching = false"
               :isShowRightText="true"/>
       <div class="more-chat">
+        <div class="sub-title-g">更多聊天</div>
+        <People v-for="(item,index) in moreChat"
+                :key="item.id"
+                :people="item"/>
 
       </div>
 
@@ -384,6 +388,7 @@ import {mapState} from "vuex";
 import Peoples from "../people/components/Peoples";
 import Mask from "../../components/Mask";
 import Scroll from "../../components/Scroll";
+import People from "../people/components/People";
 
 export default {
   name: "Message",
@@ -394,12 +399,13 @@ export default {
     Search,
     FromBottomDialog,
     Check,
-    Peoples
+    Peoples,
+    People
   },
   data() {
     return {
       isShowRecommend: false,
-      searching: false,
+      searching: true,
       searchKey: '',
       createChatSearchKey: '',
       showJoinedChat: false,
@@ -459,6 +465,8 @@ export default {
       // ],
       searchFriends: [],
       recommend: [],
+
+      moreChat: []
     }
   },
   computed: {
@@ -485,6 +493,7 @@ export default {
     this.recommend.map(v => {
       v.type = -2
     })
+    this.moreChat = this.$clone(this.friends.all.slice(0, 3))
   },
   mounted() {
     setTimeout(() => {
@@ -1035,6 +1044,7 @@ export default {
   }
 
   .searching {
+    padding: @padding-page;
 
   }
 

src/pages/people/components/People.vue

@@ -2,6 +2,13 @@
   <div class="People">
     <img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
     <div class="content">
+      <template v-if="mode === 'normal'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+        </div>
+      </template>
+
+
       <template v-if="mode === 'fans'">
         <div class="left">
           <div class="name">{{ people.name }}</div>
@@ -113,7 +120,7 @@ export default {
     },
     mode: {
       type: String,
-      default: 'fans'
+      default: 'normal'
     }
   },
   data() {
@@ -153,7 +160,7 @@ export default {
 .People {
   transition: all 0.3s ease;
   width: 100%;
-  height: 8rem;
+  height: 7rem;
   display: flex;
   align-items: center;
   position: relative;