预览修改

src/views/book/courseware/preview/common/AnswerAnalysis.vue

@@ -88,6 +88,7 @@
               v-for="(file, j) in item.analysis_video_list"
               :key="file.file_id"
               view-size="small"
+              view-method="independent"
               :file-id="file.file_id"
               :cur-video-index="j"
             />

src/views/book/courseware/preview/components/dialogue_article/NormalModelChs.vue

@@ -82,13 +82,6 @@
           <div
             :class="['article-content', isHasRemark ? 'hasRemark' : '']"
             :style="{
-              backgroundColor:
-                item.timeList.length > 0 &&
-                curTime >= item.timeList[0].bg + 0.01 &&
-                curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
-                attrib
-                  ? attrib.assist_color
-                  : '',
               width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '',
             }"
           >
@@ -151,7 +144,14 @@
                 <div
                   class="para-con"
                   :style="{
-                    background: item.roleDetail.color ? item.roleDetail.color.bg : '',
+                    // background: item.roleDetail.color ? item.roleDetail.color.bg : '',
+                    backgroundColor:
+                      item.timeList.length > 0 &&
+                      curTime >= item.timeList[0].bg + 0.01 &&
+                      curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
+                      attrib
+                        ? attrib.assist_color
+                        : '',
                   }"
                 >
                   <div

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -72,14 +72,6 @@
           <div
             :class="['article-content', isHasRemark ? 'hasRemark' : '']"
             :style="{
-              backgroundColor:
-                item.timeList &&
-                item.timeList.length > 0 &&
-                curTime >= item.timeList[0].bg + 0.01 &&
-                curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
-                attrib
-                  ? attrib.assist_color
-                  : '',
               width: curQue.property.remarkWidth ? 100 - curQue.property.remarkWidth * 1 + '%' : '',
             }"
           >
@@ -151,7 +143,19 @@
                   <span class="chs" v-else>{{ convertText(item.roleDetail.fullName) }}</span>
                   <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
                 </div>
-                <div class="para-con" :style="{ background: item.roleDetail.color.bg }">
+                <div
+                  class="para-con"
+                  :style="{
+                    backgroundColor:
+                      item.timeList &&
+                      item.timeList.length > 0 &&
+                      curTime >= item.timeList[0].bg + 0.01 &&
+                      curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
+                      attrib
+                        ? attrib.assist_color
+                        : '',
+                  }"
+                >
                   <div
                     v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'"
                     class="enwords"

src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

@@ -65,19 +65,7 @@
           :key="'detail' + index"
           :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
         >
-          <div
-            class="article-content"
-            :style="{
-              backgroundColor:
-                item.timeList &&
-                item.timeList.length > 0 &&
-                curTime >= item.timeList[0].bg + 0.01 &&
-                curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
-                attrib
-                  ? attrib.assist_color
-                  : '',
-            }"
-          >
+          <div class="article-content" :style="{}">
             <template v-if="item.type === 'notice'">
               <p
                 :class="['notice']"
@@ -134,7 +122,19 @@
                   <span class="chs">{{ convertText(item.roleDetail.fullName) }}</span>
                   <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
                 </div>
-                <div class="para-con" :style="{ background: item.roleDetail.color.bg }">
+                <div
+                  class="para-con"
+                  :style="{
+                    backgroundColor:
+                      item.timeList &&
+                      item.timeList.length > 0 &&
+                      curTime >= item.timeList[0].bg + 0.01 &&
+                      curTime <= item.timeList[item.timeList.length - 1].ed - 0.01 &&
+                      attrib
+                        ? attrib.assist_color
+                        : '',
+                  }"
+                >
                   <div
                     v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'"
                     class="enwords"

src/views/book/courseware/preview/components/image_text/components/MagazineSentence.vue

@@ -14,28 +14,13 @@
       </div>
     </div>
     <div class="content-inner" :style="{ background: themeList[sentenceTheme].contentBg }">
