diff --git a/src/App.vue b/src/App.vue
index ecfcc74..f0a14b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,6 +37,8 @@ export default {
         '/service-protocol',
         '/address-list',
         '/video-detail',
+        '/scan',
+        '/face-to-face',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)
diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss
index ae19bd5..ee52f34 100644
--- a/src/assets/scss/color.scss
+++ b/src/assets/scss/color.scss
@@ -2,6 +2,7 @@ $main-bg: rgb(22, 26, 37);
 $active-main-bg: rgb(31, 37, 52);
 $second-text-color: rgb(143, 143, 158);
 $second-btn-color: rgb(58, 58, 70);
+$second-btn-color-tran: rgba(58, 58, 70, .4);
 $line-color: rgb(37, 45, 66);
 
 
diff --git a/src/pages/home/Message.vue b/src/pages/home/Message.vue
index 967f39a..4004b44 100644
--- a/src/pages/home/Message.vue
+++ b/src/pages/home/Message.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="Message">
-    <div class="header pt15p">
+    <div class="header ">
       <div class="title">
         <p class="tac c-white ">消息</p>
         <span @click="nav('/myCard')">创建群聊</span>
       </div>
     </div>
-    <Search class="m20p"></Search>
-    <div class="line mb20p"></div>
-    <div class="friends  pl10p ">
-      <div class="friend pr10p pl10p" v-for="item in 10">
+    <Search class="m2r"></Search>
+    <div class="line mb2r"></div>
+    <div class="friends  pl1r ">
+      <div class="friend pr1r pl1r" v-for="item in 10">
         <div class="avatar on-line">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
         </div>
@@ -20,7 +20,7 @@
         <span>状态设置</span>
       </div>
     </div>
-    <div class="line mt20p"></div>
+    <div class="line mt2r"></div>
     <div class="requests">
       <div class="span">关注请求（1）</div>
       <div class="right">
@@ -56,7 +56,7 @@
         暂时没有更多了
       </div>
     </div>
-    <div class="line mt10p"></div>
+    <div class="line mt1r"></div>
     <div class="recommend">
       <div class="title">
         <div class="left">
@@ -99,6 +99,11 @@
       </div>
     </div>
     <Footer v-bind:init-tab="4"/>
+
+    <div class="create-chat">
+      <div class="heng-gang"></div>
+      <Search class="m2r"></Search>
+    </div>
   </div>
 </template>
 
