debug

src/components/Search.vue

@@ -2,10 +2,11 @@
   <div class="search-ctn" :class="mode">
     <div class="search">
       <img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
-      <input type="text" :placeholder="placeholder" v-model="value" >
+      <input type="text" :placeholder="placeholder" v-model="value">
       <div class="suffix">
         <slot v-if="$slots.default"></slot>
-        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png" @click.stop="clear">
+        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png"
+             @click.stop="clear">
       </div>
     </div>
     <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>
@@ -13,6 +14,7 @@
 </template>
 
 <script>
+//TODO　背景颜色不对
 export default {
   name: "Search",
   props: {

src/pages/message/Fans.vue

@@ -6,7 +6,14 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <People v-for="item in friends.all" :people="item"></People>
+      <People v-for="item in friends.all" :people="item" mode="fans"></People>
+      <div class="line mt1r"></div>
+      <div class="title">
+        <span>朋友推荐</span>
+        <img src="../../assets/img/icon/about-gray.png" alt="">
+
+      </div>
+      <People v-for="item in friends.all" :people="item" mode="recommend"></People>
     </div>
   </div>
 </template>
@@ -50,6 +57,19 @@ export default {
   .content {
     padding: @padding-page;
     padding-top: 6rem;
+
+    .title {
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-left: .5rem;
+        width: 1.3rem;
+      }
+    }
   }
 }
 </style>

src/pages/people/FindAcquaintance.vue

@@ -5,13 +5,13 @@
       <Indicator
           style="width: 50%;"
           tabStyleWidth="40%"
-          :tabTexts="['发现熟人','熟人列表']"
+          :tabTexts="['发现朋友','熟人列表']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
       <img src="../../assets/img/icon/menu-gray.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
     <SlideRowList v-model:active-index="currentSlideItemIndex">
-      <SlideItem class="tab1">
+      <SlideItem class="tab1" style="overflow: auto;">
         <div class="mr2r ml2r mt1r">
           <Search v-if="!isShowText"
                   placeholder="搜索用户名字/抖音号"
@@ -24,13 +24,13 @@
         </div>
         <div class="no-search" v-if="!isShowText">
           <div class="look-address-list" @click="findAddressListDialog = true">
-            <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
+            <img class="left" src="../../assets/img/icon/people/address-book.png" alt="">
             <div class="right">
               <div class="notice">
                 <div class="text1">查看通讯录朋友</div>
-                <div class="text2">看看谁在抖音</div>
+                <div class="text2">看看有谁在抖音</div>
               </div>
-              <back scale="1" direction="right"></back>
+              <back direction="right"></back>
             </div>
           </div>
           <div class="line"></div>
@@ -38,21 +38,22 @@
             朋友推荐
             <img src="../../assets/img/icon/about-gray.png" style="width: 1rem;margin-left: .2rem;">
           </div>
-          <People v-for="item in list " :people="item"></People>
+          <People v-for="item in friends.all " :people="item" mode="recommend"></People>
         </div>
         <div class="is-search" v-else>
           <div class="tooltip" v-if="searchKey && !isSearch">
             <img src="../../assets/img/icon/close.svg" style="width: 1rem;">
             搜索用户名字/抖音号：<span class="searchKey">{{ searchKey }}</span>
           </div>
-          <People v-if="isSearch" v-for="item in list " :people="item"></People>
+          <!--          TODO -->
+          <People v-if="isSearch" v-for="item in friends.all " :people="item" mode="recommend"></People>
         </div>
       </SlideItem>
-      <SlideItem class="tab2">
+      <SlideItem class="tab2" style="overflow: auto;">
         <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
-        <div class="title">我的好友（互相关注）</div>
-        <People v-for="item in list " :people="item"></People>
-        <NoMore></NoMore>
+        <div class="title">{{ friends.all.length }} 位朋友</div>
+        <People v-for="item in friends.all " :people="item" mode="friend"></People>
+        <NoMore class="mb5r"/>
       </SlideItem>
     </SlideRowList>
 
@@ -132,6 +133,7 @@ import People from './components/People'
 import Search from '../../components/Search'
 import Indicator from '../../components/slide/Indicator'
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import {mapState} from "vuex";
 
 export default {
   name: "FindAcquaintance",
@@ -179,7 +181,8 @@ export default {
       set() {
         this.findAddressListDialog = this.outWebImgAccountDialog = false
       }
-    }
+    },
+    ...mapState(['friends'])
   },
   mounted() {
   },
@@ -242,7 +245,8 @@ export default {
     padding: 2rem;
 
     .title {
-      margin-top: 2rem;
+      margin-top: @padding-page;
+      margin-bottom: 1rem;
       color: @second-text-color;
       font-size: 1.2rem;
     }
@@ -272,11 +276,11 @@ export default {
         align-items: center;
 
         .left {
-          background: @second-btn-color;
+          background: @second-btn-color-tran;
           border-radius: 50%;
-          padding: 1rem;
-          width: 2.4rem;
-          margin-right: 1.8rem;
+          padding: 1.2rem;
+          width: 2.2rem;
+          margin-right: 1.5rem;
         }
 
         .right {
@@ -286,13 +290,12 @@ export default {
           align-items: center;
 
           img {
-            height: 2rem;
+            width: 1.4rem;
           }
 
           .notice {
-
             .text1 {
-              font-size: 1.6rem;
+              font-size: 1.4rem;
               margin-bottom: .5rem;
             }
 

src/pages/people/components/People.vue

@@ -7,14 +7,15 @@
       <template v-if="mode === 'fans'">
         <div class="left">
           <div class="name">{{ people.name }}</div>
-          <div class="detail">
+          <div class="name">
             <template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
               发来一个关注请求
             </template>
             <template v-else>
-              该用户关注了你
+              关注了你
             </template>
           </div>
+          <div class="detail">07-23</div>
         </div>
         <div class="right">
           <!--   他关注我   -->
@@ -37,8 +38,29 @@
         </div>
       </template>
 
+      <template v-if="mode === 'recommend'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+          <div class="detail">可能认识的人</div>
+        </div>
+        <div class="right">
+          <div class="l-button ">移除</div>
+          <div class="l-button red">关注</div>
+        </div>
+      </template>
 
+      <template v-if="mode === 'friend'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+          <div class="detail">4小时之内在线</div>
+        </div>
+        <div class="right">
+          <div class="l-button">发私信</div>
+          <img src="../../../assets/img/icon/menu-white.png" alt="" @click="showPopover = !showPopover">
+        </div>
+      </template>
     </div>
+    <!--   TODO 点了不消失，内容也变了 -->
     <transition name="scale">
       <div class="popover" v-if="people.type === 4 && showPopover">
         <div class="arrow"></div>
@@ -112,8 +134,8 @@ export default {
 
   .head-image {
     margin-right: 1.5rem;
-    width: 4.8rem;
-    height: 4.8rem;
+    width: 4.5rem;
+    height: 4.5rem;
     border-radius: 50%;
   }
 
@@ -134,7 +156,8 @@ export default {
 
     .left {
       .name {
-        font-size: 1.6rem;
+        font-size: 1.2rem;
+        margin-bottom: .2rem;
         color: white;
       }
 
@@ -151,16 +174,17 @@ export default {
 
       .l-button {
         margin-left: .8rem;
-        padding: .5rem 2rem;
         border-radius: .2rem;
         background: rgb(58, 58, 67);
+        font-size: 1.2rem;
+        padding: .4rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 5.5rem;
 
         &:only-child {
-          background: yellow;
-        }
-
-        &.address-list {
-          padding: .7rem 3rem;
+          width: 7rem;
         }
 
         &.red {