feat:首页消息样式交互更改

apps/mobile/src/components/message/message-card.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="message-bg" v-if="list.length">
     <div class="message-main clickable">
-      <div class="message-unread" v-if="msgData.unread > 0">
-        {{ setUnRead }}条未读
+      <div class="card-title">
+        <span>最新消息</span>
+        <span class="message-unread" v-if="msgData.unread > 0">
+          {{ setUnRead }}
+        </span>
+        <div class="icon-box" @click="goMore">
+          <AppIcon name="youbian" size="14" color="#c0c4cc"/>
+        </div>
       </div>
       <div
         class="message-card"
@@ -31,9 +37,6 @@
           </div>
         </div>
       </div>
-      <div class="icon-box" @click="goMore">
-        <AppIcon name="youbian" />
-      </div>
     </div>
   </div>
 </template>
@@ -65,7 +68,7 @@ export default {
         rollingTiming: 10
       },
       offsetHeight: 0,
-      groupHeight: 26,
+      groupHeight: 20,
       msgListParams: {
         offset: 1,
         isColumn: true,
@@ -113,7 +116,7 @@ export default {
       return decimalValue ? decimalValue[0] : ''
     },
     startScrolling() {
-      const offsetY = 24
+      const offsetY = 20
       const offsetYvw = px2viewport(offsetY)
       const offsetYPx = vw2px(offsetYvw)
       let listItem
@@ -248,23 +251,31 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 15px 0 9px;
+  padding: 6px 0 10px;
   height: 100%;
   background-color: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0px 2px 8px rgba(54, 147, 179, 0.05);
+  .card-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    margin-bottom: 4px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #171826;
+    padding: 0 12px;
+  }
   .message-unread {
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 0 10px;
-    width: fit-content;
-    line-height: 15px;
+    line-height: 14px;
+    padding: 1px 4px 0 4px;
+    border-radius: 10px;
     background: #fb483d;
     color: #fff;
-    border-radius: 40px 0 40px 0;
-    font-size: 11px;
+    font-size: 10px;
+    margin-right: 16px;
   }
 }
 .message-card {
@@ -273,8 +284,8 @@ export default {
   align-items: flex-start;
   justify-content: space-between;
   background-color: #ffffff;
-  padding: 0 16px;
-  height: 48px;
+  padding: 0 12px;
+  height: 40px;
   overflow: hidden;
   &.have-one {
     align-items: center;
@@ -287,8 +298,8 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 24px;
-    line-height: 24px;
+    height: 20px;
+    line-height: 18px;
     &.visited {
       .dot {
         background-color: #c0c4cc;
@@ -306,20 +317,20 @@ export default {
       flex-shrink: 0;
       font-weight: 700;
       font-size: 12px;
-      line-height: 24px;
+      line-height: 18px;
       color: #171826;
       margin-right: 12px;
     }
     .title {
       font-size: 11px;
-      line-height: 24px;
+      line-height: 18px;
       color: #171826;
       margin-right: 12px;
     }
     .time {
       flex-shrink: 0;
       font-size: 11px;
-      line-height: 24px;
+      line-height: 18px;
       color: #9b9ca3;
     }
   }
@@ -330,7 +341,7 @@ export default {
 }
 .icon-box {
   position: absolute;
-  top: 50%;
+  top: 53%;
   right: 12px;
   transform: translateY(-50%);
   z-index: 2;