diff --git a/src/api/message/message.ts b/src/api/message/message.ts
new file mode 100644
index 0000000..7d3ce18
--- /dev/null
+++ b/src/api/message/message.ts
@@ -0,0 +1,20 @@
+import { http } from '@/utils/http/axios'
+import type { PageParam, PictureSortParam, SetTFParam } from '/#/api'
+
+/**
+ * 获系统消息
+ * @returns
+ */
+export async function getMessageList(params: PageParam) {
+  const res = await http.request({
+    url: `/ocr/msg/systemPage`,
+    method: 'get',
+    params,
+  })
+
+  const { data: { records, pages } } = res
+  return {
+    pageCount: pages,
+    data: records,
+  }
+}
diff --git a/src/assets/images/message/approve-active.png b/src/assets/images/message/approve-active.png
new file mode 100644
index 0000000..76c1657
Binary files /dev/null and b/src/assets/images/message/approve-active.png differ
diff --git a/src/assets/images/message/approve.png b/src/assets/images/message/approve.png
new file mode 100644
index 0000000..3c4beb4
Binary files /dev/null and b/src/assets/images/message/approve.png differ
diff --git a/src/assets/images/message/arrow-active.png b/src/assets/images/message/arrow-active.png
new file mode 100644
index 0000000..cb83b99
Binary files /dev/null and b/src/assets/images/message/arrow-active.png differ
diff --git a/src/assets/images/message/arrow.png b/src/assets/images/message/arrow.png
new file mode 100644
index 0000000..9dcb1aa
Binary files /dev/null and b/src/assets/images/message/arrow.png differ
diff --git a/src/assets/images/message/clear.png b/src/assets/images/message/clear.png
new file mode 100644
index 0000000..12b75fa
Binary files /dev/null and b/src/assets/images/message/clear.png differ
diff --git a/src/assets/images/message/set.png b/src/assets/images/message/set.png
new file mode 100644
index 0000000..07e085c
Binary files /dev/null and b/src/assets/images/message/set.png differ
diff --git a/src/assets/images/message/system-active.png b/src/assets/images/message/system-active.png
new file mode 100644
index 0000000..ef3ab12
Binary files /dev/null and b/src/assets/images/message/system-active.png differ
diff --git a/src/assets/images/message/system.png b/src/assets/images/message/system.png
new file mode 100644
index 0000000..8163fbc
Binary files /dev/null and b/src/assets/images/message/system.png differ
diff --git a/src/views/message/content/Content.vue b/src/views/message/content/Content.vue
index d46ab37..ee01c72 100644
--- a/src/views/message/content/Content.vue
+++ b/src/views/message/content/Content.vue
@@ -1,42 +1,41 @@
 <script lang="ts" setup>
-import { computed, onUnmounted, reactive, ref, unref, watch } from 'vue'
-import { useDialog, useMessage } from 'naive-ui'
-import { clone, pickBy } from 'lodash-es'
-import ConfrimModal from '../modal/ConfrimModal.vue'
-import type { PictureSortParam, SetTFParam } from '/#/api'
+import { onUnmounted, reactive, ref, toRefs, watch } from 'vue'
+import type { PictureSortParam } from '/#/api'
 import { useWorkOrder } from '@/store/modules/workOrder'
