From 753bf2fc1bedef460380f60db2eb0c9a9095ed2a Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 7 Sep 2021 01:15:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96uploader=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |    4 +
 src/App.vue                                   |    6 +-
 src/assets/scss/custom.less                   |    9 +-
 src/components/Comment.vue                    |   10 +-
 src/components/Search.vue                     |   39 +-
 src/components/Share.vue                      |    4 -
 src/components/dialog/ConfirmDialog.vue       |    2 +-
 src/components/dialog/FromBottomDialog.vue    |   15 +-
 src/config/index.js                           |    8 +-
 src/pages/Test.vue                            |  138 +-
 src/pages/home/Index2.vue                     |   58 +-
 src/pages/home/components/FollowSetting.vue   |  184 +++
 src/pages/home/components/FollowSetting2.vue  |  167 +++
 src/pages/me/Me.less                          |    5 +-
 src/pages/me/Uploader.less                    |  212 ++-
 src/pages/me/Uploader.vue                     |  231 ++--
 src/pages/message/Chat.vue                    |    3 +-
 src/pages/message/ChatDetail.vue              |   53 +-
 src/pages/message/Message.vue                 |    2 +-
 src/pages/message/components/BlockDialog.vue  |   81 ++
 .../message/components/swtich/switches.vue    |    2 +-
 src/router/index.js                           |    4 +-
 src/store/index.js                            | 1134 ++++++++---------
 src/utils/global-methods.js                   |   28 +-
 24 files changed, 1498 insertions(+), 901 deletions(-)
 create mode 100644 src/pages/home/components/FollowSetting.vue
 create mode 100644 src/pages/home/components/FollowSetting2.vue
 create mode 100644 src/pages/message/components/BlockDialog.vue

diff --git a/public/index.html b/public/index.html
index 2981b05..277192b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,10 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
+        ::-webkit-scrollbar {
+            display: none; /* Chrome Safari */
+        }
+
         .fade-in {
             animation: fade-in .3s;
         }
diff --git a/src/App.vue b/src/App.vue
index 1b92f51..9bb5cc1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,8 +73,8 @@ export default {
         '/my-card',
         '/scan',
         '/face-to-face',
-        '/chat',
-        '/chat-detail',
+        '/message/chat',
+        '/message/chat-detail',
         '/set-remark',
         '/me/request-update',
         '/me/right-menu/look-history',
@@ -99,7 +99,7 @@ export default {
     }
   },
   mounted() {
-    this.$store.dispatch('getFriends')
+    // this.$store.dispatch('getFriends')
     try {
       navigator.control.gesture(false);
     } catch (e) {
diff --git a/src/assets/scss/custom.less b/src/assets/scss/custom.less
index e838a54..9084f10 100644
--- a/src/assets/scss/custom.less
+++ b/src/assets/scss/custom.less
@@ -31,6 +31,12 @@
     }
   }
 
+  &.active {
+    &:active {
+      background: @active-main-bg;
+    }
+  }
+
   &.no-padding {
     padding: 0;
   }
@@ -39,9 +45,6 @@
     border-bottom: 1px solid @line-color;
   }
 
