feat: 修改模式问题

src/views/home/content/Content.vue

@@ -85,7 +85,7 @@ const checkDuplicateNo = ref('')
 const checkTaskStatus = ref(null) // 1.执行中 2.执行完毕  3.执行失败
 const isRefresh = ref(true) // 生成任务包前，点击刷新数据，并将【一键查重】切换按钮为【生成任务包】
 const bgLoadingImg = ref(bgLoading)
-const cols = ref('7')
+const cols = ref(7)
 
 let canloadMore = true
 let filterId = null
@@ -157,13 +157,13 @@ onBeforeMount(async () => {
   listData.value = listData.value.concat(tmore)
   const screenWidth = window.screen.width
   if (screenWidth > 1920 && screenWidth <= 2560)
-    cols.value = '11'
+    cols.value = 11
   else if (screenWidth <= 1920 && screenWidth >= 1792)
-    cols.value = '7'
+    cols.value = 7
   else if (screenWidth < 1792 && screenWidth > 1440)
-    cols.value = '6'
+    cols.value = 6
   else if (screenWidth <= 1440)
-    cols.value = '5'
+    cols.value = 5
 })
 
 onUpdated(() => {
@@ -311,19 +311,24 @@ async function loadMore() {
 }
 
 const gridHeight = computed(() => {
-  let height = ''
+  let height = 0
   if (viewMode.value === 'masonry')
-    height = 'auto'
+    height = 0
   else if (viewMode.value === 'horizontalVersion')
-    height = '145px'
+    height = 145
   else if (viewMode.value === 'verticalVersion')
-    height = '300px'
+    height = 300
   else if (viewMode.value === '3:4')
-    height = '240px'
+    height = 240
 
   return height
 })
 
+watch(() => viewMode.value, (newVal, oldVal) => {
+  reset()
+  loadMore()
+})
+
 const gridMinHeight = computed(() => {
   let height = ''
   if (viewMode.value === 'masonry' && loading.value)
@@ -504,10 +509,6 @@ function reset() {
   // layout()
 }
 
-watch(listData.value, (newVal, oldVal) => {
-  console.log('最新的val', newVal)
-})
-
 async function refreshHandler(filtersearchId?: any) {
   reset()
 
@@ -750,12 +751,120 @@ defineExpose({
       </div>
 
       <n-spin :show="loading">
-        <div ref="el" class="scroll" :style="listStyle">
+        <div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle">
+          <div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
+            <div
+              v-for="(item, index) in listData"
+              :key="item.calHeight"
+              :style="{ height: `${gridHeight}px` }"
+              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: `${viewMode === 'masonry' ? `${item.calHeight}px` : `${gridHeight - 25}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=""
+              >
+
+              <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>
+                  <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="left">
+                  <n-avatar
+                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                    class="avatar"
+                    round
+                  />
+                  <span>{{ item.upname }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle">
           <waterfall :col="cols" :data="listData" :gutter-width="10" @finish="finish">
             <div
               v-for="(item, index) in listData"
               :key="item.calHeight"
-              :style="{ height: gridHeight }"
               class="grid-item"
             >
               <img
@@ -765,7 +874,7 @@ defineExpose({
                   'img-fit': viewMode === 'horizontalVersion',
                   'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
                 }"
-                :style="{ height: `${`${item.calHeight}px`}` }"
+                :style="{ height: `${item.calHeight}px` }"
                 class="img"
                 alt="加载错误"
               >
@@ -930,7 +1039,7 @@ defineExpose({
     }
 
     .grid{
-      display: block !important;
+      grid-gap: 10px 10px;
     }
 
     .img {