diff --git a/src/router/modules/final.ts b/src/router/modules/final.ts
index 9ede89c..98a65a2 100644
--- a/src/router/modules/final.ts
+++ b/src/router/modules/final.ts
@@ -38,7 +38,7 @@ const routes: Array<RouteRecordRaw> = [
         path: 'final-detail',
         name: 'final-detail',
         meta: {
-          title: '任务终审详情',
+          title: '任务详情',
         },
         component: () => import('@/views/task/content/Content.vue'),
       },
diff --git a/src/views/final/comp/RepeatTaskTableModal.vue b/src/views/final/comp/RepeatTaskTableModal.vue
index e0001cf..7adf491 100644
--- a/src/views/final/comp/RepeatTaskTableModal.vue
+++ b/src/views/final/comp/RepeatTaskTableModal.vue
@@ -68,6 +68,9 @@ const columns: DataTableColumns<RowData> = [
     ellipsis: {
       tooltip: true,
     },
+    render(row: any) {
+      return row.fromtaskname
+    },
   },
   {
     title: '任务名称',
@@ -356,6 +359,7 @@ function showModal() {
 function reload() {
   selectionIds.value = []
   checkedRowKeys.value = []
+  query(pagination.page, pagination.pageSize)
 }
 
 function goDetail(row) {
diff --git a/src/views/final/content/Content.vue b/src/views/final/content/Content.vue
index 24f68fa..33e6ed6 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { DataTableColumns, DataTableRowKey, PaginationProps } from "naive-ui";
-import { NButton, NDataTable, useDialog, useMessage } from "naive-ui";
+import type { DataTableColumns, DataTableRowKey, PaginationProps } from 'naive-ui'
+import { NButton, NDataTable, useDialog, useMessage } from 'naive-ui'
 import {
   computed,
   defineEmits,
@@ -13,9 +13,9 @@ import {
   ref,
   unref,
   watch,
-} from "vue";
-import { rowPropKeys } from "naive-ui/es/legacy-grid/src/Row";
-import { useRoute, useRouter } from "vue-router";
+} from 'vue'
+import { rowPropKeys } from 'naive-ui/es/legacy-grid/src/Row'
+import { useRoute, useRouter } from 'vue-router'
 import {
   CustomTabelModal,
   ImportExcelModal,
@@ -23,50 +23,50 @@ import {
   RepeatModal,
   RepeatTaskTableModal,
   StatusItem,
-} from "../comp";
-import { getFinalList } from "@/api/final";
-import { audit } from "@/api/task/task";
-import SvgIcon from "@/components/Icon/SvgIcon.vue";
-import type { RowData } from "@/config/final";
-import { findKey, headRules } from "@/config/final";
-import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
-import { useUser } from "@/store/modules/user";
-import { useFinal } from "@/store/modules/final";
-import { getViewportOffset } from "@/utils/domUtils";
-import { isBoolean } from "@/utils/is";
-import { useDictionary } from "@/store/modules/dictonary";
-import NotPassed from "@/components/Approval/NotPassed.vue";
-import type { ApprovalParam } from "/#/api";
-import emitter from "@/utils/mitt";
-import { formatToDateHMS } from "@/utils/dateUtil";
-import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
-
-const emit = defineEmits(["changeShow"]);
+} from '../comp'
+import { getFinalList } from '@/api/final'
+import { audit } from '@/api/task/task'
+import SvgIcon from '@/components/Icon/SvgIcon.vue'
+import type { RowData } from '@/config/final'
+import { findKey, headRules } from '@/config/final'
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
+import { useUser } from '@/store/modules/user'
+import { useFinal } from '@/store/modules/final'
+import { getViewportOffset } from '@/utils/domUtils'
+import { isBoolean } from '@/utils/is'
+import { useDictionary } from '@/store/modules/dictonary'
+import NotPassed from '@/components/Approval/NotPassed.vue'
+import type { ApprovalParam } from '/#/api'
+import emitter from '@/utils/mitt'
+import { formatToDateHMS } from '@/utils/dateUtil'
+import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
+
+const emit = defineEmits(['changeShow'])
 function changeContent() {
-  emit("changeShow");
+  emit('changeShow')
 }
-const checkedRowKeys = ref([]);
-const dicStore = useDictionary();
-const izstatusList = ref([]);
-const router = useRouter();
-const route = useRoute();
-const reviewType = 0;
+const checkedRowKeys = ref([])
+const dicStore = useDictionary()
+const izstatusList = ref([])
+const router = useRouter()
+const route = useRoute()
+const reviewType = 0
 const actionsColumns = {
-  title: "操作",
-  key: "actions",
+  title: '操作',
+  key: 'actions',
   minWidth: 200,
-  fixed: "right",
+  fixed: 'right',
   render(row) {
     return h(ListAction, {
       id: row.id,
       status: row.states,
       trigger: (action) => {
-        actionHandler(action, row);
+        actionHandler(action, row)
       },
-    });
+    })
   },
-};
-const columnsRef = ref<DataTableColumns<RowData>>([]);
+}
+const columnsRef = ref<DataTableColumns<RowData>>([])
 // const columns: DataTableColumns<RowData> = [
 //   {
 //     type: "selection",
