diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 3805e0c..37ce72e 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -4,18 +4,15 @@ import { Download as DownloadIcon, Upload as UploadIcon } from '@vicons/tabler'
 import { Icon } from '@vicons/utils'
 import { useInfiniteScroll } from '@vueuse/core'
 import dayjs from 'dayjs'
-
-// import imagesloaded from 'imagesloaded'
+import imagesloaded from 'imagesloaded'
 import { cloneDeep, debounce } from 'lodash-es'
-
-// import Masonry from 'masonry-layout'
+import Masonry from 'masonry-layout'
 import { NIcon, useMessage } from 'naive-ui'
 import type { Component } from 'vue'
 import {
   computed,
   h,
   nextTick,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   onUpdated,
@@ -57,9 +54,9 @@ const listData = ref<any[]>([])
 const timer = ref()
 const showClose = ref(false)
 const deviceHeight = ref(600)
-// let _masonry: null | Masonry = null
-// let _imagesload: any
-// const masonryRef = ref<ComponentRef>(null)
+let _masonry: null | Masonry = null
+let _imagesload: any
+const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
 const viewMode = ref('masonry')
 const pagination = reactive({
@@ -104,36 +101,36 @@ const listStyle = computed(() => {
   }
 })
 
-// const layout = debounce(() => {
-//   if (masonryRef.value == null || el.value == null)
-//     return
-
-//   if (_masonry !== null)
-//     (_masonry as any).addItems()
-
-//   _masonry = new Masonry(masonryRef.value as any, {
-//     itemSelector: '.grid-item',
-//     gutter: 17,
-//     columnWidth: 182,
-//     percentPosition: true,
-//     stagger: 10,
-//   })
-//   loading.value = false
-//   // 暂时注释，请忽略
-//   _imagesload = imagesloaded('.grid-item')
-
-//   _imagesload.on('done', (instance) => {
-//     (_masonry as any).layout()
-//     if (!el.value)
-//       return
-//     loading.value = false
-//   })
-
-//   _imagesload.on('fail', (instance) => {
-//     message.error('图片错误')
-//     loading.value = false
-//   })
-// }, 300)
+const layout = debounce(() => {
+  if (masonryRef.value == null || el.value == null)
+    return
+
+  if (_masonry !== null)
+    (_masonry as any).addItems()
+
+  _masonry = new Masonry(masonryRef.value as any, {
+    itemSelector: '.grid-item',
+    gutter: 17,
+    columnWidth: 182,
+    percentPosition: true,
+    stagger: 10,
+  })
+  loading.value = false
+  // 暂时注释，请忽略
+  _imagesload = imagesloaded('.grid-item')
+
+  _imagesload.on('done', (instance) => {
+    (_masonry as any).layout()
+    if (!el.value)
+      return
+    loading.value = false
+  })
+
+  _imagesload.on('fail', (instance) => {
+    message.error('图片错误')
+    loading.value = false
+  })
+}, 300)
 
 useInfiniteScroll(
   el as any,
@@ -143,25 +140,12 @@ useInfiniteScroll(
   { distance: 10, canLoadMore: () => canloadMore },
 )
 
-onBeforeMount(async () => {
-  const more = await featchList()
-  more.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = more
-  const tmore = await featchList()
-  tmore.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = listData.value.concat(tmore)
-})
-
 onUpdated(() => {
-  // nextTick(() => {
-  //   setTimeout(() => {
-  //     layout()
-  //   }, 50)
-  // })
+  nextTick(() => {
+    setTimeout(() => {
+      layout()
+    }, 50)
+  })
 })
 
 const timeRange = ref('')
@@ -173,6 +157,14 @@ const timeLabel = computed(() => {
   return item?.label
 })
 
+const viewLabel = computed(() => {
+  const item = viewOptions.find((option) => {
+    return option.value === viewMode.value
+  })
+
+  return item?.label
+})
+
 const isAllowDownload = ref(true)
 const calNum = ref(0)
 const searchValue = ref('')
@@ -262,48 +254,46 @@ async function featchList(userSearchId?: string) {
 
     const list = data.map((item) => {
       return {
-        calHeight: 0,
         imgUrl: item.imgurl,
-        thumburl: item.serverThumbnailUrl,
+        thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
         upname: item.upname,
         ocrPictureclass: item.ocrPictureclass,
         uphead: item.uphead,
         similar: item.similarityscore || -1,
         imgName: item.imgname,
         states: item.states,
-        wide: item.wide,
-        high: item.high,
         loadOver: false,
+        isRepeatHis: item.isRepeatHis,
       }
     })
-    loading.value = false
+
     return list
   }
   catch (error) {
     canloadMore = false
-    loading.value = false
     return []
   }
 }
 
 async function loadMore() {
-  console.log('loading.value加兹安', loading.value, el.value)
   if (loading.value || el.value == null)
     return
-  canloadMore = false
+
   const more = await featchList()
-  more.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  // listData.value.push(...more)
-  listData.value = listData.value.concat(more)
-  console.log('listData.value出来了', listData.value)
+  // if(isInitSeaerch.value) {
+  //   listData.value = []
+  //   isInitSeaerch.value = false
+  // }
+
+  console.log(more)
+  listData.value.push(...more)
+  console.log(listData.value)
 }
 
 const gridHeight = computed(() => {
   let height = ''
   if (viewMode.value === 'masonry')
-    height = 'auto'
+    height = ''
   else if (viewMode.value === 'horizontalVersion')
     height = '145px'
   else if (viewMode.value === 'verticalVersion')
@@ -491,13 +481,9 @@ function reset() {
   canloadMore = true
   filterId = null
 
-  // layout()
+  layout()
 }
 
-watch(listData.value, (newVal, oldVal) => {
-  console.log('最新的val', newVal)
-})
-
 async function refreshHandler(filtersearchId?: any) {
   reset()
 
@@ -657,16 +643,6 @@ const dropdownOptions = ref([
   },
 ])
 
-function finish() {
-  console.log('finish')
-}
-
-function scroll() {
-
-}
-
-const masonryRef = ref(null)
-
 defineExpose({
   showLoginSuccessModal,
   closeLoginSuccessModal,
@@ -739,117 +715,137 @@ defineExpose({
           <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
       </div>
 
-      <!-- <n-spin :show="loading"> -->
-      <div ref="el" class="scroll" :style="listStyle">
-        <waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
-          <div
-            v-for="(item, index) in listData"
-            :key="item.calHeight"
-            :style="{ height: gridHeight }"
-            class="grid-item"
-          >
-            <img
-              :key="item.thumburl"
-              v-lazy="item.thumburl"
-              :class="{
-                'img-fit': viewMode === 'horizontalVersion',
-                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-              }"
-              :style="{ height: `${`${item.calHeight}px`}` }"
-              class="img"
-              alt="加载错误"
-            >
-
-            <n-image
-              ref="imageRef"
-              :key="item.imgUrl"
-              class="img"
-              :img-props="{
-                onClick: ($event) => {
-                  hideDownload($event);
-                  showClose = true;
-                },
-              }"
-              :class="{
-                'img-fit': viewMode === 'horizontalVersion',
-                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-              }"
-              :preview-src="item.imgUrl"
-              :src="item.thumburl"
-              :fallback-src="bgLoadingImg"
-              :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
-              style="display: none"
-            />
-
-            <img
-              v-if="item.states == 3"
-              class="tag-status"
-              src="@/assets/images/task/tag-pass.png"
-              alt=""
-            >
-            <img
-              v-if="item.states == 5"
-              class="tag-status"
-              src="@/assets/images/task/tag-not-pass.png"
-              alt=""
+      <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, minHeight: gridMinHeight }"
+              class="grid-item"
             >
-
-            <div v-if="item.similar != -1" class="percent">
-              <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
-              <div class="val">
-                {{ `${item.similar}%` }}
-              </div>
-            </div>
-            <div v-if="isAllowDownload" class="glass">
-              <SvgIcon
-                size="16"
-                name="download"
-                style="margin-top: -6px; cursor: pointer"
-                @click="downloadImage(item)"
+              <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
+              <!-- <img
+                class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
+                :src="item.imgUrl"
+              > -->
+
+              <n-image
+                ref="imageRef"
+                class="img"
+                :img-props="{
+                  onClick: ($event) => {
+                    hideDownload($event);
+                    showClose = true;
+                  },
+                }"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :preview-src="item.imgUrl"
+                :src="item.thumburl"
+                :fallback-src="bgLoadingImg"
+                :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
               />
-            </div>
+              <img
+                v-if="item.states == 3"
+                class="tag-status"
+                src="@/assets/images/task/tag-pass.png"
+                alt=""
+              >
+              <img
+                v-if="item.states == 5"
+                class="tag-status"
+                src="@/assets/images/task/tag-not-pass.png"
+                alt=""
+              >
+              <img
+                v-if="(item.states != 3 && item.states != 5) && item.isRepeatHis"
+                class="tag-status"
+                src="@/assets/images/reset.png"
+                alt=""
+              >
+              <img
+                v-if="(item.states == 3 || item.states == 5) && item.isRepeatHis"
+                style="top:35px"
+                class="tag-status"
+                src="@/assets/images/reset.png"
+                alt=""
+              >
+              <!-- @load="loadImgOver(item)" -->
+              <!-- <n-image
+                class="img"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :src="baseImg"
+                v-show="!item.loadOver"
+              /> -->
+
+              <div v-if="item.similar != -1" class="percent">
+                <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
+                <div class="val">
+                  {{ `${item.similar}%` }}
+                </div>
+              </div>
+              <div v-if="isAllowDownload" class="glass">
+                <SvgIcon
+                  size="16"
+                  name="download"
+                  style="margin-top: -6px; cursor: pointer"
+                  @click="downloadImage(item)"
+                />
+              </div>
 
-            <div class="info">
-              <div class="footer">
-                <div class="img-name">
-                  <n-tooltip trigger="hover">
-                    <template #trigger>
-                      <span>{{ item.imgName }}</span>
-                    </template>
-                    <span
-                      style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
-                    >{{ item.imgName }}</span>
-                  </n-tooltip>
+              <div class="info">
+                <div class="footer">
+                  <div class="img-name">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <span>{{ item.imgName }}</span>
+                      </template>
+                      <span
+                        style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
+                      >{{ item.imgName }}</span>
+                    </n-tooltip>
+                  </div>
+                  <div
+                    class="icon-wrap"
+                    @click="
+                      ($event) => {
+                        previewHandler(index, $event);
+                        hideDownload($event);
+                      }
+                    "
+                  >
+                    <SvgIcon
+                      size="13"
+                      name="magnifying-2"
+                      style="cursor: pointer; color: #898481"
+                    />
+                  </div>
                 </div>
-                <div
-                  class="icon-wrap"
-                  @click="
-                    ($event) => {
-                      previewHandler(index, $event);
-                      hideDownload($event);
-                    }
-                  "
-                >
-                  <SvgIcon
-                    size="13"
-                    name="magnifying-2"
-                    style="cursor: pointer; color: #898481"
+                <div class="left">
+                  <n-avatar
+                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                    class="avatar"
+                    round
                   />
+                  <span>{{ item.upname }}</span>
                 </div>
-              </div>
-              <div class="left">
-                <n-avatar
-                  :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
-                  class="avatar"
-                  round
-                />
-                <span>{{ item.upname }}</span>
+                <!-- <div class="right">
+                  <span :style="{ marginRight: '5px' }">分类</span>
+                  <span>{{ item.ocrPictureclass?.classname }}</span>
+                </div> -->
               </div>
             </div>
           </div>
-        </waterfall>
-      </div>
-      <!-- </n-spin> -->
+          <!-- </n-scrollbar> -->
+        </div>
+      </n-spin>
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />
@@ -873,6 +869,7 @@ defineExpose({
   flex-direction: column;
   box-sizing: border-box;
   margin-left: 16px;
+   margin-right: 16px;
   width: 100%;
 
   &-header {
@@ -919,26 +916,19 @@ defineExpose({
       padding-bottom: 16px;
     }
 
-    .grid{
-      display: block !important;
-    }
-
     .img {
-      width: 182px;
-      max-width: 182px;
       border-radius: 7px;
       display: block;
-      opacity: 1 !important;
-      // height: calc(100% - 25px);
+      height: calc(100% - 25px);
     }
 
     .img-fit {
-      width: 182px;
+      width: 100%;
       overflow: hidden;
     }
 
     .img-full {
-      width: 182px;
+      width: 100%;
       overflow: hidden;
 
       ::v-deep(img) {