表格隐藏拼音效果

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -61,7 +61,8 @@
                           class="pinyin-text pinyin-text-sentence"
                           :class="[
                             index === 0 ? 'pinyin-text-left' : '',
-                            item.type === 'audio' || item.type === 'newline' ? 'pinyin-text-audio' : '',
+                            item.type === 'audio' ? 'pinyin-text-audio' : '',
+                            item.type === 'newline' ? 'pinyin-text-br' : '',
                           ]"
                         >
                           <!-- 文字块：包含 word_list -->
@@ -88,7 +89,9 @@
                                   }"
                                 >
                                   <span class="pinyin" :style="getPinyinStyle(word)">
-                                    {{ word.pinyin.trim() ? word.pinyin : '&nbsp;' }}</span
+                                    {{
+                                      word.pinyin.trim() && word.showPinyin !== 'false' ? word.pinyin : '&nbsp;'
+                                    }}</span
                                   >
                                   <span class="py-char" :style="getCharStyle(word, item)">{{
                                     convertText(word.text)
@@ -239,7 +242,8 @@
                           class="pinyin-text pinyin-text-sentence"
                           :class="[
                             index === 0 ? 'pinyin-text-left' : '',
-                            item.type === 'audio' || item.type === 'newline' ? 'pinyin-text-audio' : '',
+                            item.type === 'audio' ? 'pinyin-text-audio' : '',
+                            item.type === 'newline' ? 'pinyin-text-br' : '',
                           ]"
                         >
                           <!-- 文字块：包含 word_list -->
@@ -574,7 +578,8 @@
                             class="pinyin-text pinyin-text-sentence"
                             :class="[
                               index === 0 ? 'pinyin-text-left' : '',
-                              item.type === 'audio' || item.type === 'newline' ? 'pinyin-text-audio' : '',
+                              item.type === 'audio' ? 'pinyin-text-audio' : '',
+                              item.type === 'newline' ? 'pinyin-text-br' : '',
                             ]"
                           >
                             <!-- 文字块：包含 word_list -->
@@ -601,7 +606,7 @@
                                     }"
                                   >
                                     <span class="pinyin" :style="getPinyinStyle(word)">{{
-                                      word.pinyin.trim() ? word.pinyin : '&nbsp;'
+                                      word.pinyin.trim() && word.showPinyin !== 'false' ? word.pinyin : '&nbsp;'
                                     }}</span>
                                     <span class="py-char" :style="getCharStyle(word, item)">{{
                                       convertText(word.text)
@@ -681,7 +686,8 @@
                             class="pinyin-text pinyin-text-sentence"
                             :class="[
                               index === 0 ? 'pinyin-text-left' : '',
-                              item.type === 'audio' || item.type === 'newline' ? 'pinyin-text-audio' : '',
+                              item.type === 'audio' ? 'pinyin-text-audio' : '',
+                              item.type === 'newline' ? 'pinyin-text-br' : '',
                             ]"
                           >
                             <!-- 文字块：包含 word_list -->
@@ -1404,6 +1410,7 @@ export default {
       status.crossAnswer = index === this.statusList.length - 1 ? this.statusList[0] : this.statusList[index + 1];
     },
     handleData() {
+      console.log(this.data);
       this.table_width = 0;
       this.isHasInput = false;
       this.data.col_width.forEach((item) => {
@@ -1868,6 +1875,11 @@ $border-color: #e6e6e6;
       .pinyin-text-audio {
         width: 100%;
       }
+
+      .pinyin-text-br {
+        width: 100%;
+        font-size: 0;
+      }
     }
 
     :deep .el-input--small .el-input__inner {