-  &:active {
-    background: @active-main-bg;
-  }
 
   .left {
     display: flex;
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 1093a50..0f191a2 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -100,15 +100,12 @@
           <img v-if="comment" src="../assets/img/icon/message/up.png" @click="send">
         </div>
       </div>
-
       <ConfirmDialog
           title="私信给"
           ok-text="发送"
           v-model:visible="showPrivateChat"
       >
-        <div class="private-chat">
-
-        </div>
+        <Search mode="light" v-model="test" :isShowSearchIcon="false"/>
       </ConfirmDialog>
     </div>
   </from-bottom-dialog>
@@ -120,6 +117,7 @@ import ConfirmDialog from "./dialog/ConfirmDialog";
 import {mapState} from "vuex";
 import FromBottomDialog from "./dialog/FromBottomDialog";
 import Loading from "./Loading";
+import Search from "./Search";
 
 export default {
   name: "Comment",
@@ -127,7 +125,8 @@ export default {
     AutoInput,
     ConfirmDialog,
     FromBottomDialog,
-    Loading
+    Loading,
+    Search
   },
   props: {
     modelValue: false,
@@ -151,6 +150,7 @@ export default {
   data() {
     return {
       comment: '',
+      test: '',
       comments: [],
       options: [
         {id: 1, name: '私信回复'},
diff --git a/src/components/Search.vue b/src/components/Search.vue
index c274a25..6698747 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="search-ctn">
+  <div class="search-ctn" :class="mode">
     <div class="search">
-      <img class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
+      <img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
       <input type="text" :placeholder="placeholder" v-model="value">
       <div class="suffix">
         <slot v-if="$slots.default"></slot>
@@ -32,9 +32,17 @@ export default {
       type: Boolean,
       default: false
     },
-    showText:{
-      type:String,
-      default:'搜索'
+    isShowSearchIcon: {
+      type: Boolean,
+      default: true
+    },
+    showText: {
+      type: String,
+      default: '搜索'
+    },
+    mode: {
+      type: String,
+      default: 'dark'
     }
   },
   methods: {
@@ -67,6 +75,22 @@ export default {
   display: flex;
   align-items: center;
 
+  &.dark {
+    .search {
+      background: @second-btn-color-tran;
+    }
+  }
+
+  &.light {
+    .search {
+      background: whitesmoke;
+
+      input {
+        color: black;
+      }
+    }
+  }
+
   .notice {
     margin-left: 2rem;
     font-size: 1.6rem;
@@ -78,7 +102,6 @@ export default {
     flex: 1;
     position: relative;
     height: 3.6rem;
-    background: @second-btn-color-tran;
     border-radius: 2px;
     display: flex;
     align-items: center;
@@ -86,7 +109,7 @@ export default {
     .search-icon {
       height: 2rem;
       width: 2rem;
-      margin: 0 1rem;
+      margin-left: 1rem;
     }
 
     input {
@@ -96,7 +119,7 @@ export default {
       width: 100%;
       outline: none;
       border: none;
-      padding: 0;
+      padding: 0 0 0 1rem;
       background: transparent;
 
       &::-webkit-input-placeholder {
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 13e0681..d0bb825 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -195,10 +195,6 @@ export default {
 <style lang="less" scoped>
 @import "../assets/scss/index";
 
-::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-
 .share {
   width: 100%;
   background: black;
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index b84638d..f4e520e 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -4,8 +4,8 @@
       <div class="body">
         <div class="title" v-if="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
+        <slot></slot>
       </div>
-      <slot></slot>
       <div class="footer">
         <div class="cancel" :class="cancelTextColor" @click.stop="cancel">{{ cancelText }}</div>
         <div class="ok" @click.stop="ok">{{ okText }}</div>
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index 4bf1077..19e7cec 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -44,7 +44,7 @@ export default {
     //触摸，是否可以滑动
     touchMoved: {
       type: Boolean,
-      default:true
+      default: true
     },
     maskMode: {
       type: String,
@@ -69,8 +69,10 @@ export default {
       if (newVal) {
         if (this.pageId) {
           let page = document.getElementById(this.pageId)
+          this.pagePosition = this.$getCss2(page, 'position')
           page.style.position = 'absolute'
         } else {
+          this.pagePosition = this.$getCss2(app.children[0], 'position')
           app.children[0].style.position = 'absolute'
         }
         this.scroll = document.documentElement.scrollTop
@@ -79,9 +81,9 @@ export default {
       } else {
         if (this.pageId) {
           let page = document.getElementById(this.pageId)
-          page.style.position = 'fixed'
+          page.style.position = this.pagePosition || 'fixed'
         } else {
-          app.children[1].style.position = 'fixed'
+          app.children[1].style.position = this.pagePosition || 'fixed'
         }
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
@@ -100,6 +102,7 @@ export default {
       startLocationY: 0,
       moveYDistance: 0,
       startTime: 0,
+      pagePosition: null
     }
   },
   computed: {
@@ -143,13 +146,13 @@ export default {
       this.$emit('cancel')
     },
     start(e) {
-      if (!this.touchMoved)return;
+      if (!this.touchMoved) return;
       if (this.$refs.dialog.scrollTop !== 0) return
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
     },
     move(e) {
-      if (!this.touchMoved)return;
+      if (!this.touchMoved) return;
       if (this.$refs.dialog.scrollTop !== 0) return
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
       if (this.moveYDistance > 0) {
@@ -157,7 +160,7 @@ export default {
       }
     },
     end(e) {
-      if (!this.touchMoved)return;
+      if (!this.touchMoved) return;
       //点击
       if (Date.now() - this.startTime < 150) return
 
diff --git a/src/config/index.js b/src/config/index.js
index 33be0ef..839c41b 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,8 +1,8 @@
 export default {
-  // baseUrl: 'http://192.168.0.105/index.php/v1',
-  // filePreview:'http://192.168.0.105/static/uploads/',
-  baseUrl: 'http://192.168.10.164//index.php/v1',
-  filePreview:'http://192.168.10.164/static/uploads/'
+  baseUrl: 'http://192.168.0.103/index.php/v1',
+  filePreview:'http://192.168.0.103/static/uploads/',
+  // baseUrl: 'http://192.168.10.164//index.php/v1',
+  // filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost//index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }
\ No newline at end of file
diff --git a/src/pages/Test.vue b/src/pages/Test.vue
index f41ab28..d1032a2 100644
--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@@ -6,39 +6,33 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="my-buttons">
-        <div class="follow-display">
-          <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
-            <div class="no-follow" @click="isFollowed = true">
-              <img src="../assets/img/icon/add-white.png" alt="">
-              <span>关注</span>
-            </div>
-            <div class="followed">
-              <div class="l-button" @click="isFollowed = false">
-                <span>已关注</span>
-                <img src="../assets/img/icon/arrow-up-white.png" alt="">
-              </div>
-              <div class="l-button">
-                <span>私信</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="option" @click="isFollowed = !isFollowed">
-          <img src="../assets/img/icon/arrow-up-white.png" alt="">
-        </div>
-      </div>
+      <ConfirmDialog
+          title="设置备注名"
+          ok-text="确认"
+          v-model:visible="showFollowSetting"
+      >
+        <Search mode="light" v-model="t" :isShowSearchIcon="false"/>
+      </ConfirmDialog>
     </div>
   </div>
 </template>
 <script>
 
+import ConfirmDialog from "../components/dialog/ConfirmDialog";
+import Search from "../components/Search";
+
 export default {
   name: "Test",
+  components: {
+    ConfirmDialog,
+    Search
+  },
   props: {},
   data() {
     return {
-      isFollowed: true
+      showFollowSetting: true,
+      switches1: true,
+      t: ''
     }
   },
   computed: {},
@@ -51,6 +45,7 @@ export default {
 <style scoped lang="less">
 @import "../assets/scss/index";
 
+
 .Test {
   position: fixed;
   left: 0;
@@ -62,103 +57,12 @@ export default {
 
   .content {
     padding-top: 6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
-    .my-buttons {
-      margin-top: 2rem;
-      overflow: hidden;
-      width: 80%;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      @width: 3.6rem;
-
-      .follow-display {
-        flex: 1;
-        overflow: hidden;
-
-        .follow-wrapper {
-          width: 200%;
-          display: flex;
-          flex-wrap: nowrap;
-          transition: all .3s ease;
-
-          &.follow-wrapper-followed {
-            transform: translate3d(-50%, 0, 0);
-          }
-
-          .no-follow {
-            width: calc(100% - 0.5rem);
-            color: white;
-            border-radius: .2rem;
-            background: @primary-btn-color;
-            height: @width;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: .5rem;
-            box-sizing: border-box;
-
-            span {
-              margin-left: .2rem;
-            }
-          }
-
-          .followed {
-            width: 100%;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            .l-button {
-              color: white;
-              border-radius: .2rem;
-              background: @second-btn-color;
-              height: @width;
-              width: 50%;
-              margin-right: .5rem;
-              box-sizing: border-box;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              span {
-                margin-left: .2rem;
-              }
-
-              img {
-                transform: rotate(180deg);
-              }
-            }
-          }
-        }
-
-      }
-
-
-      .option {
-        position: relative;
-        width: @width;
-        height: @width;
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: .2rem;
-        background: @second-btn-color;
-        color: white;
-      }
-
-      img {
-        @width: 1.6rem;
-        width: @width;
-        height: @width;
-      }
+    .private-chat {
 
     }
-
   }
+
+
 }
 </style>
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index df031a5..1f74741 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -2,6 +2,7 @@
   <div id="home-index">
     <SlideRowList
         name="baseSlide"
+        :canMove="canMove"
         v-model:active-index="baseActiveIndex">
       <SlideItem>
         <SlideRowList
@@ -105,7 +106,12 @@
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
-        <Uploader/>
+        <Uploader
+            @toggleCanMove="e => this.canMove = e"
+            @back="baseActiveIndex = 0"
+            @showFollowSetting="showFollowSetting = true"
+            @showFollowSetting2="showFollowSetting2 = true"
+        />
       </SlideItem>
     </SlideRowList>
 
@@ -126,9 +132,10 @@
            @share2Webo="shareType = 8"
            @download="shareType = 9"
     />
+
     <PlayFeedback v-model="showPlayFeedback"/>
 
-    <DouyinCode v-model="showDouyinCode"></DouyinCode>
+    <DouyinCode v-model="showDouyinCode"/>
 
     <Duoshan v-model="showShareDuoshan"/>
 
@@ -136,6 +143,26 @@
              :videoId="videos[videoActiveIndex]?.id"
              :canDownload="videos[videoActiveIndex]?.canDownload"
     />
+
+    <FollowSetting
+        @showChangeNote="delayShowDialog( e => this.showChangeNote = true)"
+        @showBlockDialog="delayShowDialog(e => this.showBlockDialog = true)"
+        @showShare="delayShowDialog( e => this.isSharing = true)"
+        v-model="showFollowSetting"/>
+
+
+    <FollowSetting2
+        v-model="showFollowSetting2"/>
+
+    <BlockDialog v-model="showBlockDialog"/>
+
+    <ConfirmDialog
+        title="设置备注名"
+        ok-text="确认"
+        v-model:visible="showChangeNote"
+    >
+      <Search mode="light" v-model="test" :isShowSearchIcon="false"/>
+    </ConfirmDialog>
   </div>
 </template>
 <script>
@@ -161,6 +188,11 @@ import Duoshan from "./components/Duoshan";
 import ShareTo from "./components/ShareTo";
 import DouyinCode from "../../components/DouyinCode";
 import Uploader from "../me/Uploader";
+import FollowSetting from "./components/FollowSetting";
+import BlockDialog from "../message/components/BlockDialog";
+import Search from "../../components/Search";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
+import FollowSetting2 from "./components/FollowSetting2";
 
 export default {
   name: "HomeIndex",
@@ -175,7 +207,12 @@ export default {
     PlayFeedback,
     Duoshan,
     ShareTo,
-    DouyinCode
+    DouyinCode,
+    FollowSetting,
+    FollowSetting2,
+    BlockDialog,
+    Search,
+    ConfirmDialog
   },
   data() {
     return {
@@ -393,6 +430,7 @@ export default {
       ],
       isCommenting: false,
       isSharing: false,
+      canMove: true,
 
       shareType: -1,
 
@@ -401,6 +439,13 @@ export default {
       showShareDialog: false,
       showShare2WeChatZone: false,
       showDouyinCode: false,
+      showFollowSetting: false,
+      showFollowSetting2: false,
+      showBlockDialog: false,
+      showChangeNote: false,
+
+      test: '',
+
 
       videoActiveIndex: 0,
       baseActiveIndex: 0,
@@ -454,6 +499,11 @@ export default {
     this.width = document.body.clientWidth
   },
   methods: {
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 500)
+    },
     dislike() {
       this.$notice('操作成功，将减少此类视频的推荐')
     },
@@ -474,7 +524,7 @@ export default {
       }
     },
     t(e) {
-      console.log(e)
+      console.log('ttttt', e)
     },
     end() {
       this.$notice('暂时没有更多了')
diff --git a/src/pages/home/components/FollowSetting.vue b/src/pages/home/components/FollowSetting.vue
new file mode 100644
index 0000000..a10c315
--- /dev/null
+++ b/src/pages/home/components/FollowSetting.vue
@@ -0,0 +1,184 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      :show-heng-gang="false"
+      maskMode="dark"
+      @cancel="cancel()"
+      height="33rem"
+      mode="light">
+    <div class="follow-setting-dialog">
+      <div class="dialog-header">
+        <div class="title-wrapper">
+          <span class="title">成都验证码</span>
+          <span class="subtitle">私信给朋友</span>
+        </div>
+        <back mode="dark" img="close" direction="right" @click="cancel()"></back>
+      </div>
+      <div class="options">
+        <div class="option" @click="cancel(e => $emit('showShare'))">
+          <img src="../../../assets/img/icon/components/follow/share.png" alt="">
+          <span>分享主页</span>
+        </div>
+        <div class="option" @click="cancel(e => $nav('/message/chat'))">
+          <img src="../../../assets/img/icon/components/follow/private-chat.png" alt="">
+          <span>发私信</span>
+        </div>
+        <div class="option" @click="cancel(e => $nav('/home/report'))">
+          <img src="../../../assets/img/icon/components/follow/report.png" alt="">
+          <span>举报</span>
+        </div>
+        <div class="option" @click="cancel(e => $emit('showBlockDialog'))">
+          <img src="../../../assets/img/icon/components/follow/forbid.png" alt="">
+          <span>拉黑</span>
+        </div>
+      </div>
+      <div class="l-rows">
+        <div class="l-row" @click="cancel(e => $emit('showChangeNote'))">
+          <div class="left">设置备注名</div>
+          <div class="right">
+            <img src="../../../assets/img/icon/components/follow/write.png" alt="">
+          </div>
+        </div>
+        <div class="l-row">
+          <div class="left">在关注列表中置顶</div>
+          <div class="right">
+            <switches v-model="switches1" theme="bootstrap" color="success"></switches>
+          </div>
+        </div>
+        <div class="l-row">
+          <div class="left">不让TA看</div>
+          <div class="right">
+            <switches v-model="switches1" theme="bootstrap" color="success"></switches>
+          </div>
+        </div>
+      </div>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Switches from "../../message/components/swtich/switches";
+
+export default {
+  name: "FollowSetting",
+  components: {
+    FromBottomDialog,
+    Switches
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      switches1: false,
+      switches2: false,
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    cancel(cb) {
+      this.$emit('update:modelValue', false)
+      cb && cb()
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.follow-setting-dialog {
+  padding: 1.5rem;
+  font-size: 1.4rem;
+
+  .dialog-header {
+    color: rgb(81, 81, 89);
+    font-size: 1.4rem;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .title-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title {
+      font-size: 1.8rem;
+    }
+
+    .subtitle {
+      margin-top: .5rem;
+      color: @second-text-color;
+      font-size: 1.3rem;
+    }
+
+    img {
+      width: 1.4rem;
+      height: 1.4rem;
+      padding: .6rem;
+      border-radius: 50%;
+      background: rgba(187, 187, 194, 0.4);
+    }
+  }
+
+  .options {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+
+    .option {
+      box-sizing: border-box;
+      padding: 1rem;
+      display: flex;
+      background: white;
+      flex-direction: column;
+      align-items: center;
+      width: 23%;
+      font-size: 1.2rem;
+      border-radius: .8rem;
+
+      img {
+        margin-top: .5rem;
+        margin-bottom: 1rem;
+        @width: 2rem;
+        width: @width;
+        height: @width;
+      }
+    }
+  }
+
+  .l-rows {
+    margin-top: 2rem;
+
+    .l-row {
+      height: 4.5rem;
+      padding: 0 2rem;
+      background: white;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(222, 222, 222, 0.42);
+
+      &:nth-child(1) {
+        border-radius: 1rem 1rem 0 0;
+      }
+
+      &:nth-child(3) {
+        border-bottom: none;
+        border-radius: 0 0 1rem 1rem;
+      }
+
+      img {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/pages/home/components/FollowSetting2.vue b/src/pages/home/components/FollowSetting2.vue
new file mode 100644
index 0000000..2c69f20
--- /dev/null
+++ b/src/pages/home/components/FollowSetting2.vue
@@ -0,0 +1,167 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      :show-heng-gang="false"
+      maskMode="dark"
+      @cancel="cancel()"
+      height="33rem"
+      mode="light">
+    <div class="follow-setting-dialog">
+      <div class="dialog-header">
+        <div class="title-wrapper">
+          <span class="title">成都验证码</span>
+          <span class="subtitle">私信给朋友</span>
+        </div>
+        <back mode="dark" img="close" direction="right" @click="cancel()"></back>
+      </div>
+      <div class="l-rows">
+
+        <div class="l-row">
+          <div class="left">不让TA看</div>
+          <div class="right">
+            <switches v-model="switches1" theme="bootstrap" color="success"></switches>
+          </div>
+        </div>
+        <div class="l-row">
+          <div class="left">在关注列表中置顶</div>
+          <div class="right">
+            <switches v-model="switches1" theme="bootstrap" color="success"></switches>
+          </div>
+        </div>
+        <div class="l-row" @click="cancel(e => $emit('cancelFollow'))">
+          <div class="left">取消关注</div>
+          <div class="right">
+            <img src="../../../assets/img/icon/components/follow/reduce.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Switches from "../../message/components/swtich/switches";
+
+export default {
+  name: "FollowSetting",
+  components: {
+    FromBottomDialog,
+    Switches
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      switches1: false,
+      switches2: false,
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    cancel(cb) {
+      this.$emit('update:modelValue', false)
+      cb && cb()
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.follow-setting-dialog {
+  padding: 1.5rem;
+  font-size: 1.4rem;
+
+  .dialog-header {
+    color: rgb(81, 81, 89);
+    font-size: 1.4rem;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .title-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title {
+      font-size: 1.8rem;
+    }
+
+    .subtitle {
+      margin-top: .5rem;
+      color: @second-text-color;
+      font-size: 1.3rem;
+    }
+
+    img {
+      width: 1.4rem;
+      height: 1.4rem;
+      padding: .6rem;
+      border-radius: 50%;
+      background: rgba(187, 187, 194, 0.4);
+    }
+  }
+
+  .options {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+
+    .option {
+      box-sizing: border-box;
+      padding: 1rem;
+      display: flex;
+      background: white;
+      flex-direction: column;
+      align-items: center;
+      width: 23%;
+      font-size: 1.2rem;
+      border-radius: .8rem;
+
+      img {
+        margin-top: .5rem;
+        margin-bottom: 1rem;
+        @width: 2rem;
+        width: @width;
+        height: @width;
+      }
+    }
+  }
+
+  .l-rows {
+    margin-top: 2rem;
+
+    .l-row {
+      height: 4.5rem;
+      padding: 0 2rem;
+      background: white;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(222, 222, 222, 0.42);
+
+      &:nth-child(1) {
+        border-radius: 1rem 1rem 0 0;
+      }
+
+      &:nth-child(3) {
+        border-bottom: none;
+        border-radius: 0 0 1rem 1rem;
+      }
+
+      img {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index 5903171..7d2f5ff 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -246,7 +246,6 @@
     }
   }
 
-
   .desc {
     header {
       color: white;
@@ -261,8 +260,10 @@
     }
 
     .detail {
+      transform: translateY(-1rem);
       background: @main-bg;
-      padding: 0 2rem .5rem 2rem;
+      padding: 0 2rem 0 2rem;
+      border-radius: 1rem 1rem 0 0 ;
 
       .head {
         width: 100%;
diff --git a/src/pages/me/Uploader.less b/src/pages/me/Uploader.less
index 8930aca..a2aa500 100644
--- a/src/pages/me/Uploader.less
+++ b/src/pages/me/Uploader.less
@@ -11,11 +11,22 @@
   opacity: 0;
 }
 
+.recommend-enter-active,
+.recommend-leave-active {
+  transition: all 0.3s ease;
+}
+
+.recommend-enter-from,
+.recommend-leave-to {
+  transform: translateY(-100%);
+}
+
+.FromBottomDialog {
+  left: inherit;
+}
 
 
-
-
-.Uploader {
+#Uploader {
   position: fixed;
   background: @main-bg;
   height: 100%;
@@ -210,6 +221,9 @@
     transition: all .2s;
 
     .center {
+      left: 50%;
+      transform: translateX(-50%);
+      position: absolute;
       color: white;
     }
 
@@ -222,24 +236,54 @@
     }
 
     .left {
-      font-size: 1.2rem;
-      height: 2.6rem;
-      display: flex;
-      padding-right: 1.3rem;
-      padding-left: .5rem;
-      align-items: center;
-      border-radius: 2rem;
-      background: rgba(82, 80, 80, 0.5);
-
       img {
+        transform: rotate(180deg);
+        border-radius: 50%;
+        background: rgba(82, 80, 80, 0.5);
         padding: .6rem;
         width: 1.8rem;
       }
     }
 
+    .follow-btn {
+      color: white;
+      position: absolute;
+      font-size: 1.2rem;
+      padding: .3rem 1.2rem;
+      border-radius: .2rem;
+      right: 6rem;
+      background: @primary-btn-color;
+
+      &.followed {
+        background: @second-btn-color;
+      }
+    }
+
+
     .right {
-      img {
-        margin-left: 2rem;
+      display: flex;
+      color: white;
+      align-items: center;
+      position: relative;
+
+      .request {
+        font-size: 1.2rem;
+        height: 2.6rem;
+        display: flex;
+        padding-right: 1.3rem;
+        padding-left: .5rem;
+        align-items: center;
+        border-radius: 2rem;
+        background: rgba(82, 80, 80, 0.5);
+
+        img {
+          padding: .6rem;
+          width: 1.8rem;
+        }
+      }
+
+      .menu {
+        margin-left: 1.5rem;
         border-radius: 50%;
         background: rgba(82, 80, 80, 0.5);
         padding: .6rem;
@@ -262,8 +306,13 @@
     }
 
     .detail {
+      transform: translateY(-1rem);
       background: @main-bg;
-      padding: 0 2rem .5rem 2rem;
+      border-radius: 1rem 1rem 0 0;
+
+      .detail-wrapper {
+        padding: 0 2rem 0 2rem;
+      }
 
       .head {
         width: 100%;
@@ -361,6 +410,40 @@
         }
       }
 
+      .other {
+        display: flex;
+        margin-bottom: 2rem;
+
+        .item {
+          margin-right: 2.5rem;
+          display: flex;
+
+          img {
+            margin-right: .8rem;
+            border-radius: .4rem;
+            background: @second-btn-color-tran;
+            padding: .8rem;
+            height: 2.2rem;
+          }
+
+          .right {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .top {
+              color: white;
+              font-size: 1.4rem;
+            }
+
+            .bottom {
+              color: @second-text-color;
+              font-size: 1.2rem;
+            }
+          }
+        }
+      }
+
       .my-buttons {
         margin-top: 2rem;
         overflow: hidden;
@@ -428,7 +511,6 @@
               }
             }
           }
-
         }
 
 
@@ -443,9 +525,16 @@
           border-radius: .2rem;
           background: @second-btn-color;
           color: white;
+
+          &.option-recommend {
+            img {
+              transform: rotate(0deg);
+            }
+          }
         }
 
         img {
+          transform: rotate(180deg);
           @width: 1.6rem;
           width: @width;
           height: @width;
@@ -453,35 +542,92 @@
 
       }
 
-      .other {
-        display: flex;
-        margin-bottom: 2rem;
+      .recommend {
+        transition: all .3s ease;
+        height: 22rem;
+        margin-top: 1.5rem;
 
-        .item {
-          margin-right: 2.5rem;
+        .title {
+          padding: 0 2rem 0 2rem;
+          font-size: 1.2rem;
+          color: @second-text-color;
           display: flex;
+          justify-content: space-between;
+
+          .left {
+            display: flex;
+            align-items: center;
+          }
 
           img {
-            margin-right: .8rem;
-            border-radius: .4rem;
-            background: @second-btn-color-tran;
-            padding: .8rem;
-            height: 2.2rem;
+            margin-left: .3rem;
+            width: 1.3rem;
+            height: 1.3rem;
           }
 
           .right {
             display: flex;
-            justify-content: space-between;
-            flex-direction: column;
+            align-items: center;
+          }
+        }
 
-            .top {
-              color: white;
-              font-size: 1.4rem;
+        .friends {
+          padding-left: 2rem;
+          margin-top: 1rem;
+          display: flex;
+          overflow-x: scroll;
+
+          .friend {
+            position: relative;
+            background: @second-btn-color-tran;
+            margin-right: 1rem;
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .avatar {
+              @width: 10rem;
+              border-radius: 50%;
+              width: @width;
+              height: @width;
             }
 
-            .bottom {
-              color: @second-text-color;
+            .name {
+              margin-top: 1rem;
               font-size: 1.2rem;
+              color: white;
+            }
+
+            .tips {
+              margin-top: .5rem;
+              font-size: 1.2rem;
+              color: @second-text-color;
+            }
+
+            .button {
+              margin-top: 1rem;
+              width: 15rem;
+              height: 2.6rem;
+              font-size: 1.2rem;
+            }
+
+            .close {
+              position: absolute;
+              top: .2rem;
+              right: .2rem;
+            }
+          }
+
+          .more {
+            .notice {
+              width: 10rem;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              color: @second-text-color;
             }
           }
         }
diff --git a/src/pages/me/Uploader.vue b/src/pages/me/Uploader.vue
index 211a76a..ef78e5d 100644
--- a/src/pages/me/Uploader.vue
+++ b/src/pages/me/Uploader.vue
@@ -1,20 +1,27 @@
 <template>
-  <div class="Uploader">
+  <div id="Uploader">
     <div ref="float" class="float" :class="floatFixed?'fixed':''">
-      <div class="left" style="opacity: 0;">
+      <div class="left" @click="$emit('back')">
         <img src="../../assets/img/icon/next.svg" alt="">
-        <span>切换账号</span>
       </div>
       <transition name="fade">
         <div class="center" v-if="floatShowName">
           <p class="name f22 mt1r mb1r">ttentau</p>
         </div>
       </transition>
+      <transition name="fade">
+        <div class="follow-btn" :class="{followed:isFollowed}" v-if="floatFixed" @click="followButton">
+          {{ isFollowed ? '私信' : '关注' }}
+        </div>
+      </transition>
       <div class="right">
-        <img @click="$nav('/me/request-update')"
-             :style="floatFixed?'opacity: 0;':''"
-             src="../../assets/img/icon/me/finger-right.png" alt="">
-        <img src="../../assets/img/icon/me/menu.png" alt="" @click.stop="baseActiveIndex = 1">
+        <transition name="fade">
+          <div class="request" v-if="!floatFixed">
+            <img @click="$nav('/me/request-update')" src="../../assets/img/icon/me/finger-right.png" alt="">
+            <span>求更新</span>
+          </div>
+        </transition>
+        <img class="menu" src="../../assets/img/icon/more.svg" alt="" @click.stop="$emit('showFollowSetting')">
       </div>
     </div>
     <div class="scroll"
@@ -25,88 +32,125 @@
       <div ref="desc" class="desc">
         <header ref="header" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
         <div class="detail">
-          <div class="head">
-            <img src="../../assets/img/icon/avatar/2.png" class="head-image"
-                 @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
-            <div class="heat">
-              <div class="text">
-                <span>获赞</span>
-                <span class="num">18</span>
-              </div>
-              <div class="text">
-                <span>粉丝</span>
-                <span class="num">62</span>
-              </div>
-              <div class="text">
-                <span>关注</span>
-                <span class="num">8</span>
-              </div>
-            </div>
-
-          </div>
-          <div class="description">
-            <p class="name f22 mt1r mb1r">ttentau</p>
-            <div class="number mb1r">
-              <span class="mr1r">私密账号</span>
-              <span>抖音号：605128307</span>
-              <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
-            </div>
-            <div class="signature f12">
-              <span class="text">{{ userinfo.desc }}</span>
-            </div>
-            <div class="more">
-              <div class="age item" v-if="userinfo.birthday">
-                <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
-                <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
-                <span>{{ filterAge(userinfo.birthday) }}岁</span>
-              </div>
-              <div class="item" v-if="userinfo.location">
-                {{ userinfo.location }}
-              </div>
-              <div class="item" v-if="userinfo.school.name">
-                {{ userinfo.school.name }}
-              </div>
-            </div>
-
-          </div>
-          <div class="other">
-            <div class="item">
-              <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
-              <div class="right">
-                <div class="top">抖音商城</div>
-                <div class="bottom">发现超值好物</div>
-              </div>
-            </div>
-            <div class="item">
-              <img src="../../assets/img/icon/me/music-white.png" alt="">
-              <div class="right">
-                <div class="top">我的音乐</div>
-                <div class="bottom">已收藏20首</div>
-              </div>
-            </div>
-          </div>
-          <div class="my-buttons">
-            <div class="follow-display">
-              <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
-                <div class="no-follow" @click="isFollowed = true">
-                  <img src="../../assets/img/icon/add-white.png" alt="">
+          <div class="detail-wrapper">
+            <div class="head">
+              <img src="../../assets/img/icon/avatar/2.png" class="head-image"
+                   @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
+              <div class="heat">
+                <div class="text">
+                  <span>获赞</span>
+                  <span class="num">18</span>
+                </div>
+                <div class="text">
+                  <span>粉丝</span>
+                  <span class="num">62</span>
+                </div>
+                <div class="text">
                   <span>关注</span>
+                  <span class="num">8</span>
                 </div>
-                <div class="followed">
-                  <div class="l-button" @click="isFollowed = false">
-                    <span>已关注</span>
-                    <img src="../../assets/img/icon/arrow-up-white.png" alt="">
+              </div>
+
+            </div>
+            <div class="description">
+              <p class="name f22 mt1r mb1r">ttentau</p>
+              <div class="number mb1r">
+                <span class="mr1r">私密账号</span>
+                <span>抖音号：605128307</span>
+                <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
+              </div>
+              <div class="signature f12">
+                <span class="text">{{ userinfo.desc }}</span>
+              </div>
+              <div class="more">
+                <div class="age item" v-if="userinfo.birthday">
+                  <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
+                  <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
+                  <span>{{ filterAge(userinfo.birthday) }}岁</span>
+                </div>
+                <div class="item" v-if="userinfo.location">
+                  {{ userinfo.location }}
+                </div>
+                <div class="item" v-if="userinfo.school.name">
+                  {{ userinfo.school.name }}
+                </div>
+              </div>
+
+            </div>
+            <div class="other">
+              <div class="item">
+                <img src="../../assets/img/icon/me/shopping-cart-white.png" alt="">
+                <div class="right">
+                  <div class="top">抖音商城</div>
+                  <div class="bottom">发现超值好物</div>
+                </div>
+              </div>
+              <div class="item">
+                <img src="../../assets/img/icon/me/music-white.png" alt="">
+                <div class="right">
+                  <div class="top">我的音乐</div>
+                  <div class="bottom">已收藏20首</div>
+                </div>
+              </div>
+            </div>
+            <div class="my-buttons">
+              <div class="follow-display">
+                <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
+                  <div class="no-follow" @click="isFollowed = true">
+                    <img src="../../assets/img/icon/add-white.png" alt="">
+                    <span>关注</span>
                   </div>
-                  <div class="l-button">
-                    <span>私信</span>
+                  <div class="followed">
+                    <div class="l-button" @click="$emit('showFollowSetting2')">
+                      <span>已关注</span>
+                      <img src="../../assets/img/icon/arrow-up-white.png" alt="">
+                    </div>
+                    <div class="l-button" @click="$nav('/message/chat')">
+                      <span>私信</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="option"
+                   :class="isShowRecommend?'option-recommend':''"
+                   @click="toggleRecommend">
+                <img src="../../assets/img/icon/arrow-up-white.png" alt="">
+              </div>
+            </div>
+          </div>
+          <transition name="recommend">
+            <div class="recommend" v-if="isShowRecommend">
+              <div class="title">
+                <div class="left">
+                  <span>你可能感兴趣</span>
+                  <img src="../../assets/img/icon/about-gray.png">
+                </div>
+                <div class="right" @click="$nav('/find-acquaintance')">
+                  <span>查看更多</span>
+                  <back direction="right"></back>
+                </div>
+              </div>
+              <div class="friends"
+                   @touchstart="friendsTouchStart"
+                   @touchend="friendsTouchEnd">
+                <div class="friend" v-for="item in friends.all">
+                  <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
+                  <span class="name">{{ item.name }}</span>
+                  <span class="tips">可能感兴趣的人</span>
+                  <b-button type="primary">关注</b-button>
+                  <div class="close">
+                    <back img="close" scale=".6"></back>
+                  </div>
+                </div>
+                <div class="more" @click="$nav('/find-acquaintance')">
+                  <div class="notice">
+                    <div>点击查看</div>
+                    <div>更多好友</div>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="option" @click="isFollowed = !isFollowed">
-              <img src="../../assets/img/icon/arrow-up-white.png" alt="">
-            </div>
-          </div>
+          </transition>
         </div>
       </div>
       <Indicator
@@ -149,6 +193,7 @@
         <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
       </div>
     </transition>
+
   </div>
 </template>
 <script>
@@ -157,13 +202,15 @@ import Indicator from '../../components/Indicator'
 import {nextTick} from 'vue'
 import {mapState} from "vuex";
 import bus from "../../utils/bus";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 
 export default {
   name: "Me",
-  components: {Posters, Indicator},
+  components: {FromBottomDialog, Posters, Indicator},
   data() {
     return {
       isFollowed: false,
+      isShowRecommend: false,
       previewImg: '',
       contentIndex: 0,
       baseActiveIndex: 0,
@@ -172,6 +219,7 @@ export default {
       floatShowName: false,
       isScroll: false,
       isMoreFunction: false,
+      showFollowSetting: false,
       refs: {
         header: null,
         headerHeight: 0,
@@ -226,6 +274,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['friends']),
     bodyHeight() {
       return this.$store.state.bodyHeight
     },
@@ -263,6 +312,22 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    toggleRecommend() {
+      this.isShowRecommend = !this.isShowRecommend
+    },
+    friendsTouchStart() {
+      this.$emit('toggleCanMove', false)
+    },
+    friendsTouchEnd() {
+      this.$emit('toggleCanMove', true)
+    },
+    followButton() {
+      if (this.isFollowed) {
+        this.$nav('/message/chat')
+      } else {
+        this.isFollowed = true
+      }
+    },
     setLoadingFalse() {
       this.loadings.loading0 = false
       this.loadings.loading1 = false
diff --git a/src/pages/message/Chat.vue b/src/pages/message/Chat.vue
index 729205a..0f12a9b 100644
--- a/src/pages/message/Chat.vue
+++ b/src/pages/message/Chat.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="right">
         <img style="transform: scale(1.1)" src="../../assets/img/icon/message/video-white.png" alt="">
-        <img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/chat-detail')">
+        <img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat-detail')">
       </div>
     </div>
     <div class="message-wrapper" :class="isExpand ? 'expand' : ''">
@@ -397,6 +397,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
+  font-size: 1.4rem;
 
   .header {
     z-index: 2;
diff --git a/src/pages/message/ChatDetail.vue b/src/pages/message/ChatDetail.vue
index 7ed1f69..b921a7d 100644
--- a/src/pages/message/ChatDetail.vue
+++ b/src/pages/message/ChatDetail.vue
@@ -43,34 +43,22 @@
         </div>
       </div>
     </div>
-    <from-bottom-dialog
-        v-model="blockDialog"
-        :show-heng-gang="false"
-        height="20rem"
-        mode="white">
-      <div class="block-dialog">
-        <div class="notice">
-          拉黑后，对方将无法搜索到你，也不能再给你发私信
-        </div>
-        <div class="row red">确认拉黑</div>
-        <div class="row">不让 TA 看</div>
-        <div class="space"></div>
-        <div class="row" @click="blockDialog = false">取消</div>
-      </div>
-    </from-bottom-dialog>
+    <BlockDialog v-model="blockDialog"/>
   </div>
 </template>
 <script>
 import Switches from './components/swtich/switches';
 import People from "../people/components/People";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import BlockDialog from "./components/BlockDialog";
 
 export default {
   name: "ChatDetail",
   components: {
     Switches,
     People,
-    FromBottomDialog
+    FromBottomDialog,
+    BlockDialog
   },
   data() {
     return {
@@ -142,39 +130,6 @@ export default {
     }
   }
 
-  .block-dialog {
-    color: black;
-
-    .notice {
-      color: @second-text-color;
-      font-size: 1.2rem;
-      height: 4rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .row {
-      height: 5rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-top: 1px solid gainsboro;
-
-      &:nth-last-child(1) {
-        border-top: none;
-      }
-
-      &.red{
-        color: @primary-btn-color;
-      }
-    }
-
-    .space {
-      height: 1rem;
-      background: whitesmoke;
-    }
-  }
 
 }
 </style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index fbae749..235c41c 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -10,7 +10,7 @@
     <div class="line mb2r"></div>
     <div class="friends  pl1r ">
       <div class="friend pr1r pl1r"
-           @click="$nav('/chat')"
+           @click="$nav('/message/chat')"
            v-for="item in 10">
         <div class="avatar on-line">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
diff --git a/src/pages/message/components/BlockDialog.vue b/src/pages/message/components/BlockDialog.vue
new file mode 100644
index 0000000..bb8bd97
--- /dev/null
+++ b/src/pages/message/components/BlockDialog.vue
@@ -0,0 +1,81 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      :show-heng-gang="false"
+      height="20rem"
+      @cancel='cancel'
+      mode="white">
+    <div class="block-dialog">
+      <div class="notice">
+        拉黑后，对方将无法搜索到你，也不能再给你发私信
+      </div>
+      <div class="row red">确认拉黑</div>
+      <div class="row">不让 TA 看</div>
+      <div class="space"></div>
+      <div class="row" @click="cancel">取消</div>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+
+export default {
+  name: "BlockDialog",
+  components: {
+    FromBottomDialog
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.block-dialog {
+  color: black;
+
+  .notice {
+    color: @second-text-color;
+    font-size: 1.2rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .row {
+    height: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid gainsboro;
+
+    &:nth-last-child(1) {
+      border-top: none;
+    }
+
+    &.red {
+      color: @primary-btn-color;
+    }
+  }
+
+  .space {
+    height: 1rem;
+    background: whitesmoke;
+  }
+}
+
+</style>
diff --git a/src/pages/message/components/swtich/switches.vue b/src/pages/message/components/swtich/switches.vue
index 4361cec..5788171 100644
--- a/src/pages/message/components/swtich/switches.vue
+++ b/src/pages/message/components/swtich/switches.vue
@@ -91,4 +91,4 @@ export default {
 
 </script>
 
-<!--<style src="./switches.less" lang="less"></style>-->
+<style src="./switches.less" lang="less"></style>
diff --git a/src/router/index.js b/src/router/index.js
index 6d2894f..9f0c718 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -64,6 +64,8 @@ const routes = [
   {path: '/message', component: Message},
   {path: '/message/share-to-friend', component: Share2Friend},
   {path: '/message/joined-group-chat', component: JoinedGroupChat},
+  {path: '/message/chat', component: Chat},
+  {path: '/message/chat-detail', component: ChatDetail},
   {path: '/me', component: Me},
   {path: '/me/request-update', component: RequestUpdate},
   {path: '/edit-userinfo', component: EditUserInfo},
@@ -86,8 +88,6 @@ const routes = [
   {path: '/address-list', component: AddressList},
   {path: '/scan', component: Scan},
   {path: '/face-to-face', component: FaceToFace},
-  {path: '/chat', component: Chat},
-  {path: '/chat-detail', component: ChatDetail},
   {path: '/set-remark', component: SetRemark},
   {path: '/me/right-menu/look-history', component: LookHistory},
   {path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex},
diff --git a/src/store/index.js b/src/store/index.js
index 3a98d84..69a21bd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -27,576 +27,570 @@ const store = Vuex.createStore({
       }
     },
     friends: {
-      all: {
-        "all": [
-          {
-            "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
-            "avatar": "images/20210816/1.png",
-            "name": "冒安志",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "234",
-            "pinyin": "M",
-            "select": false
-          },
-          {
-            "id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
-            "avatar": "images/20210816/19.png",
-            "name": "浅唱↘我们的歌",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "33453",
-            "pinyin": "Q",
-            "select": false
-          },
-          {
-            "id": "2d8622b4-7112-4bc7-a0cf-00a268a85504",
-            "avatar": "images/20210816/25.png",
-            "name": "‘心’之天空",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "234234",
-            "pinyin": "#",
-            "select": false
-          },
-          {
-            "id": "2e38900b-65f7-426a-8e8b-edb403df35fb",
-            "avatar": "images/20210816/18.png",
-            "name": "◇、_保持微笑ゞ",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "1111",
-            "pinyin": "#",
-            "select": false
-          },
-          {
-            "id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",
-            "avatar": "images/20210816/26.png",
-            "name": "好◇°我会Yi直在●",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "sdfs",
-            "pinyin": "H",
-            "select": false
-          },
-          {
-            "id": "46c77017-9dc6-4a48-bf96-560c6e7db06f",
-            "avatar": "images/20210816/4.png",
-            "name": "甫韦茹",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "dgfdfg",
-            "pinyin": "F",
-            "select": false
-          },
-          {
-            "id": "4df770d7-a414-4e02-8f9e-72ebd87eb93e",
-            "avatar": "images/20210816/12.png",
-            "name": "幸福泡泡",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "df",
-            "pinyin": "X",
-            "select": false
-          },
-          {
-            "id": "5ebb4d7a-c7ad-43c7-a830-9eb3ee423cb7",
-            "avatar": "images/20210816/3.png",
-            "name": "蔡傲安",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "ssss",
-            "pinyin": "C",
-            "select": false
-          },
-          {
-            "id": "7226092d-a2c5-4ffd-98d7-3b7ac814bca3",
-            "avatar": "images/20210816/16.png",
-            "name": "心若向阳无谓伤悲",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "asdfasd",
-            "pinyin": "X",
-            "select": false
-          },
-          {
-            "id": "72aef2a9-5573-4205-9288-706e19bccc7f",
-            "avatar": "images/20210816/10.png",
-            "name": "A倒影着稚嫩的少年",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "wfghdf",
-            "pinyin": "#",
-            "select": false
-          },
-          {
-            "id": "77c82d2e-9be1-45c2-a733-00445d2e7f2c",
-            "avatar": "images/20210816/22.png",
-            "name": "一只喵的旅行。",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "sadf",
-            "pinyin": "Y",
-            "select": false
-          },
-          {
-            "id": "7b30566d-70eb-4a31-ae43-200917269a43",
-            "avatar": "images/20210816/14.png",
-            "name": "℉阳光下的小情绪",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "asdfa",
-            "pinyin": "#",
-            "select": false
-          },
-          {
-            "id": "90c6ccd8-0653-4789-9348-28fba06d6ae3",
-            "avatar": "images/20210816/11.png",
-            "name": "思念一直在",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "as",
-            "pinyin": "S",
-            "select": false
-          },
-          {
-            "id": "a2c1310f-1a3c-430f-9b7c-557b9ccdd33d",
-            "avatar": "images/20210816/9.png",
-            "name": "阎韶丽",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "vbvd",
-            "pinyin": "Y",
-            "select": false
-          },
-          {
-            "id": "a7443b4f-b0fa-4409-a693-5f090aa763ee",
-            "avatar": "images/20210816/5.png",
-            "name": "马佳婉清",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "sdf",
-            "pinyin": "M",
-            "select": false
-          },
-          {
-            "id": "b49fd828-f8a7-4be0-a3bc-0a8fa312b2e8",
-            "avatar": "images/20210816/0.png",
-            "name": "倒影着稚嫩的少年",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "eeee",
-            "pinyin": "D",
-            "select": false
-          },
-          {
-            "id": "b632bffe-1cfb-408a-8255-b558e2faf49a",
-            "avatar": "images/20210816/8.png",
-            "name": "买易槐",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "xczxc",
-            "pinyin": "M",
-            "select": false
-          },
-          {
-            "id": "c01f10dd-a270-42ab-876f-64a8beb22a69",
-            "avatar": "images/20210816/7.png",
-            "name": "章昊苍",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "gggggggggr",
-            "pinyin": "Z",
-            "select": false
-          },
-          {
-            "id": "d0bf11a3-a25b-4865-a047-c67de8e8af7b",
-            "avatar": "images/20210816/2.png",
-            "name": "凌依晨",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "12",
-            "pinyin": "L",
-            "select": false
-          },
-          {
-            "id": "d300b7a5-115d-41ba-a071-7d1781da331f",
-            "avatar": "images/20210816/23.png",
-            "name": "为你锁住心",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "1629993515",
-            "pinyin": "W",
-            "select": false
-          },
-          {
-            "id": "deceba30-80fc-45c2-bd56-8d65091bb104",
-            "avatar": "images/20210816/13.png",
-            "name": "原味青春",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "werwe",
-            "pinyin": "Y",
-            "select": false
-          },
-          {
-            "id": "e0c3d20d-5978-4339-962f-cffc6e29aff1",
-            "avatar": "images/20210816/24.png",
-            "name": "一起走过的日子°",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "dfgdfg",
-            "pinyin": "Y",
-            "select": false
-          },
-          {
-            "id": "e1fb6274-10fa-4d50-b9b1-6eefacfc2341",
-            "avatar": "images/20210816/15.png",
-            "name": "看，熟悉旳风景",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "aasdasd",
-            "pinyin": "K",
-            "select": false
-          },
-          {
-            "id": "eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08",
-            "avatar": "images/20210816/20.png",
-            "name": "dear°学会微笑",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "gggggg",
-            "pinyin": "#",
-            "select": false
-          },
-          {
-            "id": "ecb405e2-d057-4c85-a12b-a5fe9a7b8a05",
-            "avatar": "images/20210816/6.png",
-            "name": "富察昕昕",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "ghjg",
-            "pinyin": "F",
-            "select": false
-          },
-          {
-            "id": "f09652a3-d6e1-4517-a15e-583a24a250e1",
-            "avatar": "images/20210816/17.png",
-            "name": "蓝天下的迷彩?",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "yhjh",
-            "pinyin": "L",
-            "select": false
-          },
-          {
-            "id": "f676cc30-cc81-487a-9450-cbb1f3c5cde8",
-            "avatar": "images/20210816/21.png",
-            "name": "伱的微笑",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "ghj",
-            "pinyin": "N",
-            "select": false
-          }
-        ]
-      },
-      recent: {
-        "recent": [
-          {
-            "id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",
-            "avatar": "images/20210816/26.png",
-            "name": "好◇°我会Yi直在●",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "sdfs",
-            "pinyin": "H",
-            "select": false
-          },
-          {
-            "id": "77c82d2e-9be1-45c2-a733-00445d2e7f2c",
-            "avatar": "images/20210816/22.png",
-            "name": "一只喵的旅行。",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "sadf",
-            "pinyin": "Y",
-            "select": false
-          }
-        ]
-      },
-      eachOther: {
-        "eachOther": [
-          {
-            "id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
-            "avatar": "images/20210816/19.png",
-            "name": "浅唱↘我们的歌",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "33453",
-            "pinyin": "Q",
-            "select": false
-          },
-          {
-            "id": "eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08",
-            "avatar": "images/20210816/20.png",
-            "name": "dear°学会微笑",
-            "sex": "",
-            "age": null,
-            "idCard": null,
-            "phone": "",
-            "address": null,
-            "wechat": "",
-            "password": null,
-            "lastLoginTime": "1629993515",
-            "createTime": "1630035089",
-            "isDelete": 0,
-            "account": "gggggg",
-            "pinyin": "#",
-            "select": false
-          }
-        ]
-      }
+      "all": [
+        {
+          "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
+          "avatar": "images/20210816/1.png",
+          "name": "冒安志",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "234",
+          "pinyin": "M",
+          "select": false
+        },
+        {
+          "id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
+          "avatar": "images/20210816/19.png",
+          "name": "浅唱↘我们的歌",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "33453",
+          "pinyin": "Q",
+          "select": false
+        },
+        {
+          "id": "2d8622b4-7112-4bc7-a0cf-00a268a85504",
+          "avatar": "images/20210816/25.png",
+          "name": "‘心’之天空",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "234234",
+          "pinyin": "#",
+          "select": false
+        },
+        {
+          "id": "2e38900b-65f7-426a-8e8b-edb403df35fb",
+          "avatar": "images/20210816/18.png",
+          "name": "◇、_保持微笑ゞ",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "1111",
+          "pinyin": "#",
+          "select": false
+        },
+        {
+          "id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",
+          "avatar": "images/20210816/26.png",
+          "name": "好◇°我会Yi直在●",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "sdfs",
+          "pinyin": "H",
+          "select": false
+        },
+        {
+          "id": "46c77017-9dc6-4a48-bf96-560c6e7db06f",
+          "avatar": "images/20210816/4.png",
+          "name": "甫韦茹",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "dgfdfg",
+          "pinyin": "F",
+          "select": false
+        },
+        {
+          "id": "4df770d7-a414-4e02-8f9e-72ebd87eb93e",
+          "avatar": "images/20210816/12.png",
+          "name": "幸福泡泡",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "df",
+          "pinyin": "X",
+          "select": false
+        },
+        {
+          "id": "5ebb4d7a-c7ad-43c7-a830-9eb3ee423cb7",
+          "avatar": "images/20210816/3.png",
+          "name": "蔡傲安",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "ssss",
+          "pinyin": "C",
+          "select": false
+        },
+        {
+          "id": "7226092d-a2c5-4ffd-98d7-3b7ac814bca3",
+          "avatar": "images/20210816/16.png",
+          "name": "心若向阳无谓伤悲",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "asdfasd",
+          "pinyin": "X",
+          "select": false
+        },
+        {
+          "id": "72aef2a9-5573-4205-9288-706e19bccc7f",
+          "avatar": "images/20210816/10.png",
+          "name": "A倒影着稚嫩的少年",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "wfghdf",
+          "pinyin": "#",
+          "select": false
+        },
+        {
+          "id": "77c82d2e-9be1-45c2-a733-00445d2e7f2c",
+          "avatar": "images/20210816/22.png",
+          "name": "一只喵的旅行。",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "sadf",
+          "pinyin": "Y",
+          "select": false
+        },
+        {
+          "id": "7b30566d-70eb-4a31-ae43-200917269a43",
+          "avatar": "images/20210816/14.png",
+          "name": "℉阳光下的小情绪",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "asdfa",
+          "pinyin": "#",
+          "select": false
+        },
+        {
+          "id": "90c6ccd8-0653-4789-9348-28fba06d6ae3",
+          "avatar": "images/20210816/11.png",
+          "name": "思念一直在",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "as",
+          "pinyin": "S",
+          "select": false
+        },
+        {
+          "id": "a2c1310f-1a3c-430f-9b7c-557b9ccdd33d",
+          "avatar": "images/20210816/9.png",
+          "name": "阎韶丽",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "vbvd",
+          "pinyin": "Y",
+          "select": false
+        },
+        {
+          "id": "a7443b4f-b0fa-4409-a693-5f090aa763ee",
+          "avatar": "images/20210816/5.png",
+          "name": "马佳婉清",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "sdf",
+          "pinyin": "M",
+          "select": false
+        },
+        {
+          "id": "b49fd828-f8a7-4be0-a3bc-0a8fa312b2e8",
+          "avatar": "images/20210816/0.png",
+          "name": "倒影着稚嫩的少年",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "eeee",
+          "pinyin": "D",
+          "select": false
+        },
+        {
+          "id": "b632bffe-1cfb-408a-8255-b558e2faf49a",
+          "avatar": "images/20210816/8.png",
+          "name": "买易槐",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "xczxc",
+          "pinyin": "M",
+          "select": false
+        },
+        {
+          "id": "c01f10dd-a270-42ab-876f-64a8beb22a69",
+          "avatar": "images/20210816/7.png",
+          "name": "章昊苍",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "gggggggggr",
+          "pinyin": "Z",
+          "select": false
+        },
+        {
+          "id": "d0bf11a3-a25b-4865-a047-c67de8e8af7b",
+          "avatar": "images/20210816/2.png",
+          "name": "凌依晨",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "12",
+          "pinyin": "L",
+          "select": false
+        },
+        {
+          "id": "d300b7a5-115d-41ba-a071-7d1781da331f",
+          "avatar": "images/20210816/23.png",
+          "name": "为你锁住心",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "1629993515",
+          "pinyin": "W",
+          "select": false
+        },
+        {
+          "id": "deceba30-80fc-45c2-bd56-8d65091bb104",
+          "avatar": "images/20210816/13.png",
+          "name": "原味青春",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "werwe",
+          "pinyin": "Y",
+          "select": false
+        },
+        {
+          "id": "e0c3d20d-5978-4339-962f-cffc6e29aff1",
+          "avatar": "images/20210816/24.png",
+          "name": "一起走过的日子°",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "dfgdfg",
+          "pinyin": "Y",
+          "select": false
+        },
+        {
+          "id": "e1fb6274-10fa-4d50-b9b1-6eefacfc2341",
+          "avatar": "images/20210816/15.png",
+          "name": "看，熟悉旳风景",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "aasdasd",
+          "pinyin": "K",
+          "select": false
+        },
+        {
+          "id": "eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08",
+          "avatar": "images/20210816/20.png",
+          "name": "dear°学会微笑",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "gggggg",
+          "pinyin": "#",
+          "select": false
+        },
+        {
+          "id": "ecb405e2-d057-4c85-a12b-a5fe9a7b8a05",
+          "avatar": "images/20210816/6.png",
+          "name": "富察昕昕",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "ghjg",
+          "pinyin": "F",
+          "select": false
+        },
+        {
+          "id": "f09652a3-d6e1-4517-a15e-583a24a250e1",
+          "avatar": "images/20210816/17.png",
+          "name": "蓝天下的迷彩?",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "yhjh",
+          "pinyin": "L",
+          "select": false
+        },
+        {
+          "id": "f676cc30-cc81-487a-9450-cbb1f3c5cde8",
+          "avatar": "images/20210816/21.png",
+          "name": "伱的微笑",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "ghj",
+          "pinyin": "N",
+          "select": false
+        }
+      ],
+      "recent": [
+        {
+          "id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",
+          "avatar": "images/20210816/26.png",
+          "name": "好◇°我会Yi直在●",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "sdfs",
+          "pinyin": "H",
+          "select": false
+        },
+        {
+          "id": "77c82d2e-9be1-45c2-a733-00445d2e7f2c",
+          "avatar": "images/20210816/22.png",
+          "name": "一只喵的旅行。",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "sadf",
+          "pinyin": "Y",
+          "select": false
+        }
+      ],
+      "eachOther": [
+        {
+          "id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
+          "avatar": "images/20210816/19.png",
+          "name": "浅唱↘我们的歌",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "33453",
+          "pinyin": "Q",
+          "select": false
+        },
+        {
+          "id": "eab1ef9b-70e6-4249-8d78-b4f6e1b0cb08",
+          "avatar": "images/20210816/20.png",
+          "name": "dear°学会微笑",
+          "sex": "",
+          "age": null,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "gggggg",
+          "pinyin": "#",
+          "select": false
+        }
+      ]
     }
   },
   mutations: {
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 087e605..8e409ef 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -6,6 +6,7 @@ import Loading from "../components/Loading";
 import Config from '../config'
 import NoticeDialog from "../components/dialog/NoticeDialog";
 import dayjs from 'dayjs'
+
 export default {
   $showLoading() {
     const app = Vue.createApp({
@@ -140,7 +141,7 @@ export default {
       document.body.removeChild(div)
     }, 1000)
   },
-  $no(){
+  $no() {
     this.$notice('未实现')
   },
   $back() {
@@ -169,6 +170,24 @@ export default {
     // return reg.test(val) ? parseFloat(val) : val
     return parseFloat(val)
   },
+  $getCss2(curEle, attr) {
+    let val = null, reg = null
+    if ("getComputedStyle" in window) {
+      val = window.getComputedStyle(curEle, null)[attr]
+    } else {   //ie6~8不支持上面属性
+      //不兼容
+      if (attr === "opacity") {
+        val = curEle.currentStyle["filter"]   //'alpha(opacity=12,345)'
+        reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
+        val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
+      } else {
+        val = curEle.currentStyle[attr]
+      }
+    }
+    // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
+    // return reg.test(val) ? parseFloat(val) : val
+    return val
+  },
   $setCss(el, key, value) {
     // console.log(value)
     if (key === 'transform') {
@@ -232,7 +251,8 @@ export default {
     }
   },
   $imgPreview(url) {
-    if (url.includes('http')){
+    if (!url) return
+    if (url.includes('http')) {
       return url
     }
     return Config.filePreview + url
@@ -275,8 +295,8 @@ export default {
 
   $dateFormat(val, type) {
     if (!val) return
-    if (val.length === 10){
-      val+='000'
+    if (val.length === 10) {
+      val += '000'
     }
     if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
       val = Number(val)