@@ -131,8 +136,96 @@ export default {
   padding-bottom: 60px;
   color: white;
 
+  .create-chat {
+    padding: 10px 10px 0 10px;
+    z-index: 9;
+    position: fixed;
+    width: 100%;
+    max-height: 50vh;
+    overflow: auto;
+    bottom: 0;
+    background: $main-bg;
+    box-sizing: border-box;
+    border-radius: 5px 5px 0 0;
+
+    .heng-gang {
+      display: flex;
+      justify-content: center;
+
+      .content {
+        border-radius: 2px;
+        height: 4px;
+        width: 30px;
+        background: $second-btn-color;
+        margin-bottom: 5px;
+      }
+    }
+
+    .collection {
+      margin: 10px 0;
+      background: white;
+      width: 100%;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      font-size: 1.6rem;
+      font-weight: bold;
+      padding: 10px;
+      box-sizing: border-box;
+
+      img {
+        background: white;
+        width: 35px;
+        height: 35px;
+        margin-right: 10px;
+      }
+
+    }
+
+    .friends {
+      background: white;
+      border-radius: 6px 6px 0 0;
+
+      width: 100%;
+
+      .friend {
+        box-sizing: border-box;
+        padding: 10px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        //border-bottom: 1px solid ghostwhite;
+        border-bottom: 1px solid gainsboro;
+
+        img {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+        }
+
+        .right {
+          margin: 0 5px 0 15px;
+          font-size: 1.6rem;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .share-btn {
+            font-size: 1.4rem;
+            color: white;
+            padding: 5px 20px;
+            background: $primary-btn-color;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
 
   .header {
+    margin-top: 2rem;
+
     .title {
       font-size: 1.8rem;
       position: relative;
@@ -140,7 +233,7 @@ export default {
       span {
         font-size: 1.6rem;
         position: absolute;
-        right: 10px;
+        right: 2rem;
         top: 0;
       }
     }
diff --git a/src/pages/people/FaceToFace.vue b/src/pages/people/FaceToFace.vue
new file mode 100644
index 0000000..5d2cb4a
--- /dev/null
+++ b/src/pages/people/FaceToFace.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="FaceToFace">
+    <BaseHeader style="background: black">
+      <template v-slot:right>
+        <span class="f16" @click="$nav('/common-setting')">设置</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+    </div>
+  </div>
+</template>
+<script>
+//TODO 动画效果麻烦
+export default {
+  name: "FaceToFace",
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.FaceToFace {
+  background: black;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index e3c0516..466c2ee 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -10,7 +10,7 @@
       </Indicator>
       <img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
-    <SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}">
+    <SlideRowList v-model:active-index="currentSlideItemIndex">
       <SlideItem class="tab1">
         <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
         <div class="title">我的好友（互相关注）</div>
@@ -20,7 +20,7 @@
       <SlideItem class="tab2">
         <div class="mr2r ml2r mt1r">
           <Search v-if="!isShowText" :is-show-text="false" @click="isShowText = true">
-            <img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="t">
+            <img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="$nav('/scan')">
           </Search>
           <Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
         </div>
@@ -54,37 +54,37 @@
 
 
     <transition name="fade">
-      <div v-if="findAddressListDialog" class="dialog find-address-list" @click="findAddressListDialog = false">
-        <div class="content" @click.stop="null">
-          <div class="body">
-            <div>
-              <img src="../../assets/img/icon/head-image.jpeg" alt="">
-            </div>
-            <span class="title">发现通讯录好友</span>
-            <span class="desc">
-            授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见
-            <span class="link" @click="$nav('/service-protocol')">《隐私政策》</span>
-        </span>
-          </div>
-          <div class="footer">
-            <div @click="findAddressListDialog = false">暂时不要</div>
-            <div @click="$nav('/address-list')">发现好友</div>
+      <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">
+          <div>
+            <img src="../../assets/img/icon/head-image.jpeg" alt="">
           </div>
+          <span class="title">发现通讯录好友</span>
+          <span class="desc">
+            <span>授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见</span>
+            <span class="link" @click="$nav('/service-protocol')">《隐私政策》</span>
+           </span>
+        </div>
+        <div class="footer">
+          <div @click="findAddressListDialog = false">暂时不要</div>
+          <div @click="$nav('/address-list')">发现好友</div>
         </div>
       </div>
     </transition>
-    <transition name="fade">
-      <Mask v-if="moreOptionDialog" @click="moreOptionDialog = false"></Mask>
-    </transition>
+
     <transition name="from-bottom">
       <div class="more-option-dialog" v-if="moreOptionDialog">
-        <div class="row">
+        <div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
           <span>站外好友口令</span>
         </div>
-        <div class="row">
+        <div class="row" @click="$nav('/scan')">
           <span>扫一扫加好友</span>
         </div>
-        <div class="row" style="border-bottom: none;">
+        <div class="row" style="border-bottom: none;" @click="$nav('/face-to-face')">
           <span>面对面加好友</span>
         </div>
         <div class="space"></div>
@@ -94,6 +94,29 @@
       </div>
     </transition>
 
+    <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">
+        <img src="../../assets/img/icon/close-white.png" alt="" class="close" @click="outWebImgAccountDialog = false">
+        <div class="desc">
+          <div>这是你的图片口令</div>
+          <div>你可以通过此口令添加站外好友</div>
+        </div>
+        <div class="notice">
+          <img src="../../assets/img/icon/close.svg" alt="">
+          <span>图片口令已保存到相册</span>
+        </div>
+        <div class="btn wechat" @click="outWebImgAccountDialog = false">
+          <img src="../../assets/img/icon/close.svg" alt="">
+          <span>发给微信好友</span>
+        </div>
+        <div class="btn qq" @click="outWebImgAccountDialog = false">
+          <img src="../../assets/img/icon/close.svg" alt="">
+          <span>发给QQ好友</span>
+        </div>
+      </div>
+    </transition>
+
   </div>
 </template>
 <script>
@@ -112,6 +135,7 @@ export default {
     return {
       findAddressListDialog: false,
       moreOptionDialog: false,
+      outWebImgAccountDialog: false,
       indicatorFixed: false,
       isShowText: false,
       isSearch: false,
@@ -137,13 +161,19 @@ export default {
       ],
     }
   },
-  computed: {},
+  computed: {
+    maskDialog: {
+      get() {
+        return this.findAddressListDialog || this.moreOptionDialog || this.outWebImgAccountDialog
+      },
+      set() {
+        this.findAddressListDialog = this.moreOptionDialog = this.outWebImgAccountDialog = false
+      }
+    }
+  },
   mounted() {
   },
   methods: {
-    t() {
-      console.log('scan')
-    },
     async search() {
       this.$showLoading()
       await this.$sleep(500)
@@ -181,6 +211,7 @@ export default {
   bottom: 0;
   top: 0;
   color: white;
+  font-size: 1.4rem;
 
   .header {
     height: 6rem;
@@ -199,6 +230,7 @@ export default {
   .tab1 {
     box-sizing: border-box;
     padding: 2rem;
+
     .title {
       margin-left: 2rem;
       margin-top: 2rem;
@@ -286,78 +318,71 @@ export default {
     }
   }
 
-  .dialog {
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: #000000bb;
+  .find-address-list-dialog {
+    z-index: 2;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 70vw;
+    color: black;
+    background: white;
+    box-sizing: border-box;
+    border-radius: .3rem;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    color: black;
-
-    .content {
-      background: white;
-      width: 70%;
-      border-radius: 2px;
-      box-sizing: border-box;
-      font-size: 1.5rem;
 
-      .body {
-        padding: 2rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    .body {
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
-        img {
-          height: 6rem;
-          margin-bottom: 2rem;
-        }
+      img {
+        height: 6rem;
+        margin-bottom: 2rem;
+      }
 
-        .title {
-          font-size: 1.6rem;
-          font-weight: bold;
-          margin-bottom: 1rem;
-        }
+      .title {
+        font-size: 1.6rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+      }
 
-        .desc {
-          font-size: 1rem;
-          color: gray;
-        }
+      .desc {
+        font-size: 1rem;
+        color: gray;
+      }
 
-        .link {
-          color: rgb(18, 100, 149);
-        }
+      .link {
+        color: rgb(18, 100, 149);
       }
+    }
 
-      $footer-border-color: #eaeaf1;
+    $footer-border-color: #eaeaf1;
 
-      .footer {
-        margin-top: 2rem;
-        display: flex;
-        height: 4rem;
-        border-top: 1px solid $footer-border-color;
-        font-size: 1.4rem;
+    .footer {
+      width: 100%;
+      display: flex;
+      height: 4rem;
+      border-top: 1px solid $footer-border-color;
+      font-size: 1.4rem;
 
-        div {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 49%;
-          text-align: center;
-          border-right: 1px solid $footer-border-color;
-          opacity: .5;
-
-          &:nth-last-child(1) {
-            border-right: none;
-            opacity: 1;
-          }
+      div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 49%;
+        text-align: center;
+        border-right: 1px solid $footer-border-color;
+        opacity: .5;
+
+        &:nth-last-child(1) {
+          border-right: none;
+          opacity: 1;
         }
       }
-
     }
 
   }
@@ -391,5 +416,82 @@ export default {
 
     }
   }
+
+  .out-web-img-account-dialog {
+    z-index: 2;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 80vw;
+    color: black;
+    background: white;
+    box-sizing: border-box;
+    border-radius: .3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+
+    .img-account {
+
+    }
+
+    .close {
+      top: 1rem;
+      right: 1rem;
+      position: absolute;
+      background: $second-btn-color-tran;
+      padding: .4rem;
+      width: 1rem;
+      border-radius: 50%;
+    }
+
+    .desc {
+      margin-top: 2rem;
+      text-align: center;
+
+    }
+
+    .notice {
+      margin-top: 2rem;
+      display: flex;
+      align-items: center;
+      color: $second-text-color;
+
+      img {
+        margin-right: 1rem;
+        width: 1rem;
+      }
+    }
+
+    .btn {
+      width: 100%;
+      height: 4rem;
+      border-radius: .3rem;
+      margin-top: 2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+
+      &:nth-last-child(1) {
+        margin-top: 1rem;
+      }
+
+      &.wechat {
+        background: rgb(62, 174, 56);
+      }
+
+      &.qq {
+        background: rgb(24, 183, 238);
+      }
+
+      img {
+        margin-right: 1rem;
+        width: 1rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/pages/people/Scan.vue b/src/pages/people/Scan.vue
new file mode 100644
index 0000000..5a1276e
--- /dev/null
+++ b/src/pages/people/Scan.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="Scan">
+    <img src="../../assets/img/icon/back.png" @click="$back" class="back">
+    <div class="video-ctn">
+      <video src="../../assets/video/3.mp4"></video>
+    </div>
+    <div class="float">
+      <div class="open-light">
+        <img src="../../assets/img/icon/qr-code-white.svg" alt="">
+        <span>轻触照亮</span>
+      </div>
+      <div class="option">
+        <img src="../../assets/img/icon/qr-code-white.svg" alt="">
+        <span>我的抖音码</span>
+      </div>
+      <div class="option">
+        <img src="../../assets/img/icon/qr-code-white.svg" alt="">
+        <span>相册</span>
+      </div>
+    </div>
+    <div class="scan-anim">
+
+    </div>
+  </div>
+</template>
+<script>
+//TODO 那个动画没做，用css画有点麻烦，后面ps p一张图片吧
+export default {
+  name: "Scan",
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.Scan {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+
+  .back {
+    z-index: 3;
+    margin: 2rem 0 0 2rem;
+    position: fixed;
+    height: 2rem;
+  }
+
+  .float {
+    position: fixed;
+    bottom: 6rem;
+    display: flex;
+    justify-content: space-between;
+    width: 80vw;
+    left: 10vw;
+
+    .option {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        border-radius: 50%;
+        background: $second-btn-color-tran;
+        padding: 1.6rem;
+        height: 2.4rem;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .open-light {
+      position: fixed;
+      bottom: 16rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      left: 50%;
+      transform: translateX(-50%);
+
+      img {
+        height: 2.4rem;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  .video-ctn {
+    height: 100vh;
+    width: 100vw;
+
+    video {
+      height: 100vh;
+      width: 100vw;
+    }
+  }
+
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 84e6c19..4f52344 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,8 @@ import ChooseCity from "../pages/me/userinfo/ChooseCity";
 import FindAcquaintance from "../pages/people/FindAcquaintance";
 import ServiceProtocol from "../pages/other/ServiceProtocol";
 import AddressList from "../pages/people/AddressList";
+import Scan from "../pages/people/Scan";
+import FaceToFace from "../pages/people/FaceToFace";
 
 const routes = [
   // {path: '', component: Music},
@@ -54,6 +56,8 @@ const routes = [
   {path: '/find-acquaintance', component: FindAcquaintance},
   {path: '/service-protocol', component: ServiceProtocol},
   {path: '/address-list', component: AddressList},
+  {path: '/scan', component: Scan},
+  {path: '/face-to-face', component: FaceToFace},
 ]
 
 export default VueRouter.createRouter({