debug

src/components/Search.vue

@@ -5,11 +5,11 @@
       <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"
+        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/components/gray-close-full2.png"
              @click.stop="clear">
       </div>
     </div>
-    <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>
+    <div v-if="isShowRightText" class="rightTextColor" :style="{color : rightTextColor}" @click.stop="$emit('notice')">{{ rightText }}</div>
   </div>
 </template>
 
@@ -26,11 +26,11 @@ export default {
       type: String,
       default: ''
     },
-    notice: {
+    rightTextColor: {
       type: String,
       default: 'red'
     },
-    isShowText: {
+    isShowRightText: {
       type: Boolean,
       default: false
     },
@@ -38,7 +38,7 @@ export default {
       type: Boolean,
       default: true
     },
-    showText: {
+    rightText: {
       type: String,
       default: '搜索'
     },
@@ -93,7 +93,7 @@ export default {
     }
   }
 
-  .notice {
+  .rightTextColor {
     margin-left: 1.5rem;
     font-size: 1.6rem;
   }
@@ -130,11 +130,13 @@ export default {
     }
 
     .suffix {
+      display: flex;
+      align-items: center;
       position: absolute;
-      right: 2rem;
+      right: 1.5rem;
 
       img {
-        width: 1rem;
+        width: 1.5rem;
       }
     }
   }

src/pages/home/SearchPage.vue

@@ -3,8 +3,8 @@
     <div class="header">
       <back mode="light" @click="$back" class="mr1r"></back>
       <BSearch placeholder="搜索用户名字/抖音号"
-               :isShowText="true"
-               notice="white"
+               :isShowRightText="true"
+               rightTextColor="white"
                @notice="$no"
       >
         <img class="scan" src="../../assets/img/icon/scan-gray.png" @click.stop="$nav('/scan')">

src/pages/home/components/ShareToFriend.vue

@@ -8,11 +8,11 @@
     <div class="content" :style="{minHeight:height}">
       <div class="create-chat" v-show="!showJoinedChat">
         <Search
-            :isShowText="isShowText"
-            @click="isShowText = true;height = '100vh';"
-            @notice="isShowText = false;height = '70vh';"
-            showText="取消"
-            notice="gray"
+            :isShowRightText="isShowRightText"
+            @click="isShowRightText = true;height = '100vh';"
+            @notice="isShowRightText = false;height = '70vh';"
+            rightText="取消"
+            rightTextColor="gray"
             placeholder="搜索"
             v-model="searchKey"/>
         <template v-if="searchKey">
@@ -119,7 +119,7 @@ export default {
     return {
       height: '70vh',
       showJoinedChat: false,
-      isShowText: false,
+      isShowRightText: false,
       text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
       localFriends: [],
       searchResult: [],
@@ -145,7 +145,7 @@ export default {
       } else {
         this.searchKey = ''
         this.height = '70vh'
-        this.isShowText = false
+        this.isShowRightText = false
         this.showJoinedChat = false
       }
     }

src/pages/login/countryChoose.vue

@@ -3,11 +3,11 @@
     <base-header>
       <template v-slot:center>切换城市</template>
       <template v-slot:bottom>
-        <Search :isShowText="isShowText"
-                showText="取消"
-                @click="isShowText = true"
-                @notice="isShowText = false;"
-                @clear="isShowText = false"
+        <Search :isShowRightText="isShowRightText"
+                rightText="取消"
+                @click="isShowRightText = true"
+                @notice="isShowRightText = false;"
+                @clear="isShowRightText = false"
                 class="ml2r mr2r mt1r" placeholder="输入城市或区县名搜索" v-model="searchKey"></Search>
       </template>
     </base-header>
@@ -2325,7 +2325,7 @@ export default {
         ]
       },
       history: [],
-      isShowText: false,
+      isShowRightText: false,
       searchKey: '',
       indexOffsetTop: {},
       // currentFixedIndicator: null,

src/pages/me/userinfo/ChooseSchool.vue

@@ -11,7 +11,7 @@
         <Search class="mt1r mb1r ml2r mr2r" placeholder="搜索大学名称"
                 v-model="schoolName"
                 @clear="isSearch = false"
-                :is-show-text="true"
+                :is-show-right-text="true"
                 @notice="search"></Search>
       </template>
     </BaseHeader>

src/pages/message/Message.vue

@@ -1,12 +1,17 @@
 <template>
   <div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
-    <div class="header">
-      <span style="opacity: 0;">消息</span>
-      <span class="f18">消息</span>
+    <div class="no-search" v-show="false">
+      <BaseHeader>
+        <template v-slot:center>
+          <span class="f16">消息</span>
+        </template>
+        <template v-slot:right>
           <span class="f14" @click="createChatDialog = true">创建群聊</span>
-    </div>
+        </template>
+      </BaseHeader>
+
       <div class="content">
-      <Search class="m2r"></Search>
+        <Search class="ml2r mr2r mb2r"></Search>
         <div class="friends  pl1r ">
           <div class="friend pr1r pl1r"
                @click="$nav('/message/chat')"
@@ -250,10 +255,10 @@
       <Footer v-bind:init-tab="4"/>
       <from-bottom-dialog page-id="Message" v-model="createChatDialog">
         <div class="create-chat-wrapper" v-show="!showJoinedChat">
-        <Search :isShowText="isShowText"
-                @click="isShowText = true"
-                @notice="isShowText = false;"
-                @clear="isShowText = false"
+          <Search :isShowRightText="isShowRightText"
+                  @click="isShowRightText = true"
+                  @notice="isShowRightText = false;"
+                  @clear="isShowRightText = false"
                   class="ml2r mr2r" placeholder="搜索用户" v-model="createChatSearchKey"></Search>
           <template v-if="createChatSearchKey">
             <div class="search-result" v-if="searchFriends.length">
@@ -353,6 +358,19 @@
         </div>
       </transition>
     </div>
+
+    <div class="searching">
+      <Search class="m2r" v-model="searchKey"
+              show-text="取消"
+              :isShowRightText="true"/>
+      <div class="more-chat">
+
+      </div>
+
+    </div>
+
+
+  </div>
 </template>
 
 <script>
@@ -379,11 +397,12 @@ export default {
   data() {
     return {
       isShowRecommend: false,
+      searchKey: '',
       createChatSearchKey: '',
       showJoinedChat: false,
       loading: false,
       createChatDialog: false,
-      isShowText: false,
+      isShowRightText: false,
       text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
       // friends: [
       //   {
@@ -504,6 +523,8 @@ export default {
   padding-bottom: 6rem;
   color: white;
 
+  .no-search {
+
     .create-chat-wrapper {
       min-height: 70vh;
       padding-bottom: 6rem;
@@ -738,17 +759,12 @@ export default {
       }
     }
 
-  .header {
-    position: fixed;
-    width: 100vw;
-    background: @main-bg;
-    z-index: 11;
-    height: 6rem;
-    display: flex;
-    padding: @padding-page;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
+    /deep/ #BaseHeader .header {
+      border-bottom: none;
+
+      .left {
+        opacity: 0;
+      }
     }
 
     .content {
@@ -945,91 +961,6 @@ export default {
       }
     }
 
-  .recommend {
-    .title {
-      padding: 2rem 2rem 1rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .left {
-        color: @second-text-color;
-
-        img {
-          width: 1rem;
-          height: 1rem;
-        }
-      }
-
-      .right {
-        border-radius: 50%;
-        background: @second-text-color;
-        padding: .5rem;
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-
-    .item {
-      display: flex;
-      align-items: center;
-
-      &.top {
-        background: #353a4f;
-      }
-
-      &:active {
-        background: #353a4f;
-      }
-
-      .head-image {
-        margin-left: 2rem;
-        margin-right: 1.5rem;
-        width: 4.8rem;
-        height: 4.8rem;
-        border-radius: 50%;
-      }
-
-      .content {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        padding: 1.5rem 0;
-
-        .left {
-          .name {
-            font-size: 1.8rem;
-            color: white;
-          }
-
-          .detail {
-            color: @second-text-color;
-            font-size: 1.2rem;
-            margin-top: 4px;
-          }
-        }
-
-        .right {
-          margin-right: 2rem;
-          display: flex;
-          align-items: center;
-
-          .button {
-            background: @primary-btn-color;
-            margin-left: .8rem;
-            padding: .8rem 2rem;
-            border-radius: .3rem;
-
-            &:nth-last-child(1) {
-              background: rgb(58, 58, 67);
-            }
-          }
-        }
-      }
-
-    }
-  }
-
     .recommend-dialog {
       position: fixed;
       z-index: 11;
@@ -1099,4 +1030,10 @@ export default {
       }
     }
   }
+
+  .searching {
+
+  }
+
+}
 </style>

src/pages/message/Visitors.vue

@@ -44,7 +44,7 @@
         v-model="isShowSetting"
         mode="white"
         mask-mode="dark"
-        height="25rem"
+        height="27rem"
         :show-heng-gang="false"
     >
       <div class="setting-dialog">

src/pages/people/FindAcquaintance.vue

@@ -13,16 +13,16 @@
     <SlideRowList v-model:active-index="currentSlideItemIndex">
       <SlideItem class="tab1" style="overflow: auto;">
         <div class="mr2r ml2r mt1r">
-          <Search v-if="!isShowText"
+          <Search v-if="!isShowRightText"
                   placeholder="搜索用户名字/抖音号"
-                  :is-show-text="false"
-                  @click="isShowText = true">
+                  :is-show-right-text="false"
+                  @click="isShowRightText = true">
             <img src="../../assets/img/icon/scan-gray.png" style="width: 1rem;transform: scale(1.5)"
                  @click.stop="$nav('/scan')">
           </Search>
-          <Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
+          <Search v-else v-model="searchKey" :is-show-right-text="true" @notice="search" @clear="isSearch = false"></Search>
         </div>
-        <div class="no-search" v-if="!isShowText">
+        <div class="no-search" v-if="!isShowRightText">
           <div class="look-address-list" @click="findAddressListDialog = true">
             <img class="left" src="../../assets/img/icon/people/address-book.png" alt="">
             <div class="right">
@@ -149,7 +149,7 @@ export default {
       moreOptionDialog: false,
       outWebImgAccountDialog: false,
       indicatorFixed: false,
-      isShowText: false,
+      isShowRightText: false,
       isSearch: false,
       searchKey: '',
 
@@ -194,8 +194,8 @@ export default {
       this.isSearch = true
     },
     back() {
-      if (this.isShowText) {
-        this.isShowText = false
+      if (this.isShowRightText) {
+        this.isShowRightText = false
       } else {
         this.$back()
       }

src/pages/people/FollowAndFans.vue

@@ -21,7 +21,7 @@
       </div>
       <SlideRowList v-model:active-index="slideIndex" style="height: calc(100vh - 11.1rem)">
         <SlideItem class="tab1">
-          <Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-text="false"/>
+          <Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-right-text="false"/>
           <div class="is-search" v-if="searchKey">
             <div class="search-result" v-if="searchFriends.length">
               <People v-for="item in searchFriends " :people="item"></People>
@@ -97,8 +97,8 @@ export default {
       this.isSearch = true
     },
     back() {
-      if (this.isShowText) {
-        this.isShowText = false
+      if (this.isShowRightText) {
+        this.isShowRightText = false
       } else {
         this.$back()
       }