课文向后兼容三个标点

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

@@ -1353,6 +1353,266 @@
                               }}</span
                             >
                           </span>
+                          <span
+                            v-if="
+                              item.wordsList[pIndex + 2] &&
+                              item.wordsList[pIndex + 2].chs &&
+                              (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
+                                NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1) &&
+                              item.wordsList[pIndex + 3] &&
+                              item.wordsList[pIndex + 3].chs &&
+                              (chsFhList.indexOf(item.wordsList[pIndex + 3].chs) > -1 ||
+                                NumberList.indexOf(item.wordsList[pIndex + 3].chs) > -1)
+                            "
+                            class="NNPE-words-box"
+                          >
+                            <span
+                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              @click.stop="
+                                viewNotes(
+                                  $event,
+                                  item.wordsList[pIndex + 3].pinyin,
+                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
+                                  pItem.articleSentIndex,
+                                  pItem,
+                                )
+                              "
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                            <el-tooltip
+                              v-if="item.wordsList[pIndex + 3].matchNotesObj.con"
+                              popper-class="article-bubble"
+                              effect="light"
+                              placement="bottom-start"
+                            >
+                              <div
+                                slot="content"
+                                :style="{
+                                  color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '',
+                                }"
+                                v-html="item.wordsList[pIndex + 3].matchNotesObj.con"
+                              ></div>
+                              <span
+                                class="NNPE-chs"
+                                style="text-align: left"
+                                :class="[
+                                  item.timeList &&
+                                  item.timeList[pItem.sentIndex] &&
+                                  curTime >= item.timeList[pItem.sentIndex].bg &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed &&
+                                  curTime
+                                    ? 'active'
+                                    : '',
+                                  pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
+                                  pItem.chstimeList &&
+                                  pItem.chstimeList[pItem.leg - 1] &&
+                                  curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                  curQue.wordTime &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed
+                                    ? 'wordActive'
+                                    : '',
+                                ]"
+                                :style="{
+                                  fontFamily: item.wordsList[pIndex + 3].config.fontFamily,
+                                  textDecoration: item.wordsList[pIndex + 3].config.textDecoration,
+                                  borderBottom:
+                                    item.wordsList[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                                  fontWeight: item.wordsList[pIndex + 3].config.fontWeight,
+                                  height:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  lineHeight:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  width: item.wordsList[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                                  backgroundColor:
+                                    item.timeList &&
+                                    item.timeList[pItem.sentIndex] &&
+                                    curTime >= item.timeList[pItem.sentIndex].bg &&
+                                    curTime <= item.timeList[pItem.sentIndex].ed &&
+                                    curTime &&
+                                    attrib
+                                      ? attrib.assist_color
+                                      : '',
+                                  color:
+                                    pItem.chstimeList &&
+                                    pItem.chstimeList[pItem.leg - 1] &&
+                                    curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                    curQue.wordTime &&
+                                    curTime <= item.timeList[pItem.sentIndex].ed &&
+                                    attrib
+                                      ? attrib.topic_color
+                                      : item.wordsList[pIndex + 3].matchNotesObj.con &&
+                                          item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                        ? item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                        : item.wordsList[pIndex + 3].config.color,
+                                }"
+                                @click.stop="
+                                  viewNotes(
+                                    $event,
+                                    item.wordsList[pIndex + 3].chs,
+                                    item.timeList &&
+                                      item.timeList[pItem.sentIndex] &&
+                                      item.timeList[pItem.sentIndex].bg,
+                                    item.timeList &&
+                                      item.timeList[pItem.sentIndex] &&
+                                      item.timeList[pItem.sentIndex].ed,
+                                    pItem.articleSentIndex,
+                                    pItem,
+                                  )
+                                "
+                                ><span>{{ convertText(item.wordsList[pIndex + 3].chs) }}</span
+                                ><img
+                                  v-if="
+                                    item.wordsList[pIndex + 3].img &&
+                                    item.wordsList[pIndex + 3].img.length > 0 &&
+                                    item.wordsList[pIndex + 3].imgPosition === 'after'
+                                  "
+                                  :src="item.wordsList[pIndex + 3].img[0].file_url"
+                                  :style="{
+                                    height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  }"
+                              /></span>
+                            </el-tooltip>
+                            <template v-else>
+                              <span
+                                class="NNPE-chs"
+                                style="text-align: left"
+                                :class="[
+                                  item.timeList &&
+                                  item.timeList[pItem.sentIndex] &&
+                                  curTime >= item.timeList[pItem.sentIndex].bg &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed &&
+                                  curTime
+                                    ? 'active'
+                                    : '',
+                                  pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
+                                  pItem.chstimeList &&
+                                  pItem.chstimeList[pItem.leg - 1] &&
+                                  curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                  curQue.wordTime &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed
+                                    ? 'wordActive'
+                                    : '',
+                                ]"
+                                :style="{
+                                  fontFamily: item.wordsList[pIndex + 3].config.fontFamily,
+                                  textDecoration: item.wordsList[pIndex + 3].config.textDecoration,
+                                  borderBottom:
+                                    item.wordsList[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                                  fontWeight: item.wordsList[pIndex + 3].config.fontWeight,
+                                  height:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  lineHeight:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  width: item.wordsList[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                                  backgroundColor:
+                                    item.timeList &&
+                                    item.timeList[pItem.sentIndex] &&
+                                    curTime >= item.timeList[pItem.sentIndex].bg &&
+                                    curTime <= item.timeList[pItem.sentIndex].ed &&
+                                    curTime &&
+                                    attrib
+                                      ? attrib.assist_color
+                                      : '',
+                                  color:
+                                    pItem.chstimeList &&
+                                    pItem.chstimeList[pItem.leg - 1] &&
+                                    curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                    curQue.wordTime &&
+                                    curTime <= item.timeList[pItem.sentIndex].ed &&
+                                    attrib
+                                      ? attrib.topic_color
+                                      : item.wordsList[pIndex + 3].matchNotesObj.con &&
+                                          item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                        ? item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                        : item.wordsList[pIndex + 3].config.color,
+                                }"
+                                @click.stop="
+                                  viewNotes(
+                                    $event,
+                                    item.wordsList[pIndex + 3].chs,
+                                    item.timeList &&
+                                      item.timeList[pItem.sentIndex] &&
+                                      item.timeList[pItem.sentIndex].bg,
+                                    item.timeList &&
+                                      item.timeList[pItem.sentIndex] &&
+                                      item.timeList[pItem.sentIndex].ed,
+                                    pItem.articleSentIndex,
+                                    pItem,
+                                  )
+                                "
+                                ><span>{{ convertText(item.wordsList[pIndex + 3].chs) }}</span
+                                ><img
+                                  v-if="
+                                    item.wordsList[pIndex + 3].img &&
+                                    item.wordsList[pIndex + 3].img.length > 0 &&
+                                    item.wordsList[pIndex + 3].imgPosition === 'after'
+                                  "
+                                  :src="item.wordsList[pIndex + 3].img[0].file_url"
+                                  :style="{
+                                    height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  }"
+                              /></span>
+                            </template>
+
+                            <span
+                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              @click.stop="
+                                viewNotes(
+                                  $event,
+                                  item.wordsList[pIndex + 3].pinyin,
+                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                                  item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
+                                  pItem.articleSentIndex,
+                                  pItem,
+                                )
+                              "
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                          </span>
                         </template>
                         <template v-else>
                           <span class="NNPE-words-box">

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

