完善消息页面

src/App.vue

@@ -9,7 +9,6 @@ export default {
 </script>
 <style lang="scss">
 #app {
-  background: rgb(22,26,37);
   height: 100%;
   width: 100%;
 }

src/assets/scss/color.scss

@@ -1,59 +1,61 @@
+$main-bg: rgb(22, 26, 37);
 .c-red {
-    color: red;
+  color: red;
 }
+
 .c-white {
-    color: white;
+  color: white;
 }
 
 .c-gray {
-    color: gray;
+  color: gray;
 }
 
 .c-text-notice {
-    color: #008000 !important;
+  color: #008000 !important;
 }
 
 .c-black {
-    color: black;
+  color: black;
 }
 
 .c-text-gray {
-    color: #80808094;
+  color: #80808094;
 }
 
 .bg-red {
-    background: red;
+  background: red;
 }
 
 .bg-gold {
-    background: gold;
+  background: gold;
 }
 
 .bg-green {
-    background: green;
+  background: green;
 }
 
 .bg-white {
-    background: white;
+  background: white;
 }
 
 .bg-gray {
-    background: gray;
+  background: gray;
 }
 
 .bg-second-gray {
-    background: #c1c1c1;
+  background: #c1c1c1;
 
 }
 
 .red {
-    background: red;
+  background: red;
 }
 
 .gold {
-    background: gold;
+  background: gold;
 }
 
 .green {
-    background: green;
+  background: green;
 }

src/pages/home/Message.vue

@@ -24,6 +24,13 @@
       </div>
     </div>
     <div class="line mt20p"></div>
+    <div class="requests">
+      <div class="span">关注请求（1）</div>
+      <div class="right">
+        <div class="not-read"></div>
+        <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">
+      </div>
+    </div>
     <div class="messages ">
       <div class="message" v-for="i in 5">
         <div class="avatar on-line">
@@ -31,19 +38,26 @@
         </div>
         <div class="content">
           <div class="left">
-            <div class="name">粉丝</div>
+            <div class="name">
+              <span>粉丝</span>
+              <span class="tag">官方</span>
+            </div>
             <div class="detail">
               <img class="sent" src="../../assets/img/icon/close-white.png" alt="">
               已送达 ，sb，凌晨 01:15
             </div>
           </div>
           <div class="right">
-            <!--              <div class="not-read"></div>-->
+            <!--                          <div class="not-read"></div>-->
-            <!--              <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
+            <!--                          <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
-            <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">
+            <!--            <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">-->
+            <div class="badge">12</div>
           </div>
         </div>
       </div>
+      <div class="not-more">
+        暂时没有更多了
+      </div>
     </div>
     <div class="line mt10p"></div>
     <div class="recommend">
@@ -65,7 +79,7 @@
               </div>
             </div>
             <div class="right">
-              <div class="button">回头</div>
+              <div class="button">回关</div>
               <div class="button">移除</div>
             </div>
           </div>
@@ -111,7 +125,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/scss/color";
+
 #Message {
+  background: $main-bg;
   padding-bottom: 60px;
   color: white;
 
@@ -216,8 +233,36 @@ export default {
     border-top: 1px solid $line-color;
   }
 
+  .requests {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    margin: 0 20px;
+    padding: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid $line-color;
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .arrow {
+        width: 15px;
+        height: 15px;
+      }
+
+      .not-read {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: yellow;
+      }
+    }
+  }
+
   .messages {
     margin-top: 5px;
+
     .message {
       display: flex;
       align-items: center;
@@ -230,15 +275,17 @@ export default {
         background: #353a4f;
       }
 
-      .avatar{
+      .avatar {
         position: relative;
+
         .head-image {
-          margin-left: 30px;
+          margin-left: 20px;
           margin-right: 15px;
           width: 48px;
           height: 48px;
           border-radius: 50%;
         }
+
         &.on-line::before {
           content: ' ';
           border: 3px solid black;
@@ -264,6 +311,16 @@ export default {
           .name {
             font-size: 1.8rem;
             color: white;
+            display: flex;
+            align-items: start;
+
+            .tag {
+              margin-left: 5px;
+              font-size: 1rem;
+              background: $line-color;
+              padding: 2px 5px;
+              border-radius: 2px;
+            }
           }
 
           .detail {
@@ -299,10 +356,25 @@ export default {
             border-radius: 50%;
             background: yellow;
           }
+
+          .badge {
+            font-size: 1rem;
+            display: block;
+            color: black;
+            padding: 1px 6px;
+            border-radius: 10px;
+            background: yellow;
+          }
         }
       }
 
     }
+
+    .not-more{
+      color: $second-text-color;
+      text-align: center;
+      padding: 20px;
+    }
   }
 
   .recommend {
@@ -313,6 +385,7 @@ export default {
       align-items: center;
 
       .left {
+        color: $second-text-color;
         img {
           width: 10px;
           height: 10px;
@@ -321,7 +394,7 @@ export default {
 
       .right {
         border-radius: 50%;
-        background: darkgray;
+        background: $second-text-color;
         padding: 5px;
         width: 10px;
         height: 10px;
@@ -343,8 +416,8 @@ export default {
       .head-image {
         margin-left: 20px;
         margin-right: 15px;
-        width: 50px;
+        width: 48px;
-        height: 50px;
+        height: 48px;
         border-radius: 50%;
       }
 
@@ -361,13 +434,9 @@ export default {
           }
 
           .detail {
-            font-size: 1.4rem;
+            color: $second-text-color;
-            margin-top: 5px;
+            font-size: 1.2rem;
-
+            margin-top: 4px;
-            .sent {
-              width: 10px;
-              height: 10px;
-            }
           }
         }
 
@@ -377,13 +446,13 @@ export default {
           align-items: center;
 
           .button {
-            background: #bb3c3c;
+            background: rgb(252,47,86);
             margin-left: 8px;
-            padding: 6px 20px;
+            padding: 8px 20px;
             border-radius: 3px;
 
             &:nth-last-child(1) {
-              background: darkgray;
+              background: rgb(58,58,67);
             }
           }
         }