src/views/notification/Index.vue

@@ -1,10 +1,20 @@
 <template>
   <HeaderNav headerText="消息通知"></HeaderNav>
   <div class="notifi-index">
-    <div class="notifi-classifi">
-      <div class="pf600 fs18 fc121212" @click="messageChange('insite')">站内信</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('sys')">
+    <div class="notifi-classifi pf600 fs18 fc121212">
+      <div
+        class="classifi-item"
+        :class="current == 'insite' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('insite')">
+        站内信
+        <div class="active-line" v-if="current == 'insite'"></div>
+      </div>
+      <div
+        class="classifi-item pf600 fs14 fcA8A8A8"
+        :class="current == 'sys' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('sys')">
         系统通知
+        <div class="active-line" v-if="current == 'sys'"></div>
       </div>
     </div>
     <component :is="currentComponent" />
@@ -40,12 +50,37 @@
       flex-direction: row;
       justify-content: flex-start;
       align-items: flex-end;
-      margin-top: 63px;
+      margin-top: 48px;
       width: 345px;
       height: 24px;
 
-      .sys-notifi {
+      .classifi-item {
+        position: relative;
         margin-left: 43px;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
   }

src/views/notification/SysMessage.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="insite-message">
     <div class="message-item" v-for="(item, index) in 3" :key="index">
-      <div class="title pf600 fs14 fc333333">标题信息内容标题信息内容11111111111111</div>
+      <div class="title pf600 fs14 fc333333">
+        系统通知系统通知系统通知系统通知系统通知
+      </div>
       <div class="desc pf500 fs12 fc999999">
-        文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息
+        系统通知系统通知系统通知系统通知系统通知知系统通知系统通知系统通知知系统通知系统通知系统通知知系统通知系统通知系统通知
       </div>
       <div class="time pf300 fs12 fc999999">2025-11-06 12:25:10</div>
     </div>