@@ -166,53 +166,54 @@ const columnsRef = ref<DataTableColumns<RowData>>([]);
 async function getColumns() {
   columnsRef.value = [
     {
-      type: "selection",
-      fixed: "left",
+      type: 'selection',
+      fixed: 'left',
       width: 50,
       disabled(row: any) {
-        return row.states !== 2;
+        return row.states !== 2
       },
     },
-  ];
-
-  const userStore = useUser();
-  const userInfo = userStore.getUserInfo;
-  let res;
-  res = await getAllfieldList(reviewType); // 所有筛选项目
-  const allList = res.data;
-  res = await getfieldList(reviewType, userInfo.id); // 当前用户选择的项目
-  const useList = res.data;
-  const userFieldFixed = useList.userFieldFixed?.split(",");
-  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
+  ]
+
+  const userStore = useUser()
+  const userInfo = userStore.getUserInfo
+  let res
+  res = await getAllfieldList(reviewType) // 所有筛选项目
+  const allList = res.data
+  res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
+  const useList = res.data
+  const userFieldFixed = useList.userFieldFixed?.split(',')
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
   if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
     allList?.map((v) => {
       if (v.isrequired == 2) {
         columnsRef.value.push({
           title: v.fieldDesc,
-          fixed: "left",
+          fixed: 'left',
           key: v.name,
           width: 120,
-        });
+        })
       }
-    });
-  } else {
+    })
+  }
+  else {
     userFieldFixed.map((v) => {
-      let item = allList.find((v2) => v2.name == v);
+      const item = allList.find(v2 => v2.name == v)
       columnsRef.value.push({
         title: item.fieldDesc,
         key: item.name,
-        fixed: "left",
+        fixed: 'left',
         width: 120,
-      });
-    });
+      })
+    })
     userFieldUnFixed.map((v) => {
-      let item = allList.find((v2) => v2.name == v);
+      const item = allList.find(v2 => v2.name == v)
       columnsRef.value.push({
         title: item.fieldDesc,
         key: item.name,
         width: 120,
-      });
-    });
+      })
+    })
   }
   // TODO: 会导致排序问题 废弃
   // #region
@@ -246,181 +247,190 @@ async function getColumns() {
   // });
   // #endregion
 
-  columnsRef.value.push(actionsColumns as any);
-  console.log(columnsRef.value, "columnsRef111");
-  formatColumns();
-  console.log(columnsRef.value, "columnsRef222");
+  columnsRef.value.push(actionsColumns as any)
+  console.log(columnsRef.value, 'columnsRef111')
+  formatColumns()
+  console.log(columnsRef.value, 'columnsRef222')
 }
 
 async function formatColumns() {
   // TODO处理特殊字段
 
-  let index;
-  index = columnsRef.value.findIndex((v) => v.title == "任务ID");
+  let index
+  index = columnsRef.value.findIndex(v => v.title == '任务ID')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "任务ID",
+      title: '任务ID',
       key: columnsRef.value[index].key, // "id"
       fixed: columnsRef.value[index].fixed || undefined,
       width: 200,
       render(row) {
         const item: any = izstatusList.value.find(
-          (item: any) => item.value == row.states
-        );
+          (item: any) => item.value == row.states,
+        )
         return h(
           NButton,
           {
-            strong: true,
-            tertiary: true,
-            text: true,
-            size: "small",
-            "text-color": "#507AFD",
-            onClick: () => goDetail(row),
+            'strong': true,
+            'tertiary': true,
+            'text': true,
+            'size': 'small',
+            'text-color': '#507AFD',
+            'onClick': () => goDetail(row),
           },
-          { default: () => row.id }
-        );
+          { default: () => row.fromtaskname },
+        )
       },
-    };
+    }
   }
 
-  index = columnsRef.value.findIndex((v) => v.title == "所属项目");
+  index = columnsRef.value.findIndex(v => v.title == '所属项目')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "所属项目",
+      title: '所属项目',
       key: columnsRef.value[index].key, // "fromtaskname"
       fixed: columnsRef.value[index].fixed || undefined,
       width: 200,
       ellipsis: {
         tooltip: true,
       },
-    };
+    }
   }
 
-  index = columnsRef.value.findIndex((v) => v.title == "任务名称");
+  index = columnsRef.value.findIndex(v => v.title == '任务名称')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "任务名称",
+      title: '任务名称',
       key: columnsRef.value[index].key, // "fromtaskname"
       fixed: columnsRef.value[index].fixed || undefined,
       width: 200,
       ellipsis: {
         tooltip: true,
       },
-    };
+    }
   }
-  index = columnsRef.value.findIndex((v) => v.title == "审批状态");
+  index = columnsRef.value.findIndex(v => v.title == '审批状态')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "审批状态",
+      title: '审批状态',
       key: columnsRef.value[index].key,
       fixed: columnsRef.value[index].fixed || undefined,
       width: 120,
-      sorter: "default",
+      sorter: 'default',
       renderSorterIcon: ({ order }) => {
-        if (order === false) return h(SvgIcon, { name: "sort-2" });
-        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
-        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+        if (order === false)
+          return h(SvgIcon, { name: 'sort-2' })
+        if (order === 'ascend')
+          return h(SvgIcon, { name: 'sort-1' })
+        if (order === 'descend')
+          return h(SvgIcon, { name: 'sort-3' })
       },
       render(row) {
         const item: any = izstatusList.value.find(
-          (item: any) => item.value == row.states
-        );
+          (item: any) => item.value == row.states,
+        )
         return h(StatusItem, {
           id: row.id,
           status: row.states,
-          label: item ? item.label : "",
-        });
+          label: item ? item.label : '',
+        })
       },
-    };
+    }
   }
-  index = columnsRef.value.findIndex((v) => v.title == "图片相似度");
+  index = columnsRef.value.findIndex(v => v.title == '图片相似度')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "图片相似度",
+      title: '图片相似度',
       key: columnsRef.value[index].key,
       fixed: columnsRef.value[index].fixed || undefined,
       width: 150,
