From 6fec94a62ac8a14fd67c80fe0f8fe419bd0b979e Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 16 Sep 2021 00:27:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E6=9C=8B?=
 =?UTF-8?q?=E5=8F=8B=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   9 +-
 src/assets/img/icon/home/music3.png           | Bin 0 -> 5569 bytes
 src/assets/img/icon/home/record.png           | Bin 0 -> 2468 bytes
 .../{newicon/e0g.webp => share-password.webp} | Bin
 src/components/Share.vue                      | 144 ++++---
 src/components/dialog/ConfirmDialog.vue       |   2 +
 src/pages/Test4.vue                           |  37 +-
 src/pages/home/Music.vue                      | 119 +++++-
 src/pages/home/Report.vue                     |  13 +-
 src/pages/home/components/ShareToFriend.vue   | 371 ++++++++++++++++++
 src/router/index.js                           |   4 +-
 11 files changed, 589 insertions(+), 110 deletions(-)
 create mode 100644 src/assets/img/icon/home/music3.png
 create mode 100644 src/assets/img/icon/home/record.png
 rename src/assets/img/icon/{newicon/e0g.webp => share-password.webp} (100%)
 create mode 100644 src/pages/home/components/ShareToFriend.vue

diff --git a/src/App.vue b/src/App.vue
index f735f3f..347920c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,9 +4,10 @@
       <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
     </transition>
     <transition :name="transitionName">
-      <keep-alive>
-        <component :is="Component"/>
-      </keep-alive>
+<!--      <keep-alive>-->
+<!--      </keep-alive>-->
+      <component :is="Component"/>
+
     </transition>
   </router-view>
 
@@ -51,10 +52,10 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
-        '/home/report',
         '/home/submit-report',
         '/home/music',
         '/home/music-rank-list',
+        '/home/report',
 
 
         '/message/share-to-friend',
diff --git a/src/assets/img/icon/home/music3.png b/src/assets/img/icon/home/music3.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcdfea190f3a63f4705e270deba04d246fb908e2
GIT binary patch
literal 5569
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/home/record.png b/src/assets/img/icon/home/record.png
new file mode 100644
index 0000000000000000000000000000000000000000..5031b904a3666f36beb8d94ca08de803f1d74f73
GIT binary patch
literal 2468
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/newicon/e0g.webp b/src/assets/img/icon/share-password.webp
similarity index 100%
rename from src/assets/img/icon/newicon/e0g.webp
rename to src/assets/img/icon/share-password.webp
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 115efc8..5eded80 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -25,13 +25,15 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
+        <template v-if="mode === 'video'">
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/torichang.png" alt="">
+            <span>分享日常</span>
+          </div>
+        </template>
         <div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
-          <span>私信朋友</span>
-        </div>
-        <div class="share-to" @click="$no">
-          <img src="../assets/img/icon/components/video/torichang.png" alt="">
-          <span>分享日常</span>
+          <span>站内私信</span>
         </div>
         <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
           <img src="../assets/img/icon/components/video/towechat.webp" alt="">
@@ -49,67 +51,85 @@
           <img src="../assets/img/icon/components/video/toqq.webp" alt="">
           <span>QQ好友</span>
         </div>
-        <div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
-          <img src="../assets/img/icon/components/video/duoshan.png" alt="">
-          <span>多闪</span>
-        </div>
-        <div class="share-to" @click="$no">
-          <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
-          <span>今日头条</span>
-        </div>
+        <template v-if="mode === 'video'">
+          <div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
+            <img src="../assets/img/icon/components/video/duoshan.png" alt="">
+            <span>多闪</span>
+          </div>
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
+            <span>今日头条</span>
+          </div>
+        </template>
         <div class="share-to" @click="closeShare($emit('share2Webo'))">
           <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
           <span>微博</span>
         </div>
       </div>
       <div class="toolbar ">
