style: 修复message页的样式

src/other_pages/message/index.scss

@@ -1,4 +1,4 @@
-@use '~@/scss/images.scss' as img;
+@use "~@/scss/images.scss" as img;
 
 .message-container {
   width: 100%;
@@ -6,15 +6,16 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background: #FFFFFF;
+  background: #ffffff;
 
   // 顶部导航栏
   .navbar {
-    height: 100px;
+    height: 56px;
-    background: #FFFFFF;
+    background: #ffffff;
     position: sticky;
     top: 0;
     z-index: 100;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
 
     .navbar-content {
       height: 56px;
@@ -34,7 +35,7 @@
         }
 
         .navbar-title {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 600;
           font-size: 20px;
           line-height: 1.4;
@@ -51,13 +52,27 @@
     align-items: stretch;
     gap: 20px;
     padding: 6px 24px;
-    background: #FFFFFF;
+    background: #ffffff;
 
     .tab-item {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+    }
+  }
+  // 消息列表
+  .message-list {
+    flex: 1;
+    overflow: hidden;
+    box-sizing: border-box;
+    // margin-bottom:100px;
+    background-color: none !important;
+
+    .message-list-content {
+      display: flex;
+      flex-direction: column;
+      padding: 12px 12px 112px;
       gap: 8px;
       padding: 12px 15px;
       flex: 1;
@@ -72,7 +87,7 @@
       }
 
       .tab-text {
-        font-family: 'PingFang SC';
+        font-family: "PingFang SC";
         font-weight: 600;
         font-size: 16px;
         line-height: 1.5;
@@ -98,7 +113,7 @@
   .message-scroll {
     flex: 1;
     overflow: hidden;
-    background: #FFFFFF;
+    background: #ffffff;
 
     .message-cards {
       padding: 12px;
@@ -110,7 +125,7 @@
 
     // 系统消息卡片
     .message-card {
-      background: #FFFFFF;
+      background: #ffffff;
       border: 0.5px solid rgba(0, 0, 0, 0.08);
       border-radius: 20px;
       box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
@@ -126,7 +141,7 @@
         padding: 12px 15px 0;
 
         .card-title {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 600;
           font-size: 16px;
           line-height: 1.5;
@@ -141,7 +156,7 @@
         gap: 2px;
 
         .card-time {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 400;
           font-size: 12px;
           line-height: 1.5;
@@ -156,7 +171,7 @@
         gap: 2px;
 
         .card-content {
-          font-family: 'PingFang SC';
+          font-family: "PingFang SC";
           font-weight: 400;
           font-size: 14px;
           line-height: 1.43;
@@ -182,7 +197,7 @@
           cursor: pointer;
 
           .action-text {
-            font-family: 'PingFang SC';
+            font-family: "PingFang SC";
             font-weight: 600;
             font-size: 14px;
             line-height: 1.43;
@@ -195,7 +210,7 @@
               position: absolute;
               left: -16px;
               top: -9px;
-              width:  14px;;
+              width: 14px;
               height: 14px;
             }
           }
@@ -215,7 +230,7 @@
       padding: 24px 0 12px;
 
       .tip-text {
-        font-family: 'PingFang SC';
+        font-family: "PingFang SC";
         font-weight: 400;
         font-size: 14px;
         line-height: 1.71;
@@ -232,7 +247,12 @@
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    background: radial-gradient(circle at 27% 8%, rgba(189, 255, 74, 1) 17%, rgba(149, 242, 62, 1) 54%, rgba(50, 216, 56, 1) 100%);
+    background: radial-gradient(
+      circle at 27% 8%,
+      rgba(189, 255, 74, 1) 17%,
+      rgba(149, 242, 62, 1) 54%,
+      rgba(50, 216, 56, 1) 100%
+    );
     border: 2px solid rgba(0, 0, 0, 0.06);
     box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
     display: flex;
@@ -253,31 +273,31 @@
 
       // 加号图标 - 竖线
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 4px;
         height: 25px;
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 2px;
         box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
       }
 
       // 加号图标 - 横线
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 25px;
         height: 4px;
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 2px;
         box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
       }
     }
   }
-}
+}