调试

src/App.vue

@@ -1,13 +1,14 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :name="transitionName">
-      <!--      <keep-alive>-->
-      <!--      </keep-alive>-->
+<!--    <transition :name="transitionName">-->
+<!--      <keep-alive>-->
+<!--        <component :is="Component"/>-->
+<!--      </keep-alive>-->
+<!--    </transition>-->
+    <keep-alive>
       <component :is="Component"/>
-
-    </transition>
+    </keep-alive>
   </router-view>
-
 </template>
 
 <script>

src/assets/less/variables.less

@@ -1,4 +1,4 @@
-@footer-height: 6rem;
+@footer-height: 5rem;
 @header-height: 6.1rem;
 @indicator-height: 5rem;
 

src/components/Footer.vue

@@ -66,6 +66,7 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "../assets/less/index";
 
 .footer {
   font-size: 1.5rem;
@@ -75,8 +76,9 @@ export default {
   //border-top: 1px solid #7b7878;
   z-index: 2;
   //不用bottom：0是因为，在进行页面切换的时候，vue的transition
-  // 会使footer的bottom：0失效，不能准备定位
-  top: calc(100vh - 5rem);
+  // 会使footer的bottom：0失效，不能准确定位
+  top: calc(100vh - @footer-height);
+  //bottom: 0;
   background: #020202;
   color: white;
   display: flex;

src/pages/message/Message.vue

@@ -200,7 +200,7 @@
           </div>
 
           <!--      消息-->
-          <div class="message">
+          <div class="message" @click="$nav('/message/chat')">
             <div class="avatar on-line">
               <img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">
             </div>
@@ -252,7 +252,6 @@
           <!--      </div>-->
         </div>
       </div>
-      <Footer v-bind:init-tab="4"/>
       <from-bottom-dialog page-id="Message" v-model="createChatDialog">
         <div class="create-chat-wrapper" v-show="!showJoinedChat">
           <Search :isShowRightText="isShowRightText"
@@ -399,6 +398,8 @@
         </template>
       </div>
     </div>
+
+    <Footer v-bind:init-tab="4"/>
   </div>
 </template>
 
@@ -467,6 +468,7 @@ export default {
     }
   },
   created() {
+    console.log('create')
     this.recommend = this.$clone(this.friends.all)
     this.recommend.map(v => {
       v.type = -2
@@ -478,6 +480,12 @@ export default {
       // this.isShowRecommend = true
     }, 1000)
   },
+  activated() {
+    console.log('activated')
+  },
+  deactivated() {
+    console.log('deactivated')
+  },
   methods: {
     async loadRecommendData() {
       if (this.loading) return
@@ -497,23 +505,20 @@ export default {
 <style scoped lang="less">
 @import "../../assets/less/index";
 
-::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-
 #Message {
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   font-size: 1.4rem;
-  overflow: auto;
   background: @main-bg;
-  padding-bottom: 6rem;
   color: white;
 
   .no-search {
+    height: calc(100vh - @footer-height);
+    overflow: auto;
+
 
     .create-chat-wrapper {
       min-height: 70vh;
@@ -1075,6 +1080,5 @@ export default {
 
     }
   }
-
 }
 </style>

src/pages/message/chat/Chat.vue

@@ -8,8 +8,8 @@
           <span>zzzz</span>
         </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('/message/chat/detail')">
+          <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('/message/chat/detail')">
         </div>
       </div>
       <div class="message-wrapper" ref="msgWrapper" :class="isExpand ? 'expand' : ''">
@@ -18,57 +18,57 @@
       </div>
       <div class="footer" :class="isTyping ? 'typing' : ''">
         <div class="toolbar" v-if="!recording">
-          <img src="../../assets/img/icon/message/camera.png" alt="" class="camera">
+          <img src="../../../assets/img/icon/message/camera.png" alt="" class="camera">
           <input @click="typing = true"
                  @blur="typing = false"
                  type="text" placeholder="发送信息...">
           <template v-if="!isTyping">
-            <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-white.png"
+            <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-white.png"
                  alt="">
-            <img src="../../assets/img/icon/message/emoji-white.png" alt="">
-            <img @click="showOption = !showOption" src="../../assets/img/icon/message/add-white.png" alt="">
+            <img src="../../../assets/img/icon/message/emoji-white.png" alt="">
+            <img @click="showOption = !showOption" src="../../../assets/img/icon/message/add-white.png" alt="">
           </template>
           <template v-else>
-            <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png"
+            <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-black.png"
                  alt="">
-            <img src="../../assets/img/icon/message/emoji-black.png" alt="">
-            <img v-if="showOption" @click="showOption = !showOption" src="../../assets/img/icon/message/close-black.png"
+            <img src="../../../assets/img/icon/message/emoji-black.png" alt="">
+            <img v-if="showOption" @click="showOption = !showOption" src="../../../assets/img/icon/message/close-black.png"
                  alt="">
-            <img v-else @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
+            <img v-else @click="showOption = !showOption" src="../../../assets/img/icon/message/add-black.png" alt="">
           </template>
         </div>
         <div class="record" v-else>
           <span>按住 说话</span>
-          <img @click="recording = false" src="../../assets/img/icon/message/keyboard.png" alt="">
+          <img @click="recording = false" src="../../../assets/img/icon/message/keyboard.png" alt="">
         </div>
         <div class="options" v-if="showOption">
           <div class="option-wrapper">
             <div class="option">
-              <img src="../../assets/img/icon/message/photo.png" alt="">
+              <img src="../../../assets/img/icon/message/photo.png" alt="">
               <span>照片</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/camera2.png" alt="">
+              <img src="../../../assets/img/icon/message/camera2.png" alt="">
               <span>拍摄</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/redpack.png" alt="">
+              <img src="../../../assets/img/icon/message/redpack.png" alt="">
               <span>红包</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/video.png" alt="">
+              <img src="../../../assets/img/icon/message/video.png" alt="">
               <span>视频通话</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/audio.png" alt="">
+              <img src="../../../assets/img/icon/message/audio.png" alt="">
               <span>语音通话</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/come-on.png" alt="">
+              <img src="../../../assets/img/icon/message/come-on.png" alt="">
               <span>一起看视频</span>
             </div>
             <div class="option">
-              <img src="../../assets/img/icon/message/come-chang.png" alt="">
+              <img src="../../../assets/img/icon/message/come-chang.png" alt="">
               <span>一起唱</span>
             </div>
           </div>
@@ -81,27 +81,27 @@
       <!--      TODO 定位也有问题-->
       <div class="tooltip" :style="{top:tooltipTop+'px'}" v-if="tooltipTop !==-1">
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/like.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/like.png" alt="">
           <span>点赞</span>
         </div>
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/copy.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/copy.png" alt="">
           <span>复制</span>
         </div>
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/send.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/send.png" alt="">
           <span>转发</span>
         </div>
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/comment.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/comment.png" alt="">
           <span>回复</span>
         </div>
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/return.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/return.png" alt="">
           <span>回复</span>
         </div>
         <div class="options">
-          <img src="../../assets/img/icon/message/chat/del.png" alt="">
+          <img src="../../../assets/img/icon/message/chat/del.png" alt="">
           <span>删除</span>
         </div>
         <!--      TODO 官方的三角头会随着点击位置变动，先注释掉-->
@@ -112,7 +112,7 @@
     <div class="preview-img" v-if="false">
       <div class="header">
         <back mode="light"/>
-        <img src="../../assets/img/icon/search-light.png" alt="">
+        <img src="../../../assets/img/icon/search-light.png" alt="">
       </div>
       <img :src="previewImg" alt="" class="img-src">
       <div class="footer"></div>
@@ -124,7 +124,7 @@
         <Mask @click="isShowOpenRedPacket = false"/>
         <div class="content">
           <template v-if="isOpened">
-            <img src="../../assets/img/icon/message/chat/bg-open.png" alt="" class="bg">
+            <img src="../../../assets/img/icon/message/chat/bg-open.png" alt="" class="bg">
             <div class="wrapper">
               <div class="top">
                 <div class="money">0.01元</div>
@@ -135,7 +135,7 @@
             </div>
           </template>
           <template v-else>
-            <img src="../../assets/img/icon/message/chat/bg-close.png" alt="" class="bg">
+            <img src="../../../assets/img/icon/message/chat/bg-close.png" alt="" class="bg">
             <div class="wrapper">
               <div class="top">
                 <img :src="$imgPreview(userinfo.avatar)" alt="" class="avatar">
@@ -145,14 +145,14 @@
 
               <div class="l-button" :class="{opening}" @click="openRedPacket">
                 <template v-if="opening">
-                  <img src="../../assets/img/icon/loading-white.png" alt="">
+                  <img src="../../../assets/img/icon/loading-white.png" alt="">
                   正在打开
                 </template>
                 <span v-else>开红包</span>
               </div>
             </div>
           </template>
-          <img src="../../assets/img/icon/message/chat/close.png" alt="" class="close"
+          <img src="../../../assets/img/icon/message/chat/close.png" alt="" class="close"
                @click="isShowOpenRedPacket = false">
         </div>
       </div>
@@ -162,11 +162,11 @@
   </div>
 </template>
 <script>
-import ChatMessage from "./components/ChatMessage";
+import ChatMessage from "../components/ChatMessage";
 import {nextTick} from "vue";
-import Mask from "../../components/Mask";
+import Mask from "../../../components/Mask";
 import {mapState} from "vuex";
-import Loading from "../../components/Loading";
+import Loading from "../../../components/Loading";
 
 let CALL_STATE = {
   REJECT: 0,
@@ -257,7 +257,7 @@ export default {
         {
           type: MESSAGE_TYPE.MEME,
           state: AUDIO_STATE.NORMAL,
-          data: new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
+          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
           time: '2021-01-02 21:21',
           user: {
             id: '93864497380',
@@ -277,7 +277,7 @@ export default {
         {
           type: MESSAGE_TYPE.IMAGE,
           state: AUDIO_STATE.NORMAL,
-          data: new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
+          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
           time: '2021-01-02 21:21',
           user: {
             id: 1,
@@ -287,7 +287,7 @@ export default {
         {
           type: MESSAGE_TYPE.IMAGE,
           state: AUDIO_STATE.NORMAL,
-          data: new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
+          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
           time: '2021-01-02 21:21',
           user: {
             id: '93864497380',
@@ -364,7 +364,7 @@ export default {
           },
           time: '2021-01-02 21:21',
           user: {
-            id: '93864497380',
+            id: '1',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -421,29 +421,29 @@ export default {
           type: MESSAGE_TYPE.DOUYIN_VIDEO,
           state: VIDEO_STATE.VALID,
           data: {
-            poster: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+            poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
             author: {
               name: 'safasdfassafasdfassafasdfassafasdfas',
-              avatar: new URL('../../assets/img/icon/head-image.jpeg', import.meta.url).href
+              avatar: new URL('../../../assets/img/icon/head-image.jpeg', import.meta.url).href
             },
             title: '服了asd'
           },
           time: '2021-01-02 21:21',
           user: {
             id: '1',
-            avatar: '../../assets/img/icon/head-image.jpg'
+            avatar: '../../../assets/img/icon/head-image.jpg'
           }
         },
         {
           type: MESSAGE_TYPE.VIDEO,
           state: VIDEO_STATE.VALID,
           data: {
-            poster: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+            poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
           },
           time: '2021-01-02 21:21',
           user: {
             id: '93864497380',
-            avatar: '../../assets/img/icon/head-image.jpg'
+            avatar: '../../../assets/img/icon/head-image.jpg'
           }
         },
       ],
@@ -529,7 +529,7 @@ export default {
 }
 </style>
 <style scoped lang="less">
-@import "../../assets/less/index";
+@import "../../../assets/less/index";
 
 .Chat {
   position: fixed;
@@ -727,7 +727,7 @@ export default {
     margin-left: -33%;
     position: fixed;
     font-size: 1.2rem;
-    border-radius: .5rem;
+    border-radius: .6rem;
     //padding: 1rem;
     background: rgb(55, 58, 67);
     display: flex;

src/pages/message/chat/ChatDetail.vue

@@ -47,10 +47,10 @@
   </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";
+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",
@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../../assets/less/index";
+@import "../../../assets/less/index";
 
 #ChatDetail {
   position: fixed;

src/pages/message/components/ChatMessage.vue

@@ -32,11 +32,15 @@
 
         <div class="audio"
              v-if="message.type ===  MESSAGE_TYPE.AUDIO">
-          <div v-if="isMe" class="duration">{{ message.data.duration }}'</div>
-          <div class="horn">
-            <img src="../../../assets/img/icon/rss.png" alt="" class="avatar">
-          </div>
-          <div v-if="!isMe" class="duration">{{ message.data.duration }}'</div>
+          <template v-if="isMe">
+            <div class="duration">{{ message.data.duration }}'</div>
+            <img src="../../../assets/img/icon/message/chat/rss2.png" alt="" class="audio-icon">
+          </template>
+          <template v-else>
+            <img src="../../../assets/img/icon/message/chat/rss.png" alt="" class="audio-icon">
+            <div class="duration">{{ message.data.duration }}'</div>
+          </template>
+
         </div>
 
         <div class="call"
@@ -44,12 +48,12 @@
           message.type ===  MESSAGE_TYPE.AUDIO_CALL"
         >
           <div class="resolve" v-if="message.state === CALL_STATE.RESOLVE">
-            <img class="icon" src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <img class="icon" src="../../../assets/img/icon/message/chat/video.png" alt="">
             <span>通话时长 05:32</span>
           </div>
           <div class="reject" v-if="message.state === CALL_STATE.REJECT||
         message.state === CALL_STATE.NONE">
-            <img class="icon" src="../../../assets/img/icon/collect-gray.png" alt="">
+            <img class="icon" src="../../../assets/img/icon/message/chat/video.png" alt="">
             <div class="notice">
               <span class="state" v-if="message.state === CALL_STATE.REJECT">对方已拒绝</span>
               <span class="state" v-if="message.state === CALL_STATE.NONE">对方未接通</span>
@@ -167,7 +171,8 @@ export default {
   margin-bottom: 2rem;
   display: flex;
   //@chat-bg-color: dodgerblue;
-  @chat-bg-color: rgb(105, 143, 244);
+  @chat-bg-right-color: rgb(72, 116, 230);
+  @chat-bg-left-color: rgb(59, 59, 67);
 
   &.right {
     justify-content: flex-end;
@@ -178,8 +183,12 @@ export default {
       border-radius: 50%;
     }
 
-    .horn {
-      text-align: end;
+    .audio-icon {
+      margin-left: 5rem;
+    }
+
+    .chat-text, .call, .audio {
+      background: @chat-bg-right-color;
     }
   }
 
@@ -192,11 +201,20 @@ export default {
       border-radius: 50%;
     }
 
-    .horn {
-      text-align: start;
+    .audio-icon {
+      margin-right: 5rem;
+    }
+
+    .chat-text, .call, .audio {
+      background: @chat-bg-left-color;
     }
   }
 
+  @border-radius: 1rem;
+
+  .chat-wrapper {
+  }
+
   .time {
     width: 100%;
     color: @second-text-color;
@@ -206,7 +224,7 @@ export default {
   }
 
   .red_packet {
-    border-radius: 1rem;
+    border-radius: @border-radius;
     @not-received: rgb(253, 92, 72);
     @received: rgba(253, 92, 72, .8);
     width: 60vw;
@@ -249,7 +267,7 @@ export default {
 
   .meme {
     img {
-      border-radius: .6rem;
+      border-radius: @border-radius;
       //height: 30vh;
       max-width: 40vw;
     }
@@ -257,7 +275,7 @@ export default {
 
   .image {
     img {
-      border-radius: .6rem;
+      border-radius: @border-radius;
       //height: 30vh;
       max-width: 40vw;
     }
@@ -265,11 +283,10 @@ export default {
 
   .call {
     padding: 1rem;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     display: flex;
     align-items: center;
     font-size: 1.4rem;
-    background: @chat-bg-color;
 
     .resolve {
       display: flex;
@@ -286,11 +303,11 @@ export default {
       align-items: center;
 
       .icon {
-        padding: .4rem;
+        padding: .6rem;
         border-radius: 50%;
         background: rgba(27, 100, 172, 0.8);
         margin-right: 1rem;
-        width: 2rem;
+        width: 1.8rem;
       }
 
       .notice {
@@ -312,26 +329,19 @@ export default {
     max-width: 60vw;
     padding: 1rem;
     padding-right: 1.5rem;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 1.4rem;
-    background: @chat-bg-color;
 
-    .horn {
-      width: 5rem;
-
-      img {
-        transform: rotate(45deg) translate3d(1rem, -.5rem, 0);
-        width: 1.5rem;
-        height: 1.5rem;
-      }
+    .audio-icon {
+      width: 1.5rem;
+      height: 1.5rem;
     }
   }
 
   .douyin_video {
-    background: black;
     position: relative;
 
     .pause {
@@ -357,7 +367,7 @@ export default {
     }
 
     .poster {
-      border-radius: .6rem;
+      border-radius: @border-radius;
       //height: 30vh;
       width: 40vw;
     }
@@ -386,13 +396,12 @@ export default {
   }
 
   .chat-text {
+    border-radius: @border-radius;
     max-width: 60vw;
     padding: 1rem;
-    border-radius: .3rem;
     display: flex;
     align-items: center;
     font-size: 1.4rem;
-    background: @chat-bg-color;
   }
 
   .loves {

src/pages/message/notice/LiveNotice.vue

@@ -92,7 +92,7 @@ export default {
     padding-top: 6rem;
 
     .list {
-      height: calc(100vh - 12rem);
+      height: calc(100vh - 6rem);
       overflow: auto;
       box-sizing: border-box;
       padding: 0 @padding-page;

src/pages/message/notice/MoneyNotice.vue

@@ -139,7 +139,7 @@ export default {
     padding-top: 6rem;
 
     .list {
-      height: calc(100vh - 12rem);
+      height: calc(100vh - 6rem);
       overflow: auto;
       box-sizing: border-box;
       padding: 0 @padding-page;

src/router/index.js

@@ -27,8 +27,8 @@ import ServiceProtocol from "../pages/other/ServiceProtocol";
 import AddressList from "../pages/people/AddressList";
 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 Chat from "../pages/message/chat/Chat";
+import ChatDetail from "../pages/message/chat/ChatDetail";
 import SetRemark from "../pages/message/SetRemark";
 import LookHistory from "../pages/me/rightMenu/LookHistory";
 import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";