-      <template v-if="data[sentenceActive] && data[sentenceActive].wordsResultList">
-        <template v-for="(itemC, indexC) in data[sentenceActive].wordsResultList">
+      <template v-if="textList && textList[sentenceActive] && textList[sentenceActive].sentArr">
+        <template v-for="(itemC, indexC) in textList[sentenceActive].sentArr">
           <div
             :key="indexC"
-            :class="[
-              'content-item',
-              (activeWordIndex === null &&
-                currentTime * 1000 <= data[sentenceActive].ed &&
-                currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
-              activeWordIndex === indexC
-                ? 'active'
-                : '',
-              indexC === 0 ? 'text-left' : '',
-            ]"
+            :class="['content-item', indexC === 0 ? 'text-left' : '']"
             :style="{
-              color:
-                (activeWordIndex === null &&
-                  currentTime * 1000 <= data[sentenceActive].ed &&
-                  currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
-                activeWordIndex === indexC
-                  ? themeList[sentenceTheme].sentenceActiveColor
-                  : themeList[sentenceTheme].sentenceColor,
+              color: themeList[sentenceTheme].sentenceColor,
               fontSize: fontSize + 'px',
               lineHeight: fontSize + 8 + 'px',
             }"
@@ -45,9 +30,9 @@
             <template v-if="itemC.isShow">
               <template
                 v-if="
-                  data[sentenceActive].wordsResultList[indexC + 1] &&
-                  data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
-                  chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
+                  textList[sentenceActive].sentArr[indexC + 1] &&
+                  textList[sentenceActive].sentArr[indexC + 1].chs &&
+                  chsFhList.indexOf(textList[sentenceActive].sentArr[indexC + 1].chs) > -1
                 "
               >
                 <span class="NNPE-words-box">
@@ -55,19 +40,35 @@
                     v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
                     :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? itemC.pinyin_up
-                        : itemC.pinyin
-                    }}</span
+                    >{{ itemC.pinyin }}</span
                   >
                   <span class="NNPE-chs">
                     <template>
                       <span
+                        v-for="(wItem, wIndex) in itemC.leg"
+                        :key="'ci' + wIndex + indexC"
+                        :class="[
+                          itemC.chstimeList &&
+                          itemC.chstimeList[wIndex] &&
+                          currentTime * 1000 >= itemC.chstimeList[wIndex].wordBg &&
+                          currentTime * 1000 < data[sentenceActive].ed
+                            ? 'wordActive'
+                            : '',
+                        ]"
                         :style="{
-                          fontFamily: itemC.fontFamily,
+                          fontFamily: itemC.config.fontFamily,
+                          textDecoration: itemC.config.textDecoration,
+                          borderBottom: itemC.config.border === 'dotted' ? '1px dotted' : '',
+                          fontWeight: itemC.config.fontWeight,
+                          color:
+                            itemC.chstimeList &&
+                            itemC.chstimeList[wIndex] &&
+                            currentTime * 1000 >= itemC.chstimeList[wIndex].wordBg &&
+                            currentTime * 1000 < data[sentenceActive].ed
+                              ? themeList[sentenceTheme].sentenceActiveColor
+                              : itemC.config.color,
                         }"
-                        >{{ convertText(itemC.wordsName) }}</span
+                        >{{ convertText(itemC.chs[wIndex]) }}</span
                       >
                     </template>
                   </span>
@@ -75,11 +76,7 @@
                     v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
                     :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? itemC.pinyin_up
-                        : itemC.pinyin
-                    }}</span
+                    >{{ itemC.pinyin }}</span
                   >
                 </span>
                 <span class="NNPE-words-box">
@@ -87,44 +84,48 @@
                     v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
                     :class="[
                       'NNPE-pinyin',
-                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(textList[sentenceActive].sentArr[indexC + 1].pinyin) > -1 ? 'noFont' : '',
                     ]"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
                     style="text-align: left"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
-                        : data[sentenceActive].wordsResultList[indexC + 1].pinyin
-                    }}</span
+                    >{{ textList[sentenceActive].sentArr[indexC + 1].pinyin }}</span
                   >
                   <span
                     class="NNPE-chs"
                     style="text-align: left"
                     :style="{
