From a69c6a49ada0dca693a006cf468de587095c8b9f Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 23 Oct 2021 18:02:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |  13 +--
 src/assets/img/icon/message/chat/rss.png     | Bin 0 -> 2100 bytes
 src/assets/img/icon/message/chat/rss2.png    | Bin 0 -> 2303 bytes
 src/assets/img/icon/message/chat/video.png   | Bin 0 -> 2936 bytes
 src/assets/img/icon/rss.png                  | Bin 623 -> 0 bytes
 src/assets/less/variables.less               |   2 +-
 src/components/Footer.vue                    |   6 +-
 src/pages/message/Message.vue                |  24 +++---
 src/pages/message/{ => chat}/Chat.vue        |  86 +++++++++----------
 src/pages/message/{ => chat}/ChatDetail.vue  |  10 +--
 src/pages/message/components/ChatMessage.vue |  75 +++++++++-------
 src/pages/message/notice/LiveNotice.vue      |   2 +-
 src/pages/message/notice/MoneyNotice.vue     |   2 +-
 src/router/index.js                          |   4 +-
 14 files changed, 120 insertions(+), 104 deletions(-)
 create mode 100644 src/assets/img/icon/message/chat/rss.png
 create mode 100644 src/assets/img/icon/message/chat/rss2.png
 create mode 100644 src/assets/img/icon/message/chat/video.png
 delete mode 100644 src/assets/img/icon/rss.png
 rename src/pages/message/{ => chat}/Chat.vue (86%)
 rename src/pages/message/{ => chat}/ChatDetail.vue (90%)