@@ -943,6 +943,179 @@
                               }}</span
                             >
                           </span>
+                          <span
+                            v-if="
+                              item.wordsList[pIndex + 2] &&
+                              item.wordsList[pIndex + 2].chs &&
+                              (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
+                                NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1) &&
+                              item.wordsList[pIndex + 3] &&
+                              item.wordsList[pIndex + 3].chs &&
+                              (chsFhList.indexOf(item.wordsList[pIndex + 3].chs) > -1 ||
+                                NumberList.indexOf(item.wordsList[pIndex + 3].chs) > -1)
+                            "
+                            class="NNPE-words-box"
+                          >
+                            <span
+                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              @click.stop="
+                                viewNotes($event, item.wordsList[pIndex + 3].pinyin, '', item.wordsList[pIndex + 3])
+                              "
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                            <el-tooltip
+                              v-if="item.wordsList[pIndex + 3].matchNotesObj.con"
+                              popper-class="article-bubble"
+                              effect="light"
+                              placement="bottom-start"
+                            >
+                              <div
+                                slot="content"
+                                :style="{
+                                  color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '',
+                                }"
+                                v-html="item.wordsList[pIndex + 3].matchNotesObj.con"
+                              ></div>
+                              <span
+                                class="NNPE-chs"
+                                style="text-align: left"
+                                :style="{
+                                  fontFamily: item.wordsList[pIndex + 3].config.fontFamily,
+                                  textDecoration: item.wordsList[pIndex + 3].config.textDecoration,
+                                  borderBottom:
+                                    item.wordsList[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                                  fontWeight: item.wordsList[pIndex + 3].config.fontWeight,
+                                  color:
+                                    item.wordsList[pIndex + 3].matchNotesObj.con &&
+                                    item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                      ? item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                      : item.wordsList[pIndex + 3].config.color,
+                                  height:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  lineHeight:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  width: item.wordsList[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                                }"
+                                @click.stop="
+                                  viewNotes(
+                                    $event,
+                                    item.wordsList[pIndex + 3].words
+                                      ? item.wordsList[pIndex + 3].words
+                                      : item.wordsList[pIndex + 3].chs,
+                                    '',
+                                    item.wordsList[pIndex + 3],
+                                  )
+                                "
+                                >{{ convertText(item.wordsList[pIndex + 3].chs)
+                                }}<img
+                                  v-if="
+                                    item.wordsList[pIndex + 3].img &&
+                                    item.wordsList[pIndex + 3].img.length > 0 &&
+                                    item.wordsList[pIndex + 3].imgPosition === 'after'
+                                  "
+                                  :src="item.wordsList[pIndex + 3].img[0].file_url"
+                                  :style="{
+                                    height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  }"
+                              /></span>
+                            </el-tooltip>
+                            <template v-else>
+                              <span
+                                class="NNPE-chs"
+                                style="text-align: left"
+                                :style="{
+                                  fontFamily: item.wordsList[pIndex + 3].config.fontFamily,
+                                  textDecoration: item.wordsList[pIndex + 3].config.textDecoration,
+                                  borderBottom:
+                                    item.wordsList[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                                  fontWeight: item.wordsList[pIndex + 3].config.fontWeight,
+                                  color:
+                                    item.wordsList[pIndex + 3].matchNotesObj.con &&
+                                    item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                      ? item.wordsList[pIndex + 3].matchNotesObj.notesColor
+                                      : item.wordsList[pIndex + 3].config.color,
+                                  height:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+                                  fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  lineHeight:
+                                    attrib && attrib.font_size
+                                      ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
+                                      : '28px',
+
+                                  width: item.wordsList[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                                }"
+                                @click.stop="
+                                  viewNotes(
+                                    $event,
+                                    item.wordsList[pIndex + 3].words
+                                      ? item.wordsList[pIndex + 3].words
+                                      : item.wordsList[pIndex + 3].chs,
+                                    '',
+                                    item.wordsList[pIndex + 3],
+                                  )
+                                "
+                                >{{ convertText(item.wordsList[pIndex + 3].chs)
+                                }}<img
+                                  v-if="
+                                    item.wordsList[pIndex + 3].img &&
+                                    item.wordsList[pIndex + 3].img.length > 0 &&
+                                    item.wordsList[pIndex + 3].imgPosition === 'after'
+                                  "
+                                  :src="item.wordsList[pIndex + 3].img[0].file_url"
+                                  :style="{
+                                    height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                  }"
+                              /></span>
+                            </template>
+
+                            <span
+                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              @click.stop="
+                                viewNotes($event, item.wordsList[pIndex + 3].pinyin, '', item.wordsList[pIndex + 3])
+                              "
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                          </span>
                         </template>
                         <template v-else>
                           <span class="NNPE-words-box">

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -624,6 +624,119 @@
                           >
                         </template>
                       </span>