-                      fontFamily: data[sentenceActive].wordsResultList[indexC + 1].fontFamily,
+                      fontFamily: textList[sentenceActive].sentArr[indexC + 1].fontFamily,
+                      fontFamily: textList[sentenceActive].sentArr[indexC + 1].config.fontFamily,
+                      textDecoration: textList[sentenceActive].sentArr[indexC + 1].config.textDecoration,
+                      borderBottom:
+                        textList[sentenceActive].sentArr[indexC + 1].config.border === 'dotted' ? '1px dotted' : '',
+                      fontWeight: textList[sentenceActive].sentArr[indexC + 1].config.fontWeight,
+                      color:
+                        itemC.chstimeList &&
+                        itemC.chstimeList[itemC.leg - 1] &&
+                        currentTime * 1000 >= itemC.chstimeList[itemC.leg - 1].wordBg &&
+                        currentTime * 1000 < data[sentenceActive].ed
+                          ? themeList[sentenceTheme].sentenceActiveColor
+                          : textList[sentenceActive].sentArr[indexC + 1].config.color,
                     }"
-                    >{{ convertText(data[sentenceActive].wordsResultList[indexC + 1].wordsName) }}</span
+                    >{{ convertText(textList[sentenceActive].sentArr[indexC + 1].chs) }}</span
                   >
                   <span
                     v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
                     :class="[
                       'NNPE-pinyin',
-                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(textList[sentenceActive].sentArr[indexC + 1].pinyin) > -1 ? 'noFont' : '',
                     ]"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
                     style="text-align: left"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
-                        : data[sentenceActive].wordsResultList[indexC + 1].pinyin
-                    }}</span
+                    >{{ textList[sentenceActive].sentArr[indexC + 1].pinyin }}</span
                   >
                 </span>
                 <span
                   v-if="
-                    data[sentenceActive].wordsResultList[indexC + 2] &&
-                    data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
-                    chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
+                    textList[sentenceActive].sentArr[indexC + 2] &&
+                    textList[sentenceActive].sentArr[indexC + 2].chs &&
+                    chsFhList.indexOf(textList[sentenceActive].sentArr[indexC + 2].chs) > -1
                   "
                   class="NNPE-words-box"
                 >
@@ -132,37 +133,41 @@
                     v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
                     :class="[
                       'NNPE-pinyin',
-                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(textList[sentenceActive].sentArr[indexC + 2].pinyin) > -1 ? 'noFont' : '',
                     ]"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
                     style="text-align: left"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
-                        : data[sentenceActive].wordsResultList[indexC + 2].pinyin
-                    }}</span
+                    >{{ textList[sentenceActive].sentArr[indexC + 2].pinyin }}</span
                   >
                   <span
                     class="NNPE-chs"
                     style="text-align: left"
                     :style="{
-                      fontFamily: data[sentenceActive].wordsResultList[indexC + 2].fontFamily,
+                      fontFamily: textList[sentenceActive].sentArr[indexC + 2].fontFamily,
+                      fontFamily: textList[sentenceActive].sentArr[indexC + 2].config.fontFamily,
+                      textDecoration: textList[sentenceActive].sentArr[indexC + 2].config.textDecoration,
+                      borderBottom:
+                        textList[sentenceActive].sentArr[indexC + 2].config.border === 'dotted' ? '1px dotted' : '',
+                      fontWeight: textList[sentenceActive].sentArr[indexC + 2].config.fontWeight,
+                      color:
+                        itemC.chstimeList &&
+                        itemC.chstimeList[itemC.leg - 1] &&
+                        currentTime * 1000 >= itemC.chstimeList[itemC.leg - 1].wordBg &&
+                        currentTime * 1000 < data[sentenceActive].ed
+                          ? themeList[sentenceTheme].sentenceActiveColor
+                          : textList[sentenceActive].sentArr[indexC + 2].config.color,
                     }"