-        <div class="tool" @click="$no">
-          <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
-          <span>一起视频</span>
-        </div>
-        <div class="tool" @click="$nav('/home/report')">
-          <img src="../assets/img/icon/components/video/warring.png" alt="">
-          <span>举报</span>
-        </div>
-        <div class="tool" @click="canDownload && closeShare($emit('download'))"
-             :style="{ opacity : canDownload ? '1' : '0.5' }">
-          <img src="../assets/img/icon/components/video/download.png" alt="">
-          <span>保存本地</span>
-        </div>
-        <div class="tool" @click="toggleCollect">
-          <img v-if="isCollect" src="../assets/img/icon/components/video/star-full.png" alt="">
-          <img v-else src="../assets/img/icon/components/video/star.png" alt="">
-          <span>收藏</span>
-        </div>
-        <div class="tool" @click="$no">
-          <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
-          <span>合拍</span>
-        </div>
-        <div class="tool" @click="$no">
-          <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
-          <span>动态壁纸</span>
-        </div>
-        <!--        todo-->
-        <div class="tool" @click="$emit('dislike')">
-          <img src="../assets/img/icon/components/video/dislike.png" alt="">
-          <span>不感兴趣</span>
-        </div>
-        <div class="tool" @click="copyLink">
-          <img src="../assets/img/icon/components/video/link.png" alt="">
-          <span>复制链接</span>
-        </div>
-        <div class="tool" @click="closeShare($emit('showDouyinCode'))">
-          <img src="../assets/img/icon/components/video/qrcode.png" alt="">
-          <span>抖音码</span>
-        </div>
-        <div class="tool" @click="$no">
-          <img src="../assets/img/icon/components/video/dou.webp" alt="">
-          <span>帮上热门</span>
-        </div>
-        <div class="tool" @click="closeShare($emit('play-feedback'))">
-          <img src="../assets/img/icon/components/video/feedback.webp" alt="">
-          <span>播放反馈</span>
-        </div>
+        <template v-if="mode === 'music'">
+          <div class="tool" @click="copyLink">
+            <img src="../assets/img/icon/components/video/link.png" alt="">
+            <span>复制链接</span>
+          </div>
+          <div class="tool" @click="$nav('/home/report',{type:this.mode})">
+            <img src="../assets/img/icon/components/video/warring.png" alt="">
+            <span>举报音乐</span>
+          </div>
+          <div class="tool" @click="closeShare($emit('showDouyinCode'))">
+            <img src="../assets/img/icon/components/video/qrcode.png" alt="">
+            <span>抖音码</span>
+          </div>
+        </template>
+        <template v-if="mode === 'video'">
+          <div class="tool" @click="$no">
+            <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
+            <span>一起视频</span>
+          </div>
+          <div class="tool" @click="$nav('/home/report',{type:this.mode})">
+            <img src="../assets/img/icon/components/video/warring.png" alt="">
+            <span>举报</span>
+          </div>
+          <div class="tool" @click="canDownload && closeShare($emit('download'))"
+               :style="{ opacity : canDownload ? '1' : '0.5' }">
+            <img src="../assets/img/icon/components/video/download.png" alt="">
+            <span>保存本地</span>
+          </div>
+          <div class="tool" @click="toggleCollect">
+            <img v-if="isCollect" src="../assets/img/icon/components/video/star-full.png" alt="">
+            <img v-else src="../assets/img/icon/components/video/star.png" alt="">
+            <span>收藏</span>
+          </div>
+          <div class="tool" @click="$no">
+            <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
+            <span>合拍</span>
+          </div>
+          <div class="tool" @click="$no">
+            <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
+            <span>动态壁纸</span>
+          </div>
+          <!--        todo-->
+          <div class="tool" @click="$emit('dislike')">
+            <img src="../assets/img/icon/components/video/dislike.png" alt="">
+            <span>不感兴趣</span>
+          </div>
+          <div class="tool" @click="copyLink">
+            <img src="../assets/img/icon/components/video/link.png" alt="">
+            <span>复制链接</span>
+          </div>
+          <div class="tool" @click="closeShare($emit('showDouyinCode'))">
+            <img src="../assets/img/icon/components/video/qrcode.png" alt="">
+            <span>抖音码</span>
+          </div>
+          <div class="tool" @click="$no">
+            <img src="../assets/img/icon/components/video/dou.webp" alt="">
+            <span>帮上热门</span>
+          </div>
+          <div class="tool" @click="closeShare($emit('play-feedback'))">
+            <img src="../assets/img/icon/components/video/feedback.webp" alt="">
+            <span>播放反馈</span>
+          </div>
+        </template>
       </div>
 
       <div class="share2friend" v-if="selectFriends.length">