-      sorter: "default",
+      sorter: 'default',
       renderSorterIcon: ({ order }) => {
-        if (order === false) return h(SvgIcon, { name: "sort-2" });
-        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
-        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+        if (order === false)
+          return h(SvgIcon, { name: 'sort-2' })
+        if (order === 'ascend')
+          return h(SvgIcon, { name: 'sort-1' })
+        if (order === 'descend')
+          return h(SvgIcon, { name: 'sort-3' })
       },
       render(row: any) {
         return h(
-          "div",
+          'div',
           {
             id: row.id,
-            style: { color: row.similarityscore === 100 ? "#FF4E4F" : "" },
+            style: { color: row.similarityscore === 100 ? '#FF4E4F' : '' },
           },
-          { default: () => (row.similarityscore ? `${row.similarityscore}%` : "") }
-        );
+          { default: () => (row.similarityscore ? `${row.similarityscore}%` : '') },
+        )
       },
-    };
+    }
   }
-  index = columnsRef.value.findIndex((v) => v.title == "提报时间");
+  index = columnsRef.value.findIndex(v => v.title == '提报时间')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "提报时间",
+      title: '提报时间',
       key: columnsRef.value[index].key,
       fixed: columnsRef.value[index].fixed || undefined,
       width: 200,
-      sorter: "default",
+      sorter: 'default',
       renderSorterIcon: ({ order }) => {
-        if (order === false) return h(SvgIcon, { name: "sort-2" });
-        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
-        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+        if (order === false)
+          return h(SvgIcon, { name: 'sort-2' })
+        if (order === 'ascend')
+          return h(SvgIcon, { name: 'sort-1' })
+        if (order === 'descend')
+          return h(SvgIcon, { name: 'sort-3' })
       },
       render(row: any) {
-        return formatToDateHMS(row.createdate || 0);
+        return formatToDateHMS(row.createdate || 0)
       },
-    };
+    }
   }
 
-  index = columnsRef.value.findIndex((v) => v.title == "更新时间");
+  index = columnsRef.value.findIndex(v => v.title == '更新时间')
   if (index > -1) {
     columnsRef.value[index] = {
-      title: "更新时间",
+      title: '更新时间',
       key: columnsRef.value[index].key,
       fixed: columnsRef.value[index].fixed || undefined,
       width: 200,
       render(row: any) {
-        return row.updatetime ? formatToDateHMS(row.updatetime) : "";
+        return row.updatetime ? formatToDateHMS(row.updatetime) : ''
       },
-    };
+    }
   }
 }
 
-const deviceHeight = ref(600);
+const deviceHeight = ref(600)
 
 onMounted(() => {
-  emitter.on("filter-final", refreshHandler);
-  getColumns();
+  emitter.on('filter-final', refreshHandler)
+  getColumns()
 
   nextTick(() => {
-    computeListHeight();
-  });
-});
+    computeListHeight()
+  })
+})
 
 onBeforeMount(() => {
-  dicStore.fetchizstatusListt();
-});
+  dicStore.fetchizstatusListt()
+})
 
 watch(
   () => dicStore.izstatusList,
   (newval) => {
-    izstatusList.value = newval;
-  }
-);
+    izstatusList.value = newval
+  },
+)
 
 onUnmounted(() => {
-  emitter.off("filter-final", refreshHandler);
-});
+  emitter.off('filter-final', refreshHandler)
+})
 
-const tableRef = ref<InstanceType<typeof NDataTable>>();
-const rowKey = (row: RowData) => row.id;
-const loading = ref(true);
-const total = ref(0);
+const tableRef = ref<InstanceType<typeof NDataTable>>()
+const rowKey = (row: RowData) => row.id
+const loading = ref(true)
+const total = ref(0)
 const pagination = reactive({
   page: 1,
   pageCount: 10,
@@ -428,242 +438,247 @@ const pagination = reactive({
   showSizePicker: true,
   pageSizes: [
     {
-      label: "10 每页",
+      label: '10 每页',
       value: 10,
     },
     {
-      label: "15 每页",
+      label: '15 每页',
       value: 15,
     },
     {
-      label: "30 每页",
+      label: '30 每页',
       value: 30,
     },
     {
-      label: "50 每页",
+      label: '50 每页',
       value: 50,
     },
   ],
   showQuickJumper: true,
   prefix: () => `共 ${total.value} 条数据`,
-});
-const tableData = ref<Array<RowData>>([]);
-const selectionIds = ref<DataTableRowKey[]>([]);
-const dialog = useDialog();
-const message = useMessage();
-const finalStore = useFinal();
+})
+const tableData = ref<Array<RowData>>([])
+const selectionIds = ref<DataTableRowKey[]>([])
+const dialog = useDialog()
+const message = useMessage()
+const finalStore = useFinal()
 
 async function query(page: number, pageSize: number, filterId?: any) {
-  const asideParmas = unref(finalStore.getAsideValue);
+  const asideParmas = unref(finalStore.getAsideValue)
   // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
-  const params = filterId ? { userSearchId: filterId } : asideParmas;
+  const params = filterId ? { userSearchId: filterId } : asideParmas
   const result = await getFinalList({
-    sortorder: "asc",
+    sortorder: 'asc',
     pageSize,
     currPage: page,
-    sortname: "",
+    sortname: 'states',
     ...params,
-  });
-  const { data, pageCount, totalCount } = result;
-  tableData.value = data;
-  total.value = totalCount;
-  pagination.page = page;
-  pagination.pageCount = Math.ceil(totalCount / pageSize);
-  loading.value = false;
+  })
+  const { data, pageCount, totalCount } = result
+  tableData.value = data
+  total.value = totalCount
+  pagination.page = page
+  pagination.pageCount = Math.ceil(totalCount / pageSize)
+  loading.value = false
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value) return;
-  const { pageSize } = pagination;
-  pagination.page = currentPage;
-  await query(currentPage, pageSize);
+  if (loading.value)
+    return
+  const { pageSize } = pagination
+  pagination.page = currentPage
+  await query(currentPage, pageSize)
 }
 async function handlePageSizeChange(currentPageSize) {
-  if (loading.value) return;
+  if (loading.value)
+    return
 
-  const { page } = pagination;
-  pagination.pageSize = currentPageSize;
+  const { page } = pagination
+  pagination.pageSize = currentPageSize
 
-  await query(page, currentPageSize);
+  await query(page, currentPageSize)
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys;
+  selectionIds.value = rowKeys
 }
 
 async function computeListHeight() {
-  const table = unref(tableRef);
-  if (!table) return;
-  const tableEl: any = table?.$el;
-  const headEl = tableEl.querySelector(".n-data-table-thead ");
-  const { bottomIncludeBody } = getViewportOffset(headEl);
-  const headerH = 64;
-  let paginationH = 2;
-  const marginH = 60;
+  const table = unref(tableRef)
+  if (!table)
+    return
+  const tableEl: any = table?.$el
+  const headEl = tableEl.querySelector('.n-data-table-thead ')
+  const { bottomIncludeBody } = getViewportOffset(headEl)
+  const headerH = 64
+  let paginationH = 2
+  const marginH = 60
   if (!isBoolean(unref(pagination))) {
     const paginationEl = tableEl.querySelector(
-      ".n-data-table__pagination"
-    ) as HTMLElement;
+      '.n-data-table__pagination',
+    ) as HTMLElement
     if (paginationEl) {
-      const offsetHeight = paginationEl.offsetHeight;
-      paginationH += offsetHeight || 0;
-    } else {
-      paginationH += 28;
+      const offsetHeight = paginationEl.offsetHeight
+      paginationH += offsetHeight || 0
+    }
+    else {
+      paginationH += 28
     }
   }