-                    >{{ convertText(data[sentenceActive].wordsResultList[indexC + 2].wordsName) }}</span
+                    >{{ convertText(textList[sentenceActive].sentArr[indexC + 2].chs) }}</span
                   >
                   <span
                     v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
                     :class="[
                       'NNPE-pinyin',
-                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(textList[sentenceActive].sentArr[indexC + 2].pinyin) > -1 ? 'noFont' : '',
                     ]"
                     style="text-align: left"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
-                        : data[sentenceActive].wordsResultList[indexC + 2].pinyin
-                    }}</span
+                    >{{ textList[sentenceActive].sentArr[indexC + 2].pinyin }}</span
                   >
                 </span>
               </template>
@@ -172,23 +177,39 @@
                     v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
                     class="NNPE-pinyin"
                     :class="[
-                      itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                      itemC.chs != '“' && itemC.padding ? 'padding' : '',
                       noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
                     ]"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? itemC.pinyin_up
-                        : itemC.pinyin
-                    }}</span
+                    >{{ itemC.pinyin }}</span
                   >
                   <span class="NNPE-chs">
                     <template>
                       <span
+                        v-for="(wItem, wIndex) in itemC.leg"
+                        :key="'ci' + wIndex + indexC"
+                        :class="[
+                          itemC.chstimeList &&
+                          itemC.chstimeList[wIndex] &&
+                          currentTime * 1000 >= itemC.chstimeList[wIndex].wordBg &&
+                          currentTime * 1000 < data[sentenceActive].ed
+                            ? 'wordActive'
+                            : '',
+                        ]"
                         :style="{
-                          fontFamily: itemC.fontFamily,
+                          fontFamily: itemC.config.fontFamily,
+                          textDecoration: itemC.config.textDecoration,
+                          borderBottom: itemC.config.border === 'dotted' ? '1px dotted' : '',
+                          fontWeight: itemC.config.fontWeight,
+                          color:
+                            itemC.chstimeList &&
+                            itemC.chstimeList[wIndex] &&
+                            currentTime * 1000 >= itemC.chstimeList[wIndex].wordBg &&
+                            currentTime * 1000 < data[sentenceActive].ed
+                              ? themeList[sentenceTheme].sentenceActiveColor
+                              : itemC.config.color,
                         }"
-                        >{{ convertText(itemC.wordsName) }}</span
+                        >{{ convertText(itemC.chs[wIndex]) }}</span
                       >
                     </template>
                   </span>
@@ -196,15 +217,11 @@
                     v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
                     class="NNPE-pinyin"
                     :class="[
-                      itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                      itemC.chs != '“' && itemC.padding ? 'padding' : '',
                       noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
                     ]"
                     :style="{ fontSize: fontSize - 6 + 'px' }"
-                    >{{
-                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                        ? itemC.pinyin_up
-                        : itemC.pinyin
-                    }}</span
+                    >{{ itemC.pinyin }}</span
                   >
                 </span>
               </template>
@@ -466,8 +483,11 @@ export default {
       _this.audio.pause();
       _this.audio.load();
       _this.audio.src = _this.mp3Url;
-      _this.audio.currentTime = _this.data[_this.sentenceActive].wordsResultList[index].wordBg / 1000;
-      _this.ed = _this.data[_this.sentenceActive].wordsResultList[index].wordEd / 1000;
+      _this.audio.currentTime = _this.textList[_this.sentenceActive].sentArr[index].chstimeList[0].wordBg / 1000;
+      _this.ed =
+        _this.textList[_this.sentenceActive].sentArr[index].chstimeList[
+          _this.textList[_this.sentenceActive].sentArr[index].chstimeList.length - 1
+        ].wordEd / 1000;
       _this.audio.loop = false;
       _this.audio.play();
     },
