字词卡片样式

src/views/wordcard/cread.vue

@@ -575,13 +575,15 @@ export default {
       width: 1470px;
       margin: 0 auto;
       flex-flow: wrap;
-      gap: 30px 50px;
+      gap: 50px 120px;
       justify-content: center;
       align-content: center;
+      padding: 10px 0;
       &-3,
       &-4 {
+        gap: 50px 80px;
         .item-flex {
-          width: 450px !important;
+          width: 350px !important;
         }
       }
       &-2,
@@ -592,14 +594,14 @@ export default {
         width: 500px;
       }
       &-2 {
-        width: 1060px;
+        width: 920px;
       }
       &-4 {
-        width: 960px;
+        width: 780px;
       }
     }
     .item-flex {
-      width: 500px;
+      width: 400px;
       flex-shrink: 0;
     }
   }

src/views/wordcard/writeTableNew.vue

@@ -91,19 +91,19 @@
           <div class="item-image" v-if="data.left.fileList.length > 0">
             <el-image
               :style="{
-                width: totalNumber < 3 ? '468px' : '418px',
+                width: totalNumber < 3 ? '368px' : '318px',
                 height:
                   totalNumber < 3
                     ? data.left.con && (data.headerCon || data.label)
-                      ? '300px'
+                      ? '240px'
                       : !data.left.con && (data.headerCon || data.label)
-                      ? '330px'
-                      : ' 340px'
+                      ? '280px'
+                      : '280px'
                     : data.left.con && !data.right.hideHanzi && (data.headerCon || data.label)
-                    ? '248px'
+                    ? '210px'
                     : !data.left.con && (data.headerCon || data.label)
-                    ? '268px'
-                    : ' 268px',
+                    ? '232px'
+                    : '232px',
               }"
               :src="data.left.fileList[0].fileUrl"
               :preview-src-list="[data.left.fileList[0].fileUrl]"
@@ -128,10 +128,10 @@
               totalNumber < 3
                 ? data.right.collocation || data.right.exampleSent || data.right.definition
                   ? ''
-                  : '90px'
+                  : '60px'
                 : data.right.collocation || data.right.exampleSent || data.right.definition
                 ? ''
-                : '60px',
+                : '40px',
           }"
         >
           <div class="header-info-preview">
@@ -188,7 +188,11 @@
             <div
               class="definition-box"
               v-if="(data.right.collocation || data.right.exampleSent) && data.left.con.length < 4"
-              :style="{ flex: '1', marginTop: data.right.audio_file ? '100px' : '37px' }"
+              :style="{
+                flex: '1',
+                marginTop:
+                  totalNumber < 3 ? (data.right.audio_file ? '85px' : '27px') : data.right.audio_file ? '73px' : '27px',
+              }"
             >
               <div v-if="data.right.cixing">
                 <p>词性：{{ data.right.cixing }}</p>
@@ -203,7 +207,9 @@
             :style="{
               width:
                 !(data.right.collocation || data.right.exampleSent) && data.left.con.length < 4
-                  ? data.right.hz_info.length * 98 + 'px'
+                  ? totalNumber < 3
+                    ? data.right.hz_info.length * 86 + 'px'
+                    : data.right.hz_info.length * 78 + 'px'
                   : '',
               margin:
                 !(data.right.collocation || data.right.exampleSent) && data.left.con.length < 4
@@ -451,7 +457,7 @@ export default {
     width: 100%;
   }
   .writeTop {
-    min-height: 422px;
+    min-height: 350px;
     display: flex;
     column-gap: 8px;
     perspective: 1000px;
@@ -462,7 +468,7 @@ export default {
     .left,
     .right {
       width: 100%;
-      min-height: 360px;
+      min-height: 310px;
       padding: 8px 12px 18px 12px;
       border-radius: 24px;
       background: #fff;
@@ -619,8 +625,8 @@ export default {
         .hz-item {
           text-align: center;
           :deep .strockplayInner {
-            width: 98px;
-            height: 98px;
+            width: 86px;
+            height: 86px;
           }
           p {
             color: #de4444;
@@ -636,9 +642,9 @@ export default {
         margin: 0 auto 8px auto;
         border-radius: 40px;
         background: #f3f3f3;
-        padding: 16px;
-        width: 56px;
-        height: 56px;
+        padding: 13px;
+        width: 50px;
+        height: 50px;
         box-sizing: border-box;
         cursor: pointer;
         .voice-play {
@@ -656,12 +662,12 @@ export default {
           p {
             width: 40px;
             color: #000;
-            font-size: 18px;
+            font-size: 16px;
             font-weight: 400;
             line-height: 150%;
           }
           label {
-            width: 68px;
+            width: 47px;
           }
           p {
             flex: 1;
@@ -748,7 +754,21 @@ export default {
   &-preview-3,
   &-preview-4 {
     .writeTop {
-      min-height: 360px;
+      min-height: 310px;
+      .left,
+      .right {
+        padding-top: 30px;
+        padding-bottom: 8px;
+      }
+      .strockplayInner {
+        width: 76px !important;
+        height: 76px !important;
+      }
+      .audio-wrapper {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 8px !important;
+      }
     }
   }
   .writeTop-nopadding {