样式统一

Web/src/views/MessageView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container-flex message-page">
+  <div class="page-container-flex">
     <van-nav-bar title="消息中心">
       <template #right>
         <van-icon name="passed" size="18" @click="handleMarkAllRead" />
@@ -42,23 +42,17 @@
     </van-pull-refresh>
 
     <!-- 详情弹出层 -->
-    <van-popup 
-      v-model:show="detailVisible" 
-      position="bottom"
-      :style="{ height: '50%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="detailVisible"
+      :title="currentMessage.title"
+      :subtitle="currentMessage.createTime"
+      height="50%"
+      :closeable="true"
     >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>{{ currentMessage.title }}</h3>
-          <p class="detail-time">{{ currentMessage.createTime }}</p>
-        </div>
-        <div class="popup-scroll-content detail-content">
-          {{ currentMessage.content }}
-        </div>
+      <div class="detail-content">
+        {{ currentMessage.content }}
       </div>
-    </van-popup>
+    </PopupContainer>
   </div>
 </template>
 
@@ -67,6 +61,7 @@ import { ref, onMounted } from 'vue';
 import { showToast, showDialog } from 'vant';
 import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message';
 import { useMessageStore } from '@/stores/message';
+import PopupContainer from '@/components/PopupContainer.vue';
 
 const messageStore = useMessageStore();
 const list = ref([]);
@@ -204,16 +199,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.message-page {
-  background-color: var(--van-background-2);
-}
-
 .message-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background-color: var(--van-background);
   cursor: pointer;
 }
 
@@ -277,4 +267,15 @@ onMounted(() => {
   color: var(--van-text-color);
   white-space: pre-wrap;
 }
+
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
 </style>