From 030216cb3a1d02f3b8a977afe0c3812f2cd0e19d Mon Sep 17 00:00:00 2001
From: raofuzi <2641346316@qq.com>
Date: Sun, 7 Apr 2024 21:25:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=8F=AF=E7=96=91?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header/RecycleModal.vue | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/Header/RecycleModal.vue b/src/layout/components/Header/RecycleModal.vue
index 35b2854..b8bc412 100644
--- a/src/layout/components/Header/RecycleModal.vue
+++ b/src/layout/components/Header/RecycleModal.vue
@@ -43,6 +43,7 @@ const timeOptions = [{
 //   label: '降序',
 //   value: 'desc',
 // }]
+
 const timeLabel = computed(() => {
   const item = timeOptions.find((option) => {
     return option.value === timeRange.value
@@ -223,7 +224,18 @@ function upHandler(event: MouseEvent) {
 }
 
 const gridHeight = computed(() => {
-  return viewMode.value !== 'masonry' ? '157px' : ''
+  // return viewMode.value !== 'masonry' ? '157px' : ''
+  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;
 })
 
 function addListeners() {
@@ -515,8 +527,13 @@ async function refreshHandler(filtersearchId?: any) {
                 <div v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId"
                   :class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
                   class="grid-item">
-                  <n-image :src="item.imgUrl" class="img "
-                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
+                  <n-image 
+                  :src="item.imgUrl"
+                  class="img "
+                    :class="{ 
+                      'img-fit': viewMode === 'horizontalVersion', 
+                      'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" 
+                    />
                   <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
                     style="position:absolute;left:20px;top:20px" @click.prevent
                     @update:checked="onCheckChange($event, item)" />
@@ -604,7 +621,9 @@ async function refreshHandler(filtersearchId?: any) {
 }
 
 .img {
-  border-radius: 8px;
+  border-radius: 7px;
+  display: block;
+  height: calc(100%);
 }
 
 .wrapper {