From b6f0aeea919f05fb3a4d68eefae0e6e56decaf13 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 20 Jul 2021 02:07:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=86=9F=E4=BA=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/utils.scss             | 100 ++++++++--------
 src/components/Search.vue              |  86 +++++++++-----
 src/pages/me/Me.vue                    |   2 -
 src/pages/me/userinfo/ChooseSchool.vue |  27 +----
 src/pages/people/FindAcquaintance.vue  | 154 +++++++++++++++++++++++--
 src/pages/people/components/People.vue |   2 -
 6 files changed, 255 insertions(+), 116 deletions(-)

diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss
index 6113a1f..fa258af 100644
--- a/src/assets/scss/utils.scss
+++ b/src/assets/scss/utils.scss
@@ -51,45 +51,45 @@
 margin
 
 */
-$margin: 50;
+$margin: 5;
 
-@while $margin >= 5 {
-  .ml#{$margin}p {
-    margin-left: #{$margin}px !important;
+@while $margin >= 0 {
+  .ml#{$margin}r {
+    margin-left: #{$margin}rem !important;
   }
-  $margin: $margin - 5;
+  $margin: $margin - 1;
 }
 
-$margin: 50;
-@while $margin >= 5 {
-  .mr#{$margin}p {
-    margin-right: #{$margin}px !important;
+$margin: 5;
+@while $margin >= 0 {
+  .mr#{$margin}r {
+    margin-right: #{$margin}rem !important;
   }
-  $margin: $margin - 5;
+  $margin: $margin - 1;
 }
 
-$margin: 50;
-@while $margin >=5 {
-  .mt#{$margin}p {
-    margin-top: #{$margin}px !important;
+$margin: 5;
+@while $margin >=0 {
+  .mt#{$margin}r {
+    margin-top: #{$margin}rem !important;
   }
-  $margin: $margin - 5;
+  $margin: $margin - 1;
 }
 
-$margin: 50;
-@while $margin >= 5 {
-  .mb#{$margin}p {
-    margin-bottom: #{$margin}px !important;
+$margin: 5;
+@while $margin >= 0 {
+  .mb#{$margin}r {
+    margin-bottom: #{$margin}rem !important;
   }
-  $margin: $margin - 5;
+  $margin: $margin - 1;
 }
 
-$margin: 50;
-@while $margin >= 5 {
-  .m#{$margin}p {
-    margin: #{$margin}px !important;
+$margin: 5;
+@while $margin >= 0 {
+  .m#{$margin}r {
+    margin: #{$margin}rem !important;
   }
-  $margin: $margin - 5;
+  $margin: $margin - 1;
 }
 
 
@@ -100,44 +100,44 @@ padding
 */
 
 
-$padding: 50;
-@while $padding >= 5 {
-  .pl#{$padding}p {
-    padding-left: #{$padding}px !important;
+$padding: 5;
+@while $padding >= 0 {
+  .pl#{$padding}r {
+    padding-left: #{$padding}rem !important;
   }
-  $padding: $padding - 5;
+  $padding: $padding - 1;
 }
 
-$padding: 50;
-@while $padding >= 5 {
-  .pr#{$padding}p {
-    padding-right: #{$padding}px !important;
+$padding: 5;
+@while $padding >= 0 {
+  .pr#{$padding}r {
+    padding-right: #{$padding}rem !important;
   }
-  $padding: $padding - 5;
+  $padding: $padding - 1;
 }
 
-$padding: 50;
-@while $padding >= 5 {
-  .pt#{$padding}p {
-    padding-top: #{$padding}px !important;
+$padding: 5;
+@while $padding >= 0 {
+  .pt#{$padding}r {
+    padding-top: #{$padding}rem !important;
   }
-  $padding: $padding - 5;
+  $padding: $padding - 1;
 }
 
-$padding: 50;
-@while $padding >= 5 {
-  .pb#{$padding}p {
-    padding-bottom: #{$padding}px !important;
+$padding: 5;
+@while $padding >= 0 {
+  .pb#{$padding}r {
+    padding-bottom: #{$padding}rem !important;
   }
-  $padding: $padding - 5;
+  $padding: $padding - 1;
 }
 