@@ -505,16 +525,48 @@ export default {
       }
     },
     handleData() {
-      this.data.forEach((item) => {
-        item.wordsResultList.forEach((wItem) => {
-          wItem.wordsName = wItem.wordsName ? wItem.wordsName : wItem.onebest;
+      let wordTimeList = this.data;
+      this.textList.forEach((item, dIndex) => {
+        let sentArr = [];
+        item.wordsList.forEach((wItem, wIndex) => {
+          let startIndex = wIndex === 0 ? 0 : sentArr[wIndex - 1].startIndex + sentArr[wIndex - 1].chs.length;
+          let endIndex = wIndex === 0 ? wItem.chs.length : sentArr[wIndex - 1].endIndex + wItem.chs.length;
           this.mergeWordSymbol(wItem);
+          let obj = {
+            paraIndex: dIndex, // 段落索引
+            sentIndex: 0, // 在段落中句子索引
+            wordIndex: wIndex, // 单词的索引
+            pinyin:
+              this.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
+                ? wItem.pinyin_up
+                : wItem.pinyin,
+            chs: wItem.chs,
+            padding: true, // wItem.padding,
+            className: wItem.className,
+            isShow: wItem.isShow,
+            isNewWord: false,
+            startIndex,
+            endIndex,
+            leg: wItem.chs.length,
+            config: {
+              fontFamily: wItem.fontFamily,
+              color: wItem.color,
+              textDecoration: wItem.textDecoration,
+              border: wItem.border,
+              fontWeight: wItem.fontWeight,
+            },
+          };
+          if (wordTimeList && wordTimeList.length > 0) {
+            obj.chstimeList = wordTimeList[dIndex].wordsResultList.slice(startIndex, endIndex);
+          }
+          sentArr.push(obj);
         });
+        item.sentArr = sentArr;
       });
     },
     // 词和标点合一起
     mergeWordSymbol(wItem) {
-      if (this.chsFhList.indexOf(wItem.wordsName) > -1) {
+      if (this.chsFhList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
       } else {
         wItem.isShow = true;

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

@@ -7,7 +7,7 @@
     />
 
     <main v-if="data" ref="newWordMain" class="main">
-      <div class="NPC-zhedie" :style="{ width: width }">
+      <div class="NPC-zhedie" :style="{ width: width + 'px' }">
         <!-- :style="{
             backgroundColor:
               data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -225,10 +225,40 @@
                     <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
                   </i>
                 </li>
+                <li @click="handleShow(item.key)" v-for="(item, index) in data.addCol" :key="index">
+                  <span>{{ item.label }}</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj[item.key]"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
               </ul>
               <SvgIcon
                 slot="reference"
-                v-if="is_list"
+                v-show="is_list"
                 icon-class="list2"
                 size="24"
                 :style="{
@@ -418,6 +448,8 @@
                                     data.unified_attrib && data.unified_attrib.font_size
                                       ? data.unified_attrib.font_size
                                       : '',
+                                  fontFamily:
+                                    data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
                                 }"
                                 v-if="showObj.newWord"
                                 class="NPC-word-tab-common NPC-word-tab-word"
@@ -504,6 +536,8 @@
                                     data.unified_attrib && data.unified_attrib.font_size
                                       ? data.unified_attrib.font_size
                                       : '',
+                                  fontFamily:
+                                    data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
                                 }"
                                 v-html="convertText(sanitizeHTML(sItem.new_word))"
                               ></p>
@@ -634,6 +668,33 @@
                             }}
                           </span>
                         </div>
+                        <template v-for="(itemC, indexC) in data.addCol">
+                          <div v-if="sItem[itemC.key] && showObj[itemC.key]" :key="indexC">
+                            <span class="collocation"
+                              ><span>{{ convertText(itemC.label + '：') }}</span>
+                              <div>
+                                <b
+                                  v-html="convertText(sanitizeHTML(sItem[itemC.key]))"
+                                  :style="{
+                                    fontSize:
+                                      data.unified_attrib && data.unified_attrib.font_size
+                                        ? data.unified_attrib.font_size
+                                        : '',
+                                  }"
+                                ></b>
+                              </div>
+                            </span>
+                            <span v-if="showLang" class="">
+                              {{
+                                multilingualTextList[getLang()] &&
+                                multilingualTextList[getLang()][index] &&
+                                multilingualTextList[getLang()][index][5 + indexC]
+                                  ? multilingualTextList[getLang()][index][5 + indexC]
+                                  : ''
+                              }}
+                            </span>
+                          </div>
+                        </template>
                       </div>
                       <div class="right-box">
                         <span>
@@ -750,10 +811,11 @@
                       >
                         <div class="NPC-word-tab-box">
                           <span
-                            v-if="data.property.pinyin_position == 'top' && showObj.pinyin"
+                            v-if="data.property.pinyin_position == 'top' && showObj.pinyin && colHasContent[0]"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.pinyin_size
                                   ? data.unified_attrib.pinyin_size
@@ -766,21 +828,25 @@
                           <span
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.font_size
                                   ? data.unified_attrib.font_size
                                   : '',
+                              fontFamily:
+                                data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
                             }"
-                            v-if="showObj.newWord"
+                            v-if="showObj.newWord && colHasContent[1]"
                             class="NPC-word-tab-common NPC-word-tab-word"
                             v-html="convertText(sanitizeHTML(sItem.new_word))"
                           >
                           </span>
                           <span
-                            v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin"
+                            v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin && colHasContent[0]"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.pinyin_size
                                   ? data.unified_attrib.pinyin_size
@@ -795,15 +861,25 @@
                               multilingualTextList[getLang()] &&
                               multilingualTextList[getLang()][index] &&
                               multilingualTextList[getLang()][index][0] &&
-                              showObj.newWord
+                              showObj.newWord &&
+                              colHasContent[1]
                             "
                             class="NPC-word-tab-common"
-                            :style="{ width: data.col_width[0].value + 'px' }"
+                            :style="{
+                              width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
+                            }"
                           >
                             {{ multilingualTextList[getLang()][index][0] }}
                           </span>
                         </div>