+                      <span
+                        v-if="
+                          item.sentArr[pIndex + 2] &&
+                          item.sentArr[pIndex + 2].chs &&
+                          chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1 &&
+                          item.sentArr[pIndex + 3] &&
+                          item.sentArr[pIndex + 3].chs &&
+                          chsFhList.indexOf(item.sentArr[pIndex + 3].chs) > -1
+                        "
+                        class="NNPE-words-box"
+                      >
+                        <template v-if="curQue.property.pinyin_position == 'top'">
+                          <span
+                            v-if="config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              sentIndex == index ? 'wordBlank' : '',
+                              noFont.indexOf(item.sentArr[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                            ]"
+                            style="text-align: left"
+                            :style="{
+                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                              height:
+                                attrib && attrib.pinyin_size
+                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                  : '22px',
+                            }"
+                            >{{
+                              NumberList.indexOf(item.sentArr[pIndex + 3].pinyin) == -1
+                                ? item.sentArr[pIndex + 3].pinyin
+                                : ''
+                            }}</span
+                          >
+                        </template>
+                        <span
+                          class="NNPE-chs"
+                          style="text-align: left"
+                          :class="[sentIndex == index ? 'wordBlank' : '']"
+                        >
+                          <span
+                            :class="[
+                              pItem.timeList[pItem.leg - 1] &&
+                              curQue.wordTime &&
+                              curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                              curTime <= curQue.wordTime[index].ed
+                                ? 'active'
+                                : '',
+                              sentIndex == index ? 'wordBlank' : '',
+                            ]"
+                            :style="{
+                              fontFamily: item.sentArr[pIndex + 3].config.fontFamily,
+                              textDecoration: item.sentArr[pIndex + 3].config.textDecoration,
+                              borderBottom: item.sentArr[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                              fontWeight: item.sentArr[pIndex + 3].config.fontWeight,
+                              height:
+                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
+                              fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                              lineHeight:
+                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
+                              display: 'inline-block',
+                              width: item.sentArr[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                              color:
+                                pItem.timeList[pItem.leg - 1] &&
+                                curQue.wordTime &&
+                                curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                curTime <= curQue.wordTime[index].ed &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : item.sentArr[pIndex + 3].config.color,
+                            }"
+                          >
+                            {{
+                              NumberList.indexOf(item.sentArr[pIndex + 3].pinyin) == -1
+                                ? convertText(item.sentArr[pIndex + 3].chs)
+                                : ''
+                            }}</span
+                          >
+                          <img
+                            v-if="
+                              item.sentArr[pIndex + 3].img &&
+                              item.sentArr[pIndex + 3].img.length > 0 &&
+                              item.sentArr[pIndex + 3].imgPosition === 'after'
+                            "
+                            :src="item.sentArr[pIndex + 3].img[0].file_url"
+                            :style="{
+                              height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                            }"
+                          />
+                        </span>
+                        <template v-if="curQue.property.pinyin_position == 'bottom'">
+                          <span
+                            v-if="config.isShowPY"
+                            :class="[
+                              'NNPE-pinyin',
+                              sentIndex == index ? 'wordBlank' : '',
+                              noFont.indexOf(item.sentArr[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                            ]"
+                            style="text-align: left"
+                            :style="{
+                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                              height:
+                                attrib && attrib.pinyin_size
+                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                  : '22px',
+                            }"
+                            >{{
+                              NumberList.indexOf(item.sentArr[pIndex + 3].pinyin) == -1
+                                ? item.sentArr[pIndex + 3].pinyin
+                                : ''
+                            }}</span
+                          >
+                        </template>
+                      </span>
                     </template>
                     <template v-else>
                       <span class="NNPE-words-box">

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -109,7 +109,7 @@
                               : '',
                           textDecoration:
                             item[pIndex - 2].config && item[pIndex - 2].config.textDecoration