-$padding: 50;
-@while $padding >= 5 {
-  .p#{$padding}p {
-    padding: #{$padding}px !important;
+$padding: 5;
+@while $padding >= 0 {
+  .p#{$padding}r {
+    padding: #{$padding}rem !important;
   }
-  $padding: $padding - 5;
+  $padding: $padding - 1;
 }
 
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
index d47290e..9917fa5 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,8 +1,14 @@
 <template>
-  <div class="search">
-    <img src="../assets/img/icon/pause.svg" alt="">
-    <input type="text" :placeholder="placeholder" v-model="value">
-    <img v-if="value.length" class="close" src="../assets/img/icon/close.svg" @click="clear">
+  <div class="search-ctn">
+    <div class="search">
+      <img class="search-icon" src="../assets/img/icon/pause.svg" alt="">
+      <input autofocus 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/close.svg" @click="clear">
+      </div>
+    </div>
+    <div v-if="isShowText" class="notice" :style="{color : notice}" @click="$emit('notice')">搜索</div>
   </div>
 </template>
 
@@ -18,12 +24,22 @@ export default {
       type: String,
       default: ''
     },
+    notice: {
+      type: String,
+      default: 'red'
+    },
+    isShowText: {
+      type: Boolean,
+      default: false
+    },
   },
   methods: {
     clear() {
       this.value = ''
     }
   },
