市局：消息状态，未读点击提示已读，已读点击不提示，加粗未读消息字体

front/src/views/mynoticeView/components/NoticeList.vue

@@ -15,12 +15,7 @@
     </a-breadcrumb>
     <div class="top">
       <div class="left">
-        <div
+        <div class="item" :class="{ select: selectNav == nav.key }" v-for="nav in navList" :key="nav.key">
-          class="item"
-          :class="{ select: selectNav == nav.key }"
-          v-for="nav in navList"
-          :key="nav.key"
-        >
           <i :class="nav.key" @click="changeNav(nav)"></i>
           <div>{{ nav.title + '(' + nav.num + ')' }}</div>
         </div>
@@ -42,13 +37,7 @@
     </div>
     <div class="btn">
       <div class="left">
-        <a-select
+        <a-select ref="select" v-model:value="value" style="width: 120px" @focus="focus" @change="handleChange">
-          ref="select"
-          v-model:value="value"
-          style="width: 120px"
-          @focus="focus"
-          @change="handleChange"
-        >
           <a-select-option value="全部消息">全部消息</a-select-option>
           <a-select-option value="已读消息">已读消息</a-select-option>
           <a-select-option value="未读消息">未读消息</a-select-option>
@@ -62,33 +51,26 @@
         </div>
       </div>
       <div class="right">
-        <a-checkbox
+        <a-checkbox :checked="
-          :checked="
           selectData.length !== 0 && selectData.length === data.length
-          "
+        " stlye="margin-right:0.3rem;" @change="changeCheckAll()"></a-checkbox>
-          stlye="margin-right:0.3rem;"
-          @change="changeCheckAll()"
-        ></a-checkbox>
         <div>全选当前页</div>
         <span @click="read()">标记为已读</span>
       </div>
     </div>
     <div class="main">
       <a-list item-layout="horizontal" :data-source="data">
-        <template #renderItem="{ item }">
+        <template #renderItem="{ item }" @click="goNoticePage(item)">
           <a-list-item>
             <a-list-item-meta description="">
               <template #title>
-                <div class="left" @click="read(item)">
+                <div class="left" @click="read(item)" :class="item.readStatus === 0 ? 'bold-text' : ''">
                   {{ item.content }}
                 </div>
                 <div class="right">{{ '发布时间：' + item.senderDate }}</div>
               </template>
               <template #avatar>
-                <a-checkbox
+                <a-checkbox :checked="item.checked" @change="changeCheckBox(item)"></a-checkbox>
-                  :checked="item.checked"
-                  @change="changeCheckBox(item)"
-                ></a-checkbox>
                 <a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
                   <a-avatar :src="item.src" />
                 </a-badge>
@@ -100,14 +82,8 @@
         </template>
       </a-list>
     </div>
-    <a-pagination
+    <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" show-less-items
-      v-model:current="pageNum"
+      :show-size-changer="false" @change="changePageNum" />
-      v-model:pageSize="pageSize"
-      :total="total"
-      show-less-items
-      :show-size-changer="false"
-      @change="changePageNum"
-    />
   </div>
 </template>
 <script setup>
@@ -217,22 +193,15 @@
     return
   }
   console.log(selectData.value)
-    // let str = ''
-    // selectData.value.forEach((val, index) => {
-    //   str += val
-    //   if (index < selectData.value.length - 1) {
-    //     str += ';'
-    //   }
-    // })
   if (item) {
+    // 已读状态
+    if (item.readStatus === 1) {
+      return
+    }
+
     mynoticeRead(item.id).then((res) => {
       if (res.data.code == 0) {
         message.success('通知已读！')
-        //    if(item.readStatus == 1){
-        //   message.success('通知已读！')
-        // }  if(item.readStatus == 0){
-        //   message.success('通知已设为已读！')
-        // }
         mybus.emit('getMynotice')
         init()
       } else {
@@ -300,17 +269,23 @@
 .notice-list {
   padding: 0.64rem 0 0;
   background: #f4f5f8;
+
   .ant-breadcrumb {
     padding: 0.1rem 3.1rem;
   }
+
   .top {
     background: #fff;
     padding: 0.18rem 3.1rem 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+
+
     .left {
       display: flex;
+
       .item {
         display: flex;
         flex-direction: column;
@@ -319,6 +294,7 @@
         margin-left: 1.28rem;
         margin-bottom: 0.16rem;
         border-bottom: 3px solid #fff;
+
         i {
           display: inline-block;
           width: 0.48rem;
@@ -326,78 +302,98 @@
           margin-bottom: 0.15rem;
           cursor: pointer;
         }
+
         .all {
           background: url('~@/assets/mynoticeView/all.png') no-repeat;
           background-size: 100%;
         }
+
         .notice {
           background: url('~@/assets/mynoticeView/notice.png') no-repeat;
           background-size: 100%;
         }
+
         .comment {
           background: url('~@/assets/mynoticeView/comment.png') no-repeat;
           background-size: 100%;
         }
+
         .other {
           background: url('~@/assets/mynoticeView/other.png') no-repeat;
           background-size: 100%;
         }
       }
+
       .item:nth-of-type(1) {
         margin-left: 0;
       }
+
       .select {
         border-bottom: 3px solid #0058e1;
         color: #0058e1;
       }
     }
+
     .right {
       display: flex;
       align-items: center;
       height: 0.32rem;
+
       div {
         width: 0.5rem;
       }
+
       .reset {
         color: #0058e1;
         cursor: pointer;
       }
     }
   }
+
   .btn {
     background: #fff;
     margin-top: 0.16rem;
     padding: 0.14rem 3.1rem 0;
     display: flex;
     justify-content: space-between;
+
     .left {
       display: flex;
       align-items: center;
+
       .ant-select {
         margin-right: 0.24rem;
       }
+
+
       .check {
         display: flex;
         align-items: center;
+
         div {
           margin-left: 0.24rem;
+
           span {
             font-size: 18px;
             color: #0058e1;
           }
         }
+
         div:nth-of-type(1) {
           margin-left: 0.12rem;
         }
       }
     }
+
     .right {
       display: flex;
       justify-content: space-around;
       align-items: center;
+
       div {
         margin: 0 0.1rem;
       }
+
       span {
         cursor: pointer;
         color: #0058e1;
@@ -411,23 +407,32 @@
       }
     }
   }
+
   .main {
     background: #fff;
     padding: 0 3.1rem;
     height: 4.75rem;
     overflow-y: scroll;
+
     :deep(.ant-list-item-meta) {
       display: flex;
       align-items: center;
+
       .ant-checkbox-wrapper {
         margin-right: 0.3rem;
       }
+
       .ant-list-item-meta-title {
         display: flex;
         justify-content: space-between;
         align-items: center;
-          .left {
+
+        .bold-text {
+          font-weight: bold;
           cursor: pointer;
+        }
+
+        .left {
           width: 9.2rem;
           max-height: 0.43rem;
           overflow: hidden;
@@ -437,12 +442,19 @@
           -webkit-box-orient: vertical;
           word-break: break-all;
         }
+
+        .ant-badge-dot {
+          width: 8px;
+          height: 8px;
+        }
+
         .left:hover {
           color: #0058e1;
         }
       }
     }
   }
+
   .ant-pagination {
     background: #fff;
     margin-top: 0;