@@ -152,6 +172,10 @@ export default {
       type: Boolean,
       default: true
     },
+    mode: {
+      type: String,
+      default: 'video'//music
+    },
   },
   computed: {
     ...mapState(['friends']),
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index f4e520e..54281e0 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="ConfirmDialog " @click="$emit('dismiss')" v-if="visible">
     <div class="content" @click.stop="stop">
+      <slot name="header"></slot>
       <div class="body">
         <div class="title" v-if="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
@@ -14,6 +15,7 @@
   </div>
 </template>
 <script>
+/*TODO 单独使用时，没有mark*/
 export default {
   name: "ConfirmDialog",
   props: {
diff --git a/src/pages/Test4.vue b/src/pages/Test4.vue
index 1fe9657..f80e0e5 100644
--- a/src/pages/Test4.vue
+++ b/src/pages/Test4.vue
@@ -1,21 +1,19 @@
 <template>
   <div class="Test">
-    <div class="content1">
-      <BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
-      <BaseButton @click="triggerPause">pause</BaseButton>
-      <BaseButton @click="triggerStart">start</BaseButton>
-    </div>
+    <base-button type="primary" @click="t = true">test</base-button>
+    <ShareToFriend v-model="t"/>
   </div>
 </template>
 <script>
-
+import ShareToFriend from "./home/components/ShareToFriend";
 import BaseButton from "../components/BaseButton";
-import BaseMarquee from "../components/BaseMarquee";
-import Dom from "../utils/dom";
 
 export default {
   name: "Test4",
-  components: {BaseButton, BaseMarquee},
+  components: {
+    BaseButton,
+    ShareToFriend
+  },
   props: {
     text: {
       type: String,
@@ -24,20 +22,10 @@ export default {
   },
   data() {
     return {
-      timer: null,
-      contentWidth: 0,
-      transformX: 0,
-      $marqueeContent: null,
+      t: false,
     }
   },
-  methods: {
-    triggerPause() {
-      new Dom('.text').trigger('pause')
-    },
-    triggerStart() {
-      new Dom('.text').trigger('start')
-    },
-  },
+  methods: {},
   mounted() {
   }
 }
@@ -55,12 +43,5 @@ export default {
   overflow: auto;
   font-size: 1.4rem;
   color: white;
-
-  .content1 {
-    padding-top: 6rem;
-
-  }
-
-
 }
 </style>
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index cc6b584..2773ead 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -14,7 +14,7 @@
           <img class="star" v-else src="../../assets/img/icon/star-white.png" @click.stop="toggleCollect()">
         </template>
         <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
-        <img class="share" src="../../assets/img/icon/share-white.png" alt="">
+        <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
       </div>
     </div>
     <div class="content">
@@ -23,16 +23,21 @@
               @fixed="e => this.isFixed = e"
               @pulldown="loadData">
         <div class="desc">
-          <img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
+          <div class="cover-wrapper" @click="togglePlay()">
+            <img class="cover" src="../../assets/img/poster/src1-bg.png" alt="">
+            <img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play">
+            <img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play">
+          </div>
           <div class="info">
             <div class="name">MT创作的原声</div>
             <div>
-              <div class="user">NT ></div>
-              <div class="peoples">>1 人使用</div>
+              <div class="user">NT</div>
+              <div class="peoples">>5585 人使用</div>
             </div>
-            <div class="collection">
-              <img src="../../assets/img/icon/star-white.png" alt="">
-              <span>收藏</span>
+            <div class="collection" @click.stop="toggleCollect()">
+              <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
+              <img v-else src="../../assets/img/icon/star-white.png">
+              <span>{{ isCollect ? '已' : '' }}收藏</span>
             </div>
           </div>
         </div>
@@ -50,21 +55,75 @@
         <span>拍同款</span>
       </div>
     </div>
+
+    <Share v-model="isSharing"
+           mode="music"
+           ref="share"
+           @showDouyinCode="showDouyinCode = true"
+           @showShare2WeChatZone="shareType = 2"
+           @share2WeChat="shareType = 3"
+           @share2QQZone="shareType = 4"
+           @share2QQ="shareType = 5"
+           @share2Webo="shareType = 8"
+    />
+
+    <DouyinCode v-model="showDouyinCode"/>
+
+
+    <ConfirmDialog
+        v-model:visible="showSharePassword"
+        title="你的口令已复制"
+        subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
+        :okText="okText"
+        cancelText="不分享了"
+    >
+      <template v-slot:header>
+        <img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">
+      </template>
+    </ConfirmDialog>
+
   </div>
 </template>
 <script>
 import Posters from "../../components/Posters";
 import Scroll from "../../components/Scroll";
 import Loading from "../../components/Loading";
+import Share from "../../components/Share";
+import DouyinCode from "../../components/DouyinCode";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 
 export default {
   name: "Music",
-  components: {Scroll, Posters, Loading},
+  components: {
+    Scroll,
+    Posters,
+    Loading,
+    Share,
+    DouyinCode,
+    ConfirmDialog
+  },
   data() {
     return {
+      loading: false,
       isFixed: false,
       isCollect: false,
-      loading: false,
+      isPlay: false,
+      isSharing: false,
+      okText: '',
+
+      showSharePassword: false,
+      shareType: -1,
+
+      showPlayFeedback: false,
+      showShareDuoshan: false,
+      showShareDialog: false,
+      showShare2WeChatZone: false,
+      showDouyinCode: false,
+      showFollowSetting: false,
+      showFollowSetting2: false,
+      showBlockDialog: false,
+      showChangeNote: false,
+
       videos: [
         {
           "id": "ac78850c-1497-43bb-bdf8-219f3262b690",
@@ -2423,6 +2482,22 @@ export default {
       ]
     }
   },
+  watch: {
+    shareType(newVal, oldVal) {
+      if (newVal === -1) return
+      this.showSharePassword = true
+      switch (newVal) {
+        case 2:
+        case 3:
+          return this.okText = '去微信粘贴'
+        case 4:
+        case 5:
+          return this.okText = '去QQ粘贴'
+        case 8:
+          return this.okText = '去微博粘贴'
+      }
+    }
+  },
   created() {
     this.videos = this.videos.concat(this.videos2).concat(this.videos3)
   },
@@ -2436,6 +2511,9 @@ export default {
       await this.$sleep(1500)
       this.videos = this.videos.concat(this.videos2)
       this.loading = false
+    },
+    togglePlay() {
+      this.isPlay = !this.isPlay
     }
   },
   mounted() {
@@ -2509,14 +2587,27 @@ export default {
     }
 
     .desc {
-      padding: 3rem 1.5rem;
+      padding: 1rem 1.5rem 3rem 1.5rem;
       display: flex;
       height: 12rem;
 
-      .logo {
-        width: 12rem;
-        height: 100%;
-        border-radius: .3rem;
+      .cover-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .play {
+          width: 4rem;
+          height: 4rem;
+          position: absolute;
+        }
+
+        .cover {
+          width: 12rem;
+          height: 100%;
+          border-radius: .3rem;
+        }
       }
 
       .info {
diff --git a/src/pages/home/Report.vue b/src/pages/home/Report.vue
index 4f3849d..3c9fb01 100644
--- a/src/pages/home/Report.vue
+++ b/src/pages/home/Report.vue
@@ -2,7 +2,9 @@
   <div class="Report">
     <BaseHeader backMode="light">
       <template v-slot:center>
-        <span class="f16">视频举报</span>
+        <span class="f16">
+          <template v-if="type === 'video'">视频</template>
+          <template v-if="type === 'music'">音乐</template>举报</span>
       </template>
     </BaseHeader>
     <div class="content">
@@ -50,7 +52,7 @@
         <back scale=".8" direction="right"></back>
       </div>
       <div class="line"></div>
-<!--todo 没做详细的举报      -->
+      <!--todo 没做详细的举报      -->
       <div class="title">
         <span>侵犯名誉</span>
       </div>
@@ -106,11 +108,16 @@ export default {
   name: "Report",
   props: {},
   data() {
-    return {}
+    return {
+      type: 'video'
+    }
   },
   computed: {},
   created() {
   },
+  activated() {
+    this.type = this.$route.query.type
+  },
   methods: {}
 }
 </script>
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
new file mode 100644
index 0000000..6c5c15d
--- /dev/null
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -0,0 +1,371 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      @cancel="cancel"
+      height="70vh">
+    <div class="create-chat-wrapper" v-if="!showJoinedChat">
+      <Search :isShowText="isShowText"
+              @click="isShowText = true"
+              @notice="isShowText = false;"
+              @clear="isShowText = false"
+              class="ml2r mr2r" placeholder="搜索" v-model="createChatSearchKey"></Search>
+      <template v-if="createChatSearchKey">
+        <div class="search-result" v-if="searchFriends.length">
+          <div class="search-result-item" v-for="item in searchFriends"
+               @click="item.select = !item.select;createChatSearchKey = ''">
+            <img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="right">
+              <div class="info">
+                <span class="name">{{ item.name }}</span>
+                <span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
+              </div>
+              <b-button type="primary">分享</b-button>
+            </div>
+          </div>
+        </div>
+        <div class="no-result" v-else>
+          <div class="notice-h1">
+            搜索结果为空
+          </div>
+          <div class="notice-h2">
+            没有搜索到相关的联系人
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="joined-chat" @click="showJoinedChat = true">
+          <img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
+          <div class="right">
+            <span>已加入的群聊</span>
+            <back direction="right" mode="gray" scale=".7"/>
+          </div>
+        </div>
+        <div class="friend-list">
+          <div class="index">所有朋友</div>
+          <div class="friend-item" v-for="item in friends.all" @click="item.select = !item.select">
+            <img class="left" :src="$imgPreview(item.avatar)" alt="">
+            <div class="right">
+              <span>{{ item.name }}</span>
+              <b-button type="primary">分享</b-button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="joined-chat-wrapper" v-if="showJoinedChat">
+      <div class="nav">
+        <back @click="showJoinedChat = false" mode="light" scale="1.2"></back>
+        <span>已加入的群聊</span>
+        <span>&nbsp;</span>
+      </div>
+
+      <div class="chat-list">
+        <div class="chat-item" v-for="item in 15">
+          <img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
+          <div class="right">
+            <div class="title">
+              <div class="name">{{ text.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
+              <div class="num">(3)</div>
+            </div>
+            <back direction="right" mode="light"></back>
+          </div>
+        </div>
+      </div>
+      <NoMore></NoMore>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import {mapState} from "vuex";
+import Search from "../../../components/Search";
+import Check from "../../../components/Check";
+
+export default {
+  name: "ShareTo",
+  components: {
+    FromBottomDialog,
+    Search,
+    Check
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      showDialog: false,
+      showJoinedChat: false,
+      isShowText: false,
+      createChatSearchKey: '',
+      localFriends: [],
+      searchFriends: []
+    }
+  },
+  watch: {
+    createChatSearchKey(newVal) {
+      if (newVal) {
+        //TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+        this.searchFriends = this.friends.filter(v => {
+          if (v.name.includes(newVal)) return true
+          return v.account.includes(newVal);
+        })
+      } else {
+        this.searchFriends = []
+      }
+    }
+  },
+  computed: {
+    ...mapState(['friends']),
+    selectFriends() {
+      return this.friends.all.filter(v => v.select).length
+    }
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:modelValue', false)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.button {
+  width: 6.4rem;
+  height: 2.6rem;
+}
+
+.create-chat-wrapper {
+  padding-bottom: 4rem;
+  background: @main-bg;
+
+  .joined-chat {
+    border-bottom: 1px solid @line-color;
+    height: 5rem;
+    padding: 0 2rem;
+    display: flex;
+    align-items: center;
+
+    .left {
+      width: 2.2rem;
+      height: 2.2rem;
+      margin-left: 1rem;
+      margin-right: 2rem;
+    }
+
+    .right {
+      font-size: 1.4rem;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  .friend-list {
+    padding: 0 2rem;
+
+    .index {
+      color: @second-text-color;
+      height: 6rem;
+      line-height: 6rem;
+      font-size: 1.3rem;
+    }
+
+    .friend-item {
+      margin-bottom: 2rem;
+      display: flex;
+      align-items: center;
+      //background: #fff;
+
+      &:nth-child(1) {
+        margin-top: 1rem;
+      }
+
+      .left {
+        width: 3.8rem;
+        height: 3.8rem;
+        border-radius: 50%;
+        margin-right: 1rem;
+      }
+
+      .right {
+        font-size: 1.4rem;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        img {
+          height: 2rem;
+        }
+      }
+    }
+  }
+
+  .btn-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: @main-bg;
+    //background: red;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      margin-bottom: 2rem;
+      width: calc(100% - 4rem);
+      height: 4rem;
+      display: flex;
+      align-items: center;
+      font-size: 1.4rem;
+      justify-content: center;
+      background: #3f445c;
+      border-radius: .2rem;
+
+      &.primary {
+        background: @primary-btn-color;
+      }
+    }
+  }
+
+  .search-result {
+    padding: 0 2rem;
+
+    .search-result-item {
+      margin-bottom: 2rem;
+      display: flex;
+      align-items: center;
+
+      &:nth-child(1) {
+        margin-top: 1rem;
+      }
+
+      .left {
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 50%;
+        margin-right: 1rem;
+      }
+
+      .right {
+        font-size: 1.4rem;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .info {
+          display: flex;
+          flex-direction: column;
+
+          .name {
+            font-size: 1.4rem;
+          }
+
+          .account {
+            font-size: 1.3rem;
+            color: @second-text-color;
+          }
+        }
+
+        img {
+          height: 2rem;
+        }
+      }
+    }
+  }
+
+  .no-result {
+    height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .notice-h1 {
+      font-size: 1.6rem;
+    }
+
+    .notice-h2 {
+      margin-top: 1rem;
+      font-size: 1.4rem;
+      color: @second-text-color;
+    }
+
+  }
+}
+
+.joined-chat-wrapper {
+  background: @main-bg;
+
+  .nav {
+    font-size: 1.7rem;
+    padding: 2rem;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 2rem;
+    }
+  }
+
+  .chat-list {
+    padding: 0 2rem;
+
+    .chat-item {
+      margin-bottom: 2rem;
+      display: flex;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+
+      &:nth-child(1) {
+        margin-top: 1rem;
+      }
+
+      .left {
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 50%;
+        margin-right: 1rem;
+      }
+
+      .right {
+        font-size: 1.4rem;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          .name {
+          }
+
+          .num {
+            margin-left: .5rem;
+            color: @second-text-color;
+          }
+        }
+
+        img {
+          height: 1.5rem;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 79c6596..e3ced4f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -60,10 +60,12 @@ const routes = [
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
   {path: '/home', component: Index},
-  {path: '/home/report', component: Report},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},
   {path: '/home/music-rank-list', component: MusicRankList},
+  {path: '/home/report', component: Report},
+
+
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},