-                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
+                        <span
+                          :style="{
+                            width: data.col_width[2].value + 'px',
+                            flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.cixing && colHasContent[2]"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -827,7 +903,13 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
+                        <span
+                          :style="{
+                            width: data.col_width[3].value + 'px',
+                            flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.shiyi && colHasContent[3]"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -855,11 +937,13 @@
                         <span
                           v-if="
                             (!data.property.pinyin_position || data.property.pinyin_position == 'front') &&
-                            showObj.pinyin
+                            showObj.pinyin &&
+                            colHasContent[0]
                           "
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
+                            flex: !data.col_width[1].value || data.col_width[1].value === '0' ? '1' : '',
                             fontSize:
                               data.unified_attrib && data.unified_attrib.pinyin_size
                                 ? data.unified_attrib.pinyin_size
@@ -875,8 +959,9 @@
                         <span
                           :style="{
                             width: data.col_width[0].value + 'px',
+                            flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
                           }"
-                          v-if="showObj.newWord"
+                          v-if="showObj.newWord && colHasContent[1]"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-word"
@@ -885,6 +970,8 @@
                                 data.unified_attrib && data.unified_attrib.font_size
                                   ? data.unified_attrib.font_size
                                   : '',
+                              fontFamily:
+                                data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
                             }"
                             v-html="convertText(sanitizeHTML(sItem.new_word))"
                           ></p>
@@ -896,16 +983,20 @@
                               multilingualTextList[getLang()][index][0]
                             "
                             class="NPC-word-tab-common"
-                            :style="{ width: data.col_width[0].value + 'px' }"
+                            :style="{
+                              width: data.col_width[0].value + 'px',
+                              flex: !data.col_width[0].value || data.col_width[0].value === '0' ? '1' : '',
+                            }"
                           >
                             {{ multilingualTextList[getLang()][index][0] }}
                           </span>
                         </span>
                         <span
-                          v-if="data.property.pinyin_position == 'back' && showObj.pinyin"
+                          v-if="data.property.pinyin_position == 'back' && showObj.pinyin && colHasContent[0]"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
+                            flex: !data.col_width[1].value ? '1' || data.col_width[1].value === '0' : '',
                             fontSize:
                               data.unified_attrib && data.unified_attrib.pinyin_size
                                 ? data.unified_attrib.pinyin_size