+  mounted() {
+  },
   computed: {
     value: {
       get() {
@@ -43,38 +59,52 @@ export default {
 <style scoped lang="scss">
 @import "../assets/scss/color";
 
-.search {
-  position: relative;
-  height: 36px;
-  background: rgb(59, 59, 71);
-  border-radius: 2px;
+.search-ctn {
   display: flex;
   align-items: center;
 
-  img {
-    height: 15px;
-    width: 15px;
-    margin: 0 10px;
+  .notice {
+    margin-left: 2rem;
+    font-size: 1.6rem;
   }
 
-  input {
-    font-size: 1.6rem;
-    color: white;
-    height: 50%;
-    width: 100%;
-    outline: none;
-    border: none;
-    background: transparent;
+  .search {
+    flex: 1;
+    position: relative;
+    height: 3.6rem;
+    background: rgb(59, 59, 71);
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
 
-    &::-webkit-input-placeholder {
-      color: $second-text-color;
+    .search-icon {
+      height: 1.5rem;
+      width: 1.5rem;
+      margin: 0 1rem;
     }
-  }
 
-  .close {
-    position: absolute;
-    right: 0;
-    width: 1rem;
+    input {
+      font-size: 1.6rem;
+      color: white;
+      height: 50%;
+      width: 100%;
+      outline: none;
+      border: none;
+      background: transparent;
+
+      &::-webkit-input-placeholder {
+        color: $second-text-color;
+      }
+    }
+
+    .suffix {
+      position: absolute;
+      right: 2rem;
+
+      img {
+        width: 1rem;
+      }
+    }
   }
 }
 
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index f1f2d2d..6e4b694 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -541,10 +541,8 @@ export default {
           width: 25px;
           margin-bottom: 15px;
         }
-
       }
     }
-
   }
 
   .button-ctn {
diff --git a/src/pages/me/userinfo/ChooseSchool.vue b/src/pages/me/userinfo/ChooseSchool.vue
index 2559fbf..6f22c43 100644
--- a/src/pages/me/userinfo/ChooseSchool.vue
+++ b/src/pages/me/userinfo/ChooseSchool.vue
@@ -8,10 +8,11 @@
         <span class="f14" @click="$nav('/declare-school',{type:1})">没有找到?</span>
       </template>
       <template v-slot:bottom>
-        <div class="search-ctn">
-          <Search placeholder="搜索大学名称" v-model="schoolName" @clear="isSearch = false"></Search>
-          <span class="search-btn" @click="search">搜索</span>
-        </div>
+        <Search class="mt1r mb1r ml2r mr2r" placeholder="搜索大学名称"
+                v-model="schoolName"
+                @clear="isSearch = false"
+                :is-show-text="true"
+                @notice="search"></Search>
       </template>
     </BaseHeader>
     <div class="content">
@@ -107,24 +108,6 @@ export default {
   color: white;
   overflow: auto;
 
-  .search-ctn {
-    background: $main-bg;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 1rem 2rem;
-    display: flex;
-    align-items: center;
-
-    .search {
-      flex: 1;
-    }
-
-    .search-btn {
-      font-size: 1.4rem;
-      margin-left: 2rem;
-      color: $primary-btn-color;
-    }
-  }
 
   .content {
     padding-top: 12rem;
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index c6ff402..a45be51 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="FindAcquaintance">
     <div class="header">
-      <img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
+      <img src="../../assets/img/icon/back.png" alt="" class="back" @click="back">
       <Indicator
           style="width: 50%;"
           tabStyleWidth="40%"
@@ -11,14 +11,44 @@
       <img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
     <SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}">
-      <SlideItem>
+      <SlideItem class="tab1">
         <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
         <div class="title">我的好友（互相关注）</div>
         <People v-for="item in list " :people="item"></People>
         <NoMore></NoMore>
       </SlideItem>
-      <SlideItem>
-        <Search :key="1"></Search>
+      <SlideItem class="tab2">
+        <div class="mr2r ml2r mt1r">
+          <Search v-if="!isShowText" :is-show-text="false" @click="isShowText = true">
+            <img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="t">
+          </Search>
+          <Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
+        </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="">
+            <div class="right">
+              <div class="notice">
+                <div class="text1">查看通讯录朋友</div>
+                <div class="text2">看看谁在抖音</div>
+              </div>
+              <img src="../../assets/img/icon/back.png" alt="">
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="title">
+            朋友推荐
+            <img src="../../assets/img/icon/close.svg" style="width: 1rem;">
+          </div>
+          <People v-for="item in list " :people="item"></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>
+        </div>
       </SlideItem>
     </SlideRowList>
 
@@ -81,8 +111,12 @@ export default {
   data() {
     return {
       findAddressListDialog: false,
-      moreOptionDialog: true,
+      moreOptionDialog: false,
       indicatorFixed: false,
+      isShowText: false,
+      isSearch: false,
+      searchKey: '',
+
       currentSlideItemIndex: 1,
       list: [
         {
@@ -106,7 +140,24 @@ export default {
   computed: {},
   mounted() {
   },
-  methods: {}
+  methods: {
+    t() {
+      console.log('scan')
+    },
+    async search() {
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.isSearch = true
+    },
+    back() {
+      if (this.isShowText) {
+        this.isShowText = false
+      } else {
+        this.$back()
+      }
+    }
+  }
 }
 </script>
 
@@ -145,11 +196,91 @@ export default {
     }
   }
 
-  .title {
-    margin-left: 2rem;
-    margin-top: 2rem;
-    color: $second-text-color;
-    font-size: 1.2rem;
+  .tab1 {
+    .title {
+      margin-left: 2rem;
+      margin-top: 2rem;
+      color: $second-text-color;
+      font-size: 1.2rem;
+    }
+  }
+
+  .tab2 {
+    .title {
+      display: flex;
+      align-items: center;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+      color: $second-text-color;
+      font-size: 1.2rem;
+
+      img {
+        width: 1rem;
+      }
+    }
+
+    .no-search {
+      padding: 2rem;
+
+      .look-address-list {
+        margin: 0 2rem 2rem 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left {
+          background: $second-btn-color;
+          border-radius: 50%;
+          padding: 1rem;
+          width: 2.4rem;
+          margin-right: 1.8rem;
+        }
+
+        .right {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          img {
+            height: 2rem;
+          }
+
+          .notice {
+
+            .text1 {
+              font-size: 1.6rem;
+              margin-bottom: .5rem;
+            }
+
+            .text2 {
+              font-size: 1.2rem;
+              color: $second-text-color;
+            }
+          }
+        }
+      }
+    }
+
+    .is-search {
+      padding: 0 2rem 2rem 2rem;
+
+      .tooltip {
+        margin-top: 2rem;
+        display: flex;
+        align-items: center;
+        color: $second-text-color;
+
+        img {
+          margin-right: 1rem;
+          width: 1.5rem;
+        }
+
+        .searchKey {
+          color: yellow;
+        }
+      }
+    }
   }
 
   .dialog {
@@ -228,7 +359,6 @@ export default {
 
   }
 
-
   .more-option-dialog {
     z-index: 9;
     position: fixed;
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index 978ac5e..13a92bf 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -93,7 +93,6 @@ export default {
 
 
   .head-image {
-    margin-left: 20px;
     margin-right: 15px;
     width: 48px;
     height: 48px;
@@ -120,7 +119,6 @@ export default {
     }
 
     .right {
-      margin-right: 20px;
       display: flex;
       align-items: center;