页面样式统一

Web/src/views/MessageView.vue

@@ -20,6 +20,9 @@
                 <div class="message-title" :class="{ 'unread': !item.isRead }">
                   {{ item.title }}
                 </div>
+                <div class="message-content">
+                  {{ item.content }}
+                </div>
                 <div class="message-info">
                   {{ item.createTime }}
                 </div>
@@ -46,12 +49,12 @@
       round
       closeable
     >
-      <div class="message-detail">
-        <div class="detail-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ currentMessage.title }}</h3>
-          <span class="detail-time">{{ currentMessage.createTime }}</span>
+          <p class="detail-time">{{ currentMessage.createTime }}</p>
         </div>
-        <div class="detail-content">
+        <div class="popup-scroll-content detail-content">
           {{ currentMessage.content }}
         </div>
       </div>
@@ -162,6 +165,7 @@ const handleDelete = (item) => {
           showToast(res.message || '删除失败');
         }
       } catch (error) {
+        console.error('删除消息失败', error);
         showToast('删除失败');
       }
     }
@@ -187,6 +191,7 @@ const handleMarkAllRead = () => {
           showToast(res.message || '操作失败');
         }
       } catch (error) {
+        console.error('标记所有已读失败', error);
         showToast('操作失败');
       }
     }
@@ -238,6 +243,15 @@ onMounted(() => {
   white-space: nowrap;
 }
 
+.message-content{
+  font-size: 14px;
+  color: var(--van-text-color-2);
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .message-title.unread {
   font-weight: bold;
 }
@@ -251,34 +265,13 @@ onMounted(() => {
   height: 100%;
 }
 
-.message-detail {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--van-background);
-}
-
-.detail-header {
-  margin-bottom: 20px;
-  border-bottom: 1px solid var(--van-border-color);
-  padding-bottom: 10px;
-}
-
-.detail-header h3 {
-  margin: 0 0 10px 0;
-  font-size: 18px;
-  color: var(--van-text-color);
-}
-
 .detail-time {
   color: var(--van-text-color-2);
   font-size: 14px;
 }
 
 .detail-content {
-  flex: 1;
-  overflow-y: auto;
+  padding: 20px;
   font-size: 16px;
   line-height: 1.6;
   color: var(--van-text-color);