feat: 首页展示增加3:4比例，修改平铺合横版显示错误

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',
+  },
 ]

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;