生词预览卡片大小调整

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -192,7 +192,7 @@ export default {
     position: absolute;
     top: -2px;
     right: -2px;
-    z-index: 998;
+    z-index: 1;
 
     // @include font_color("sub_color");
     display: flex;

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -398,8 +398,8 @@
                         item.new_word && (item.header_con || item.label)
                           ? ''
                           : !item.new_word && (item.header_con || item.label)
-                            ? '40px 12px 0 12px'
-                            : '12px',
+                            ? '20px 6px 0 6px'
+                            : '6px',
                     }"
                   >
                     <div class="header-info-preview">
@@ -417,13 +417,13 @@
                     <div v-if="item.file_list[0]" class="item-image">
                       <el-image
                         :style="{
-                          width: '368px',
+                          width: '209px',
                           height:
                             item.new_word && (item.header_con || item.label)
-                              ? '220px'
+                              ? '138px'
                               : !item.new_word && (item.header_con || item.label)
-                                ? '240px'
-                                : '294px',
+                                ? '180px'
+                                : '160px',
                         }"
                         :src="item.pic_url"
                         :preview-src-list="[item.pic_url]"
@@ -442,7 +442,7 @@
                     :style="{
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-                      paddingTop: item.collocation || item.liju_list || item.definition_list ? '' : '50px',
+                      paddingTop: item.collocation || item.liju_list || item.definition_list ? '' : '24px',
                     }"
                   >
                     <div class="header-info-preview">
@@ -522,7 +522,7 @@
                               :paly-width="'18px'"
                               :BoxbgType="'0'"
                               :cur-item="itemh.hzDetail.hz_json"
-                              :target-div="'writeTops-item-' + indexh + '-' + itemh.con + '-' + index + '-' + indexs"
+                              :target-div="'writeTops-item-newword' + indexh + '-' + itemh.con + '-' + index"
                               :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
                               class="writeTop-item"
                               :style="{
@@ -1231,18 +1231,18 @@ export default {
     position: relative;
     display: flex;
     column-gap: 8px;
-    width: 400px;
+    width: 225px;
 
     .left,
     .right {
       position: relative;
       box-sizing: border-box;
       width: 100%;
-      min-height: 270px;
-      padding: 8px 12px 18px;
+      min-height: 140px;
+      padding: 4px 6px 9px;
       overflow: hidden;
       background: #fff;
-      border: 4px solid #fff;
+      border: 2px solid #fff;
       border-radius: 24px;
 
       .header-info {
@@ -1269,13 +1269,13 @@ export default {
       }
     }
 
-    min-height: 332px;
+    min-height: 220px;
     transition: 0.6s;
     perspective: 1000px;
     transform-style: preserve-3d;
 
     .left-preview {
-      padding-top: 40px;
+      padding-top: 24px;
 
       // padding-bottom: 32px;
       // position: absolute;
@@ -1292,9 +1292,9 @@ export default {
       h5 {
         padding: 0 12px;
         margin: 0;
-        font-size: 20px;
+        font-size: 16px;
         font-weight: 400;
-        line-height: 32px;
+        line-height: 1.5;
         color: #000;
       }
 
@@ -1303,7 +1303,7 @@ export default {
         top: -4px;
         right: -4px;
         padding: 0 16px 0 8px;
-        font-size: 20px;
+        font-size: 16px;
         font-weight: 500;
         line-height: 150%;
         color: #fff;
@@ -1334,10 +1334,10 @@ export default {
       position: absolute;
       right: 8px;
       bottom: 8px;
-      width: 40px;
-      height: 40px;
-      padding: 8px;
-      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+      font-size: 20px;
       line-height: 1;
       color: #fff;
       cursor: pointer;
@@ -1428,7 +1428,7 @@ export default {
 
     .right-preview {
       display: block;
-      padding: 36px;
+      padding: 24px 6px 6px;
 
       .pinyin-box {
         margin-bottom: 8px;
@@ -1448,8 +1448,14 @@ export default {
           text-align: center;
 
           :deep .strockplayInner {
-            width: 76px;
-            height: 76px;
+            width: 40px;
+            height: 40px;
+
+            .strock-play-box,
+            .playStorkes-btn {
+              width: 9px !important;
+              height: 9px !important;
+            }
           }
 
           p {
@@ -1485,7 +1491,7 @@ export default {
 
         > div {
           display: flex;
-          margin-bottom: 8px;
+          margin-bottom: 4px;
 
           label,
           p {
@@ -1511,7 +1517,7 @@ export default {
 
       :deep p {
         margin: 0;
-        line-height: 1.5;
+        line-height: 1.2;
       }
     }
 
@@ -1578,9 +1584,9 @@ export default {
     }
 
     .con-preview {
-      margin-top: 8px;
+      margin: 8px 0;
       font-family: '楷体';
-      font-size: 38px;
+      font-size: 28px;
       font-weight: 400;
       line-height: 100%;
       color: #000;
@@ -1588,7 +1594,7 @@ export default {
 
       &-big {
         margin: 0;
-        font-size: 86px;
+        font-size: 46px;
       }
     }
 

src/views/book/courseware/preview/components/new_word/components/Strockplay.vue

@@ -116,7 +116,7 @@ export default {
 
 .character-target-div {
   position: relative;
-  z-index: 998;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;