diff --git a/src/App.vue b/src/App.vue
index 56685d7..f9f3ebd 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/img/icon/message/chat/rss.png b/src/assets/img/icon/message/chat/rss.png
new file mode 100644
index 0000000000000000000000000000000000000000..93f6589ad821e92c5b878452fa58ab7dedba10ab
GIT binary patch
literal 2100
zcmbVN3sBQ$91pDp<fW%h5p)-$Fj3niEwm+Cd9_HL1y(sgMb?mnHrh6^36ECiK;7m8
zb%Wbrh;OF&K%H}nk0Cl4DvslrJH_erbk4WT>8a@Hmh$N7&dr;-`|^GHzTfxzzyDd1
znmj4cFT@W3fIxkc)+o%Nd-!?_Z_ed<AWVJPq-h)g_z!dsFQBq27yu+g=(J2e(=Y`i
z7@G_ynH)-1Xk!I508EG}WN~6P#e+GNnYL@7j)R9GkR~-yMw9_DunClfPI5V@sjlQS
z!Zn+SCZU*#;Dka<Ah1z94i?(1b`C4lKwZ3;uy$|55ZDFbXKSE1w?Ht{kP0R+4hmGs
z5GjEm2&jsd$x&4ffh)&>azu{8h!RF4rKlQ{t1%P>dmcy-=OA-2qc*WenDC{6EIiL*
zFkDbjAS+PF7>5}~qobo?L=Ma4QUM|5oOT{Bl-jwGy$o84BOEl#(~KQ-GvYZ+9<PA}
zRl9Alu^w7G*W)L_V{jqP!l(>!+tdXl2@j6Vb6C5ClLSmzDH~<yIRT4$u&jmQ8P3A|
z3$^F?B>{qO4F->lSL$N3c|>r$E?+RC$04sob7@YNf{hf%<T(gRmoKO}(rpckB{(RY
zXB=q^W9^MpYOl(mTrP_QM`zG>k}2RKUbsMMah}pZ?x;yoL@HOLp$aTA8bcIg5jBP&
z-B1HV(z(u8L8DL%QN9Efa)!it{Iy_`z;YRf4HpciZMd0&S-TkmJ#NGj7%Srt1Pj_J
zUfkCwB&0f+T-queaK=gTpk9}tM5C2Tsa%G3scSG`dOOGCc7oDtHIU#O8BLRzLQRlL
zb(D~oh%!o=Lq^J_xKf2maa^H7R8eX)Qc3jQ*D^$&I|X|0lmGL6ih~wv5VyWDkGnG6
zxq~IqoDfxKPw7mh=Jc$rG}x6c7*4p$Km!r(_){d*vrWIT2fAqsER;a{A9>LY<Ct8&
z0C!MvX2Dyp%{y379(EUOw;k|5P3$^*p}2eDLdS3~J-tf!@N_%MF0?p@(94#twmk&^
z(f4|7Tw3Nwjpfbno_=poQ_RK<4|e6a%rv#96&ZP3KPW!4f9;s-amyAzFaF}rbX{t5
zjc(aG=ma?Zpk>68q2Y@vj(j?pg!>-de(K5Ix=Hi*HJ?)7zoK%Q>dbfdU#sfqc;0fW
zy!4pWIBmh+lf_%xMZ1F4lG_o}ry2(wPS?Yu0`;?GiK;E3XMxkA(Bgd4%=Jt4Ue`r;
z#W4X|A7m%^V?{=G82#a{GvJLS5SG2TR^4)~;{HVacyYU|U+l{2rA8og%$AI{Mb(o^
zXNfzd{f@N@I}qJ4Y)aCB{>N8^E&uY+`$lIQFedEVq>~k8CDlCp`;HTvZd*6d>b?)e
z8O41~8g`VL3w^wB+luw$(g&0No4zVtbFS>+aq5RX*81v4;kW!r-Gv6fEN87G-Dh`7
z?7n-y6nUp8g93(LwB+wLHU_k;^r~&hGWD<XEpeJ%MQiKAPxqPdh%DQiE}~7<!9c_%
zkZoB5m=vx4=e;(~eLOzJY%^W?rfD<x_(Z2)AM2wk@i=kN717vL%b%EHuH5^%Q3M1_
z>Ro>|6~kUd9dCEUpxT|lC4=mp&YX4P8gYJTYkA#+CwEqF33m<ODSkG2hGbre*aXyx
z&L7h`;XeW@{%o;A2R>tp=dZ4v+OV@K+porpN`H3r+11i>(leig)!rkw{pLNWJ>+0e
z(Kbujk?f(ZiIEE~h<^=PE7}W0Jv=<HeCxD`yRk;`Fj4wtzcz77_&P~uk^ki#^FF>T
zQj3Qn^<_0Ti?>zIo%1ysaA=IANSWnb0`%)t4NnoxSl*%Rzds^ze4=q<byI1JPi>vP
ztwwUuNB=Z;_gh1N(whsfXOFtE8#*vTRsVTF?Agkc;~xx}via(Yc)l#8`KJc@eA2|A
ztfPTag|U8eW&p)TsC=`;JBDnnC>`(=%k~}CNa@a2Jog9Kz|q?)oi|`?=Jw?KYrebY
P{;%tG$=V(9rUickkp1i`

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/message/chat/rss2.png b/src/assets/img/icon/message/chat/rss2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eefa8f59be39f4093b1d5b5103e40de087e9939
GIT binary patch
literal 2303
zcmbVO3se+U7#;yZe3Ny=BAZ6AFlXnn%d$JN3bF*NEFzNPBV~4GSVnet#+iX#R!zXn
zJO+mlNu>t@YMFY>1NQK>nTn4h!SYy9QFeM@h$U9$<8+6|9_?s(oOABnJNJJ7|9}7E
z{%6*trzH;?{P181f`(aA%o$*Y)iEd-yk)Pq8%&{M%3K+OhKy3j0BF;z;Se<N2R<`P
z$+D(WjNsJJtYG6b9;XP<5EM7XBhpMBr@%JO&bv%V*S<pt%(EtBPK*_|iiun<pW>Cc
zS>Civ#+%0&S!Bv&IL<=>1x`+(VUN?{k|~b~>CsDpwYrTVa1TVuGa(78K{(5r4kro{
z2ghn~l)-Tvjx}mXBG$&x`iU@!lLUtAF+ztD28uLL1OfLw2rwtHIaG%E={{rN%Y@`A
zib!FY+wIo4wHiUPV}#LY#BdTLNfaPZxzMH19@Hg|>(^lBWJcmeg%@0~s*$z{`HBev
zRC|4Jihi{&xi3y2Vwi^(F+zi@KJ@@u#*Y*8B}b2Omccj&=j2?946uYBE9MG{Am<8q
zQSCpz%>an4)#|r#M=nmM--N6r6#zH-0&+*RoLMMxSOzBx`4Yn=6#$y!RBuEoQQ~Mt
zkTM0q(VwaGe#$UOYIN|Eb9fgkxaH_u1UNITa3(~}8cN_Osm&y`l+H-u+NW>>h2y<Y
ztHAO(g?EC+05pCZ6x0k$EA;<@S%%6HBqt3V=AE>i!$g-If&F2m5(S4K0mFcu_SSt%
zVq&@^<nRt~AZH{`g)K>mdcvsJqojuDp=-5L7MHBhE{3z1O$Z2%hUZzzpd)k0*cdIU
zXGs=~VRQs)(;7IG(~|}!$A-u18Ma^EEHL?M3G~aeKwfKLSiK<z)HSY;L2ay#L}`62
zfzq@#7LScF5IQ~6FF!-#!5yR>_pL|0nQHA&DZC7_TG)4WW^qgURt_HSDHn=n)N5cu
z7&ZSK@St~_ze5D>&4XTfcP<B%{zqN(!ek*wanll)U<c9q-@3!@MqZ{1{+s%}CGYOk
zZ>!V$q23o(CYN^EInY!wM0EyJyH9UYuz%;P=j@hF)ei^lPhI*OFZl4cZq5Z%OQ12=
zOxGqrP{4;4b3$g;s-v%*nw~i`qG`(cb1B_$!?r5ZgVDo?!wccY&>^+YtR35m%xf&2
zeIxMm+Go@El?>_}&_dO(dT7G)ux4W9Qz=Vlc3(1HaV}}b?agr)4`|2TY?q#MAN;B9
zTX%C;ep>1SYoi}Z+VNJv_iHURfj<W<KABKMet%ux9*l=9gS^wDMsgv015ELw(nsj3
z7RL=P=6s2H%Yr>n_xhDk#o@SZl~toFHkq#PuHRn%?Mct!)a{j@b&WK%e|IhFz@Eq|
zO;GXWvfn0+osIpnras!Tvf^xIb^L<X@|c^}jOx{k_8yDk&8;2MsN7d78-gzuW;NCm
zYfHa)f6bdgB^|!d)X%Slw0%<S4BT3D!8a0L)I9OcicpPZQ)NTjM;XP&@}@u6Z@K96
z)*S7q^9dn&!GC1kh`Mxi{=TpjDBt%;Hu=WOQ-ij5Ci^NE&Y9O~7}C8oYnT{%u6W4|
zOq}xA8aN>OY6m?(;znIvQ&FAIlD+fB&al4*wgvC;uGpNh|8PrF+>XaT{o5e65yOv_
zE|tfOKrVgLvV8P=lgQ4nztVE{Uk@7p`<Un-N<IxgOSHaIUh!_hgBvGZ8NF^-qpu+K
z@5xQNJ;#H7ERNhAbnaJr#joKZ1pzZUmp%|4v@4*~2VDvbKam$zGkoY*3m&V=ypUZT
zSvr45a_a{X7e-Y~DCvmb9KIp{=G;ej4>>;^-?rKHwi|klZ8{TiY~aACpW|Csht{s&
zfaZ_88nzX3LS=I+UXFUvmzN!J{=&))by?G%wsf5iYj2x6GQ6pBUeVXSF(K8#V*|VJ
zji=`hEymHy<@Gc4?c*aGz3A22dV9sZ+P$__h7qv*@dsNP7OZPHd8+CK+e@pXit3lA
zeOWq<+KH4cntA5*`p4S`Z#|+PU_arQoizPib<0rkO!J{4i}g?f`ebpXvhLu9$WsaM
k_@slcKXLqGS<<N$EuOR^-#CL`Q-4t`NonR?Q?pC{0SA&fssI20

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/message/chat/video.png b/src/assets/img/icon/message/chat/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..0341d105ea2f7127ca3320360883362cae78c4f2
GIT binary patch
literal 2936
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
PQ5xpvLUFEl3}XHXW0NPO

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/rss.png b/src/assets/img/icon/rss.png
deleted file mode 100644
index 1a8031323933129c042e0d9abd7918f791bed125..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 623
zcmV-#0+9WQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80006uNkl<ZSV!%a
zJ7`rw5Qe|MQ?SrNd^HN%#6k;^fQ64Ds2GcgR+c`~DF~)AHWoHwA&T1hC`@4!5mB^J
zP_Pn25dv0<VxuUQzYOdNn{)5U-IH8NlYuRE@7<m6%>FYwVu4Ky?4Lz|#RznbfbH$T
zPvBP!Nq_#ASepP|0J}1$-++6-q@?(*Z&nJBJNyLP2X0FGI$x3|fDvFLumM;P>;#t9
zoP7z1`GOQ@f$e=jj6=ZM3}y;AC+Xo_qEQS`9d3IKa3YNyWK`1iwh*lWY9LpE!<o}@
zNf+Bd%qGImz<1!eq$f>>+I~=j7?Sj~6rwZ>-UAcBT}g50GtBk{U_4tKl=P+qq7<My
z>vw`U-2>tyu%{$Vn*de-tASO(U`oTinbUWYwse8G1sqH3MS3U}q3xr<d0=zpSkjFB
zDMQ|-G>tm3tydI^0m7;60U$(IK|GeUKaWIB4?UyM3ZMbvhNNjt)S@sYDJp8CwFc+{
z5yIS>XNT=5NT-t5VM&us1dRZ;4*<hJ+~qS#uWF$VP2A}wINMR2;;O=KOFG^P!1fN{
zWo=W(m)MR1H3W2o+V)>y3GhSG%C-RY!V>%A`8`>S!X;oVt&QXllI=%8CD3I}O-)lB
zC<Tb7rD{;FNIF{q+P)mGWSXy&6j#|{O#r1=unC9;C2T^{kqlrIxR&Mvl0FmzB&E+P
z!t|fzz;quVX?F&25IB?OW0GFC0%#IVzt`tf2l@%I2(aK0_y;9r-XUnlyA1#U002ov
JPDHLkV1oQ)4nqI{

diff --git a/src/assets/less/variables.less b/src/assets/less/variables.less
index b8847e5..eefff45 100644
--- a/src/assets/less/variables.less
+++ b/src/assets/less/variables.less
@@ -1,4 +1,4 @@
-@footer-height: 6rem;
+@footer-height: 5rem;
 @header-height: 6.1rem;
 @indicator-height: 5rem;
 
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 0619fad..a385dec 100644
--- a/src/components/Footer.vue
+++ b/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;
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index 4e19738..36a3360 100644
--- a/src/pages/message/Message.vue
+++ b/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>
diff --git a/src/pages/message/Chat.vue b/src/pages/message/chat/Chat.vue
similarity index 86%
rename from src/pages/message/Chat.vue
rename to src/pages/message/chat/Chat.vue
index 32920ac..9c5f625 100644
--- a/src/pages/message/Chat.vue
+++ b/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;
diff --git a/src/pages/message/ChatDetail.vue b/src/pages/message/chat/ChatDetail.vue
similarity index 90%
rename from src/pages/message/ChatDetail.vue
rename to src/pages/message/chat/ChatDetail.vue
index 764b98e..48bfbe7 100644
--- a/src/pages/message/ChatDetail.vue
+++ b/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;
diff --git a/src/pages/message/components/ChatMessage.vue b/src/pages/message/components/ChatMessage.vue
index be1cfcd..d30f729 100644
--- a/src/pages/message/components/ChatMessage.vue
+++ b/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,9 +201,18 @@ 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 {
@@ -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 {
diff --git a/src/pages/message/notice/LiveNotice.vue b/src/pages/message/notice/LiveNotice.vue
index d7bf847..4bb2a0c 100644
--- a/src/pages/message/notice/LiveNotice.vue
+++ b/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;
diff --git a/src/pages/message/notice/MoneyNotice.vue b/src/pages/message/notice/MoneyNotice.vue
index e2f1224..98b8e9c 100644
--- a/src/pages/message/notice/MoneyNotice.vue
+++ b/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;
diff --git a/src/router/index.js b/src/router/index.js
index e2e6ce6..cf67eb6 100644
--- a/src/router/index.js
+++ b/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";