feat: 增加竖版

src/config/home.ts

@@ -30,6 +30,10 @@ export const viewOptions = [
     label: '平铺',
     value: 'masonry',
   },
+  {
+    label: '竖版',
+    value: 'verticalVersion',
+  },
   {
     label: '3:4',
     value: '3:4',

src/views/home/content/Content.vue

@@ -166,6 +166,8 @@ const gridHeight = computed(() => {
     height =''
   }else if(viewMode.value ==='horizontalVersion'){
     height ='145px'
+  }else if(viewMode.value ==='verticalVersion'){
+    height ='320px'
   }else if(viewMode.value ==='3:4'){
     height ='240px'
   }
@@ -307,7 +309,7 @@ function sortHandler() {
               > -->
               <n-image
                 class="img" :img-props="{ onClick: hideDownload }"
-                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' }" :preview-src="item.imgUrl" :src="item.thumburl"
+                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4'|| viewMode === 'verticalVersion' }" :preview-src="item.imgUrl" :src="item.thumburl"
               />
               <div class="percent">
                 <SvgIcon size="42" name="tag" />
@@ -401,8 +403,9 @@ function sortHandler() {
       width: 100%;
       overflow: hidden;
       ::v-deep(img) {
-        height: 100%;
         width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
     }