From 3e391b99a498485135cbd084fedbcd415f01430d Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 4 Nov 2021 00:05:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/message/chat/call.png     | Bin 0 -> 3983 bytes
 .../img/icon/message/chat/video-white.png     | Bin 0 -> 438 bytes
 src/assets/less/custom.less                   |  23 ++++++++++++++++
 src/components/Footer.vue                     |  26 +++++++++++++++---
 src/pages/message/Message.vue                 |  15 +---------
 src/pages/message/components/ChatMessage.vue  |   1 +
 6 files changed, 47 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/img/icon/message/chat/call.png
 create mode 100644 src/assets/img/icon/message/chat/video-white.png

diff --git a/src/assets/img/icon/message/chat/call.png b/src/assets/img/icon/message/chat/call.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e51548c9e8f650ff26e4ad0aa67655d5337f541
GIT binary patch
literal 3983
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
LTVbmVJ;?tDR~;4h

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/message/chat/video-white.png b/src/assets/img/icon/message/chat/video-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b43a5d23be0d5f55ff856ea54f899a2b588d290
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80004fNkl<ZSV!%b
zJugI25Qd+ZPQ-r@qEJw%R6a_bMrb6&E()DQClrDe5g)Cep-_lzMW>Sx;wSI}UOAh)
zn`;yHa<k`d;k0Mw%ri6R%*+u5FBNQ`e}K-3fbAJz78uNNFRp<bN%vXLs71i`C9s@T
zDTCaOq}>d1$o3JinML@QGNY0nTImFUM_>qe1?DB)wNm<S-}WSMo9tI4Z8gi<?gkEl
zF`ya%oCsAVP5sq)UGJy!Y>xx`z(id>8i4H$-~i}JJK1&s+kL<}u$VGj1wy)Nm#}Rq
z0QP`WU^p@U0jvV$7yvIof0NfGNl&)JMQwWo(y2a{)OhMK0Yb<ZBweLxVgkGabCN=d
zZmgI9b)#QOb1Z;oU?Amqh(cM?TP%R^*0+HRU?c$vDJcQ#F<wEfwA=0lLc?2&UWn4Y
z#r6tt0tBGOYHKBIZf>?i2dn_o>1GtW9d{)VOTbz214#%)p(9ypkSJ~_%{v9<(eIpp
gK^`yi=>A9G6ZxSC@RO6(&j0`b07*qoM6N<$f<j)n%K!iX

literal 0
HcmV?d00001

diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less
index 9b2837f..d5bed53 100644
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@@ -143,6 +143,29 @@
   background: yellow;
 }
 
+.badge {
+  font-size: 1.2rem;
+  display: block;
+  color: black;
+  padding: 1px .6rem;
+  border-radius: 1rem;
+  background: yellow;
+}
+
+.badge2 {
+  transform: scale(.9);
+  font-size: 1.2rem;
+  color: black;
+  @width: 1.8rem;
+  width: @width;
+  height: @width;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: yellow;
+}
+
 p {
   padding: 0;
   margin: 0;
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a385dec..da0e5a8 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="footer f16 ">
+  <div class="footer">
     <div class="l-button" @click="refresh(1)">
       <span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
       <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
@@ -15,8 +15,13 @@
         </div>
       </div>
     </div>
-    <div class="l-button" @click="tab(4)"><span :class="{active:currentTab===4}">消息</span></div>
-    <div class="l-button" @click="tab(5)"><span :class="{active:currentTab===5}">我</span></div>
+    <div class="l-button" @click="tab(4)">
+      <span :class="{active:currentTab===4}">消息</span>
+      <div class="badge2 ">2</div>
+    </div>
+    <div class="l-button" @click="tab(5)">
+      <span :class="{active:currentTab===5}">我</span>
+    </div>
   </div>
 </template>
 
@@ -69,7 +74,7 @@ export default {
 @import "../assets/less/index";
 
 .footer {
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   position: fixed;
   width: 100%;
   height: 5rem;
@@ -89,6 +94,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
     .refresh {
       width: 25%;
@@ -138,6 +144,18 @@ export default {
         opacity: 1;
       }
     }
+
+    .badge2 {
+      right: .7rem;
+      top: .7rem;
+      position: absolute;
+    }
+
+    .badge {
+      right: .7rem;
+      top: .7rem;
+      position: absolute;
+    }
   }
 }
 
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index f78514c..1438ce3 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -923,21 +923,8 @@ export default {
               height: 2rem;
             }
 
-            .not-read {
-              width: .7rem;
-              height: .7rem;
-              border-radius: 50%;
-              background: yellow;
-            }
 
-            .badge {
-              font-size: 1.2rem;
-              display: block;
-              color: black;
-              padding: 1px .6rem;
-              border-radius: 1rem;
-              background: yellow;
-            }
+
           }
         }
 
diff --git a/src/pages/message/components/ChatMessage.vue b/src/pages/message/components/ChatMessage.vue
index d30f729..f65a410 100644
--- a/src/pages/message/components/ChatMessage.vue
+++ b/src/pages/message/components/ChatMessage.vue
@@ -221,6 +221,7 @@ export default {
     text-align: center;
     height: 4rem;
     line-height: 4rem;
+    font-size: 1.2rem;
   }
 
   .red_packet {