diff --git a/src/assets/icons/task-batch.svg b/src/assets/icons/task-batch.svg
new file mode 100644
index 0000000..e967650
--- /dev/null
+++ b/src/assets/icons/task-batch.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>B-复选框</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrevailCloud-Design-图标集" transform="translate(-2250.000000, -6121.000000)" fill="#72D996" fill-rule="nonzero">
+            <g id="B-复选框" transform="translate(2250.000000, 6121.000000)">
+                <path d="M56.183097,0 L7.81690298,0 C3.52260802,0 0,3.51585529 0,7.81062975 L0,56.1822242 C0,60.4769987 3.51546277,64 7.81690298,64 L56.183097,64 C60.4845372,64 64,60.4841447 64,56.1822242 L64,7.81777579 C63.9928548,3.52300134 60.477392,0 56.183097,0 Z M52.6533438,19.8660116 L28.9596963,50.0652077 C28.0665401,51.2085753 26.7017975,51.8803037 25.2584571,51.9017418 L25.1870046,51.9017418 C23.7650999,51.9017418 22.4146478,51.2728897 21.5000558,50.1723984 L11.4323992,38.0884323 C9.73182985,36.0518088 10.0104946,33.0290308 12.0468907,31.3282715 C14.0832868,29.6275123 17.1057274,29.9062081 18.8062968,31.9428316 L25.0726806,39.4676195 L45.100815,13.9419384 C46.7370771,11.8481465 49.7595177,11.4979902 51.8387853,13.127289 C53.9251982,14.7637338 54.2896059,17.7865118 52.6533438,19.8660116 L52.6533438,19.8660116 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Approval/NotPassed.vue b/src/components/Approval/NotPassed.vue
new file mode 100644
index 0000000..baef5f7
--- /dev/null
+++ b/src/components/Approval/NotPassed.vue
@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, reactive, ref, toRefs, unref } from 'vue'
+import { useDialog, useMessage } from 'naive-ui'
+import { useDictionary } from '@/store/modules/dictonary'
+import { audit } from '@/api/task/task'
+
+const emit = defineEmits<{
+  (e: 'commit', rejectId: any, backId: any, isOther: boolean)
+}>()
+const message = useMessage()
+
+const dictonaryStore = useDictionary()
+const state: any = reactive({
+  detail: {},
+})
+const { detail } = toRefs(state)
+const show = ref(false)
+const cardStyle = {
+  'width': '520px',
+  '--n-padding-bottom': '10px',
+  '--n-padding-left': '0px',
+}
+
+function showModal(value) {
+  console.log(value)
+  state.detail = value
+  show.value = true
+}
+
+function closeModal() {
+  show.value = false
+}
+
+defineExpose({
+  showModal,
+})
+
+const backOptions = ref<any[]>([])
+const reasonOptions = ref<any[]>([])
+const selectBackId = ref(null)
+const selectRejectId = ref(null)
+const selectItem = ref(null)
+const otherValue = ref(null)
+const showOther = computed(() => {
+  return (selectItem.value as any)?.label === '其他'
+})
+
+const comomitValue = computed(() => {
+  return (selectItem.value as any)?.label === '其他' ? otherValue.value : selectRejectId.value
+})
+
+async function handleSumbit(e: MouseEvent) {
+  e.preventDefault()
+
+  // selectRejectId.value === 'other'
+  // emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
+  console.log(state.detail)
+  console.log(comomitValue)
+  const param = {
+    formid: [state.detail.id],
+    taskId: ['66b06dda-e673-11ee-a934-0242bc74e4f3'],
+    approvd: false,
+    taskComment: comomitValue.value,
+    taskname: showOther.value ? state.detail.detail.tasks : ['其他'],
+  }
+  audit(param).then((res) => {
+    const { code } = res
+    if (code === 'OK')
+      closeModal()
+    else message.error(res.message)
+  })
+}
+
+onBeforeMount(async () => {
+  const rejectList = await dictonaryStore.fetchTFList()
+  const backList = await dictonaryStore.fetchBackList()
+
+  reasonOptions.value = rejectList
+  backOptions.value = backList
+
+  // TODO 删除此项 通过name=其他 判断
+  // 添加其他选项
+  // reasonOptions.value.push({
+  //   label: '其他',
+  //   value: 'other',
+  // })
+})
+
+async function selectChange(id) {
+  console.log(id, 'selectChange')
+  selectItem.value = reasonOptions.value.find(v => v.id == id)
+}
+</script>
+
+<template>
+  <n-modal v-model:show="show" transform-origin="center">
+    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <div class="wrapper">
+        <div class="wrapper-header">
+          <span class="wrapper-left">选择不通过原因</span>
+          <div class="wrapper-right">
+            <div class="wrapper-right-close" @pointerdown="closeModal">
+              <div class="wrapper-right-icon" />
+            </div>
+          </div>
+        </div>
+        <div class="wrapper-content">
+          <span>处理方式</span>
+          <n-select v-model:value="selectBackId" filterable style="margin-top: 10px;" :options="backOptions" />
+        </div>
+        <div class="wrapper-content">
+          <span>不通过原因</span>
+          <n-select v-model:value="selectRejectId" filterable style="margin-top: 10px;" :options="reasonOptions" @change="selectChange" />
+          <n-input v-show="showOther" v-model:value="otherValue" type="textarea" placeholder="备注内容" style="margin-top: 10px;" />
+        </div>
+
+        <!-- <div class="wrapper-content">
+          <n-input
+          type="textarea"
+          placeholder="备注内容" v-model="showOther"></n-input>
+        </div> -->
+      </div>
+      <template #footer>
+        <div class="wrapper-footer">
+          <n-button type="info" @click="handleSumbit">
+            确认
+          </n-button>
+          <n-button secondary style="margin-left:15px" @click="closeModal">
+            取消
+          </n-button>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.wrapper {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+
+  &-left {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  &-right {
+    &-close {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    &-icon {
+      background: #000;
+      display: inline-block;
+      width: 18px;
+      height: 1px;
+      transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      margin-bottom: 8px;
+
+      &:after {
+        content: '';
+        display: block;
+        width: 18px;
+        height: 1px;
+        background: #000;
+        transform: rotate(-90deg);
+        -webkit-transform: rotate(-90deg);
+      }
+    }
+  }
+
+  &-content {
+    padding: 18px 10px;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-info {
+    font-weight: bold;
+    position: relative;
+
+    &:before {
+      background-color: #1980ff;
+      content: '';
+      width: 5px;
+      border-radius: 2px;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+    }
+  }
+}
+
+::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
+  border: 0px;
+}
+
+::v-deep(.n-card > .n-card-header) {
+  --n-padding-top: 0px;
+  --n-padding-bottom: 12px;
+}
+
+::v-deep(.n-divider:not(.n-divider--vertical)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+</style>
diff --git a/src/enums/index.ts b/src/enums/index.ts
index 403b59e..4df77b2 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -1,7 +1,6 @@
 // 任务审核状态
 export const TASK_STATUS_OBJ = {
-  1: '未提交',
-  2: '待审批',
-  3: '通过',
-  4: '不通过',
+  1: '待审批',
+  2: '通过',
+  3: '不通过',
 } as any
diff --git a/src/views/task/aside/ListItem.vue b/src/views/task/aside/ListItem.vue
index 9c6184f..7dfba1e 100644
--- a/src/views/task/aside/ListItem.vue
+++ b/src/views/task/aside/ListItem.vue
@@ -18,8 +18,7 @@ const props = defineProps({
     default: () => [],
   },
 })
-console.log(props.showFieldList)
-console.log(props.listItem)
+
 const svgName = computed(() => {
   return props.selected ? 'task-select' : 'task'
 })
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 73bd0f5..fabd7cb 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -3,12 +3,12 @@ import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from 'v
 import { chunk, clone } from 'lodash-es'
 import { useDialog, useMessage } from 'naive-ui'
 import { useRoute } from 'vue-router'
+import NotPassed from '@/components/Approval/NotPassed.vue'
 import BatchModal from '../modal/BatchModal.vue'
 import { getAllfieldList, getfieldList } from '@/api/home/filter'
 import { TASK_STATUS_OBJ } from '@/enums/index'
 
 import { audit, dubiousfileyd, getSimilarityList, getTaskDetailInfo } from '@/api/task/task'
-import { getTaskDetailPictureList } from '@/api/work/work'
 import { useTask } from '@/store/modules/task'
 import { useUser } from '@/store/modules/user'
 import { isEmpty } from '@/utils'
@@ -20,13 +20,13 @@ import CustomSettingModal from '../modal/CustomSettingModal.vue'
 import PictureTable from './PictureTable.vue'
 import TaskTable from './TaskTable.vue'
 import History from './History.vue'
-import type { ApprovalParam, PictureSortParam } from '/#/api'
+import type { ApprovalParam } from '/#/api'
 
 const batch = ref(false)
 const selectItems = ref<any[]>([])
 const message = useMessage()
 const dialog = useDialog()
-const confrimModalRef = ref(null)
+const notPassModalRef = ref(null)
 const batchModalRef = ref(null)
 const totalCount = ref(0)
 const CustomSettingModalRef = ref(null)
@@ -58,8 +58,6 @@ function onCheckChange(checked: any, item: any) {
   if (index === -1 && checked)
     selectItems.value.push(item)
   else selectItems.value.splice(index, 1)
-
-  console.log(selectItems.value.map(item => item.id))
 }
 
 const showActions = computed(() => {
@@ -98,19 +96,7 @@ function handleKeydown(event) {
 async function getDetail(taskId, packageid) {
   taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
   getTableData()
-  if (!isEmpty(packageid)) {
-    const { data, total } = await getTaskDetailPictureList(
-      packageid,
-      taskId,
-      { ...taskpagination, ...sortBy },
-    )
-    taskDetailPictureList.value = data
-    totalCount.value = total
-  }
-  else {
-    taskDetailPictureList.value.length = 0
-    totalCount.value = 0
-  }
+  getImgList()
 }
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
@@ -187,7 +173,7 @@ function rejectHandler(items?: any) {
     return
   }
 
-  const modal = unref(confrimModalRef)! as any
+  const modal = unref(notPassModalRef)! as any
   modal.showModal()
 }
 
@@ -283,54 +269,35 @@ async function getTableData() {
   taskTableData.value = chunk(listData, 2)
 }
 
+async function getImgList() {
+  if (!isEmpty(taskDetailInfo.value.ocrPicture.id)) {
+    const { data, total } = await getSimilarityList(
+      {
+        ...taskpagination,
+        ...sortBy,
+        pictureId: taskDetailInfo.value.ocrPicture.id,
+      },
+    )
+    taskDetailPictureList.value = data
+    totalCount.value = total
+  }
+  else {
+    taskDetailPictureList.value.length = 0
+    totalCount.value = 0
+  }
+}
+
 watch(
   () => [taskStore.activeId],
-  async (newValue, oldValue) => {
+  async () => {
     const packageid = taskStore.getPackageid
     const taskId = taskStore.getActiveId
-    console.log(packageid)
-    console.log(taskId)
     setBatch(false)
-
     if (isEmpty(taskId))
       return
     taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
-    console.log(taskDetailInfo.value)
     getTableData()
-    // TODO mock备份 确认逻辑无误后删除
-    // let showFieldData = taskDetailInfo.value.ocrPicture;
-    // let showFieldKeys = Object.keys(showFieldData);
-    // for (let i in showFieldKeys) {
-    //   let key = showFieldKeys[i];
-    //   let hasKey = userFieldList.indexOf(key) > -1;
-    //   if (hasKey) {
-    //     let currentData = fieldList.find((v) => v.name == key);
-    //     if (currentData) {
-    //       console.log(fieldList, key, "currentData");
-    //       console.log(currentData, "currentData222");
-    //       let item = {
-    //         label: currentData.fieldDesc,
-    //         value: taskDetailInfo.value.ocrPicture[key],
-    //         key: currentData.name,
-    //       };
-    //       listData.push(item);
-    //     }
-    //   }
-    // }
-    if (!isEmpty(taskDetailInfo.value.ocrPicture.id)) {
-      const { data, total } = await getSimilarityList(
-        { pictureId: taskDetailInfo.value.ocrPicture.id, ...taskpagination, ...sortBy },
-      )
-      console.log(data)
-
-      taskDetailPictureList.value = data
-      console.log(taskDetailPictureList.value)
-      totalCount.value = total
-    }
-    else {
-      taskDetailPictureList.value.length = 0
-      totalCount.value = 0
-    }
+    getImgList()
   },
 )
 
@@ -376,16 +343,6 @@ function previewHandler(event: MouseEvent) {
   if (imageRef.value && (imageRef.value as any).src)
     (imageRef.value as any).mergedOnClick()
 }
-
-function getPercent(pictureid: string) {
-  const { ocpictureid, pictureresult } = taskDetailInfo.value
-  const splitId = ocpictureid || ''
-  const index = splitId.split(',').indexOf(String(pictureid))
-  const results = (pictureresult || '').split(',')
-  const percent = results[index] || '0'
-  const val = Number.parseFloat(percent)
-  return `${val}%`
-}
 </script>
 
 <template>
@@ -529,7 +486,7 @@ function getPercent(pictureid: string) {
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
-              <span class="value">{{ TASK_STATUS_OBJ[taskDetailInfo.states] }}</span>
+              <span class="value">{{ TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis] }}</span>
               <span class="label">审批状态</span>
             </n-gi>
             <n-gi span="4" class="gi1">
@@ -577,7 +534,7 @@ function getPercent(pictureid: string) {
             </div>
             <div class="list">
               <div
-                v-for="(item, index) in taskDetailPictureList"
+                v-for="(item) in taskDetailPictureList"
                 :key="item.id"
                 class="item"
               >
@@ -631,7 +588,8 @@ function getPercent(pictureid: string) {
         <History :data="taskDetailInfo" />
       </n-tab-pane>
     </n-tabs>
-    <ConfrimModal ref="confrimModalRef" @commit="reject" />
+    <NotPassed />
+    <ConfrimModal ref="notPassModalRef" @commit="reject" />
     <BatchModal
       ref="batchModalRef"
       @reject="rejectHandler"
diff --git a/src/views/task/modal/BatchModal.vue b/src/views/task/modal/BatchModal.vue
index b5d02da..dfd2f6f 100644
--- a/src/views/task/modal/BatchModal.vue
+++ b/src/views/task/modal/BatchModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import Masonry from 'masonry-layout'
 import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
@@ -8,9 +8,9 @@ import { useMessage } from 'naive-ui'
 import { timeOptions, viewOptions } from '@/config/home'
 import { off, on } from '@/utils/domUtils'
 import { useTask } from '@/store/modules/task'
-import { getTaskDetailPictureList } from '@/api/work/work'
-import { getTaskDetailInfo } from '@/api/task/task'
-import type { PictureSortParam } from '/#/api'
+import { TASK_STATUS_OBJ } from '@/enums/index'
+import { formatToDateHMS } from '@/utils/dateUtil'
+import { getSimilarityList, getTaskDetailInfo } from '@/api/task/task'
 import emitter from '@/utils/mitt'
 
 const emit = defineEmits<{
@@ -23,6 +23,7 @@ const cardStyle = {
   '--n-padding-left': '120px',
 }
 
+const totalCount = ref(0)
 const timeRange = ref('all')
 const timeLabel = computed(() => {
   const item = timeOptions.find((option) => {
@@ -54,9 +55,10 @@ const pagination = reactive({
 const loading = ref(false)
 let _masonry: null | Masonry = null
 const show = ref(false)
-const sortBy: PictureSortParam = {
-  orderbyname: 'asc',
-  orderbyvalue: 'fromuptime',
+
+const sortBy: any = {
+  orderType: 'asc',
+  orderName: 'similarityScore',
 }
 const batch = ref(false)
 let _imagesload: any
@@ -108,29 +110,31 @@ useInfiniteScroll(
 async function loadMore() {
   if (loading.value || el.value == null)
     return
-
-  const packageid = taskStore.getPackageid
   const taskId = taskStore.getActiveId
 
-  if (!packageid || !taskId)
+  if (!taskId)
     return
 
-  const more = await featchList()
+  const more = await fetchList()
   listData.value.push(...more)
   nextTick(() => {
     layout()
   })
 }
 
-async function featchList() {
+async function fetchList() {
   loading.value = true
   try {
-    const packageid = taskStore.getPackageid
-    const taskId = taskStore.getActiveId
-
     pagination.pageNo += 1
-    const { data, pageCount } = await getTaskDetailPictureList(packageid, taskId, { ...pagination, ...sortBy })
+    const { data, pageCount, total } = await getSimilarityList(
+      {
+        ...pagination,
+        ...sortBy,
+        pictureId: taskDetailInfo.value.ocrPicture.id,
+      },
+    )
     canloadMore = pageCount >= pagination.pageNo && pageCount > 0
+    totalCount.value = total
 
     return data
   }
@@ -310,13 +314,11 @@ function reset() {
 
 async function refreshHandler() {
   reset()
-  const packageid = taskStore.getPackageid
   const taskId = taskStore.getActiveId
 
-  if (!packageid || !taskId)
+  if (!taskId)
     return
-
-  taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
+  taskDetailInfo.value = await getTaskDetailInfo(taskId, '')
 
   nextTick(() => {
     useInfiniteScroll(
@@ -346,7 +348,7 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
       >
         <div class="wrapper">
           <div class="wrapper-m32">
-            <SvgIcon name="recycle" size="16" />
+            <SvgIcon name="task-batch" size="16" />
             <span style="margin-left: 8px;">任务审批</span>
           </div>
           <div class="wrapper-title wrapper-m32">
@@ -380,10 +382,10 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
                   <td>
                     {{ taskDetailInfo?.createusername }}
                   </td>
-                  <td>{{ taskDetailInfo?.states }}</td>
+                  <td>{{ TASK_STATUS_OBJ[taskDetailInfo?.states] }}</td>
                   <td>{{ taskDetailInfo?.ocrPicture?.createTime }}</td>
                   <td>{{ taskDetailInfo?.fromsourceid }}</td>
-                  <td>{{ taskDetailInfo?.ocpictureid.split(',').length }}</td>
+                  <td>{{ totalCount }}</td>
                 </tr>
               </tbody>
             </table>
@@ -407,7 +409,7 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
               </div>
               <div>
                 <div v-show="!showActions" class="wrapper-content-form-button" @click="setBatch(true)">
-                  <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
+                  <SvgIcon style="margin-right: 6px;" size="22" name="batch" />
                   批量审批
                 </div>
                 <div v-show="showActions" class="batch">
@@ -435,17 +437,33 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
                   v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
                   class="grid-item"
                 >
-                  <img
-                    class="wrapper-content-item-img"
-                    :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.thumburl"
-                  >
-                  <div class="top">
-                    <n-checkbox
-                      v-show="batch" v-model:checked="item.checked" @click.prevent
-                      @update:checked="onCheckChange($event, item)"
-                    />
-                    <div class="percent">
-                      30%
+                  <div class="img-wrap">
+                    <img
+                      class="wrapper-content-item-img"
+                      :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
+                    >
+                    <div class="small-mark" />
+                    <div class="time">
+                      <div v-if="item.photoDateTimestamp" class="time-item">
+                        <SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
+                        <span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
+                      </div>
+                      <div v-if="item.submitDateTimestamp" class="time-item time-item2">
+                        <SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
+                        <span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
+                      </div>
+                    </div>
+                    <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
+                    <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
+                    <div class="check">
+                      <n-checkbox
+                        v-show="batch && item.historyStates === 1"
+                        v-model:checked="item.checked" @click.prevent
+                        @update:checked="onCheckChange($event, item)"
+                      />
+                    </div>
+                    <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                      {{ item.similarityScore }}<span class="percent-unit">%</span>
                     </div>
                   </div>
                 </div>
@@ -464,6 +482,9 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
 </template>
 
 <style lang="less" scoped>
+::-webkit-scrollbar {
+  display: none;
+}
 .card {
   width: 100vw;
   height: calc(100vh - 64px);
@@ -471,6 +492,54 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
   /* Standard syntax */
 }
 
+.img-wrap{
+  position: relative;
+}
+
+.small-mark{
+  width: 100%;
+  height: 36px;
+  background: linear-gradient(180deg,rgba(0,0,0,0.01), rgba(0,0,0,0.44) 88%);
+  border-radius: 0px 8px 8px 8px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.tag-status{
+  width: 46px;
+  height: 22px;
+  position: absolute;
+  left: -4px;
+  top: 4px;
+}
+
+.time {
+  position: absolute;
+  z-index: 3;
+  left: 3px;
+  bottom: 3px;
+  .time-item{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 2px;
+    line-height: 12px;
+  }
+
+  .time-item2{
+    margin-bottom: 0;
+  }
+
+  .svg-time{
+    margin-right: 5px
+  }
+}
+
 .close {
   position: absolute;
   right: -90px;
@@ -603,28 +672,38 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
       padding: 16px;
       position: relative;
 
-      .top {
+      .check{
+        position: absolute;
+        z-index: 3;
+        left: 4px;
+        top: 4px;
+      }
+
+      .percent {
         position: absolute;
-        left: 0px;
-        top: 0px;
         display: flex;
-        justify-content: space-between;
-        width: 100%;
-        padding: 22px;
+        align-items: center;
+        justify-content: center;
+        width: 35px;
+        height: 18px;
+        opacity: 0.9;
+        background: #6f92fd;
+        border-radius: 6px 0px 6px 0px;
+        z-index: 5;
+        right: 4px;
+        top: 4px;
+        color: #fff;
+        font-size: 14px;
       }
-    }
 
-    .percent {
-      text-align: center;
-      width: 35px;
-      height: 18px;
-      opacity: 0.9;
-      background: #6f92fd;
-      border-radius: 6px 0px 6px 0px;
-      z-index: 5;
-      right: 12px;
-      top: 2px;
-      color: #FFF;
+      .percent-unit{
+        font-size: 8px;
+        margin-top: 4px
+      }
+
+      .percent-red{
+        background: #ff4e4f;
+      }
     }
 
     .grid-item-selected {