diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 46d38e4..ac9484c 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -14,6 +14,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useInfiniteScroll } from '@vueuse/core'
 import BatchModal from '../modal/BatchModal.vue'
 import CustomSettingModal from '../modal/CustomSettingModal.vue'
+import ImgDetailModal from "../modal/ImgDetailModal.vue"
 import PictureTable from './PictureTable.vue'
 import TaskTable from './TaskTable.vue'
 import History from './History.vue'
@@ -56,6 +57,7 @@ const route = useRoute()
 const isDetail = ref(false) // 是否是详情
 const finalStore = useFinal()
 const imgbigshow = ref(true)
+const imgdetailref=ref(null)
 const sortBy: any = {
   orderType: 'desc',
   orderName: 'similarityScore',
@@ -129,6 +131,8 @@ useKeydown('left', backHandler)
 useKeydown('c', () => {
   isFullScreen.value = false
   imgbigshow.value = false
+  const modal = unref(imgdetailref)! as any
+  modal.closeModal()
 })
 useKeydown('p p', () => {
   const item = taskDetailInfo.value
@@ -201,6 +205,7 @@ function validate(items: any[]) {
 }
 
 function approvalHandler(items?: any) {
+
   let cloneItem: any
   if (batch.value) {
     processItems = selectItems.value
@@ -387,6 +392,7 @@ async function getTableData() {
     return v
   })
   taskTableData.value = chunk(listData, 2)
+  console.log(taskDetailInfo)
 }
 
 async function getImgList() {
@@ -478,6 +484,7 @@ watch(
 
 // 获取数据
 async function getDetail() {
+  console.log(taskId.value, packageId.value, taskIndex.value)
   taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value, taskIndex.value)
   setBatch(false)
   getTableData()
@@ -633,6 +640,25 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
 function nodrage() {
   message.error('已审批无法移入可疑文件夹中!')
 }
+function getDetailImg(event, item){
+  //console.log(item)
+  //alert(1)
+    const modal = unref(imgdetailref)! as any
+   
+  
+  modal.showModal(item, packageId.value, taskIndex.value)
+
+}
+function passfun(e){
+
+   approvalHandler([imgdetailref.value?.taskDetailInfo])
+
+}
+function nopassfun(e){
+
+   singleRejectHandlex([imgdetailref.value?.taskDetailInfo])
+
+}
 </script>
 
 <template>
@@ -710,7 +736,7 @@ function nodrage() {
             <template #icon>
               <SvgIcon name="revoke" />
             </template>
-            返回1
+            返回
           </n-button>
           <img
             class="btn-approval btn-left"
@@ -966,6 +992,7 @@ function nodrage() {
                   item.historyStates === 1 ? handleDragEnd(event, item) : nodrage()
 
                 "
+                @click="getDetailImg(event, item)"
               >
                 <div
                   class="img-wrapper"
@@ -1191,6 +1218,7 @@ function nodrage() {
               item.historyStates === 1 ? handleDragEnd(event, item) : nodrage()
 
             "
+             @click="getDetailImg(event, item)"
           >
             <div
               class="img-wrapper"
@@ -1206,7 +1234,7 @@ function nodrage() {
               >
                 <SvgIcon
                   style="cursor: pointer"
-                  name="t1"
+                  name="t5"
                   @click.stop="approvalHandler([item])"
                 />
                 <SvgIcon
@@ -1346,6 +1374,7 @@ function nodrage() {
     <NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
     <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
     <CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
+    <img-detail-modal ref="imgdetailref" @passfun="passfun"  @nopassfun="nopassfun"/>
   </div>
 </template>
 
@@ -1539,7 +1568,7 @@ function nodrage() {
       background-repeat: no-repeat;
       border-radius: 8px;
       position: relative;
-    background-color: #f2f2f2;
+    background-color: #F3F6FF;
       .preview {
         position: absolute;
         right: 10px;
diff --git a/src/views/task/index.vue b/src/views/task/index.vue
index e912fb3..3d2e48e 100644
--- a/src/views/task/index.vue
+++ b/src/views/task/index.vue
@@ -46,5 +46,6 @@ function setAsideItemName(text) {
   flex-direction: row;
   box-sizing: border-box;
   width: 100%;
+  margin-bottom: 16px;
 }
 </style>
diff --git a/src/views/task/modal/ImgDetailModal.vue b/src/views/task/modal/ImgDetailModal.vue
new file mode 100644
index 0000000..6302e78
--- /dev/null
+++ b/src/views/task/modal/ImgDetailModal.vue
@@ -0,0 +1,439 @@
+<script lang="ts" setup>
+import { difference } from 'lodash-es'
+import { chunk, clone } from 'lodash-es'
+import {
+  computed,
+  defineEmits,
+  defineProps,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { workPackageMap } from '@/config/workorder'
+import { useUser } from '@/store/modules/user'
+import { TASK_STATUS_OBJ } from '@/enums/index'
+import {
+  getTaskDetailInfo,
+} from '@/api/task/task'
+import { getAllfieldList, getfieldList } from '@/api/home/filter'
+import { useKeydown } from '@/hooks/event/useKeydown'
+
+const props = defineProps({
+  reviewType: {
+    type: Number,
+    default: () => 1,
+    require: true,
+  },
+})
+const show = ref(false)
+const detailobj=ref(null)
+const taskDetailInfo = ref<any>({})
+const taskTableData = ref<any[]>([])
+const userStore = useUser()
+const emit = defineEmits(['passfun','nopassfun'])
+async function showModal(item:any,packid,imgid){
+         getTableData()
+     taskDetailInfo.value = await getTaskDetailInfo(item.id,packid, imgid)
+    detailobj.value=item
+    show.value=true
+}
+
+async function getTableData() {
+  const useInfo = userStore.getUserInfo
+  const listData = []
+  const reviewType = 3 // 类型
+  let res = await getAllfieldList(reviewType)
+  const fieldList = (res as any)?.data
+  res = await getfieldList(reviewType, useInfo.id)
+  const userFieldList = (res as any)?.data.userFieldFixed
+  const blueList = [
+    '拜访终端名称',
+    '定位信息',
+    '拜访日期',
+    '定位距离',
+    '拜访小结',
+    '拜访项目类别',
+  ]
+
+  fieldList.forEach((v) => {
+    if (userFieldList.includes(v.name)) {
+      let locationobj = { address: '' }
+
+      if (v.name == 'location' && taskDetailInfo.value.ocrPicture[v.name] != null && taskDetailInfo.value.ocrPicture[v.name] != 'null') {
+        locationobj = JSON.parse(
+          taskDetailInfo.value.ocrPicture ? taskDetailInfo.value.ocrPicture[v.name] : {},
+        )
+      }
+      const item = {
+        label: v.fieldDesc,
+        value:
+          v.name == 'location'
+            ? locationobj.address
+            : taskDetailInfo.value.ocrPicture
+              ? taskDetailInfo.value.ocrPicture[v.name]
+              : '',
+        key: v.name,
+        blue: blueList.includes(v.fieldDesc),
+      }
+      listData.push(item)
+    }
+    return v
+  })
+  taskTableData.value = chunk(listData, 2)
+  console.log(taskDetailInfo)
+}
+function closeModal(){
+show.value=false
+}
+function passfun(e= taskDetailInfo.value ){
+ emit('passfun', e);
+}
+function nopassfun(e= taskDetailInfo.value){
+   emit('nopassfun', e);
+}
+useKeydown('c', () => {
+ 
+  closeModal()
+})
+useKeydown('p p', () => {
+passfun()
+})
+useKeydown('x x', () => {
+ nopassfun()
+})
+
+onMounted(async () => {
+  
+})
+onUnmounted(() => {
+
+})
+defineExpose({
+  showModal,
+  closeModal,passfun,nopassfun,taskDetailInfo
+})
+    
+</script>
+
+<template>
+  <n-modal v-model:show="show" transform-origin="center">
+    <n-card
+      class="cardstyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="wrapper">
+        <span class="wrapper-title" style="color: #333">任务ID:{{detailobj.fromTaskName}}</span>
+      </div>
+      <div style="display:flex;margin-top:25px">
+        <div
+        class="left"
+        :style="
+         {
+                backgroundImage: `url(${detailobj?.imgUrl })`,
+              }
+        
+        "
+      >
+      </div>
+       <div
+        class="right"
+      >
+        <n-scrollbar style="max-height: 100%">
+              <div
+                style="
+                  font-size: 22px;
+                  font-weight: 500;
+                  color: #0d0b22;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  
+                "
+              >
+                <n-ellipsis style="font-size:22px">
+                  {{ detailobj.fromTaskName }}
+                </n-ellipsis>
+              </div>
+              <div class="tags">
+                <div
+                  v-if="detailobj?.historyStates == 1"
+                  class="tag tag-submiting"
+                >
+                  待审批
+                </div>
+                <div
+                  v-else-if="
+                    detailobj?.historyStates == 2
+                      || detailobj?.historyStates == 3
+                  "
+                  class="tag tag-submited"
+                >
+                  已审批
+                </div>
+                <div
+                  v-if="detailobj?.historyStates == 2"
+                  class="tag tag-passed"
+                >
+                  {{ TASK_STATUS_OBJ[detailobj.historyStates] }}
+                </div>
+                <div
+                  v-else-if="taskDetailInfo?.userapprove?.historyStates == 3"
+                  class="tag tag-not-passed"
+                >
+                  {{ TASK_STATUS_OBJ[detailobj?.historyStates] }}
+                </div>
+              </div>
+              <n-divider class="divider-line" />
+              <div :style="{ width: '100%' }">
+           <div
+                  v-for="(item, index) in taskTableData"
+                  :key="index"
+                  :style="{ width: '100%' }"
+                >
+                  <div
+                    v-if="item[0].label == '拜访终端名称'"
+                    :style="{ display: 'flex', height: '100%', width: '100%' }"
+                  >
+                    <div
+                      :style="{
+                        width: '100px',
+                        borderRight: '2px solid',
+                        marginTop: '4px',
+                      }"
+                    >
+                      {{ item[0].label }}
+                    </div>
+                    <div
+                      :style="{
+                        marginLeft: '15px',
+                        fontSize: '16px',
+                        textOverflow: 'ellipsis',
+                        paddingTop: '2px',
+                      }"
+                    >
+                      {{ item[0].value }}
+                    </div>
+                  </div>
+                  <div v-if="!(item[0].label == '拜访终端名称')" class="viewlabel">
+                    {{ item[0].label }}
+                  </div>
+                  <div v-if="!(item[0].label == '拜访终端名称')" class="viewvalue">
+                    {{ item[0].value }}
+                  </div>
+                  <div
+                    v-if="item[1] && !(item[1].label == '拜访终端名称')"
+                    class="viewlabel"
+                  >
+                    {{ item[1].label }}
+                  </div>
+                  <div
+                    v-if="item[1] && !(item[1].label == '拜访终端名称')"
+                    class="viewvalue"
+                  >
+                    {{ item[1].value }}
+                  </div>
+                </div>
+              </div>
+            </n-scrollbar>
+       </div>
+      </div>
+         <n-divider class="divider-line" />
+         <div class="btnlist"> 
+    <n-button type="info" @click="passfun"> 通过  </n-button>
+    <n-button type="error" @click="nopassfun">  不通过</n-button>  
+     <n-button @click="closeModal">取消</n-button>
+    </div>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
+
+  &-title {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  &-bar {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-info {
+    font-weight: bold;
+    position: relative;
+    color: #333333;
+    font-size: 14px;
+
+    &:before {
+      background-color: #507afd;
+      content: "";
+      width: 5px;
+      border-radius: 2px;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+    }
+  }
+}
+
+.dragcardStyle {
+  --n-padding-bottom: 0px !important;
+  --n-padding-left: 0px !important;
+}
+
+.cardstyle {
+  width: 1200px;
+  height: 678px;
+  --n-padding-bottom: 20px;
+  --n-padding-left: 24px;
+}
+.left{
+     width: 65%;
+     height: 456px;
+     //     flex: 0.6;
+      background-size: auto 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: 8px;
+      position: relative;
+    background-color: #f2f2f2;
+}
+.right{
+    width: 30%;
+//flex:0.4;
+margin-left: 16px;
+height: 463px;
+.viewlabel {
+  margin-top: 10px;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: Regular;
+  text-align: left;
+  color: #999999;
+  line-height: 20px;
+  height: 20px;
+}
+.viewvalue {
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: Regular;
+  text-align: left;
+  color: #333333;
+  line-height: 20px;
+  height: 100%;
+  margin: 3px 0 10px 0;
+  max-width: 650px;
+}
+.tags {
+    display: flex;
+    margin-top: 8px;
+  }
+
+  .tag {
+    border: 1px solid #d8d8d8;
+    box-sizing: border-box;
+    border-radius: 8px;
+    color: #666666;
+    margin-right: 12px;
+    padding: 4px 8px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .tag-submited {
+    color: #507afd;
+    border: 1px solid #507afd;
+  }
+
+  .tag-submiting {
+    color: #ffb800;
+    border: 1px solid #ffb800;
+  }
+
+  .tag-passed {
+    color: #02c984;
+    border: 1px solid #02c984;
+  }
+
+  .tag-not-passed {
+    color: #ff7575;
+    border: 1px solid #ff7575;
+  }
+
+  .tag-approved {
+    color: #507afd;
+    border: 1px solid #507afd;
+  }
+}
+.textbtnStyle {
+  cursor: pointer;
+  color: #1980ff;
+}
+
+.btnlist{
+    width: 220px;
+    display: flex;
+    float: right;
+    justify-content: space-between;
+}
+
+::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-card > .n-card-header .n-card-header__main) {
+  font-weight: lighter !important;
+  font-size: 14px;
+}
+::v-deep(.n-scrollbar) {
+  border-top: none !important;
+}
+::v-deep(.n-button--info-type) {
+  background: #507afd !important;
+}
+::v-deep(.checkAll .n-checkbox.n-checkbox--indeterminate .n-checkbox-box) {
+  background: none;
+  border: none;
+}
+::v-deep(.checkAll .n-checkbox-box__border) {
+  border: 1px solid #e8e8e8 !important;
+}
+::v-deep(.checkAll .n-checkbox-icon) {
+  border: 3px solid #fff;
+  background: #1980ff;
+}
+::v-deep(.checkAll .n-checkbox-icon svg) {
+  display: none !important;
+}
+::v-deep(.n-card-header__main) {
+  color: #666 !important;
+}
+::v-deep(.n-button--secondary) {
+  background-color: #fff;
+  border: 1px solid #cad2dd !important;
+}
+::v-deep(.n-button--secondary):hover {
+  background-color: #fff !important;
+  border: 1px solid #cad2dd !important;
+}
+</style>
diff --git a/src/views/worksheet/content/Content.vue b/src/views/worksheet/content/Content.vue
index ec7222c..5c727f0 100644
--- a/src/views/worksheet/content/Content.vue
+++ b/src/views/worksheet/content/Content.vue
@@ -1087,7 +1087,7 @@ defineExpose({
       background-repeat: no-repeat;
       border-radius: 8px;
       position: relative;
-       background-color: #f2f2f2;
+       background-color: #F3F6FF;
       // width: 632px;
       // height: 346px;
 
@@ -1137,12 +1137,8 @@ defineExpose({
 
       .footer-times {
         width: 100%;
-        height: 80px;
-        background: linear-gradient(
-          180deg,
-          rgba(0, 0, 0, 0.01),
-          rgba(0, 0, 0, 0.71) 100%
-        );
+     height: 210px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 29%, rgba(3, 0, 0, 0.73));
         border-radius: 0px 8px 8px 8px;
         position: absolute;
         bottom: 0;
@@ -1151,7 +1147,7 @@ defineExpose({
         flex-direction: column;
         justify-content: center;
         font-weight: Medium;
-
+    padding-top: 125px;
         .time {
           color: white;
           font-size: 15px;
diff --git a/src/views/worksheet/index.vue b/src/views/worksheet/index.vue
index e9dbaea..8fd6e05 100644
--- a/src/views/worksheet/index.vue
+++ b/src/views/worksheet/index.vue
@@ -42,7 +42,9 @@ function ApprovalOver(packageId) {
   flex-direction: row;
   box-sizing: border-box;
   width: 100%;
-  height: calc(100% - 170px);
+  height: 100%;
+  padding-bottom: 16px;
+  //height: calc(100% - 170px);
 }
 :deep(.ip_box){
   z-index: 10;