-import { clearTF, getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList, setTF } from '@/api/work/work'
-import { fieldMap } from '@/config/workorder'
+import { getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
+import { getMessageList } from '@/api/message/message'
+import iconApproveActive from '@/assets/images/message/approve-active.png'
+import iconApprove from '@/assets/images/message/approve.png'
+import iconSystemActive from '@/assets/images/message/system-active.png'
+import iconSystem from '@/assets/images/message/system.png'
+import iconArrowActive from '@/assets/images/message/arrow-active.png'
+import iconArrow from '@/assets/images/message/arrow.png'
+import iconClear from '@/assets/images/message/clear.png'
+
+const emit = defineEmits(['goDetail'])
 
-const batch = ref(false)
-const selectItems = ref<any[]>([])
-const message = useMessage()
-const dialog = useDialog()
 const totalCount = ref(0)
 
-function setBatch(value: boolean) {
-  batch.value = value
-  if (value === false) {
-    selectItems.value.forEach(item => item.checked = false)
-    selectItems.value.length = 0
-  }
-}
-
-function onCheckChange(checked: any, item: any) {
-  const index = selectItems.value.indexOf(item)
-  item.checked = checked
-
-  if (index === -1 && checked)
-    selectItems.value.push(item)
-
-  else
-    selectItems.value.splice(index, 1)
-}
-
-const showActions = computed(() => {
-  return selectItems.value.length > 0 && batch
+const state = reactive({
+  tabList: [
+    {
+      name: '审批通知',
+      icon: iconApprove,
+      activeIcon: iconApproveActive,
+      value: 0,
+    },
+    {
+      name: '系统消息',
+      icon: iconSystem,
+      activeIcon: iconSystemActive,
+      value: 1,
+    },
+  ],
+  list: [] as any,
 })
 
+const { list, tabList } = toRefs(state)
+
 const packagepagination = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -51,136 +50,23 @@ const sortBy: PictureSortParam = {
 }
 const workStore = useWorkOrder()
 const selectTask = ref<any>(null)
-const overTask = ref<any>(null)
 const taskList = ref<any[]>([])
 const taskDetailInfo = ref<any>({})
 const taskDetailPictureList = ref<any[]>([])
 
-const confrimModalRef = ref(null)
-let processItems: any[] = []
 const tab = ref(0)
 
-function validate(items: any[]) {
-  if (items.length === 0)
-    return '至少选中一个任务'
-
-  for (const item of items) {
-    const { iztrueorfalse, history, states } = item
-    if (iztrueorfalse !== null)
-      return '存在已经辨识过的任务'
-
-    else if (history)
-      return '包含历史数据'
-
-    else if (states !== 1 && states !== 2)
-      return '审批状态不合法'
-  }
-
-  return null
-}
-
-function falseHandler() {
-  let cloneItem: any
-  if (batch.value) { processItems = selectItems.value }
-  else if (overTask.value) {
-    cloneItem = clone(overTask.value)
-    processItems = [cloneItem]
-  }
-  const msg = validate(processItems)
-
-  if (msg !== null) {
-    message.error(msg)
-    return
-  }
-
-  const modal = unref(confrimModalRef)! as any
-  modal.showModal()
-}
-
-function trueHandler() {
-  let cloneItem: any
-  if (batch.value) { processItems = selectItems.value }
-  else if (overTask.value) {
-    cloneItem = clone(overTask.value)
-    processItems = [cloneItem]
-  }
-
-  const msg = validate(processItems)
-
-  if (msg !== null) {
-    message.error(msg)
-    return
-  }
-
-  dialog.info({
-    title: '确认提示',
-    content: '确认给该任务图判真吗?',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      setTrue()
-    },
-    onNegativeClick: () => { },
+async function getList() {
+  const res = await getMessageList({
+    pageNo: '1',
+    pageSize: '10',
+    msgCategory: '1',
   })
+  const { data } = res
+  state.list = data
 }
 
-function setTrue() {
-  const ids: any[] = processItems.map(item => item.id)
-
-  const param: SetTFParam = {
-    taskchildpictureids: ids.join(','),
-    iztrueorfalse: 1,
-    packageid: workStore.getActiveId,
-    judgeid: '0',
-  }
-
-  doSetTF(param)
-}
-
-function setFalse(id: string, desc: null | string) {
-  const ids: any[] = processItems.map(item => item.id)
-
-  const param: SetTFParam = {
-    taskchildpictureids: ids.join(','),
-    iztrueorfalse: 0,
-    packageid: workStore.getActiveId,
-    judgeid: id,
-  }
-
-  if (desc)
-    param.judgedesc = desc
-
-  doSetTF(param)
-}
-
-function doSetTF(param: SetTFParam) {
-  setTF(param).then((res) => {
-    const { code } = res
-    processItems.length = 0
-    if (code === 'OK')
-      updateList(param)
-    else
-      message.error(res.message)
-  })
-}
-
-function updateList(param: SetTFParam) {
-  const list = taskDetailPictureList.value
-  const ids = param.taskchildpictureids.split(',')
-
-  for (const item of list) {
-    if (ids.includes(item.id))
-      item.iztrueorfalse = param.iztrueorfalse
-  }
-}
-
-function forwardHandler() {
-  workStore.forward()
-}
-
-function backHandler() {
-  workStore.back()
-}
+getList()
 
 watch(() => workStore.activeId, async (newValue, oldValue) => {
   const res = await getPackageTaskList(newValue, packagepagination)
@@ -191,11 +77,6 @@ watch(() => workStore.activeId, async (newValue, oldValue) => {
     handleSelect(taskList.value[0])
 })
 
-const packageName = computed(() => {
-  const index = workStore.getCurrentIndex
-  return workStore.getOrderList[index]?.packagename || ''
-})
-
 async function handleSelect(item: any) {
   selectTask.value = item
   const taskId = item.id
@@ -206,64 +87,18 @@ async function handleSelect(item: any) {
   totalCount.value = total
 }
 
-async function sortHandler(orderby: 'pictureResult' | 'fromuptime') {
-  if (!selectTask.value)
-    return
-
-  taskpagination.pageNo = 1
-  taskpagination.pageSize = 10
-  sortBy.orderbyvalue = orderby
-
-  const res = await getTaskDetailPictureList(workStore.activeId, selectTask.value.id, { ...taskpagination, ...sortBy })
-  taskDetailPictureList.value = res.data
-}
-
-const propertys = computed(() => {
-  const { ocrPicture } = taskDetailInfo.value
-  const v = pickBy(ocrPicture, (value, key: string) => {
-    return key.startsWith('field') && value !== null
-  })
-  return v
-})
-
-async function clearMark() {
-  const res = await clearTF(workStore.activeId, selectTask.value.id)
-  if (res.code === 'OK') {
-    taskDetailInfo.value.iztrueorfalse = null
-    message.info('清除标记成功')
-  }
-  else { message.error(res.message) }
-}
-
-function overTaskHandelr(item: any) {
-  if (validate([item]) == null && batch.value === false)
-    overTask.value = item
-}
-
-function leaveTaskHandler() {
-  overTask.value = null
-}
-
 onUnmounted(() => {
   workStore.reset()
 })
 
-function getPercent(pictureid: string) {
-  const { ocpictureid, pictureresult } = taskDetailInfo.value
-  const index = ocpictureid.split(',').indexOf(String(pictureid))
-  const results = pictureresult.split(',')
-  const percent = results[index] || '0'
-  const val = Number.parseFloat(percent)
-  return `${val}%`
-}
-
-const mark = computed(() => {
-  return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
-})
-
 function switchTab(type: number) {
   tab.value = type
 }
+
+function goDetail(id) {
+  // console.log(id)
+  emit('goDetail', id)
+}
 </script>
 
 <template>
@@ -273,50 +108,55 @@ function switchTab(type: number) {
         消息通知
       </div>
       <div class="clear">
+        <img class="icon-clear" :src="iconClear" alt="">
         清除未读
       </div>
     </div>
     <div class="content">
       <div class="slider">
-        <div :class="{ 'item-active': tab === 0 }" class="item flex" @click="switchTab(0)">
+        <div
+          v-for="(item) in tabList"
+          :key="item.value"
+          :class="{ 'item-active': tab === item.value }"
+          class="item flex"
+          @click="switchTab(item.value)"
+        >
           <div class="item-left flex align-center">
-            <img class="icon" src="@/assets/images/login/logo.png" alt="">
-            <div class="text">
-              审批通知
+            <img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt="">
+            <div :class="{ 'text-active': tab === item.value }" class="text">
+              {{ item.name }}
             </div>
           </div>
-          <img class="icon-arrow" src="@/assets/images/login/arrow-active.png" alt="">
-          <div v-if="tab === 0" class="line" />
-        </div>
-        <div :class="{ 'item-active': tab === 1 }" class="item flex" @click="switchTab(1)">
-          <div class="item-left flex align-center">
-            <img class="icon" src="@/assets/images/login/logo.png" alt="">
-            <div class="text">
-              系统消息
-            </div>
-          </div>
-          <img class="icon-arrow" src="@/assets/images/login/arrow-active.png" alt="">
-          <div v-if="tab === 1" class="line" />
+          <img class="icon-arrow" :src="tab === item.value ? iconArrowActive : iconArrow" alt="">
+          <div v-if="tab === item.value" class="line" />
         </div>
       </div>
       <div class="list">
-        <div class="item">
+        <div v-for="(item, index) in list" :key="item.id" :class="index === 0 ? 'pt0' : ''" class="item" @click="goDetail(item)">
           <div class="left left">
             <div class="num">
-              23
+              {{ item.pictureno }}
               <div class="point" />
             </div>
             <div class="date">
-              2024.01
+              {{ item.createTime }}
             </div>
           </div>
           <div class="middle">
             <div class="title">
-              系统升级通知占位符占位占位系统升级通知占位符占位占位系统升级通知占位符占位占位
+              {{ item.packagename }}
+            </div>
+            <div class="status">
+              <div class="tag tag-blue">
+                审批节点：初级审批
+              </div>
+              <div class="tag tag-red">
+                审批节点：初级审批
+              </div>
             </div>
             <div class="subtitle">
-              <span class="name">系统管理员</span>
-              <span class="time">2024-01-31  23:12:00</span>
+              <span class="name">{{ item.packagename }}</span>
+              <span class="time">{{ item.createTime }}</span>
             </div>
           </div>
           <div class="look">
@@ -336,9 +176,7 @@ function switchTab(type: number) {
   box-sizing: border-box;
   background: #FFF;
   border-radius: 3px;
-  border: 1px solid rgb(239, 239, 245);
   height: calc(100vh - 88px);
-  overflow-y: scroll;
 
   .header{
     padding: 24px;
@@ -346,7 +184,7 @@ function switchTab(type: number) {
     &-title{
       font-size: 20px;
       font-family: PingFang SC, PingFang SC-Medium;
-      font-weight: Medium;
+      font-weight: 600;
       color: #333333;
       line-height: 28px;
     }
@@ -354,9 +192,17 @@ function switchTab(type: number) {
     .clear{
       font-size: 14px;
       font-family: PingFang SC, PingFang SC-Regular;
-      font-weight: Regular;
       color: #666666;
       line-height: 20px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      .icon-clear{
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
     }
   }
 
@@ -364,7 +210,6 @@ function switchTab(type: number) {
     display: flex;
     padding-right: 24px;
     .slider{
-
       .icon{
         width: 17px;
         height: 17px;
@@ -383,6 +228,7 @@ function switchTab(type: number) {
         box-sizing: border-box;
         align-items: center;
         justify-content: space-between;
+        cursor: pointer;
 
         &-active{
           background: rgba(80,122,253,.1);
@@ -399,11 +245,16 @@ function switchTab(type: number) {
         font-weight: 600;
         color: #333333;
         margin-left: 12px;
-        &-text{
+        &-active{
           color: #507AFD;
         }
       }
 
+      .icon-arrow{
+        width: 14px;
+        height: 14px;
+      }
+
       .line{
         position: absolute;
         width: 3px;
@@ -423,15 +274,18 @@ function switchTab(type: number) {
         align-items: center;
         justify-content: space-between;
         flex: 1;
-        height: 96px;
+        padding: 16px 0 16px 25px;
         border-bottom: 1px solid #eeeeee;
-        padding-right: 25px;
+      }
+
+      .pt0{
+        padding-top: 0;
       }
 
       .num{
         font-size: 32px;
         font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Medium;
-        font-weight: Medium;
+        font-weight: 600;
         text-align: left;
         color: #507afd;
         line-height: 46px;
@@ -441,7 +295,6 @@ function switchTab(type: number) {
       .date{
         font-size: 12px;
         font-family: PingFang SC, PingFang SC-Regular;
-        font-weight: Regular;
         text-align: left;
         color: #999999;
         line-height: 17px;
@@ -472,10 +325,39 @@ function switchTab(type: number) {
         padding-left: 20px;
       }
 
+      .status{
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+      }
+
+      .tag{
+        padding: 0 8px;
+        height: 24px;
+        border-radius: 2px;
+        margin-right: 8px;
+        font-size: 14px;
+        line-height: 14px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+      }
+
+      .tag-blue{
+        background: rgba(80,122,253,0.10);
+        color: #507afd;
+      }
+
+      .tag-red{
+        color: #ff4e4f;
+        background: rgba(255,78,79,0.10);
+      }
+
       .title{
         font-size: 16px;
         font-family: PingFang SC, PingFang SC-Medium;
-        font-weight: Medium;
+        font-weight: 600;
         text-align: left;
         color: #666666;
         line-height: 25px;
@@ -484,7 +366,6 @@ function switchTab(type: number) {
       .subtitle{
         font-size: 12px;
         font-family: PingFang SC, PingFang SC-Regular;
-        font-weight: Regular;
         text-align: left;
         color: #999999;
         line-height: 19px;
@@ -498,10 +379,10 @@ function switchTab(type: number) {
       .look{
         font-size: 14px;
         font-family: PingFang SC, PingFang SC-Regular;
-        font-weight: Regular;
         text-align: left;
         color: #5376ff;
         line-height: 20px;
+        cursor: pointer;
       }
     }
 
diff --git a/src/views/message/content/Detail.vue b/src/views/message/content/Detail.vue
index ac1ac77..2caa72d 100644
--- a/src/views/message/content/Detail.vue
+++ b/src/views/message/content/Detail.vue
@@ -269,7 +269,9 @@ function switchTab(type: number) {
 <template>
   <div class="wrapper-message">
     <div class="left-card">
-      dd
+      <div class="title">
+        关于系统升级的通知
+      </div>
     </div>
     <div class="right-card">
       <img class="icon-set" src="@/assets/images/login/logo.png" alt="">
@@ -277,12 +279,33 @@ function switchTab(type: number) {
         系统消息
       </div>
       <div class="form">
-        <div class="form-item">
+        <div class="form-item flex">
+          <img class="icon" src="@/assets/images/login/logo.png" alt="">
+          <div class="label">
+            创建人：
+          </div>
+          <div class="value">
+            系统管理员
+          </div>
+        </div>
+        <div class="form-item flex">
+          <img class="icon" src="@/assets/images/login/logo.png" alt="">
+          <div class="label">
+            发布时间：
+          </div>
+          <div class="value time">
+            2023-10-31  23:12:00
+          </div>
+        </div>
+        <div class="form-item flex margin-no">
+          <img class="icon" src="@/assets/images/login/logo.png" alt="">
           <div class="label">
-            任务名称
+            消息类型：
           </div>
           <div class="value">
-            dd
+            <div class="tag">
+              系统消息
+            </div>
           </div>
         </div>
       </div>
@@ -296,7 +319,6 @@ function switchTab(type: number) {
   flex: 1;
   box-sizing: border-box;
   border-radius: 3px;
-  border: 1px solid rgb(239, 239, 245);
   height: calc(100vh - 88px);
   overflow-y: auto;
 
@@ -305,6 +327,17 @@ function switchTab(type: number) {
     background: #ffffff;
     border-radius: 4px;
     flex: 1;
+    padding-top: 32px;
+    box-sizing: border-box;
+
+    .title{
+      font-size: 28px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: Medium;
+      text-align: center;
+      color: #333333;
+      line-height: 40px;
+    }
   }
 
   .right-card{
@@ -317,8 +350,6 @@ function switchTab(type: number) {
     padding-top: 48px;
 
     .title{
-      width: 80px;
-      height: 22px;
       font-size: 20px;
       font-family: PingFang SC, PingFang SC-Medium;
       font-weight: Medium;
@@ -327,11 +358,49 @@ function switchTab(type: number) {
       line-height: 22px;
     }
 
-    .line{
-      width: 232px;
-      height: 1px;
-      border: 1px solid #eeeeee;
+    .form{
       margin: 0 auto;
+      margin-top: 32px;
+      width: 235px;
+      padding: 24px 0;
+      border-top: 1px solid #eeeeee;
+      border-bottom: 1px solid #eeeeee;
+    }
+
+    .form-item{
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .margin-no{
+      margin: 0;
+    }
+
+    .icon{
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+
+    .label{
+      width: 70px;
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-weight: Regular;
+      text-align: left;
+      color: #666666;
+    }
+
+    .value{
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-weight: Regular;
+      text-align: left;
+      color: #333333;
+    }
+
+    .time{
+      color: #1d2129;
     }
   }
 
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index ed865b0..a97352b 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -10,8 +10,8 @@ import Detail from './content/Detail.vue'
     <!-- <Aside /> -->
 
     <!-- 内容 -->
-    <!-- <Content /> -->
-    <Detail />
+    <Content />
+    <!-- <Detail /> -->
   </div>
 </template>