-  let height = bottomIncludeBody - (headerH + paginationH + marginH);
-  const maxHeight = 800;
-  height = maxHeight && maxHeight < height ? maxHeight : height;
-  deviceHeight.value = height;
+  let height = bottomIncludeBody - (headerH + paginationH + marginH)
+  const maxHeight = 800
+  height = maxHeight && maxHeight < height ? maxHeight : height
+  deviceHeight.value = height
 }
 
-useWindowSizeFn(computeListHeight);
+useWindowSizeFn(computeListHeight)
 
 const maxHeight = computed(() => {
-  return tableData.value.length ? `${unref(deviceHeight)}px` : "auto";
-});
+  return tableData.value.length ? `${unref(deviceHeight)}px` : 'auto'
+})
 
-query(pagination.page, pagination.pageSize);
+query(pagination.page, pagination.pageSize)
 
-const customTabelRef = ref(null);
-const importExcelRef = ref(null);
-const notPassModalRef = ref(null); // 不通过弹窗
-const repeatModalRef = ref(null);
-const repeatTaskTableModalRef = ref(null);
+const customTabelRef = ref(null)
+const importExcelRef = ref(null)
+const notPassModalRef = ref(null) // 不通过弹窗
+const repeatModalRef = ref(null)
+const repeatTaskTableModalRef = ref(null)
 
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any;
-  modal.showModal();
+  const modal = unref(modalRef)! as any
+  modal.showModal()
 }
 
-const popover = ref<ComponentRef | null>(null);
+const popover = ref<ComponentRef | null>(null)
 
 function importHandler() {
-  (popover.value as any).setShow(false);
-  showModal(importExcelRef);
+  (popover.value as any).setShow(false)
+  showModal(importExcelRef)
 }
 
 function exportHandler() {
-  loading.value = true;
-  import("@/utils/exportExcel").then((excel) => {
+  loading.value = true
+  import('@/utils/exportExcel').then((excel) => {
     const tHeader = [
-      "任务Id",
-      "任务名称",
-      "审批节点",
-      "审批状态",
-      "图片相似度",
-      "提报时间",
-      "更新时间",
-    ];
+      '任务Id',
+      '任务名称',
+      '审批节点',
+      '审批状态',
+      '图片相似度',
+      '提报时间',
+      '更新时间',
+    ]
     const filterVal = [
-      "id",
-      "name",
-      "approvalnode",
-      "approvalstatus",
-      "similarity",
-      "uptime",
-      "updatetime",
-    ];
-    const list = tableData.value;
-    const data = formatJson(filterVal, list);
+      'id',
+      'name',
+      'approvalnode',
+      'approvalstatus',
+      'similarity',
+      'uptime',
+      'updatetime',
+    ]
+    const list = tableData.value
+    const data = formatJson(filterVal, list)
     excel.export_json_to_excel({
       header: tHeader,
       data,
-      filename: "data",
+      filename: 'data',
       autoWidth: true,
-      bookType: "xlsx",
-    });
-    loading.value = false;
-  });
+      bookType: 'xlsx',
+    })
+    loading.value = false
+  })
 }
 
 function formatJson(filterVal, jsonDataList) {
-  return jsonDataList.map((v) =>
+  return jsonDataList.map(v =>
     filterVal.map((j) => {
-      return v[j];
-    })
-  );
+      return v[j]
+    }),
+  )
 }
 
 function sucessHandler(excelData) {
   const data = excelData.content.map((item) => {
-    const obj = {};
+    const obj = {}
     Object.keys(item).forEach((key) => {
-      const k = findKey(columns, key);
-      obj[k] = item[key];
-    });
-    return obj;
-  });
+      const k = findKey(columns, key)
+      obj[k] = item[key]
+    })
+    return obj
+  })
 
