修改完成

pages/notification/n01-message-center.vue

@@ -13,7 +13,7 @@
     <view class="notice-page__header">
       <PageHeader
         title="消息中心"
-        :action="noticeState === 'list' ? '全部已读' : ''"
+        :action="unreadCount > 0 && noticeState === 'list' ? '全部已读' : ''"
         @action="markAllRead"
       />
     </view>
@@ -33,13 +33,8 @@
             class="notice-card"
             role="button"
             :aria-label="`${item.unread ? '未读' : '已读'}消息：${item.title}`"
-            @click="readNotice(item)"
+            @click="openNotice(item)"
           >
-            <image
-              class="notice-card__skin"
-              src="/static/assets/modules/notification/transparent/n01-notice-card.png"
-              mode="scaleToFill"
-            />
             <view class="notice-card__copy">
               <text
                 class="notice-card__status"
@@ -61,11 +56,6 @@
       </template>
 
       <view v-else class="notice-state-card">
-        <image
-          class="notice-state-card__skin"
-          src="/static/assets/modules/notification/transparent/n01-notice-card.png"
-          mode="scaleToFill"
-        />
         <view class="notice-state-card__copy">
           <text class="notice-state-card__title">{{
             noticeState === "empty" ? "暂时没有新消息" : "消息中心暂不可用"
@@ -90,7 +80,7 @@
 </template>
 
 <script setup>
-import { onUnmounted, ref } from "vue";
+import { computed, onUnmounted, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppLoading from "@/components/AppLoading.vue";
@@ -112,6 +102,7 @@ const notices = ref([
     content: "汤志成申请加入汤氏家谱，请核实亲属关系。",
     time: "今天 10:28",
     unread: true,
+    detailId: "review-1",
   },
   {
     id: 2,
@@ -119,6 +110,7 @@ const notices = ref([
     content: "你申请加入汝南汤氏家谱的请求已通过。",
     time: "昨天 18:10",
     unread: false,
+    detailId: "approved",
   },
 ]);
 
@@ -135,8 +127,14 @@ onLoad((query) => {
           : "list";
 });
 
-const readNotice = (item) => {
+const unreadCount = computed(
+  () => notices.value.filter((item) => item.unread).length,
+);
+const openNotice = (item) => {
   item.unread = false;
+  uni.navigateTo({
+    url: `/pages/notification/n02-message-detail?id=${item.detailId}&genealogyId=${genealogyId.value}`,
+  });
 };
 const restoreList = () => {
   noticeState.value = "list";
@@ -168,17 +166,17 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .notice-page {
-  position: relative;
+  display: flex;
   min-height: 100vh;
-  overflow-x: hidden;
+  flex-direction: column;
   background: $paper;
 }
 .notice-page__header,
 .notice-content {
-  position: relative;
-  z-index: 2;
+  z-index: 1;
 }
 .notice-content {
+  flex: 1;
   padding: 24rpx 28rpx 100rpx;
 }
 .notice-list {
@@ -187,19 +185,11 @@ onUnmounted(() => {
   gap: 18rpx;
 }
 .notice-card {
-  position: relative;
   width: 100%;
   min-height: 220rpx;
-}
-.notice-card__skin {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  background: url("/static/assets/modules/notification/transparent/n01-notice-card.png") center / 100% 100% no-repeat;
 }
 .notice-card__copy {
-  position: relative;
-  z-index: 1;
   display: flex;
   min-height: 220rpx;
   box-sizing: border-box;
@@ -238,24 +228,12 @@ onUnmounted(() => {
   margin: 30rpx auto 0;
 }
 .notice-state-card {
-  position: relative;
   margin-top: 38rpx;
+  background: url("/static/assets/modules/notification/transparent/n01-notice-card.png") top center / 100% 220rpx no-repeat;
   text-align: center;
 }
-.notice-state-card__skin {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-  height: 220rpx;
-  min-height: 118px;
-}
 .notice-state-card__copy {
-  position: relative;
-  z-index: 1;
   display: flex;
-  height: 220rpx;
   min-height: 118px;
   box-sizing: border-box;
   flex-direction: column;