优化footer

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;

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;
+    }
   }
 }
 

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;
-            }
+
           }
         }
 

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 {