-                              ? item[pIndex + 2].config.textDecoration
+                              ? item[pIndex - 2].config.textDecoration
                               : '',
                           borderBottom:
                             item[pIndex - 2].config && item[pIndex - 2].config.border === 'dotted' ? '1px dotted' : '',
@@ -551,6 +551,115 @@
                         >
                       </template>
                     </span>
+                    <span
+                      v-if="
+                        item[pIndex + 2] &&
+                        item[pIndex + 2].chs &&
+                        chsFhList.indexOf(item[pIndex + 2].chs) > -1 &&
+                        item[pIndex + 3] &&
+                        item[pIndex + 3].chs &&
+                        chsFhList.indexOf(item[pIndex + 3].chs) > -1
+                      "
+                      class="NNPE-words-box"
+                    >
+                      <template v-if="curQue.property.pinyin_position == 'top'">
+                        <span
+                          v-if="config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                            bgIndex == 1 ? 'font-white' : '',
+                          ]"
+                          :style="{
+                            fontSize: pySize + 'px',
+                            textAlign: left,
+                            height: pySize * 1.25 + 'px',
+                          }"
+                          >{{ NumberList.indexOf(item[pIndex + 3].pinyin) == -1 ? item[pIndex + 3].pinyin : '' }}</span
+                        >
+                      </template>
+                      <span
+                        :class="['NNPE-chs', curQue.property.pinyin_position == 'top' ? 'bottom' : '']"
+                        :style="{
+                          fontSize: hzSize + 'px',
+                          textAlign: left,
+                          height: hzSize * 1.17 + 'px',
+                        }"
+                      >
+                        <span
+                          :class="[
+                            pItem.timeList[pItem.leg - 1] &&
+                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                            curQue.wordTime &&
+                            curQue.wordTime[curSentIndex] &&
+                            curTime <= curQue.wordTime[curSentIndex].ed
+                              ? bgIndex == 0
+                                ? 'active'
+                                : 'active-yellow'
+                              : '',
+                            bgIndex == 1 ? 'font-white' : '',
+                            newWordList.indexOf(item[pIndex + 3].chs) > -1 && !isPlaying ? 'newActive' : '',
+                            item[pIndex + 3].words && !isPlaying ? 'newActive' : '',
+                          ]"
+                          :style="{
+                            fontSize: hzSize + 'px',
+                            fontFamily:
+                              item[pIndex + 3].config && item[pIndex + 3].config.fontFamily
+                                ? item[pIndex + 3].config.fontFamily
+                                : '',
+                            textDecoration:
+                              item[pIndex + 3].config && item[pIndex + 3].config.textDecoration
+                                ? item[pIndex + 3].config.textDecoration
+                                : '',
+                            borderBottom:
+                              item[pIndex + 3].config && item[pIndex + 3].config.border === 'dotted'
+                                ? '1px dotted'
+                                : '',
+                            fontWeight:
+                              item[pIndex + 3].config && item[pIndex + 3].config.fontWeight
+                                ? item[pIndex + 3].config.fontWeight
+                                : '',
+                            color:
+                              item[pIndex + 3].config && item[pIndex + 3].config.color
+                                ? item[pIndex + 3].config.color
+                                : '',
+                            height: hzSize * 1.17 + 'px',
+                            display: 'inline-block',
+                            width: item[pIndex + 3].chs.trim() === '' ? '10px' : '',
+                          }"
+                          >{{ convertText(item[pIndex + 3].chs) }}</span
+                        >
+                        <img
+                          v-if="
+                            item[pIndex + 3].img &&
+                            item[pIndex + 3].img.length > 0 &&
+                            item[pIndex + 3].imgPosition === 'after'
+                          "
+                          :src="item[pIndex + 3].img[0].file_url"
+                          :style="{
+                            width: hzSize + 'px',
+                            height: hzSize + 'px',
+                          }"
+                        />
+                      </span>
+                      <template v-if="curQue.property.pinyin_position == 'bottom'">
+                        <span
+                          v-if="config.isShowPY"
+                          :class="[
+                            'NNPE-pinyin',
+                            noFont.indexOf(item[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                            bgIndex == 1 ? 'font-white' : '',
+                            'bottom',
+                          ]"
+                          :style="{
+                            fontSize: pySize + 'px',
+                            textAlign: left,
+                            height: pySize * 1.25 + 'px',
+                          }"
+                          >{{ NumberList.indexOf(item[pIndex + 3].pinyin) == -1 ? item[pIndex + 3].pinyin : '' }}</span
+                        >
+                      </template>
+                    </span>
                   </template>
                   <template v-else>
                     <span class="NNPE-words-box">

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