-  tableData.value = data;
+  tableData.value = data
 }
 
 function commitHandler(columns) {
-  columnsRef.value = [...columns, actionsColumns];
-  formatColumns();
+  columnsRef.value = [...columns, actionsColumns]
+  formatColumns()
 }
 
 function actionHandler(action: any, row: any) {
-  const { key } = action;
+  const { key } = action
   switch (key) {
-    case "view":
-      goDetail(row);
-      break;
-    case "reset":
-      resetHandler();
-      break;
-    case "approval":
-      singleApproval(row);
-      break;
-    case "reject":
-      rejectHandler([row]);
-      break;
+    case 'view':
+      goDetail(row)
+      break
+    case 'reset':
+      resetHandler()
+      break
+    case 'approval':
+      singleApproval(row)
+      break
+    case 'reject':
+      rejectHandler([row])
+      break
     default:
-      break;
+      break
   }
 }
 
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
-  if (items.length === 0) return "至少选中一个任务";
-  return null;
+  if (items.length === 0)
+    return '至少选中一个任务'
+  return null
 }
 
 function goDetail(row) {
-  router.push({ name: "final-detail", query: { id: row.id, packageid: row.packageid } });
+  router.push({ name: 'final-detail', query: { id: row.id, packageid: row.packageid } })
 }
 
 function resetHandler() {
   dialog.info({
-    title: "确认提示",
-    content: "确认重置当前选中的任务的审批吗?",
-    positiveText: "确定",
-    negativeText: "取消",
+    title: '确认提示',
+    content: '确认重置当前选中的任务的审批吗?',
+    positiveText: '确定',
+    negativeText: '取消',
     onPositiveClick: async () => {
       // TODO：需要支持重置
       // const result = await resetApproval()
     },
     onNegativeClick: () => {},
-  });
+  })
 }
 
 function getSelectItems() {
-  return tableData.value.filter((item) => selectionIds.value.includes(item.id));
+  return tableData.value.filter(item => selectionIds.value.includes(item.id))
 }
 
 const showActions = computed(() => {
-  return selectionIds.value.length;
-});
+  return selectionIds.value.length
+})
 
 // 单个审批通过
 function singleApproval(row) {
   const param = {
     result: true,
-    comment: "",
-    disposeType: "",
-    disposeTypeId: "",
-    failCauseId: "",
-    failCauseName: "",
+    comment: '',
+    disposeType: '',
+    disposeTypeId: '',
+    failCauseId: '',
+    failCauseName: '',
     flowTaskInfoList: [
       {
         formId: row.id,
@@ -671,129 +686,129 @@ function singleApproval(row) {
         taskName: row.fromTaskName,
       },
     ],
-  };
-  doAudit(param);
+  }
+  doAudit(param)
 }
 
 // 批量通过
 function batchApproval() {
-  const items: any = getSelectItems();
-  const msg = validate(items);
+  const items: any = getSelectItems()
+  const msg = validate(items)
 
   if (msg !== null) {
-    message.error(msg);
-    return;
+    message.error(msg)
+    return
   }
-  console.log(items);
-  const list: any = [];
+  console.log(items)
+  const list: any = []
   items.forEach((item) => {
     list.push({
       formId: item.id,
       taskId: item.taskId,
       taskName: item.fromtaskname,
-    });
-  });
+    })
+  })
 
   const param = {
     result: true,
-    comment: "",
-    disposeType: "",
-    disposeTypeId: "",
-    failCauseId: "",
-    failCauseName: "",
+    comment: '',
+    disposeType: '',
+    disposeTypeId: '',
+    failCauseId: '',
+    failCauseName: '',
     flowTaskInfoList: list,
-  };
+  }
 
-  doAudit(param);
+  doAudit(param)
 }
 
 // 小结批量不通过
 function repeatBatchReject(items) {
-  console.log(items);
-  rejectHandler(items);
+  console.log(items)
+  rejectHandler(items)
 }
 
 // 批量不通过
 function batchReject() {
-  const items: any = getSelectItems();
-  rejectHandler(items);
+  const items: any = getSelectItems()
+  rejectHandler(items)
 }
 
 // 审核不通过
 function rejectHandler(list) {
-  const msg = validate(list);
+  const msg = validate(list)
   if (msg !== null) {
-    message.error(msg);
-    return;
+    message.error(msg)
+    return
   }
 
-  const modal = unref(notPassModalRef)! as any;
-  modal.showModal(list);
+  const modal = unref(notPassModalRef)! as any
+  modal.showModal(list)
 }
 
 // 审核通过
 function doAudit(param: any) {
   dialog.info({
-    title: "确认提示",
-    content: "确认给该任务审批为【通过】吗?",
-    positiveText: "确定",
-    negativeText: "取消",
+    title: '确认提示',
+    content: '确认给该任务审批为【通过】吗?',
+    positiveText: '确定',
+    negativeText: '取消',
     onPositiveClick: () => {
       audit(param).then((res) => {
-        const { code } = res;
-        if (code === "OK") {
-          message.success(res.message);
-          reload();
-        } else {
-          message.error(res.message);
+        const { code } = res
+        if (code === 'OK') {
+          message.success(res.message)
+          reload()
+        }
+        else {
+          message.error(res.message)
         }
-      });
+      })
     },
     onNegativeClick: () => {},
-  });
+  })
 }
 
 function switchBatch() {
-  selectionIds.value = [];
-  checkedRowKeys.value = [];
+  selectionIds.value = []
+  checkedRowKeys.value = []
 }
 
 function reload() {
-  selectionIds.value = [];
-  checkedRowKeys.value = [];
+  selectionIds.value = []
+  checkedRowKeys.value = []
 
-  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps;
-  query(page!, pageSize!);
+  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
+  query(page!, pageSize!)
 }
 
 watch(
   () => finalStore.asideValue,
   (newVal, oldVal) => {
-    refreshHandler();
+    refreshHandler()
   },
-  { deep: true }
-);
+  { deep: true },
+)
 
 function reset() {
-  pagination.page = 1;
-  pagination.pageCount = 1;
+  pagination.page = 1
+  pagination.pageCount = 1
 }
 
 async function refreshHandler(searchId?: any) {
-  reset();
-  query(pagination.page, pagination.pageSize, searchId);
+  reset()
+  query(pagination.page, pagination.pageSize, searchId)
 }
 
 function filterTableData(keyword) {
-  if (keyword) {
-    tableData.value = tableData.value.filter((item) => item.id.includes(keyword));
-  } else {
-    query(pagination.page, pagination.pageSize);
-  }
+  if (keyword)
+    tableData.value = tableData.value.filter(item => item.id.includes(keyword))
+  else
+    query(pagination.page, pagination.pageSize)
 }
 defineExpose({
   filterTableData,
-});
+})
 </script>
 
 <template>
