调整字词卡片大小

src/views/wordcard/cread.vue

@@ -149,7 +149,8 @@ export default {
         1: '一行一列',
         2: '一行两列',
         3: '一行三列',
-        4: '多行两列',
+        4: '两行两列',
+        5: '两行三列',
       },
       innerHeight: window.innerHeight,
     };
@@ -423,7 +424,7 @@ export default {
       this.$message.warning(`当前限制选择 9999 个文件，本次选择了 ${files.length} 个文件`);
     },
     changeRowLength() {
-      if (this.showRowLength === 4) {
+      if (this.showRowLength === 5) {
         this.showRowLength = 1;
       } else {
         this.showRowLength++;
@@ -587,7 +588,8 @@ export default {
         }
       }
       &-2,
-      &-4 {
+      &-4,
+      &-5 {
         justify-content: start;
       }
       &-1 {
@@ -599,6 +601,13 @@ export default {
       &-4 {
         width: 780px;
       }
+      &-5 {
+        width: 1120px;
+        gap: 50px 80px;
+        .item-flex {
+          width: 320px !important;
+        }
+      }
     }
     .item-flex {
       width: 400px;

src/views/wordcard/writeTableNew.vue

@@ -91,19 +91,25 @@
           <div class="item-image" v-if="data.left.fileList.length > 0">
             <el-image
               :style="{
-                width: totalNumber < 3 ? '368px' : '318px',
+                width: totalNumber < 3 ? '368px' : totalNumber > 4 ? '288px' : '318px',
                 height:
-                  totalNumber < 3
-                    ? data.left.con && (data.headerCon || data.label)
+                  data.left.con && !data.right.hideHanzi && (data.headerCon || data.label)
+                    ? totalNumber < 3
+                      ? '220px'
+                      : totalNumber > 4
+                      ? '190px'
+                      : '200px'
+                    : (!data.left.con || (data.right.hideHanzi && data.left.con)) && (data.headerCon || data.label)
+                    ? totalNumber < 3
                       ? '240px'
-                      : !data.left.con && (data.headerCon || data.label)
-                      ? '280px'
-                      : '280px'
-                    : data.left.con && !data.right.hideHanzi && (data.headerCon || data.label)
-                    ? '210px'
-                    : !data.left.con && (data.headerCon || data.label)
-                    ? '232px'
-                    : '232px',
+                      : totalNumber > 4
+                      ? '220px'
+                      : '222px'
+                    : totalNumber < 3
+                    ? '294px'
+                    : totalNumber > 4
+                    ? '246px'
+                    : '260px',
               }"
               :src="data.left.fileList[0].fileUrl"
               :preview-src-list="[data.left.fileList[0].fileUrl]"
@@ -128,7 +134,7 @@
               totalNumber < 3
                 ? data.right.collocation || data.right.exampleSent || data.right.definition
                   ? ''
-                  : '60px'
+                  : '50px'
                 : data.right.collocation || data.right.exampleSent || data.right.definition
                 ? ''
                 : '40px',
@@ -457,7 +463,7 @@ export default {
     width: 100%;
   }
   .writeTop {
-    min-height: 350px;
+    min-height: 332px;
     display: flex;
     column-gap: 8px;
     perspective: 1000px;
@@ -468,7 +474,7 @@ export default {
     .left,
     .right {
       width: 100%;
-      min-height: 310px;
+      min-height: 270px;
       padding: 8px 12px 18px 12px;
       border-radius: 24px;
       background: #fff;
@@ -615,7 +621,7 @@ export default {
         color: #de4444;
         font-feature-settings: 'cv01' on;
         font-family: League;
-        font-size: 24px;
+        // font-size: 18px;
         line-height: 120%;
         margin-bottom: 8px;
         text-align: center;
@@ -625,8 +631,8 @@ export default {
         .hz-item {
           text-align: center;
           :deep .strockplayInner {
-            width: 86px;
-            height: 86px;
+            width: 76px;
+            height: 76px;
           }
           p {
             color: #de4444;
@@ -662,7 +668,7 @@ export default {
           p {
             width: 40px;
             color: #000;
-            font-size: 16px;
+            font-size: 14px;
             font-weight: 400;
             line-height: 150%;
           }
@@ -741,7 +747,7 @@ export default {
       font-weight: 400;
       line-height: 100%;
       &-big {
-        font-size: 96px;
+        font-size: 86px;
         margin-top: 0;
       }
     }
@@ -754,15 +760,34 @@ export default {
   &-preview-3,
   &-preview-4 {
     .writeTop {
-      min-height: 310px;
+      min-height: 295px;
       .left,
       .right {
         padding-top: 30px;
         padding-bottom: 8px;
       }
       .strockplayInner {
-        width: 76px !important;
-        height: 76px !important;
+        width: 66px !important;
+        height: 66px !important;
+      }
+      .audio-wrapper {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 8px !important;
+      }
+    }
+  }
+  &-preview-5 {
+    .writeTop {
+      min-height: 282px;
+      .left,
+      .right {
+        padding-top: 30px;
+        padding-bottom: 8px;
+      }
+      .strockplayInner {
+        width: 66px !important;
+        height: 66px !important;
       }
       .audio-wrapper {
         width: 40px !important;