diff --git a/src/App.vue b/src/App.vue
index 8a5d3de..b2c7110 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,10 +56,13 @@ export default {
         '/service-protocol',
         '/address-list',
         '/video-detail',
+        '/my-card',
         '/scan',
         '/face-to-face',
         '/chat',
         '/chat-detail',
+        '/set-remark',
+        '/me/right-menu/look-history',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)
diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss
index ee52f34..d61e186 100644
--- a/src/assets/scss/color.scss
+++ b/src/assets/scss/color.scss
@@ -7,4 +7,8 @@ $line-color: rgb(37, 45, 66);
 
 
 $primary-btn-color: rgb(252, 47, 86);
-$disable-primary-btn-color: rgba(252, 47, 86, .5);
\ No newline at end of file
+$disable-primary-btn-color: rgba(252, 47, 86, .5);
+
+.second-text-color {
+  color: $second-text-color;
+}
\ No newline at end of file
diff --git a/src/components/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
similarity index 100%
rename from src/components/ConfirmDialog.vue
rename to src/components/dialog/ConfirmDialog.vue
diff --git a/src/components/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
similarity index 92%
rename from src/components/FromBottomDialog.vue
rename to src/components/dialog/FromBottomDialog.vue
index 50c32c3..03d4107 100644
--- a/src/components/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -9,15 +9,16 @@
       @after-leave="afterLeave"
       :css="false"
   >
-    <div ref="dialog" class="FromBottomDialog"
+    <div ref="dialog"
+         class="FromBottomDialog"
          v-if="modelValue"
-         :class="mode"
+         :class="[mode,showHengGang ? '' : 'no-heng-gang']"
          :style="{'max-height':height}"
          @touchstart="start"
          @touchmove="move"
          @touchend="end"
     >
-      <div class="heng-gang" :class="mode">
+      <div class="heng-gang" :class="mode" v-if="showHengGang">
         <div class="content"></div>
       </div>
       <slot></slot>
@@ -39,14 +40,18 @@ export default {
       // default: 'light'
       // default: 'white'
     },
+    maskMode:{
+      type: String,
+      default: 'dark'
+    },
     height: {
       type: String,
       default: '70vh'
     },