@@ -590,6 +590,116 @@
                               }}</span
                             >
                           </span>
+                          <span
+                            v-if="
+                              item.wordsList[pIndex + 2] &&
+                              item.wordsList[pIndex + 2].chs &&
+                              chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 &&
+                              item.wordsList[pIndex + 3] &&
+                              item.wordsList[pIndex + 3].chs &&
+                              chsFhList.indexOf(item.wordsList[pIndex + 3].chs) > -1
+                            "
+                            class="NNPE-words-box"
+                            @click="showWordDetail($event, item.wordsList[pIndex + 3])"
+                          >
+                            <span
+                              v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                            <span
+                              class="NNPE-chs"
+                              style="text-align: left"
+                              :class="[
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime
+                                  ? 'active'
+                                  : '',
+                                pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
+                                pItem.chstimeList &&
+                                pItem.chstimeList[pItem.leg - 1] &&
+                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                curQue.wordTime &&
+                                curTime <= item.timeList[pItem.sentIndex].ed
+                                  ? 'wordActive'
+                                  : '',
+                              ]"
+                              :style="{
+                                fontFamily: item.wordsList[pIndex + 3].config.fontFamily,
+                                textDecoration: item.wordsList[pIndex + 3].config.textDecoration,
+                                borderBottom: item.wordsList[pIndex + 3].config.border === 'dotted' ? '1px dotted' : '',
+                                fontWeight: item.wordsList[pIndex + 3].config.fontWeight,
+                                color: item.wordsList[pIndex + 3].config.color,
+                                height:
+                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
+                                fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                lineHeight:
+                                  attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
+                                backgroundColor:
+                                  item.timeList &&
+                                  item.timeList[pItem.sentIndex] &&
+                                  curTime >= item.timeList[pItem.sentIndex].bg &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed &&
+                                  curTime &&
+                                  attrib
+                                    ? attrib.assist_color
+                                    : '',
+                                width: item.wordsList[pIndex + 3].chs.trim() === '' ? '6px' : '',
+                              }"
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? convertText(item.wordsList[pIndex + 3].chs)
+                                  : ''
+                              }}<img
+                                v-if="
+                                  item.wordsList[pIndex + 3].img &&
+                                  item.wordsList[pIndex + 3].img.length > 0 &&
+                                  item.wordsList[pIndex + 3].imgPosition === 'after'
+                                "
+                                :src="item.wordsList[pIndex + 3].img[0].file_url"
+                                :style="{
+                                  height: attrib && attrib.font_size ? attrib.font_size : '20px',
+                                }"
+                            /></span>
+                            <span
+                              v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
+                              :class="[
+                                'NNPE-pinyin',
+                                noFont.indexOf(item.wordsList[pIndex + 3].pinyin) > -1 ? 'noFont' : '',
+                              ]"
+                              style="text-align: left"
+                              :style="{
+                                fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
+                                height:
+                                  attrib && attrib.pinyin_size
+                                    ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
+                                    : '22px',
+                              }"
+                              >{{
+                                NumberList.indexOf(item.wordsList[pIndex + 3].pinyin) == -1
+                                  ? item.wordsList[pIndex + 3].pinyin
+                                  : ''
+                              }}</span
+                            >
+                          </span>
                         </template>
                         <template v-else>
                           <span class="NNPE-words-box" @click="showWordDetail($event, pItem)">