From f0f99630d8969579b9b887c43977ea4b869bbe9c Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Thu, 21 Mar 2024 14:18:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A03:4=E6=AF=94=E4=BE=8B=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=B9=B3=E9=93=BA=E5=90=88=E6=A8=AA=E7=89=88=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/home.ts                 | 10 +++++++---
 src/views/home/content/Content.vue | 20 ++++++++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/config/home.ts b/src/config/home.ts
index b769d9c..1ddb665 100644
--- a/src/config/home.ts
+++ b/src/config/home.ts
@@ -23,11 +23,15 @@ export const timeOptions = [
 
 export const viewOptions = [
   {
-    label: '平铺',
-    value: 'tile',
+    label: '横版',
+    value: 'horizontalVersion',
   },
   {
-    label: '竖版',
+    label: '平铺',
     value: 'masonry',
   },
+  {
+    label: '3:4',
+    value: '3:4',
+  },
 ]
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index a6acb86..eaf308e 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -161,7 +161,15 @@ async function loadMore() {
 }
 
 const gridHeight = computed(() => {
-  return viewMode.value !== 'masonry' ? '145px' : ''
+  let height = ""
+  if(viewMode.value ==='masonry'){
+    height =''
+  }else if(viewMode.value ==='horizontalVersion'){
+    height ='145px'
+  }else if(viewMode.value ==='3:4'){
+    height ='240px'
+  }
+  return height
 })
 
 async function oneCheck() {
@@ -299,7 +307,7 @@ function sortHandler() {
               > -->
               <n-image
                 class="img" :img-props="{ onClick: hideDownload }"
-                :class="{ 'img-fit': viewMode !== 'masonry' }" :preview-src="item.imgUrl" :src="item.thumburl"
+                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' }" :preview-src="item.imgUrl" :src="item.thumburl"
               />
               <div class="percent">
                 <SvgIcon size="42" name="tag" />
@@ -389,6 +397,14 @@ function sortHandler() {
       width: 100%;
       overflow: hidden;
     }
+    .img-full {
+      width: 100%;
+      overflow: hidden;
+      ::v-deep(img) {
+        height: 100%;
+        width: 100%;
+      }
+    }
 
     .info {
       display: flex;