feat: 整理notification message card文件，封装为公共组件

src/components/NotificationMessageCard/index.ts

@@ -0,0 +1 @@
+export { default } from './src/NotificationMessageCard.vue'

src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import EventCard from './components/EventCard.vue'
+import PasswordCard from './components/PasswordCard.vue'
+import FeatureUpdateCard from './components/FeatureUpdateCard.vue'
+
+const props = defineProps<{
+  data: any
+}>()
+</script>
+
+<template>
+  <div class="notification-message-card">
+    <template v-for="(item, index) in data" :key="index">
+      <EventCard v-if="item.notificationType === 'event'" :data="item.info" />
+      <PasswordCard v-else-if="item.notificationType === 'password'" :data="item.info" />
+      <FeatureUpdateCard v-else-if="item.notificationType === 'feature'" :data="item.info" />
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/SystemMessage/src/components/DelayNotificationCard.vue → src/components/NotificationMessageCard/src/components/EventCard.vue

@@ -3,31 +3,34 @@ import { transportationMode } from '@/components/TransportationMode'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const props = defineProps<{
-  data: {
-    type: string // 'milestone' | 'container' | 'delay' | 'change'
-    isMultiple?: boolean
-    numericRecords?: number // 多条记录数
-    isRead: boolean // 是否已读
-    title?: string
-    mode?: string // 运输方式
-    no: string // HBOL: SHJN2301234
-    tag: string // tag
-    location: string
-    delayInfo?: {
-      departureDelayNum?: number
-      arrivalDelayNum?: number
-      delayTime: string
-    }
-    changeInfo?: {
-      eTDChangeNum?: number
-      eTAChangeNum?: number
-      changeTime: string
-    }
-    changeTime?: string
-    time: string
-    previous?: string
+
+interface EventCardPropsData {
+  type: string // 'milestone' | 'container' | 'delay' | 'change'
+  isMultiple?: boolean
+  numericRecords?: number // 多条记录数
+  isRead: boolean // 是否已读
+  title?: string
+  mode?: string // 运输方式
+  no: string // HBOL: SHJN2301234
+  tag: string // tag
+  location: string
+  delayInfo?: {
+    departureDelayNum?: number
+    arrivalDelayNum?: number
+    delayTime: string
   }
+  changeInfo?: {
+    eTDChangeNum?: number
+    eTAChangeNum?: number
+    changeTime: string
+  }
+  changeTime?: string
+  time: string
+  previous?: string
+}
+
+const props = defineProps<{
+  data: EventCardPropsData
 }>()
 
 const handleSeeAll = () => {
@@ -98,13 +101,12 @@ const handleSeeAll = () => {
   // max-width: 640px;
   margin-bottom: 16px;
   &.is-read {
-    .header {
+    & > .header {
       .status-icon {
         background-color: var(--color-border);
       }
       .title {
-        color: var(--color-neutral-1);
-        opacity: 0.5;
+        color: #b5b9bf;
       }
     }
   }

src/components/NotificationMessageCard/src/components/FeatureUpdateCard.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+interface FeatureUpdateCardPropsData {
+  title: string
+  header: string
+  content: string
+  imgSrc: string
+}
+
+const props = defineProps<{
+  data: FeatureUpdateCardPropsData
+}>()
+</script>
+
+<template>
+  <div>
+    <div class="feature-update">
+      <div class="header">
+        <div class="status-icon"></div>
+        <div class="title">{{ data.title }}</div>
+      </div>
+      <div class="card-content">
+        <div class="title">
+          <!-- <span class="font_family icon-icon_password_b"></span> -->
+          <img style="margin-right: 5px" src="../images/icon_publish.png" alt="" />
+          <span>{{ data.header }}</span>
+        </div>
+        <div class="content-text">
+          <span>{{ data.content }}</span>
+        </div>
+        <img src="../images/test.png" style="margin: 12px 0 16px 24px; border-radius: 8px" alt="" />
+
+        <div class="change-btn" style="text-align: center">
+          <el-button class="el-button--main" style="height: 40px; padding: 0 32px">
+            View more</el-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.feature-update {
+  margin-bottom: 16px;
+
+  .header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    .status-icon {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--color-theme);
+      margin-right: 10px;
+    }
+    .title {
+      font-weight: 700;
+    }
+  }
+  .card-content {
+    padding: 16px 16px 24px 8px;
+    background: linear-gradient(137deg, #fff4eb 12.41%, #f0f3ff 52.63%, #e0f7f9 93.28%);
+    border-radius: 12px;
+    .title {
+      img {
+        vertical-align: middle;
+      }
+      span {
+        vertical-align: middle;
+        display: inline-block;
+        font-weight: 700;
+      }
+      .font_family {
+        margin-right: 8px;
+      }
+    }
+    .content-text {
+      margin: 8px 0 0px 24px;
+    }
+  }
+}
+</style>

src/components/NotificationMessageCard/src/components/PasswordCard.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+interface PasswordCardPropsData {
+  title: string
+  isExpiration: boolean
+  tips: string
+  content: string
+}
+const props = defineProps<{
+  data: PasswordCardPropsData
+}>()
+</script>
+
+<template>
+  <div class="password-notifications">
+    <div class="header" v-if="data.title">
+      <div class="status-icon"></div>
+      <div class="title">{{ data.title }}</div>
+    </div>
+    <div class="card-content" :class="{ 'is-expired': data.isExpiration }">
+      <div class="title">
+        <span class="font_family icon-icon_password_b"></span>
+        <span>{{ data.tips }}</span>
+      </div>
+      <div class="details">
+        {{ data.content }}
+      </div>
+      <div class="change-btn" style="text-align: center">
+        <el-button class="el-button--main" style="height: 40px">
+          <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
+          <span>Change Password</span></el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.password-notifications {
+  margin-bottom: 16px;
+  .header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    .status-icon {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--color-theme);
+      margin-right: 10px;
+    }
+    .title {
+      font-weight: 700;
+    }
+  }
+  .card-content {
+    padding: 16px 8px 24px;
+    background: linear-gradient(180deg, #ffe294 0%, #f6f8fa 100%);
+    border-radius: 12px;
+    &.is-expired {
+      background: linear-gradient(182deg, #ef99a0 2.2%, #f6f8fa 98.77%);
+    }
+    .title {
+      span {
+        vertical-align: middle;
+        font-weight: 700;
+      }
+      .font_family {
+        margin-right: 8px;
+      }
+    }
+    .details {
+      margin: 8px 0 16px 24px;
+    }
+  }
+}
+</style>

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -1,75 +1,64 @@
 <script setup lang="ts">
-import NotificationCard from '@/views/SystemMessage/src/components/NotificationCard.vue'
+import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
 
 const drawerModel = defineModel('drawerModel', { type: Boolean, default: false })
 
-function confirmClick() {
-  ElMessageBox.confirm(`Are you confirm to chose  ?`)
-    .then(() => {
-      drawerModel.value = false
-    })
-    .catch(() => {
-      // catch error
-    })
-}
-
 const notificationList = [
   {
-    numericRecords: 3,
-    isRead: true,
-    title: 'Milestone Update',
-    mode: 'Ocean Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Booking Confirmed',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8'
+    notificationType: 'feature',
+    info: {
+      title: 'Feature Update',
+      header: 'New feature online: Quick search has been released!',
+      content:
+        'We are pleased to announce that the quick search function is now officially online! You can now quickly find what you need by entering keywords, greatly improving your work efficiency. Go and experience it!'
+    }
   },
   {
-    numericRecords: 0,
-    isRead: false,
-    title: 'Milestone Update Daily Summary (Jan 10, 2025)',
-    mode: 'Air Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Booking Confirmed',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8'
+    notificationType: 'event',
+    info: {
+      type: 'milestone',
+      isMultiple: true,
+      numericRecords: 3,
+      isRead: true,
+      title: 'Milestone Update',
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    }
   },
   {
-    numericRecords: 0,
-    isRead: false,
-    title: '',
-    mode: 'Air Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Booking Confirmed',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8',
-    previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
-  }
-]
-
-const passwordExpirationList = [
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: true,
+      tips: 'Password Expiration in 311 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    }
+  },
   {
-    title: 'Password Notifications',
-    isExpiration: true,
-    tips: 'Password Expiration in 3 Days',
-    content:
-      'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: false,
+      tips: 'Password Expiration in 3 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    }
   },
   {
-    title: 'Password Notifications',
-    isExpiration: false,
-    tips: 'Password Expiration in 3 Days',
-    content:
-      'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: true,
+      tips: 'Password Expiration in 31111 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    }
   }
 ]
-const passwordExpiration = {
-  title: 'Password Notifications',
-  isExpiration: true,
-  tips: 'Password Expiration in 3 Days',
-  content:
-    'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
-}
 </script>
 
 <template>
@@ -96,67 +85,7 @@ const passwordExpiration = {
         </div>
       </div>
       <div class="notification-content">
-        <NotificationCard
-          class="notification-item"
-          v-for="(item, index) in notificationList"
-          :key="index"
-          :data="item"
-        ></NotificationCard>
-        <div
-          class="password-notifications"
-          v-for="(item, index) in passwordExpirationList"
-          :key="index"
-        >
-          <div class="header" v-if="item.title">
-            <div class="status-icon"></div>
-            <div class="title">{{ item.title }}</div>
-          </div>
-          <div class="card-content" :class="{ 'is-expired': item.isExpiration }">
-            <div class="title">
-              <span class="font_family icon-icon_password_b"></span>
-              <span>{{ item.tips }}</span>
-            </div>
-            <div class="details">
-              {{ item.content }}
-            </div>
-            <div class="change-btn" style="text-align: center">
-              <el-button class="el-button--main" style="height: 40px" @click="confirmClick">
-                <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
-                <span>Change Password</span></el-button
-              >
-            </div>
-          </div>
-        </div>
-        <div class="feature-update">
-          <div class="header">
-            <div class="status-icon"></div>
-            <div class="title">Feature Update</div>
-          </div>
-          <div class="card-content">
-            <div class="title">
-              <!-- <span class="font_family icon-icon_password_b"></span> -->
-              <img style="margin-right: 5px" src="../images/icon_publish.png" alt="" />
-              <span>New feature online: Quick search has been released!</span>
-            </div>
-            <div class="details">
-              <span
-                >We are pleased to announce that the quick search function is now officially online!
-                You can now quickly find what you need by entering keywords, greatly improving your
-                work efficiency. Go and experience it!</span
-              >
-              <img src="../images/test.png" style="margin-top: 12px; border-radius: 12px" alt="" />
-            </div>
-            <div class="change-btn" style="text-align: center">
-              <el-button
-                class="el-button--main"
-                style="height: 40px; padding: 0 32px"
-                @click="confirmClick"
-              >
-                View more</el-button
-              >
-            </div>
-          </div>
-        </div>
+        <NotificationMessageCard :data="notificationList" />
       </div>
     </template>
   </el-drawer>
@@ -165,8 +94,6 @@ const passwordExpiration = {
 div.layout-toolbar {
   .notification-content {
     padding: 16px;
-    .notification-item {
-    }
   }
   .password-notifications {
     margin-bottom: 16px;
@@ -264,9 +191,12 @@ div.layout-toolbar {
     .notification-header {
       display: flex;
       justify-content: space-between;
+      position: sticky;
+      top: 0;
       height: 40px;
       padding: 0 16px;
       line-height: 40px;
+      background-color: white;
       border-bottom: 1px solid var(--color-border);
       .mark-all-read {
         span {

src/views/Layout/src/components/Header/components/TrainingCard.vue

@@ -1,62 +1,80 @@
 <script setup lang="ts">
-import DelayNotificationCard from '@/views/SystemMessage/src/components/DelayNotificationCard.vue'
+import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
 
-const notificationList: any = [
+const notificationList = [
   {
-    type: 'milestone',
-    isMultiple: true,
-    numericRecords: 3,
-    isRead: true,
-    title: 'Milestone Update',
-    mode: 'Ocean Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Booking Confirmed',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8'
+    notificationType: 'feature',
+    info: {
+      title: 'Feature Update',
+      header: 'New feature online: Quick search has been released!',
+      content:
+        'We are pleased to announce that the quick search function is now officially online! You can now quickly find what you need by entering keywords, greatly improving your work efficiency. Go and experience it!'
+    }
+  },
+  {
+    notificationType: 'event',
+    info: {
+      type: 'milestone',
+      isMultiple: true,
+      numericRecords: 3,
+      isRead: true,
+      title: 'Milestone Update',
+      mode: 'Ocean Freight',
+      no: 'HBOL: SHJN2301234',
+      tag: 'Booking Confirmed',
+      location: 'Hong Kong',
+      time: 'Jan 10, 2025 14:30 UTC+8'
+    }
   },
   {
-    type: 'container',
-    isRead: false,
-    mode: '',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Unloaded From Vessel',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8',
-    previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: true,
+      tips: 'Password Expiration in 311 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    }
   },
   {
-    type: 'delay',
-    numericRecords: 0,
-    isRead: false,
-    title: 'Delay Daily Summary (Jan 10, 2025)',
-    mode: 'Air Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'Departure Delay',
-    location: 'Hong Kong',
-    time: 'Jan 10, 2025 14:30 UTC+8',
-    delayInfo: {
-      delayTime: 'ATD: Jan 12, 16:30 (+2 days delay)'
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: false,
+      tips: 'Password Expiration in 3 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
     }
   },
   {
-    type: 'change',
-    numericRecords: 0,
-    isRead: false,
-    title: 'ETD/ETA  Change Weekly Summary (Jan 4- 10, 2025) ',
-    mode: 'Air Freight',
-    no: 'HBOL: SHJN2301234',
-    tag: 'ETD Change',
-    location: 'Hong Kong',
-    changeTime: 'Updated ETD: Jan 17, 15:00',
-    time: 'Jan 10, 2025 14:30 UTC+8'
+    notificationType: 'password',
+    info: {
+      title: 'Password Notifications',
+      isExpiration: true,
+      tips: 'Password Expiration in 31111 Days',
+      content:
+        'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+    }
   }
 ]
-const curCard = ref(notificationList[2])
+const curCard = ref(notificationList[0])
+const curIndex = ref(0)
+const intervalId = setInterval(() => {
+  curIndex.value = ++curIndex.value
+  curCard.value = notificationList[curIndex.value]
+  if (curIndex.value === notificationList.length - 1) {
+    curCard.value = null
+    clearInterval(intervalId)
+  }
+}, 1000)
 </script>
 
 <template>
-  <div class="training-card">
-    <DelayNotificationCard :data="curCard"></DelayNotificationCard>
+  <div class="training-card" v-if="curCard">
+    <el-button style="height: 18px; width: 18px" class="el-button--text close-icon">
+      <span class="font_family icon-icon_reject_b"></span>
+    </el-button>
+    <NotificationMessageCard v-if="curCard" :data="[curCard]"></NotificationMessageCard>
   </div>
 </template>
 
@@ -72,5 +90,14 @@ const curCard = ref(notificationList[2])
   background-color: #fff;
   border-radius: 12px;
   box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.1);
+  .close-icon {
+    position: absolute;
+    top: 14px;
+    right: 16px;
+    padding-top: 2px;
+    padding-bottom: 0px;
+    font-size: 18px;
+    cursor: pointer;
+  }
 }
 </style>

src/views/SystemMessage/src/SystemMessage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import NotificationCard from './components/NotificationCard.vue'
-import DelayNotificationCard from './components/DelayNotificationCard.vue'
+import EventCard from '@/components/NotificationMessageCard/src/components/EventCard.vue'
 
 const collapseVModel = ref<string[]>(['1'])
 
@@ -122,17 +121,11 @@ const notificationList = [
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="All Notifications" name="first">
           <div style="padding: 10px 140px 40px 16px">
-            <!-- <NotificationCard
+            <EventCard
               v-for="(item, index) in notificationList"
               :key="index"
               :data="item"
-            ></NotificationCard> -->
-
-            <DelayNotificationCard
-              v-for="(item, index) in notificationList"
-              :key="index"
-              :data="item"
-            ></DelayNotificationCard>
+            ></EventCard>
           </div>
         </el-tab-pane>
         <el-tab-pane label="Unread" name="second">Config</el-tab-pane>

src/views/SystemMessage/src/components/NotificationCard.vue

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-import { transportationMode } from '@/components/TransportationMode'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const props = defineProps<{
-  data: {
-    numericRecords?: number
-    isRead: boolean
-    title?: string
-    mode: string
-    container?: string
-    no: string
-    tag: string
-    location: string
-    time: string
-    previous?: string
-  }
-}>()
-
-const handleSeeAll = () => {
-  console.log('see all')
-  router.push({
-    name: 'System Message Detail'
-  })
-}
-</script>
-
-<template>
-  <div class="notification-card" :class="{ 'is-read': data.isRead }">
-    <div class="header" v-if="data.title">
-      <div class="status-icon"></div>
-      <div class="title">{{ data.title }}</div>
-    </div>
-    <div class="content">
-      <div class="more-tips" v-if="data.numericRecords">
-        <span>Latest Status Updates ({{ data.numericRecords }})</span>
-        <el-button @click="handleSeeAll" class="see-all-icon el-button--text">
-          See All
-          <span class="font_family icon-icon_next_b"></span>
-        </el-button>
-      </div>
-      <div class="base-info">
-        <span
-          v-if="data.mode"
-          class="font_family"
-          :class="[`icon-${transportationMode?.[data.mode]}`]"
-        ></span>
-        <span v-else-if="data.container" class="font_family icon-icon_container__filled_b"></span>
-        <span class="no">{{ data.no }}</span>
-        <div class="tag">
-          <span class="dot"></span>
-          <span class="text">{{ data.tag }}</span>
-        </div>
-      </div>
-      <div class="location">
-        <span class="font_family icon-icon_location_b"></span>
-        <span>{{ data.location }}</span>
-      </div>
-      <div class="time">
-        <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
-        <span>{{ data.time }}</span>
-      </div>
-      <div class="previous" v-if="data.previous">
-        <span class="previous-icon"></span>
-        <span>{{ data.previous }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.notification-card {
-  // max-width: 640px;
-  margin-bottom: 16px;
-  &.is-read {
-    .header {
-      .status-icon {
-        background-color: var(--color-border);
-      }
-      .title {
-        color: var(--color-neutral-1);
-        opacity: 0.5;
-      }
-    }
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-    .status-icon {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: var(--color-theme);
-      margin-right: 10px;
-    }
-    .title {
-      font-weight: 700;
-    }
-  }
-  .content {
-    padding: 16px 8px;
-    padding-top: 0;
-    background-color: var(--color-header-bg);
-    border-radius: 6px;
-    .more-tips {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      border-bottom: 1px dashed var(--color-border);
-      font-size: 12px;
-      line-height: 24px;
-      .see-all-icon {
-        width: 68px;
-        height: 24px;
-        :deep(span) {
-          color: var(--color-theme);
-        }
-      }
-    }
-    .base-info {
-      display: flex;
-      padding-top: 16px;
-      .no {
-        margin-left: 8px;
-        font-weight: 700;
-        line-height: 18px;
-      }
-      .tag {
-        display: flex;
-        align-items: center;
-        margin-left: 4px;
-        padding-left: 8px;
-        padding-right: 6px;
-        line-height: 18px;
-        background-color: #e6f1eb;
-        border-radius: 3px;
-        .dot {
-          width: 5px;
-          height: 5px;
-          border-radius: 50%;
-          background-color: var(--color-tag-completed);
-          margin-right: 4px;
-        }
-        .text {
-          margin-top: 2px;
-          font-size: 10px;
-          font-weight: 600;
-          color: #5bb462;
-          line-height: 10px;
-          vertical-align: middle;
-        }
-      }
-    }
-    .location,
-    .time {
-      display: flex;
-      align-items: center;
-      margin-top: 8px;
-      font-size: 12px;
-      span {
-        color: var(--color-neutral-2);
-      }
-      .font_family {
-        font-family: 'iconfont';
-        color: var(--color-neutral-2);
-        margin-right: 8px;
-      }
-    }
-    .previous {
-      height: 24px;
-      margin-top: 8px;
-      padding-left: 8px;
-      line-height: 24px;
-      background-color: #e1e3e9;
-      border-radius: 6px;
-      span {
-        font-size: 12px;
-      }
-      .previous-icon {
-        display: inline-block;
-        width: 4px;
-        height: 4px;
-        background-color: var(--color-neutral-1);
-        border-radius: 50%;
-        margin-right: 8px;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-</style>

src/views/SystemMessage/src/components/SystemMessageDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NotificationCard from './NotificationCard.vue'
+import EventCard from '@/components/NotificationMessageCard/src/components/EventCard.vue'
 
 const notificationData = {
   title: 'Milestone Update Daily Summary (Jan 10, 2025)',
@@ -42,7 +42,7 @@ const notificationData = {
         <div class="title">{{ notificationData.title }}</div>
       </div>
       <div class="total-tips">Latest Status Updates ({{ notificationData.numericRecords }})</div>
-      <NotificationCard
+      <EventCard
         v-for="(item, index) in notificationData.notificationList"
         :key="index"
         :data="item"