@@ -918,7 +1009,13 @@
                           v-html="sItem.pinyin"
                         >
                         </span>
-                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
+                        <span
+                          :style="{
+                            width: data.col_width[2].value + 'px',
+                            flex: !data.col_width[2].value || data.col_width[2].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.cixing && colHasContent[2]"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -943,7 +1040,13 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
+                        <span
+                          :style="{
+                            width: data.col_width[3].value + 'px',
+                            flex: !data.col_width[3].value || data.col_width[3].value === '0' ? '1' : '',
+                          }"
+                          v-if="showObj.shiyi && colHasContent[3]"
+                        >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -988,10 +1091,13 @@
                       </div>
 
                       <div
-                        v-if="sItem.collocation && showObj.collocation"
-                        :style="{ width: data.col_width[4].value + 'px' }"
+                        v-if="showObj.collocation && colHasContent[4]"
+                        :style="{
+                          width: data.col_width[4].value + 'px',
+                          flex: !data.col_width[4].value || data.col_width[4].value === '0' ? '1' : '',
+                        }"
                       >
-                        <span class="collocation"
+                        <span class="collocation" v-if="sItem.collocation"
                           ><span>{{ convertText('搭配：') }}</span
                           ><b
                             v-html="convertText(sanitizeHTML(sItem.collocation))"
@@ -1013,8 +1119,14 @@
                           }}
                         </span>
                       </div>
-                      <div v-if="sItem.liju_list && showObj.liju" :style="{ width: data.col_width[5].value + 'px' }">
-                        <span class="collocation"
+                      <div
+                        v-if="showObj.liju && colHasContent[5]"
+                        :style="{
+                          width: data.col_width[5].value + 'px',
+                          flex: !data.col_width[5].value || data.col_width[5].value === '0' ? '1' : '',
+                        }"
+                      >
+                        <span class="collocation" v-if="sItem.liju_list"
                           ><span>{{ convertText('例句：') }}</span>
                           <div>
                             <b
@@ -1038,6 +1150,41 @@
                           }}
                         </span>
                       </div>
+                      <template v-for="(itemC, indexC) in data.addCol">
+                        <div
+                          :key="indexC"
+                          v-if="showObj[itemC.key] && colHasContent[6 + indexC]"
+                          :style="{
+                            width: data.col_width[6 + indexC].value + 'px',
+                            flex:
+                              !data.col_width[6 + indexC].value || data.col_width[6 + indexC].value === '0' ? '1' : '',
+                          }"
+                        >
+                          <span class="collocation" v-if="sItem[itemC.key]"
+                            ><span>{{ convertText(itemC.label + '：') }}</span>
+                            <div>
+                              <b
+                                v-html="convertText(sanitizeHTML(sItem[itemC.key]))"
+                                :style="{
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                }"
+                              ></b>
+                            </div>
+                          </span>
+                          <span v-if="showLang" class="">
+                            {{
+                              multilingualTextList[getLang()] &&
+                              multilingualTextList[getLang()][index] &&
+                              multilingualTextList[getLang()][index][5 + indexC]
+                                ? multilingualTextList[getLang()][index][5 + indexC]
+                                : ''
+                            }}
+                          </span>
+                        </div>
+                      </template>
                     </template>
                   </div>
                 </li>
@@ -1292,6 +1439,12 @@
                         <label class="card-label">{{ convertText('例句：') }}</label>
                         <p v-html="convertText(sanitizeHTML(item.liju_list))"></p>
                       </div>
+                      <template v-for="(itemC, indexC) in data.addCol">
+                        <div v-if="item[itemC.key]" :key="indexC">
+                          <label class="card-label">{{ convertText(itemC.label + '：') }}</label>
+                          <p v-html="convertText(sanitizeHTML(item[itemC.key]))"></p>
+                        </div>
+                      </template>
                     </div>
                     <a class="overturn-btn" @click="changeShowLeft(item)"><i class="el-icon-refresh"></i></a>
                   </div>