@@ -810,7 +825,9 @@ defineExpose({
           name="summary"
           @click="showModal(repeatModalRef)"
         />
-        <NButton class="xjcc" text @click="showModal(repeatModalRef)"> 小结查重 </NButton>
+        <NButton class="xjcc" text @click="showModal(repeatModalRef)">
+          小结查重
+        </NButton>
 
         <div v-show="!showActions" style="display: flex; align-items: center">
           <div class="btn">
@@ -831,14 +848,14 @@ defineExpose({
             src="@/assets/images/task/btn-not-pass.png"
             alt=""
             @click.stop="batchReject"
-          />
+          >
           <SvgIcon size="24" name="vs" />
           <img
             class="btn-approval"
             src="@/assets/images/task/btn-pass.png"
             alt=""
             @click.stop="batchApproval"
-          />
+          >
         </div>
 
         <n-popover
@@ -856,24 +873,16 @@ defineExpose({
           </template>
           <ul class="wrapper-header-action">
             <li @click="importHandler">
-              <SvgIcon size="20" name="import" /><span style="margin-left: 5px"
-                >批量导入数据</span
-              >
+              <SvgIcon size="20" name="import" /><span style="margin-left: 5px">批量导入数据</span>
             </li>
             <li @click="exportHandler">
-              <SvgIcon size="20" name="download" /><span style="margin-left: 5px"
-                >导出待审数据</span
-              >
+              <SvgIcon size="20" name="download" /><span style="margin-left: 5px">导出待审数据</span>
             </li>
             <li>
-              <SvgIcon size="20" name="download" /><span style="margin-left: 5px"
-                >导出全部数据</span
-              >
+              <SvgIcon size="20" name="download" /><span style="margin-left: 5px">导出全部数据</span>
             </li>
             <li>
-              <SvgIcon size="20" name="look" /><span style="margin-left: 5px"
-                >查看导入记录</span
-              >
+              <SvgIcon size="20" name="look" /><span style="margin-left: 5px">查看导入记录</span>
             </li>
           </ul>
         </n-popover>
diff --git a/src/views/message/content/List.vue b/src/views/message/content/List.vue
index 3c13e54..896181c 100644
--- a/src/views/message/content/List.vue
+++ b/src/views/message/content/List.vue
@@ -1,32 +1,32 @@
 <script lang="ts" setup>
-import { reactive, ref, toRefs } from "vue";
-import { format } from "date-fns";
-import { useRoute, useRouter } from "vue-router";
-import { getMessageList, readAllMsg, readMsg } 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";
-import iconArrowDown from "@/assets/images/message/arrow-down.png";
-
-const emit = defineEmits(["goDetail"]);
-const router = useRouter();
-const route = useRoute();
-const hasNextPage = ref(false);
+import { reactive, ref, toRefs } from 'vue'
+import { format } from 'date-fns'
+import { useRoute, useRouter } from 'vue-router'
+import { getMessageList, readAllMsg, readMsg } 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'
+import iconArrowDown from '@/assets/images/message/arrow-down.png'
+
+const emit = defineEmits(['goDetail'])
+const router = useRouter()
+const route = useRoute()
+const hasNextPage = ref(false)
 
 const state = reactive({
   tabList: [
     {
-      name: "审批通知",
+      name: '审批通知',
       icon: iconApprove,
       activeIcon: iconApproveActive,
       value: 1,
     },
     {
-      name: "系统消息",
+      name: '系统消息',
       icon: iconSystem,
       activeIcon: iconSystemActive,
       value: 2,
@@ -34,102 +34,105 @@ const state = reactive({
   ],
   list: [] as any,
   pageNo: 1,
-});
+})
 
-const { list, tabList } = toRefs(state);
+const { list, tabList } = toRefs(state)
 
-const tab = ref(1);
+const tab = ref(1)
 
-async function getList(type = "") {
+async function getList(type = '') {
   let res = await getMessageList({
     pageNo: state.pageNo,
-    pageSize: "7",
+    pageSize: '7',
     msgCategory: tab.value,
-  });
-  if (type == "more") {
+  })
+  if (type == 'more') {
     while (res.data.endRow > 0) {
-      if (res.code == "OK") {
+      if (res.code == 'OK') {
         if (tab.value === 1) {
           res.data.list.forEach((item) => {
-            item.tag = JSON.parse(item.busJson);
-          });
+            item.tag = JSON.parse(item.busJson)
+          })
         }
-        state.list = state.list.concat(res.data.list);
-        state.pageNo++;
+        state.list = state.list.concat(res.data.list)
+        state.pageNo++
         res = await getMessageList({
           pageNo: state.pageNo,
-          pageSize: "7",
+          pageSize: '7',
           msgCategory: tab.value,
-        });
+        })
       }
     }
-    hasNextPage.value = res.data.hasNextPage;
-  } else {
-    if (res.code === "OK") {
-      hasNextPage.value = res.data.hasNextPage;
+    hasNextPage.value = res.data.hasNextPage
+  }
+  else {
+    if (res.code === 'OK') {
+      hasNextPage.value = res.data.hasNextPage
       if (tab.value === 1) {
         res.data.list.forEach((item) => {
-          item.tag = JSON.parse(item.busJson);
-        });
+          item.tag = JSON.parse(item.busJson)
+        })
       }
-      state.list = state.list.concat(res.data.list);
+      state.list = state.list.concat(res.data.list)
     }
   }
 }
 
-getList();
+getList()
 
 async function clearMsg() {
-  const res = await readAllMsg({ msgCategory: tab.value });
-  if (res.code === "OK") {
-    state.list = [];
-    state.pageNo = 1;
-    getList();
+  const res = await readAllMsg({ msgCategory: tab.value })
+  if (res.code === 'OK') {
+    state.list = []
+    state.pageNo = 1
+    getList()
   }
 }
 
 function switchTab(type: number) {
-  tab.value = type;
-  state.list = [];
-  state.pageNo = 1;
-  getList();
+  tab.value = type
+  state.list = []
+  state.pageNo = 1
+  getList()
 }
 
 function goFinalDetail(row) {
-  console.log(row);
+  console.log(row)
   router.push({
-    name: "final-detail",
-    query: { id: row.tag.taskId, packageid: row.packageid },
-  });
+    name: 'final-detail',
+    query: { id: row.tag.fromId, packageid: row.packageid },
+  })
 }
 
 function goDetail(item) {
   if (tab.value === 1) {
-    clearMsgOne(item.id);
-    goFinalDetail(item);
+    clearMsgOne(item.id)
+    goFinalDetail(item)
   }
   // emit('goDetail', item.id)
   else {
-    router.push({ name: "message-detail", query: { id: item.id } });
+    router.push({ name: 'message-detail', query: { id: item.id } })
   }
 }
 
 async function clearMsgOne(id) {
-  const res = await readMsg({ msgid: id });
+  const res = await readMsg({ msgid: id })
 }
 
 function getMore() {
-  state.pageNo += 1;
-  getList("more");
+  state.pageNo += 1
+  getList('more')
 }
 </script>
 
 <template>
   <div class="wrapper-message">
     <div class="flex justify-between header">
-      <div class="header-title">消息通知</div>
+      <div class="header-title">
+        消息通知
+      </div>
       <div class="clear" @click="clearMsg">
-        <img class="icon-clear" :src="iconClear" alt="" />
+        <img class="icon-clear" :src="iconClear" alt="">
         清除未读
       </div>
     </div>
@@ -147,7 +150,7 @@ function getMore() {
               class="icon"
               :src="tab === item.value ? item.activeIcon : item.icon"
               alt=""
-            />
+            >
             <div :class="{ 'text-active': tab === item.value }" class="text">
               {{ item.name }}
             </div>
@@ -156,7 +159,7 @@ function getMore() {
             class="icon-arrow"
             :src="tab === item.value ? iconArrowActive : iconArrow"
             alt=""
-          />
+          >
           <div v-if="tab === item.value" class="line" />
         </div>
       </div>
@@ -164,7 +167,7 @@ function getMore() {
         <div
           v-for="(item, index) in list"
           :key="item.id"
-          :class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
+          :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
           class="item"
           @click="goDetail(item)"
         >
@@ -185,7 +188,9 @@ function getMore() {
               {{ item.titile }}
             </div>
             <div v-if="tab === 1" class="status">
-              <div class="tag tag-blue">审批节点：{{ item.tag.nodeName }}</div>
+              <div class="tag tag-blue">
+                审批节点：{{ item.tag.nodeName }}
+              </div>
               <div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag">
                 审批状态：{{ item.tag.states }}
               </div>
@@ -199,11 +204,13 @@ function getMore() {
               <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
             </div>
           </div>
-          <div class="look">查看</div>
+          <div class="look">
+            查看
+          </div>
         </div>
 
         <div v-if="hasNextPage" class="more" @click="getMore">
-          查看更多<img class="icon-more" :src="iconArrowDown" alt="" />
+          查看更多<img class="icon-more" :src="iconArrowDown" alt="">
         </div>
       </div>
     </div>
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 8b271ef..d7f090a 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -581,7 +581,7 @@ function switchBatch() {
                 <div
                   draggable="true"
                   class="img-wrapper"
-                  :style="{ 'background-image': `url(${item.imgUrl})` }"
+                  :style="{ 'background-image': `url(${item.serverThumbnailUrl})` }"
                   @dragend="
                     (event) => {
                       handleDragEnd(event, item);
diff --git a/src/views/task/modal/BatchModal.vue b/src/views/task/modal/BatchModal.vue
index b2d1393..93ce8e3 100644
--- a/src/views/task/modal/BatchModal.vue
+++ b/src/views/task/modal/BatchModal.vue
@@ -5,8 +5,10 @@ import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
 import imagesloaded from 'imagesloaded'
 import { useMessage } from 'naive-ui'
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
+import { getViewportOffset, off, on } from '@/utils/domUtils'
+
 import { timeOptions, viewOptions } from '@/config/home'
-import { off, on } from '@/utils/domUtils'
 import { useTask } from '@/store/modules/task'
 import { TASK_STATUS_OBJ } from '@/enums/index'
 import { formatToDateHMS } from '@/utils/dateUtil'
@@ -43,6 +45,7 @@ const viewLabel = computed(() => {
 
   return item?.label
 })
+const deviceHeight = ref(600)
 
 const taskStore = useTask()
 const masonryRef = ref<ComponentRef>(null)
@@ -64,6 +67,14 @@ const sortBy: any = {
 const batch = ref(false)
 let _imagesload: any
 const message = useMessage()
+async function computeListHeight() {
+  const headEl = document.querySelector('.wrapper-content')!
+  const { bottomIncludeBody } = getViewportOffset(headEl)
+  const height = bottomIncludeBody
+  deviceHeight.value = height - 40 - 16 - 24
+}
+
+useWindowSizeFn(computeListHeight)
 
 const layout = debounce(() => {
   if (!show.value)
@@ -74,6 +85,7 @@ const layout = debounce(() => {
 
   _masonry = new Masonry(masonryRef.value as any, {
     itemSelector: '.grid-item',
+    gutter: 17,
     columnWidth: 214,
     percentPosition: true,
     stagger: 10,
@@ -208,9 +220,9 @@ function upHandler(event: MouseEvent) {
   start = null
 }
 
-const gridHeight = computed(() => {
-  return viewMode.value !== 'masonry' ? '157px' : ''
-})
+// const gridHeight = computed(() => {
+//   return viewMode.value !== 'masonry' ? '157px' : ''
+// })
 
 function addListeners() {
   selectionBox = document.querySelector('.selection-box') as HTMLDivElement
@@ -346,6 +358,12 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
   refreshHandler()
 })
 
+const listStyle = computed(() => {
+  return {
+    height: `${deviceHeight.value}px`,
+  }
+})
+
 function switchBatch() {
   setBatch(!batch.value)
 }
@@ -363,19 +381,19 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
   refreshHandler()
 }
 
-// const gridHeight = computed(() => {
-//   let height = ''
-//   if (viewMode.value === 'masonry')
-//     height = ''
-//   else if (viewMode.value === 'horizontalVersion')
-//     height = '145px'
-//   else if (viewMode.value === 'verticalVersion')
-//     height = '300px'
-//   else if (viewMode.value === '3:4')
-//     height = '240px'
-
-//   return height
-// })
+const gridHeight = computed(() => {
+  let height = ''
+  if (viewMode.value === 'masonry')
+    height = ''
+  else if (viewMode.value === 'horizontalVersion')
+    height = '122px'
+  else if (viewMode.value === 'verticalVersion')
+    height = '300px'
+  else if (viewMode.value === '3:4')
+    height = '240px'
+
+  return height
+})
 
 defineExpose({
   showModal,
@@ -505,51 +523,57 @@ defineExpose({
               </div>
             </div>
 
-            <div ref="el" class="scroll">
-              <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
-              <div ref="masonryRef" class="grid">
-                <div
-                  v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
-                  class="grid-item"
-                >
-                  <div class="img-wrap">
-                    <!-- <img
-                      class="wrapper-content-item-img"
-                      :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
-                    > -->
-                    <n-image
-                      ref="imageRef"
-                      class="img"
-                      :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.serverThumbnailUrl || 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>
+            <n-spin :show="loading">
+              <div ref="el" class="scroll" :style="listStyle">
+                <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
+                <div ref="masonryRef" class="grid">
+                  <div
+                    v-for="(item, index) in listData"
+                    :key="index"
+                    :style="{ height: gridHeight }"
+                    class="grid-item"
+                  >
+                    <div>
+                      <n-image
+                        ref="imageRef"
+                        class="img"
+
+                        :class="{
+                          'img-fit': viewMode === 'horizontalVersion',
+                          'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                        }"
+
+                        :src="item.serverThumbnailUrl"
+                      />
+                      <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>
-                      <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>
+                      <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>
-                    <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>
+                <!-- </n-scrollbar> -->
               </div>
-              <!-- </n-scrollbar> -->
-            </div>
+            </n-spin>
           </div>
 
           <div class="close" @pointerdown="closeModal">
@@ -728,7 +752,7 @@ defineExpose({
   }
 
   &-m32 {
-    margin-left: 19px;
+    // margin-left: 19px;
   }
 
   &-content {
@@ -778,17 +802,20 @@ defineExpose({
         display: block;
         height: 100%;
       }
+    }
 
-      &-img-fit {
-        width: 100%;
-        object-fit: cover;
-      }
+    .img-fit {
+      width: 100%;
+      object-fit: cover;
+      overflow: hidden;
     }
 
     .img {
       border-radius: 7px;
       display: block;
-      height: calc(100% - 25px);
+      // height: calc(100% - 25px);
+      height: 100%;
+      width: 100%;
     }
 
     .img-full {
@@ -804,8 +831,11 @@ defineExpose({
 
     .grid-item {
       width: 214px;
-      padding: 16px;
+      // padding: 16px;
+      // width: 182px;
       position: relative;
+      margin-bottom: 32px;
+      transition: 0.5s;
 
       .check{
         position: absolute;
@@ -851,4 +881,7 @@ defineExpose({
     }
   }
 }
+::v-deep(.n-image img) {
+  width: 100%!important;
+}
 </style>