-    useMask: {
+    showHengGang: {
       type: Boolean,
       default: true
-    }
+    },
   },
   watch: {
     modelValue(newVal) {
@@ -61,7 +66,7 @@ export default {
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
       }
-      this.$store.commit('setMaskDialog', {state: newVal, mode: this.mode})
+      this.$store.commit('setMaskDialog', {state: newVal, mode: this.maskMode})
     },
     maskDialog(newVal) {
       if (!newVal) {
@@ -95,6 +100,7 @@ export default {
       }, 0)
       setTimeout(() => {
         this.$setCss(el, 'transition-duration', `0ms`)
+        this.$setCss(el, 'transform', `none`)
         done()
       }, 200)
     },
@@ -151,7 +157,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../assets/scss/index";
+@import "../../assets/scss/index";
 
 .FromBottomDialog {
   z-index: 9;
@@ -175,6 +181,10 @@ export default {
     background: white;
   }
 
+  &.no-heng-gang {
+    padding-top: 0;
+  }
+
   .heng-gang {
     border-radius: .5rem .5rem 0 0;
     z-index: 3;
diff --git a/src/components/SelectDialog.vue b/src/components/dialog/SelectDialog.vue
similarity index 100%
rename from src/components/SelectDialog.vue
rename to src/components/dialog/SelectDialog.vue
diff --git a/src/main.js b/src/main.js
index 29ad6da..4252b8f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import SlideRowList from "./components/slide/SlideRowList";
 import SlideColumnList from "./components/slide/SlideColumnList";
 import Mask from "./components/Mask";
 import NoMore from "./components/NoMore";
+import Indicator from "./components/Indicator";
 
 const mixin = {
   methods: {
@@ -32,6 +33,7 @@ app.component('SlideList', SlideList)
 app.component('SlideRowList', SlideRowList)
 app.component('SlideColumnList', SlideColumnList)
 app.component('SlideItem', SlideItem)
+app.component('Indicator', Indicator)
 app.component('Video1', Video)
 app.component('Footer', Footer)
 app.component('Mask', Mask)
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 6e4b694..3939a20 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -44,7 +44,7 @@
               <div class="number mb10p">
                 <span class="mr5p">私密账号</span>
                 <span>抖音号：605128307</span>
-                <img src="../../assets/img/icon/qr_code.svg" alt="" @click.stop="$nav('/MyCard')">
+                <img src="../../assets/img/icon/qr_code.svg" alt="" @click.stop="$nav('/my-card')">
               </div>
               <div class="signature f12 mb10p">
                 <span>填写个性签名更容易获得别人关注哦</span>
@@ -95,7 +95,7 @@
       <SlideItem style="min-width: 70vw; overflow:auto;">
         <transition name="fade">
           <div class="ul" v-if="!isMoreFunction">
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$nav('/my-card')">
               <img src="../../assets/img/icon/card-gray.png" alt="">
               <span>我的订单</span>
             </div>
@@ -105,17 +105,13 @@
             </div>
             <div class="line"></div>
 
-            <div class="li" @click="$nav('MyCard')">
-              <img src="../../assets/img/icon/card-gray.png" alt="">
-              <span>我的收藏</span>
-            </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$nav('/me/right-menu/look-history')">
               <img src="../../assets/img/icon/card-gray.png" alt="">
               <span>观看历史</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$nav('/my-card')">
               <img src="../../assets/img/icon/card-gray.png" alt="">
-              <span>我的动态</span>
+              <span>我的二维码</span>
             </div>
             <div class="li" @click="$nav('MyCard')">
               <img src="../../assets/img/icon/card-gray.png" alt="">
@@ -159,14 +155,14 @@
 
               <div class="function" @click="$nav('MyCollect')">
                 <img src="../../assets/img/icon/collect-gray.png" alt="">
-                <span>我的收藏</span>
+                <span>视频彩铃</span>
               </div>
             </div>
             <div class="title">拓展功能</div>
             <div class="functions">
               <div class="function" @click="$nav('MyCard')">
                 <img src="../../assets/img/icon/card-gray.png" alt="">
-                <span>我的二维码</span>
+                <span>我的动态</span>
               </div>
               <div class="function">
                 <img src="../../assets/img/icon/order-gray.png" alt="">
@@ -187,7 +183,6 @@
             </div>
           </div>
         </transition>
-
         <div class="button-ctn">
           <div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
             <img src="../../assets/img/icon/card-gray.png" alt="">
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index c62fe06..e796721 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -1,14 +1,9 @@
 <template>
   <div id='MyCard'>
     <BaseHeader>
-      <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
-           xmlns="http://www.w3.org/2000/svg"
-           p-id="15320" width="32" height="32">
-        <path
-            d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
-            fill="#8a8a8a" p-id="15321">
-        </path>
-      </svg>
+      <template v-slot:center>
+        <span class="f16">我的抖音码</span>
+      </template>
     </BaseHeader>
     <div class="content">
       <div class="card">
@@ -26,9 +21,9 @@
         <img src="../../assets/img/icon/download.png" alt="">
         <span>保存到相册</span>
       </div>
-      <div class="btn">
+      <div class="btn" @click="$nav('/scan')">
         <img src="../../assets/img/icon/scan.png" alt="">
-        <span>保存到相册</span>
+        <span>扫一扫</span>
       </div>
     </div>
   </div>
@@ -51,26 +46,32 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+@import "../../assets/scss/index";
+
 #MyCard {
-  width: 100vw;
-  height: 100%;
   position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  font-size: 1.4rem;
+
 
   .content {
-    padding: 20px;
+    padding-top: $header-height;
 
     .card {
-      margin: 10px 20px;
+      margin: 3rem;
       background: white;
-      border-radius: 10px;
+      border-radius: 1rem;
       display: flex;
       align-items: center;
       flex-direction: column;
 
       .logo-ctn {
-        margin: 20px 0;
-        width: 50vw;
-        height: 50vw;
+        margin: 2rem 0;
+        width: 40vw;
         background-image: url("/@/assets/img/icon/logo-bg.png");
         background-position: center;
         background-size: 100% 100%;
@@ -79,19 +80,20 @@ export default {
         justify-content: center;
 
         img {
-          width: 50%;
-          height: 50%;
+          width: 100%;
+          height: 100%;
           border-radius: 50%;
         }
       }
 
       .notice {
-        margin-top: 60px;
+        font-size: 1.2rem;
+        margin-top: 6rem;
         opacity: .4;
       }
 
       .logo {
-        margin: 20px 0;
+        margin: 2rem 0;
         width: 40vw;
       }
     }
@@ -99,6 +101,7 @@ export default {
   }
 
   .notice-two {
+    font-size: 1.2rem;
     color: white;
     opacity: .4;
     text-align: center;
@@ -106,7 +109,7 @@ export default {
 
   .footer {
     position: absolute;
-    bottom: 30px;
+    bottom: 3rem;
     display: flex;
     justify-content: space-around;
     width: 100%;
@@ -118,8 +121,8 @@ export default {
       align-items: center;
 
       img {
-        width: 30px;
-        margin-bottom: 10px;
+        width: 3rem;
+        margin-bottom: 1rem;
       }
     }
   }
diff --git a/src/pages/me/VideoDetail.vue b/src/pages/me/VideoDetail.vue
index faeb74e..d4e1961 100644
--- a/src/pages/me/VideoDetail.vue
+++ b/src/pages/me/VideoDetail.vue
@@ -79,6 +79,7 @@
         v-model="dialog.shareToFriend"
         height="50vh"
         mode="light"
+        mask-mode="light"
     >
       <div class="share-dialog">
         <div class="collection" @click="dialog.shareToFriend = false">
@@ -107,6 +108,7 @@
         v-model="dialog.permissionDialog"
         height="40vh"
         mode="white"
+        mask-mode="white"
     >
       <div class="permission-dialog">
         <div class="setting" @click="dialog.permissionDialog = false">
@@ -163,7 +165,7 @@ import mp43 from "../../assets/video/3.mp4";
 import mp44 from "../../assets/video/4.mp4";
 import mp45 from "../../assets/video/5.mp4";
 import Search from "../../components/Search";
-import FromBottomDialog from "../../components/FromBottomDialog";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 
 export default {
   name: "VideoDetail",
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
new file mode 100644
index 0000000..331519b
--- /dev/null
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="lookHistory">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">观看历史</span>
+      </template>
+      <template v-slot:right>
+        <span class="second-text-color f13" @click="clear">清空</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <Indicator
+          style="width: calc(100vw - 2rem); margin-left: 1rem;"
+          tabStyleWidth="50%"
+          :tabTexts="['熟人列表','发现熟人']"
+          v-model:active-index="currentSlideItemIndex">
+      </Indicator>
+      <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 6rem);">
+        <SlideItem class="tab1">
+          <Posters></Posters>
+          <NoMore></NoMore>
+        </SlideItem>
+        <SlideItem class="tab2">
+        </SlideItem>
+      </SlideRowList>
+    </div>
+  </div>
+</template>
+<script>
+import Posters from "../../../components/Posters";
+
+export default {
+  name: "lookHistory",
+  components: {
+    Posters
+  },
+  data() {
+    return {
+      currentSlideItemIndex: 0
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    clear() {
+      this.$showConfirmDialog('确定清空？',()=>{
+
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/scss/index";
+
+.lookHistory {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>
diff --git a/src/pages/me/userinfo/AddSchool.vue b/src/pages/me/userinfo/AddSchool.vue
index 8e3c5d1..45e00ca 100644
--- a/src/pages/me/userinfo/AddSchool.vue
+++ b/src/pages/me/userinfo/AddSchool.vue
@@ -56,7 +56,7 @@ import {mapState} from 'vuex'
 import enums from '../../../utils/enums'
 import {inject} from "vue";
 import MobileSelect from "mobile-select";
-import ConfirmDialog from "../../../components/ConfirmDialog";
+import ConfirmDialog from "../../../components/dialog/ConfirmDialog";
 import Loading from "../../../components/Loading";
 
 //TODO 年份选择器没做
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index 59a50d5..2c136ca 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -155,6 +155,8 @@ export default {
   right: 0;
   bottom: 0;
   top: 0;
+  overflow: auto;
+  font-size: 1.4rem;
 }
 
 .title {
diff --git a/src/pages/me/userinfo/EditUserInfoItem.vue b/src/pages/me/userinfo/EditUserInfoItem.vue
index f75811b..3a39501 100644
--- a/src/pages/me/userinfo/EditUserInfoItem.vue
+++ b/src/pages/me/userinfo/EditUserInfoItem.vue
@@ -18,7 +18,8 @@
         <div class="notice">我的名字</div>
         <div class="input-ctn" style="margin-bottom: 1rem;">
           <input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
-          <img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.name = ''">
+          <img v-if="localUserinfo.name"
+              class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.name = ''">
         </div>
         <div class="num">{{ localUserinfo.name.length }}/20</div>
       </div>
@@ -26,7 +27,9 @@
         <div class="notice">我的抖音号</div>
         <div class="input-ctn" style="margin-bottom: 1rem;">
           <input type="text" v-model="localUserinfo.account">
-          <img class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.account = ''">
+          <img
+              v-if="localUserinfo.account"
+              class="close" src="../../../assets/img/icon/close.svg" alt="" @click="localUserinfo.account = ''">
         </div>
         <div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
       </div>
diff --git a/src/pages/message/ChatDetail.vue b/src/pages/message/ChatDetail.vue
index 8ae26d7..10e6347 100644
--- a/src/pages/message/ChatDetail.vue
+++ b/src/pages/message/ChatDetail.vue
@@ -22,19 +22,20 @@
             <switches v-model="top" theme="bootstrap" color="success"></switches>
           </div>
         </div>
-        <div class="row">
+        <div class="row" @click="$nav('/set-remark')">
           <div class="left">设备备注</div>
           <div class="right">
             <img src="../../assets/img/icon/back.png" alt="">
           </div>
         </div>
+        <!-- TODO 没做        -->
         <div class="row">
           <div class="left">举报</div>
           <div class="right">
             <img src="../../assets/img/icon/back.png" alt="">
           </div>
         </div>
-        <div class="row">
+        <div class="row" @click="blockDialog = true">
           <div class="left">拉黑</div>
           <div class="right">
             <img src="../../assets/img/icon/back.png" alt="">
@@ -42,30 +43,48 @@
         </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">确认拉黑</div>
+        <div class="row">不让 TA 看</div>
+        <div class="space"></div>
+        <div class="row" @click="blockDialog = false">取消</div>
+      </div>
+    </from-bottom-dialog>
   </div>
 </template>
 <script>
 import Switches from './components/swtich/switches';
 import People from "../people/components/People";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 
 export default {
   name: "ChatDetail",
   components: {
     Switches,
-    People
+    People,
+    FromBottomDialog
   },
   data() {
     return {
       noMessage: false,
       top: false,
+      blockDialog: false,
       list: [
         {
           type: 1,
-          name:'A'
+          name: 'A'
         },
         {
           type: 6,
-          name:'多人聊天'
+          name: '多人聊天'
         },
       ]
     }
@@ -92,6 +111,7 @@ export default {
   top: 0;
   overflow: auto;
   color: white;
+  font-size: 1.4rem;
 
   .content {
     padding-top: 6rem;
@@ -108,16 +128,11 @@ export default {
       .row {
         padding-left: 2rem;
         padding-right: 2rem;
-
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 4rem;
 
-        &:active {
-          opacity: .5;
-        }
-
         .right {
           img {
             height: 2rem;
@@ -126,5 +141,36 @@ 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;
+      }
+    }
+
+    .space {
+      height: 1rem;
+      background: whitesmoke;
+    }
+  }
+
 }
 </style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index 4763773..7675203 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -181,7 +181,7 @@
 <script>
 import Footer from '../../components/Footer.vue'
 import Search from "../../components/Search";
-import FromBottomDialog from '../../components/FromBottomDialog'
+import FromBottomDialog from '../../components/dialog/FromBottomDialog'
 
 export default {
   name: "Message",
@@ -292,7 +292,6 @@ export default {
   color: white;
 
   .create-chat-wrapper {
-    margin-top: 2.4rem;
     padding-bottom: 6rem;
 
     .joined-chat {
@@ -457,7 +456,6 @@ export default {
   }
 
   .joined-chat-wrapper {
-    margin-top: 2.4rem;
 
     .nav {
       padding: 2rem;
diff --git a/src/pages/message/SetRemark.vue b/src/pages/message/SetRemark.vue
new file mode 100644
index 0000000..838fc1a
--- /dev/null
+++ b/src/pages/message/SetRemark.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="edit-item">
+    <BaseHeader @back="back">
+      <template v-slot:center>
+        <span class="f16">修改备注名</span>
+      </template>
+      <template v-slot:right>
+        <div>
+          <span class="f16" :class="isChanged?'save-yes':'save-no'" @click="save">保存</span>
+        </div>
+      </template>
+    </BaseHeader>
+
+    <div class="content">
+      <div class="notice">备注名</div>
+      <div class="input-ctn" style="margin-bottom: 1rem;">
+        <input type="text" v-model="remark" placeholder="请输入备注名">
+        <img v-if="remark.length" class="close" src="../../assets/img/icon/close.svg" alt="" @click="remark = ''">
+      </div>
+      <div class="num">{{ remark.length }}/20</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+
+export default {
+  name: "SetRemark",
+  data() {
+    return {
+      remark: '',
+      oldRemark: '',
+    }
+  },
+  computed: {
+    isChanged() {
+      return this.remark !== this.oldRemark;
+    },
+  },
+  created() {
+  },
+  methods: {
+    back() {
+      if (this.isChanged) {
+        this.$showConfirmDialog('是否保存修改', this.save, this.$back)
+      } else {
+        this.$back()
+      }
+    },
+    async save() {
+      if (!this.isChanged) return
+      this.$showLoading()
+      // this.$store.commit('setUserinfo', this.remark)
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.$back()
+    },
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.edit-item {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+
+  .save-yes {
+    color: $primary-btn-color;
+  }
+
+  .save-no {
+    color: $disable-primary-btn-color;
+  }
+
+  .content {
+    padding: 2rem;
+    padding-top: 7rem;
+
+    .notice, .num {
+      font-size: 1.2rem;
+      color: $second-text-color;
+    }
+
+    .input-ctn {
+      position: relative;
+      border-bottom: 1px solid $line-color;
+      display: flex;
+      align-items: center;
+
+      input {
+        margin: .5rem 0;
+        color: white;
+        height: 3rem;
+        width: 100%;
+        outline: none;
+        border: none;
+        background: transparent;
+
+        &::placeholder {
+          color: $second-text-color;
+        }
+      }
+
+      .close {
+        position: absolute;
+        right: 0;
+        top: 1.5rem;
+        width: 1rem;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 466c2ee..6243aa1 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -53,10 +53,6 @@
     </SlideRowList>
 
 
-    <transition name="fade">
-      <Mask v-if="maskDialog" @click="maskDialog = false"></Mask>
-    </transition>
-
     <transition name="fade">
       <div v-if="findAddressListDialog" class="find-address-list-dialog" @click="findAddressListDialog = false">
         <div class="body">
@@ -77,7 +73,7 @@
     </transition>
 
     <transition name="from-bottom">
-      <div class="more-option-dialog" v-if="moreOptionDialog">
+      <div class="more-option-dialog" v-if="false">
         <div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
           <span>站外好友口令</span>
         </div>
@@ -94,6 +90,28 @@
       </div>
     </transition>
 
+    <from-bottom-dialog
+        v-model="moreOptionDialog"
+        :show-heng-gang="false"
+        height="20rem"
+        mode="white">
+      <div class="more-option-dialog">
+        <div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
+          <span>站外好友口令</span>
+        </div>
+        <div class="row" @click="$nav('/scan')">
+          <span>扫一扫加好友</span>
+        </div>
+        <div class="row" style="border-bottom: none;" @click="$nav('/face-to-face')">
+          <span>面对面加好友</span>
+        </div>
+        <div class="space"></div>
+        <div class="row" @click="moreOptionDialog = false">
+          取消
+        </div>
+      </div>
+    </from-bottom-dialog>
+
     <transition name="fade">
       <div class="out-web-img-account-dialog" v-if="outWebImgAccountDialog">
         <img src="../../assets/img/icon/head-image.jpeg" alt="" class="img-account">
@@ -123,13 +141,15 @@
 import People from './components/People'
 import Search from '../../components/Search'
 import Indicator from '../../components/Indicator'
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 
 export default {
   name: "FindAcquaintance",
   components: {
     People,
     Search,
-    Indicator
+    Indicator,
+    FromBottomDialog
   },
   data() {
     return {
@@ -388,15 +408,7 @@ export default {
   }
 
   .more-option-dialog {
-    z-index: 9;
-    position: fixed;
-    width: 100%;
-    max-height: 50vh;
-    overflow: auto;
-    bottom: 0;
-    background: white;
-    box-sizing: border-box;
-    border-radius: 5px 5px 0 0;
+    font-size: 1.4rem;
 
     .space {
       height: 1rem;
@@ -404,16 +416,16 @@ export default {
     }
 
     .row {
-      font-size: 1.6rem;
+      height: 5rem;
       color: black;
       background: white;
       box-sizing: border-box;
-      padding: 1.8rem;
       width: 100%;
       //border-bottom: 1px solid ghostwhite;
       border-bottom: 1px solid gainsboro;
-      text-align: center;
-
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 
diff --git a/src/router/index.js b/src/router/index.js
index 68481f9..388272c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,8 @@ import Scan from "../pages/people/Scan";
 import FaceToFace from "../pages/people/FaceToFace";
 import Chat from "../pages/message/Chat";
 import ChatDetail from "../pages/message/ChatDetail";
+import SetRemark from "../pages/message/SetRemark";
+import LookHistory from "../pages/me/rightMenu/LookHistory";
 
 const routes = [
   // {path: '', component: Music},
@@ -62,6 +64,8 @@ const routes = [
   {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},
 ]
 
 export default VueRouter.createRouter({
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index d0ab8f6..4c1d198 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -1,6 +1,6 @@
 import * as Vue from "vue";
-import SelectDialog from "../components/SelectDialog";
-import ConfirmDialog from "../components/ConfirmDialog";
+import SelectDialog from "../components/dialog/SelectDialog";
+import ConfirmDialog from "../components/dialog/ConfirmDialog";
 import Loading from "../components/Loading";
 
 export default {