@@ -1451,6 +1604,7 @@ export default {
         collocation: true,
         liju: true,
       },
+      colHasContent: [],
     };
   },
   computed: {
@@ -1516,11 +1670,23 @@ export default {
         this.$emit('handleHeightChange', this.id, newVal ? this.dataHeight : height);
       });
     },
+    width: {
+      handler(val) {
+        if (val) {
+          // 如果有宽度为0且有内容的列，则行宽最小为撑满
+          if (this.rowWidth < this.width - 48) {
+            this.rowWidth = this.width - 48;
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   mounted() {
     this.$nextTick(() => {
       let totalWidth = document.querySelector('.newWord-preview').offsetWidth;
-      this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0)}px`;
+      this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0)}`;
     });
 
     this.dataHeight = this.$refs.previewContainer.style.height;
@@ -1537,13 +1703,17 @@ export default {
           if (index < 2) {
             this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
           } else {
-            this.rowWidth += Number(item.value);
+            this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
           }
         } else {
-          this.rowWidth += Number(item.value);
+          this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
         }
       });
       this.rowWidth += 132;
+      // 如果有宽度为0且有内容的列，则行宽最小为撑满
+      if (this.rowWidth < this.width - 48) {
+        this.rowWidth = this.width - 48;
+      }
     },
     palyAudio(url, sIndex) {
       this.stopAudio();
@@ -1648,6 +1818,41 @@ export default {
     initData() {
       this.hasVoice = false;
       this.rowWidth = 0;
+      this.colHasContent = [];
+      this.showObj = {
+        pinyin: true,
+        newWord: true,
+        cixing: true,
+        shiyi: true,
+        collocation: true,
+        liju: true,
+      };
+      if (this.data.addCol) {
+        this.data.addCol.forEach((item) => {
+          this.$set(this.showObj, item.key, true);
+        });
+      }
+      // 判断每列是否有内容
+      let pinyin_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.pinyin}`, '');
+      let new_word_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.new_word}`, '');
+      let cixing_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.cixing}`, '');
+      let def_str_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.def_str}`, '');
+      let collocation_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.collocation}`, '');
+      let liju_list_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss.liju_list}`, '');
+      this.colHasContent = [
+        pinyin_col ? true : false,
+        new_word_col ? true : false,
+        cixing_col ? true : false,
+        def_str_col ? true : false,
+        collocation_col ? true : false,
+        liju_list_col ? true : false,
+      ];
+      if (this.data.addCol) {
+        this.data.addCol.forEach((item) => {
+          let str_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss[item.key]}`, '');
+          this.colHasContent.push(str_col ? true : false);
+        });
+      }
       this.data.col_width.forEach((item, index) => {
         if (
           this.data.property.pinyin_position &&
@@ -1656,13 +1861,14 @@ export default {
           if (index < 2) {
             this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
           } else {
-            this.rowWidth += Number(item.value);
+            this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
           }
         } else {
-          this.rowWidth += Number(item.value);
+          this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
         }
       });
       this.rowWidth += 132;
+
       this.is_change = true;
       setTimeout(() => {
         this.is_change = false;
@@ -1726,6 +1932,7 @@ export default {
       });
       this.optionRes = JSON.parse(JSON.stringify(optionRes));
       this.$set(this.data, 'option_list', option_list);
+
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = Bookanswer;
       }

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -148,9 +148,9 @@
           data.property.fun_type !== 'show' ||
           (data.property.fun_type === 'show' && isEnable(data.property.is_enable_voice_answer))
         "
-        :is-show-answer="isShowAnswers"
         @showAnswerAnalysis="showAnswerAnalysis"
         @retry="retry"
+        :isShowAnswer="isShowAnswers"
       />
       <AnswerCorrect
         :answer-correct="data?.answer_correct"
@@ -806,7 +806,8 @@ export default {
   .option-content {
     padding: 5px 15px;
     color: #706f78;
-    background-color: $content-color;
+
+    // background-color: $content-color;
     border: 1px solid $content-color;
     border-radius: 4px;