Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/components/CommonPreview.vue

@@ -143,7 +143,7 @@
           <div v-if="curToolbarIcon === 'search'" class="resource_box">
             <h5>{{ drawerTitle }}</h5>
             <div style="height: 40px"></div>
-            <el-row :gutter="10" style="margin: 5px -5px">
+            <el-row :gutter="10" style="margin: 5px">
               <el-col :span="16">
                 <el-input v-model="searchContent" placeholder="请输入文本内容" clearable />
               </el-col>

src/components/RichText.vue

@@ -103,11 +103,11 @@ export default {
     },
     fontSize: {
       type: String,
-      default: '12pt',
+      default: '14pt',
     },
     fontFamily: {
       type: String,
-      default: 'Arial',
+      default: '宋体',
     },
     isHasSpace: {
       type: Boolean,

src/views/book/courseware/create/components/question/character/Character.vue

@@ -22,6 +22,8 @@
               @blur="handleMindMap"
             />
             <el-button @click="identify(item, index)">识别</el-button>
+            <SoundRecord v-if="item.audio_file_id" :wav-blob.sync="item.audio_file_id" />
+            <el-button v-else @click="handleMatic(item.content, index)">生成音频</el-button>
             <el-button @click="handleDelete(index)">删除此条</el-button>
           </div>
           <div class="option-item">
@@ -97,10 +99,11 @@ import { getCharacterData, modelList, getOption } from '@/views/book/courseware/
 import { GetStaticResources, TextToAudioFile } from '@/api/app';
 import cnchar from 'cnchar';
 import UploadFile from '../../base/common/UploadFile.vue';
+import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
 
 export default {
   name: 'CharacterPage',
-  components: { UploadFile },
+  components: { UploadFile, SoundRecord },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -162,6 +165,8 @@ export default {
     handleMatic(con, index) {
       TextToAudioFile({
         text: con.replace(/<[^>]+>/g, ''),
+        voice_type: this.data.property.voice_type,
+        emotion: this.data.property.emotion,
       })
         .then(({ status, file_id, file_url }) => {
           if (status === 1) {

src/views/book/courseware/create/components/question/character/CharacterSetting.vue

@@ -63,6 +63,23 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <template v-if="property.is_enable_voice === 'true'">
+        <el-form-item label="音色">
+          <el-select v-model="property.voice_type" placeholder="请选择">
+            <el-option
+              v-for="{ voice_type, name } in voice_type_list"
+              :key="voice_type"
+              :label="name"
+              :value="voice_type"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风格情感">
+          <el-select v-model="property.emotion">
+            <el-option v-for="{ emotion, name } in emotion_list" :key="emotion" :label="name" :value="emotion" />
+          </el-select>
+        </el-form-item>
+      </template>
     </el-form>
   </div>
 </template>
@@ -78,6 +95,7 @@ import {
   isEnable,
   frameList,
 } from '@/views/book/courseware/data/character';
+import { GetTextToAudioConfParamList } from '@/api/app';
 
 export default {
   name: 'CharacterSetting',
@@ -90,9 +108,26 @@ export default {
       funList,
       showList,
       frameList,
+      voice_type_list: [],
+      emotion_list: [],
     };
   },
-  methods: {},
+  methods: {
+    // 得到文本转音频的配置参数列表
+    getTextToAudioConfParamList() {
+      GetTextToAudioConfParamList()
+        .then(({ status, voice_type_list, emotion_list }) => {
+          if (status === 1) {
+            this.voice_type_list = voice_type_list;
+            this.emotion_list = emotion_list;
+          }
+        })
+        .catch(() => {});
+    },
+  },
+  created() {
+    this.getTextToAudioConfParamList();
+  },
 };
 </script>
 

src/views/book/courseware/create/components/question/fill/components/SoundRecord.vue

@@ -60,7 +60,13 @@ export default {
     wavBlob: {
       handler(val) {
         if (!val) return;
-        GetFileStoreInfo({ file_id: val }).then(({ file_url, media_duration }) => {
+        let obj = {};
+        if (typeof val === 'string') {
+          obj = { file_id: val };
+        } else if (typeof val === 'object') {
+          obj = { file_id: val.file_id };
+        }
+        GetFileStoreInfo(obj).then(({ file_url, media_duration }) => {
           this.file_url = file_url;
           this.recordTime = media_duration;
           this.recordTimes = JSON.parse(JSON.parse(media_duration));

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -903,6 +903,11 @@ export default {
 
 :deep .upload-wrapper {
   margin-top: 0;
+
+  .file-name {
+    width: 160px;
+    word-break: break-all;
+  }
 }
 
 .title-box {

src/views/book/courseware/data/article.js

@@ -77,7 +77,9 @@ export function getArticleProperty() {
     is_first_sentence_first_hz_pinyin_first_char_upper_case: 'true', // 句首大写
 
     multilingual_position: multilingualList[1].value,
-    content_height:'', // 内容高度
+    content_height: '', // 内容高度
+    voice_type: '', // 音色
+    emotion: '', // 风格，情感
   };
 }
 

src/views/book/courseware/data/character.js

@@ -85,6 +85,8 @@ export function getCharacterProperty() {
     write_number: 5,
     is_enable_play_back: showList[0].value,
     is_enable_error: showList[0].value,
+    voice_type: '', // 音色
+    emotion: '', // 风格，情感
   };
 }
 

src/views/book/courseware/data/dialogueArticle.js

@@ -117,7 +117,9 @@ export function getArticleProperty() {
     role_list: [getRole(0), getRole(1)],
 
     multilingual_position: multilingualList[0].value,
-    content_height:'', // 内容高度
+    content_height: '', // 内容高度
+    voice_type: '', // 音色
+    emotion: '', // 风格，情感
   };
 }
 

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -484,7 +484,7 @@ export default {
       this.selectedInfo = null;
     },
     // 定位
-    handLocation(item) {
+    handleLocation(item) {
       this.scrollToDataId(item.blockId);
     },
 

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

@@ -63,63 +63,368 @@
         />
       </div>
     </div>
-    <template v-if="resObj">
-      <!--  -->
-      <div
-        class="NPC-sentences-list"
-        :style="{
-          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
-        }"
-      >
-        <div
-          v-for="(item, index) in resObj.sentList"
-          :key="'detail' + index"
-          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
-          :style="{
-            backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
-          }"
-        >
+    <div
+      :style="{
+        height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        overflow: 'auto',
+      }"
+    >
+      <template v-if="resObj">
+        <!--  -->
+        <div class="NPC-sentences-list">
           <div
-            :class="['NNPE-detail']"
-            @click="
-              handleChangeTime(
-                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
-                index,
-                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
-              )
-            "
+            v-for="(item, index) in resObj.sentList"
+            :key="'detail' + index"
+            :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
+            :style="{
+              backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
+            }"
           >
             <div
-              v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
-              :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-            >
-              {{ item.enwords }}
-            </div>
-            <div style="overflow: hidden; clear: both"></div>
-            <div
-              v-for="(pItem, pIndex) in item.sentArr"
-              :key="'wordsList' + pIndex"
-              class="NNPE-words"
-              :class="[
-                pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
-                pItem.chs == '“' ? 'textRight' : '',
-              ]"
+              :class="['NNPE-detail']"
+              @click="
+                handleChangeTime(
+                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
+                  index,
+                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
+                )
+              "
             >
-              <template v-if="!pItem.width">
-                <template v-if="pItem.isShow">
-                  <template
-                    v-if="
-                      item.sentArr[pIndex + 1] &&
-                      item.sentArr[pIndex + 1].chs &&
-                      chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
-                    "
-                  >
-                    <span class="NNPE-words-box">
+              <div
+                v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
+                :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+              >
+                {{ item.enwords }}
+              </div>
+              <div style="overflow: hidden; clear: both"></div>
+              <div
+                v-for="(pItem, pIndex) in item.sentArr"
+                :key="'wordsList' + pIndex"
+                class="NNPE-words"
+                :class="[
+                  pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
+                  pItem.chs == '“' ? 'textRight' : '',
+                ]"
+              >
+                <template v-if="!pItem.width">
+                  <template v-if="pItem.isShow">
+                    <template
+                      v-if="
+                        item.sentArr[pIndex + 1] &&
+                        item.sentArr[pIndex + 1].chs &&
+                        chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
+                      "
+                    >
+                      <span class="NNPE-words-box">
+                        <template v-if="curQue.property.pinyin_position == 'top'">
+                          <span
+                            v-if="config.isShowPY"
+                            class="NNPE-pinyin"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              sentIndex == index ? 'wordBlank' : '',
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
+                            :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
+                          >
+                        </template>
+                        <span
+                          class="NNPE-chs"
+                          :class="[
+                            pItem.padding && config.isShowPY ? 'padding' : '',
+                            sentIndex == index ? 'wordBlank' : '',
+                          ]"
+                        >
+                          <template v-for="(wItem, wIndex) in pItem.leg">
+                            <span
+                              :key="'ci' + wIndex + pIndex + index"
+                              :class="[
+                                pItem.timeList[wIndex] &&
+                                curTime >= pItem.timeList[wIndex].wordBg &&
+                                curTime <= curQue.wordTime[index].ed
+                                  ? 'active'
+                                  : '',
+                                sentIndex == index ? 'wordBlank' : '',
+                              ]"
+                              :style="{
+                                fontFamily: pItem.config.fontFamily,
+                                textDecoration: pItem.config.textDecoration,
+                                borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
+                                fontWeight: pItem.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: pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                                color:
+                                  pItem.timeList[wIndex] &&
+                                  curTime >= pItem.timeList[wIndex].wordBg &&
+                                  curTime <= curQue.wordTime[index].ed &&
+                                  attrib
+                                    ? attrib.topic_color
+                                    : pItem.config.color,
+                              }"
+                              >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
+                            >
+                          </template>
+                          <img
+                            v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
+                            :src="pItem.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"
+                            :class="[
+                              pItem.className ? pItem.className : '',
+                              sentIndex == index ? 'wordBlank' : '',
+                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                            ]"
+                            :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
+                          >
+                        </template>
+                      </span>
+                      <span 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 + 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',
+                            }"
+                            >{{
+                              NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                ? item.sentArr[pIndex + 1].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 + 1].config.fontFamily,
+                              textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
+                              borderBottom: item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
+                              fontWeight: item.sentArr[pIndex + 1].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 + 1].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 + 1].config.color,
+                            }"
+                          >
+                            {{
+                              NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                ? item.sentArr[pIndex + 1].chs
+                                : ''
+                            }}</span
+                          >
+                          <img
+                            v-if="
+                              item.sentArr[pIndex + 1].img &&
+                              item.sentArr[pIndex + 1].img.length > 0 &&
+                              item.sentArr[pIndex + 1].imgPosition === 'after'
+                            "
+                            :src="item.sentArr[pIndex + 1].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 + 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',
+                            }"
+                            >{{
+                              NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                ? item.sentArr[pIndex + 1].pinyin
+                                : ''
+                            }}</span
+                          >
+                        </template>
+                      </span>
+                      <span
+                        v-if="
+                          item.sentArr[pIndex + 2] &&
+                          item.sentArr[pIndex + 2].chs &&
+                          chsFhList.indexOf(item.sentArr[pIndex + 2].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 + 2].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 + 2].pinyin) == -1
+                                ? item.sentArr[pIndex + 2].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 + 2].config.fontFamily,
+                              textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
+                              borderBottom: item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
+                              fontWeight: item.sentArr[pIndex + 2].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 + 2].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 + 2].config.color,
+                            }"
+                          >
+                            {{
+                              NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
+                                ? item.sentArr[pIndex + 2].chs
+                                : ''
+                            }}</span
+                          >
+                          <img
+                            v-if="
+                              item.sentArr[pIndex + 2].img &&
+                              item.sentArr[pIndex + 2].img.length > 0 &&
+                              item.sentArr[pIndex + 2].imgPosition === 'after'
+                            "
+                            :src="item.sentArr[pIndex + 2].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 + 2].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 + 2].pinyin) == -1
+                                ? item.sentArr[pIndex + 2].pinyin
+                                : ''
+                            }}</span
+                          >
+                        </template>
+                      </span>
+                    </template>
+                    <template v-else>
                       <template v-if="curQue.property.pinyin_position == 'top'">
                         <span
                           v-if="config.isShowPY"
                           class="NNPE-pinyin"
                           :class="[
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
@@ -135,7 +440,7 @@
                       <span
                         class="NNPE-chs"
                         :class="[
-                          pItem.padding && config.isShowPY ? 'padding' : '',
+                          pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                           sentIndex == index ? 'wordBlank' : '',
                         ]"
                       >
@@ -144,6 +449,8 @@
                             :key="'ci' + wIndex + pIndex + index"
                             :class="[
                               pItem.timeList[wIndex] &&
+                              curQue.wordTime &&
+                              curQue.wordTime[index] &&
                               curTime >= pItem.timeList[wIndex].wordBg &&
                               curTime <= curQue.wordTime[index].ed
                                 ? 'active'
@@ -164,14 +471,16 @@
                               width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
                               color:
                                 pItem.timeList[wIndex] &&
+                                curQue.wordTime &&
+                                curQue.wordTime[index] &&
                                 curTime >= pItem.timeList[wIndex].wordBg &&
                                 curTime <= curQue.wordTime[index].ed &&
                                 attrib
                                   ? attrib.topic_color
                                   : pItem.config.color,
                             }"
-                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
-                          >
+                            >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}
+                          </span>
                         </template>
                         <img
                           v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
@@ -186,6 +495,7 @@
                           v-if="config.isShowPY"
                           class="NNPE-pinyin"
                           :class="[
+                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                             sentIndex == index ? 'wordBlank' : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
@@ -198,358 +508,69 @@
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                         >
                       </template>
-                    </span>
-                    <span 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 + 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',
-                          }"
-                          >{{
-                            NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                              ? item.sentArr[pIndex + 1].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 + 1].config.fontFamily,
-                            textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
-                            borderBottom: item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
-                            fontWeight: item.sentArr[pIndex + 1].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 + 1].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 + 1].config.color,
-                          }"
-                        >
-                          {{
-                            NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                              ? item.sentArr[pIndex + 1].chs
-                              : ''
-                          }}</span
-                        >
-                        <img
-                          v-if="
-                            item.sentArr[pIndex + 1].img &&
-                            item.sentArr[pIndex + 1].img.length > 0 &&
-                            item.sentArr[pIndex + 1].imgPosition === 'after'
-                          "
-                          :src="item.sentArr[pIndex + 1].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 + 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',
-                          }"
-                          >{{
-                            NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                              ? item.sentArr[pIndex + 1].pinyin
-                              : ''
-                          }}</span
-                        >
-                      </template>
-                    </span>
-                    <span
-                      v-if="
-                        item.sentArr[pIndex + 2] &&
-                        item.sentArr[pIndex + 2].chs &&
-                        chsFhList.indexOf(item.sentArr[pIndex + 2].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 + 2].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 + 2].pinyin) == -1
-                              ? item.sentArr[pIndex + 2].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 + 2].config.fontFamily,
-                            textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
-                            borderBottom: item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
-                            fontWeight: item.sentArr[pIndex + 2].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 + 2].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 + 2].config.color,
-                          }"
-                        >
-                          {{
-                            NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
-                              ? item.sentArr[pIndex + 2].chs
-                              : ''
-                          }}</span
-                        >
-                        <img
-                          v-if="
-                            item.sentArr[pIndex + 2].img &&
-                            item.sentArr[pIndex + 2].img.length > 0 &&
-                            item.sentArr[pIndex + 2].imgPosition === 'after'
-                          "
-                          :src="item.sentArr[pIndex + 2].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 + 2].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 + 2].pinyin) == -1
-                              ? item.sentArr[pIndex + 2].pinyin
-                              : ''
-                          }}</span
-                        >
-                      </template>
-                    </span>
-                  </template>
-                  <template v-else>
-                    <template v-if="curQue.property.pinyin_position == 'top'">
-                      <span
-                        v-if="config.isShowPY"
-                        class="NNPE-pinyin"
-                        :class="[
-                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
-                          pItem.className ? pItem.className : '',
-                          sentIndex == index ? 'wordBlank' : '',
-                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
-                        ]"
-                        :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
-                      >
-                    </template>
-                    <span
-                      class="NNPE-chs"
-                      :class="[
-                        pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
-                        sentIndex == index ? 'wordBlank' : '',
-                      ]"
-                    >
-                      <template v-for="(wItem, wIndex) in pItem.leg">
-                        <span
-                          :key="'ci' + wIndex + pIndex + index"
-                          :class="[
-                            pItem.timeList[wIndex] &&
-                            curQue.wordTime &&
-                            curQue.wordTime[index] &&
-                            curTime >= pItem.timeList[wIndex].wordBg &&
-                            curTime <= curQue.wordTime[index].ed
-                              ? 'active'
-                              : '',
-                            sentIndex == index ? 'wordBlank' : '',
-                          ]"
-                          :style="{
-                            fontFamily: pItem.config.fontFamily,
-                            textDecoration: pItem.config.textDecoration,
-                            borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
-                            fontWeight: pItem.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: pItem.chs[wIndex].trim() === '' ? '6px' : '',
-                            color:
-                              pItem.timeList[wIndex] &&
-                              curQue.wordTime &&
-                              curQue.wordTime[index] &&
-                              curTime >= pItem.timeList[wIndex].wordBg &&
-                              curTime <= curQue.wordTime[index].ed &&
-                              attrib
-                                ? attrib.topic_color
-                                : pItem.config.color,
-                          }"
-                          >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}
-                        </span>
-                      </template>
-                      <img
-                        v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
-                        :src="pItem.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"
-                        :class="[
-                          pItem.chs != '“' && pItem.padding ? 'padding' : '',
-                          pItem.className ? pItem.className : '',
-                          sentIndex == index ? 'wordBlank' : '',
-                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
-                        ]"
-                        :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
-                      >
                     </template>
                   </template>
                 </template>
-              </template>
-              <template v-else>
-                <span
-                  :style="{
-                    height: pItem.height + 'px',
-                    width: pItem.width + 'px',
-                  }"
-                ></span>
-              </template>
+                <template v-else>
+                  <span
+                    :style="{
+                      height: pItem.height + 'px',
+                      width: pItem.width + 'px',
+                    }"
+                  ></span>
+                </template>
+              </div>
+              <div style="overflow: hidden; clear: both"></div>
+              <div
+                v-if="
+                  item.enwords &&
+                  config.isShowEN &&
+                  (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
+                "
+                :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+              >
+                {{ item.enwords }}
+              </div>
             </div>
-            <div style="overflow: hidden; clear: both"></div>
             <div
-              v-if="
-                item.enwords &&
-                config.isShowEN &&
-                (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
-              "
-              :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+              v-if="curQue.property.multilingual_position === 'para'"
+              class="multilingual-para"
+              :class="[item.isTitle ? 'multilingual-para-center' : '']"
             >
-              {{ item.enwords }}
+              {{
+                multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
+                  ? multilingualTextList[multilingual][index]
+                  : ''
+              }}
             </div>
-          </div>
-          <div
-            v-if="curQue.property.multilingual_position === 'para'"
-            class="multilingual-para"
-            :class="[item.isTitle ? 'multilingual-para-center' : '']"
-          >
-            {{
-              multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
-                ? multilingualTextList[multilingual][index]
-                : ''
-            }}
-          </div>
-          <div
-            v-show="
-              (curQue.wordTime &&
-                curQue.wordTime[index] &&
-                curTime >= curQue.wordTime[index].bg &&
-                curTime <= curQue.wordTime[index].ed) ||
-              sentIndex == index
-            "
-            class="Soundrecord-content"
-          >
-            <div class="Soundrecord-content-inner">
-              <Soundrecord
-                v-if="refresh"
-                type="promax"
-                class="luyin-box"
-                :TaskModel="TaskModel"
-                :answer-record-list="
-                  curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
-                "
-                :tm-index="index"
-                :sent-index="sentIndex"
-                :attrib="attrib"
-                @getWavblob="getWavblob"
-                @handleParentPlay="handleParentPlay"
-                @sentPause="sentPause"
-                @handleWav="handleWav"
-              />
-              <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
+            <div
+              v-show="
+                (curQue.wordTime &&
+                  curQue.wordTime[index] &&
+                  curTime >= curQue.wordTime[index].bg &&
+                  curTime <= curQue.wordTime[index].ed) ||
+                sentIndex == index
+              "
+              class="Soundrecord-content"
+            >
+              <div class="Soundrecord-content-inner">
+                <Soundrecord
+                  v-if="refresh"
+                  type="promax"
+                  class="luyin-box"
+                  :TaskModel="TaskModel"
+                  :answer-record-list="
+                    curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
+                  "
+                  :tm-index="index"
+                  :sent-index="sentIndex"
+                  :attrib="attrib"
+                  @getWavblob="getWavblob"
+                  @handleParentPlay="handleParentPlay"
+                  @sentPause="sentPause"
+                  @handleWav="handleWav"
+                />
+                <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
                 <Audio-compare
                   :theme-color="themeColor"
                   :index="index"
@@ -566,43 +587,44 @@
                   :attrib="attrib"
                 />
               </div> -->
+              </div>
+              <span class="full-screen-icon" @click="fullScreen">
+                <svg-icon
+                  icon-class="icon-full"
+                  size="24"
+                  :style="{
+                    color: attrib && attrib.topic_color ? attrib.topic_color : '',
+                  }"
+                />
+              </span>
             </div>
-            <span class="full-screen-icon" @click="fullScreen">
-              <svg-icon
-                icon-class="icon-full"
-                size="24"
-                :style="{
-                  color: attrib && attrib.topic_color ? attrib.topic_color : '',
-                }"
-              />
-            </span>
           </div>
-        </div>
-        <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
           {{ items }}
         </div> -->
-      </div>
-    </template>
-    <template v-for="(items, indexs) in curQue.detail">
-      <div
-        v-if="
-          curQue.property.multilingual_position === 'all' &&
-          items.multilingualTextList &&
-          items.multilingualTextList[multilingual] &&
-          items.multilingualTextList[multilingual].length > 0
-        "
-        :key="indexs"
-        class="multilingual"
-      >
-        <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
-          {{
-            items.multilingualTextList && items.multilingualTextList[multilingual]
-              ? items.multilingualTextList[multilingual].join(' ')
-              : ''
-          }}
         </div>
-      </div>
-    </template>
+      </template>
+      <template v-for="(items, indexs) in curQue.detail">
+        <div
+          v-if="
+            curQue.property.multilingual_position === 'all' &&
+            items.multilingualTextList &&
+            items.multilingualTextList[multilingual] &&
+            items.multilingualTextList[multilingual].length > 0
+          "
+          :key="indexs"
+          class="multilingual"
+        >
+          <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
+            {{
+              items.multilingualTextList && items.multilingualTextList[multilingual]
+                ? items.multilingualTextList[multilingual].join(' ')
+                : ''
+            }}
+          </div>
+        </div>
+      </template>
+    </div>
     <div
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||

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

@@ -66,53 +66,54 @@
       </div>
     </div>
 
-    <template v-if="resObj">
-      <p v-if="curQue.notice" class="notice" style="padding-top: 24px">
-        {{ curQue.notice }}
-      </p>
-      <div
-        class="NPC-sentences-list"
-        :style="{
-          height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
-        }"
-      >
-        <div
-          v-for="(item, index) in resObj.sentList"
-          :key="'detail' + index"
-          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
-          :style="{
-            backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
-          }"
-        >
+    <div
+      :style="{
+        height: curQue.property.content_height ? curQue.property.content_height + 'px' : '',
+        overflow: 'auto',
+      }"
+    >
+      <template v-if="resObj">
+        <p v-if="curQue.notice" class="notice" style="padding-top: 24px">
+          {{ curQue.notice }}
+        </p>
+        <div class="NPC-sentences-list">
           <div
-            class="NNPE-detail"
-            @click="
-              handleChangeTime(
-                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
-                index,
-                curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
-              )
-            "
+            v-for="(item, index) in resObj.sentList"
+            :key="'detail' + index"
+            :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
+            :style="{
+              backgroundColor: sentIndex == index && attrib ? attrib.assist_color : '',
+            }"
           >
-            <template v-if="item.sentArr[0].sentIndex == 0">
-              <RoleChs
-                :cur-role="item.roleDetail"
-                :color="
-                  (curQue.wordTime &&
-                    curQue.wordTime[index] &&
-                    curTime >= curQue.wordTime[index].bg &&
-                    curTime <= curQue.wordTime[index].ed) ||
-                  sentIndex == index
-                    ? 'rgba(0,0,0,0.85)'
-                    : 'rgba(0,0,0,0.45)'
-                "
-                :type="curQue.property.role_img_type"
-              />
-            </template>
-            <div v-else style="width: 36px; height: 36px"></div>
-            <div class="sentence-box">
+            <div
+              class="NNPE-detail"
+              @click="
+                handleChangeTime(
+                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
+                  index,
+                  curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
+                )
+              "
+            >
               <template v-if="item.sentArr[0].sentIndex == 0">
-                <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
+                <RoleChs
+                  :cur-role="item.roleDetail"
+                  :color="
+                    (curQue.wordTime &&
+                      curQue.wordTime[index] &&
+                      curTime >= curQue.wordTime[index].bg &&
+                      curTime <= curQue.wordTime[index].ed) ||
+                    sentIndex == index
+                      ? 'rgba(0,0,0,0.85)'
+                      : 'rgba(0,0,0,0.45)'
+                  "
+                  :type="curQue.property.role_img_type"
+                />
+              </template>
+              <div v-else style="width: 36px; height: 36px"></div>
+              <div class="sentence-box">
+                <template v-if="item.sentArr[0].sentIndex == 0">
+                  <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                   <span
                     :class="[
                       'pinyin',
@@ -140,74 +141,369 @@
                     >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                   >
                 </div> -->
-                <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
-                  <span
-                    :class="[
-                      'chs',
-                      (curQue.wordTime &&
-                        curQue.wordTime[index] &&
-                        curTime >= curQue.wordTime[index].bg &&
-                        curTime <= curQue.wordTime[index].ed) ||
-                      sentIndex == index
-                        ? 'color85'
-                        : 'color45',
-                    ]"
-                    >{{ item.roleDetail.fullName }}</span
-                  >
-                  <span
-                    :class="[
-                      'pinyin',
-                      (curQue.wordTime &&
-                        curQue.wordTime[index] &&
-                        curTime >= curQue.wordTime[index].bg &&
-                        curTime <= curQue.wordTime[index].ed) ||
-                      sentIndex == index
-                        ? 'color85'
-                        : 'color45',
-                    ]"
-                    >{{ item.roleDetail.fullPinyin }}</span
-                  >
-                </div>
-              </template>
-              <div class="sentence-box-inner" :style="{ background: item.roleDetail.color.bg }">
-                <div
-                  v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
-                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                >
-                  {{ item.enwords }}
-                </div>
-                <div style="overflow: hidden; clear: both"></div>
-                <div class="NNPE-words-box">
+                  <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
+                    <span
+                      :class="[
+                        'chs',
+                        (curQue.wordTime &&
+                          curQue.wordTime[index] &&
+                          curTime >= curQue.wordTime[index].bg &&
+                          curTime <= curQue.wordTime[index].ed) ||
+                        sentIndex == index
+                          ? 'color85'
+                          : 'color45',
+                      ]"
+                      >{{ item.roleDetail.fullName }}</span
+                    >
+                    <span
+                      :class="[
+                        'pinyin',
+                        (curQue.wordTime &&
+                          curQue.wordTime[index] &&
+                          curTime >= curQue.wordTime[index].bg &&
+                          curTime <= curQue.wordTime[index].ed) ||
+                        sentIndex == index
+                          ? 'color85'
+                          : 'color45',
+                      ]"
+                      >{{ item.roleDetail.fullPinyin }}</span
+                    >
+                  </div>
+                </template>
+                <div class="sentence-box-inner" :style="{ background: item.roleDetail.color.bg }">
                   <div
-                    v-for="(pItem, pIndex) in item.sentArr"
-                    :key="'wordsList' + pIndex"
-                    class="NNPE-words"
-                    :class="[
-                      pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
-                      pItem.chs == '“' ? 'textRight' : '',
-                    ]"
+                    v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
+                    :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                   >
-                    <template v-if="!pItem.width">
-                      <template v-if="pItem.isShow">
-                        <template
-                          v-if="
-                            (item.sentArr[pIndex + 1] &&
-                              item.sentArr[pIndex + 1].chs &&
-                              chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1) ||
-                            (item.sentArr[pIndex + 1] &&
-                              item.sentArr[pIndex + 1].chs &&
-                              item.sentArr[pIndex + 1].chs == '#')
-                          "
-                        >
-                          <span class="NNPE-words-box">
+                    {{ item.enwords }}
+                  </div>
+                  <div style="overflow: hidden; clear: both"></div>
+                  <div class="NNPE-words-box">
+                    <div
+                      v-for="(pItem, pIndex) in item.sentArr"
+                      :key="'wordsList' + pIndex"
+                      class="NNPE-words"
+                      :class="[
+                        pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
+                        pItem.chs == '“' ? 'textRight' : '',
+                      ]"
+                    >
+                      <template v-if="!pItem.width">
+                        <template v-if="pItem.isShow">
+                          <template
+                            v-if="
+                              (item.sentArr[pIndex + 1] &&
+                                item.sentArr[pIndex + 1].chs &&
+                                chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1) ||
+                              (item.sentArr[pIndex + 1] &&
+                                item.sentArr[pIndex + 1].chs &&
+                                item.sentArr[pIndex + 1].chs == '#')
+                            "
+                          >
+                            <span class="NNPE-words-box">
+                              <template v-if="curQue.property.pinyin_position == 'top'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  class="NNPE-pinyin"
+                                  :class="[
+                                    pItem.className ? pItem.className : '',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                                  ]"
+                                  :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
+                                >
+                              </template>
+                              <span
+                                class="NNPE-chs"
+                                :class="[
+                                  pItem.padding && config.isShowPY && item.dhaspinyin ? 'padding' : '',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                ]"
+                              >
+                                <template>
+                                  <span
+                                    v-for="(wItem, wIndex) in pItem.leg"
+                                    :key="'ci' + wIndex + pIndex + index"
+                                    :class="[
+                                      isPlaying &&
+                                      pItem.timeList &&
+                                      pItem.timeList[wIndex] &&
+                                      curTime >= pItem.timeList[wIndex].wordBg &&
+                                      curQue.wordTime &&
+                                      curQue.wordTime[index] &&
+                                      curTime <= curQue.wordTime[index].ed
+                                        ? 'active'
+                                        : '',
+                                      sentIndex == index ? 'wordBlank' : '',
+                                    ]"
+                                    :style="{
+                                      fontFamily: pItem.config.fontFamily,
+                                      textDecoration: pItem.config.textDecoration,
+                                      borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
+                                      fontWeight: pItem.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',
+                                      color:
+                                        isPlaying &&
+                                        pItem.timeList &&
+                                        pItem.timeList[wIndex] &&
+                                        curTime >= pItem.timeList[wIndex].wordBg &&
+                                        curQue.wordTime &&
+                                        curQue.wordTime[index] &&
+                                        curTime <= curQue.wordTime[index].ed &&
+                                        attrib
+                                          ? attrib.topic_color
+                                          : pItem.config.color,
+                                    }"
+                                    >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
+                                  >
+                                </template>
+                              </span>
+                              <template v-if="curQue.property.pinyin_position == 'bottom'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  class="NNPE-pinyin"
+                                  :class="[
+                                    pItem.className ? pItem.className : '',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                                  ]"
+                                  :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
+                                >
+                              </template>
+                            </span>
+                            <span class="NNPE-words-box">
+                              <template v-if="curQue.property.pinyin_position == 'top'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  :class="[
+                                    'NNPE-pinyin',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(item.sentArr[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',
+                                  }"
+                                  >{{
+                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                      ? item.sentArr[pIndex + 1].pinyin
+                                      : ''
+                                  }}</span
+                                >
+                              </template>
+                              <span class="NNPE-chs" style="text-align: left">
+                                <span
+                                  :class="[
+                                    isPlaying &&
+                                    pItem.timeList[pItem.leg - 1] &&
+                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                    curQue.wordTime &&
+                                    curQue.wordTime[index] &&
+                                    curTime <= curQue.wordTime[index].ed
+                                      ? 'active'
+                                      : '',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                  ]"
+                                  :style="{
+                                    fontFamily: item.sentArr[pIndex + 1].config.fontFamily,
+                                    textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
+                                    borderBottom:
+                                      item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
+                                    fontWeight: item.sentArr[pIndex + 1].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',
+                                    color:
+                                      isPlaying &&
+                                      pItem.timeList[pItem.leg - 1] &&
+                                      curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                      curQue.wordTime &&
+                                      curQue.wordTime[index] &&
+                                      curTime <= curQue.wordTime[index].ed &&
+                                      attrib
+                                        ? attrib.topic_color
+                                        : item.sentArr[pIndex + 1].config.color,
+                                  }"
+                                >
+                                  {{
+                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                      ? item.sentArr[pIndex + 1].chs
+                                      : ''
+                                  }}</span
+                                >
+                              </span>
+                              <template v-if="curQue.property.pinyin_position == 'bottom'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  :class="[
+                                    'NNPE-pinyin',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(item.sentArr[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',
+                                  }"
+                                  >{{
+                                    NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
+                                      ? item.sentArr[pIndex + 1].pinyin
+                                      : ''
+                                  }}</span
+                                >
+                              </template>
+                            </span>
+                            <span
+                              v-if="
+                                item.sentArr[pIndex + 2] &&
+                                item.sentArr[pIndex + 2].chs &&
+                                chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
+                              "
+                              class="NNPE-words-box"
+                            >
+                              <template v-if="curQue.property.pinyin_position == 'top'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  :class="[
+                                    'NNPE-pinyin',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(item.sentArr[pIndex + 2].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 + 2].pinyin) == -1
+                                      ? item.sentArr[pIndex + 2].pinyin
+                                      : ''
+                                  }}</span
+                                >
+                              </template>
+                              <span class="NNPE-chs" style="text-align: left">
+                                <span
+                                  :class="[
+                                    isPlaying &&
+                                    pItem.timeList[pItem.leg - 1] &&
+                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                    curQue.wordTime &&
+                                    curQue.wordTime[index] &&
+                                    curTime <= curQue.wordTime[index].ed
+                                      ? 'active'
+                                      : '',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                  ]"
+                                  :style="{
+                                    fontFamily: item.sentArr[pIndex + 2].config.fontFamily,
+                                    textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
+                                    borderBottom:
+                                      item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
+                                    fontWeight: item.sentArr[pIndex + 2].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',
+                                    color:
+                                      isPlaying &&
+                                      pItem.timeList[pItem.leg - 1] &&
+                                      curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                      curQue.wordTime &&
+                                      curQue.wordTime[index] &&
+                                      curTime <= curQue.wordTime[index].ed &&
+                                      attrib
+                                        ? attrib.topic_color
+                                        : item.sentArr[pIndex + 2].config.color,
+                                  }"
+                                >
+                                  {{
+                                    NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
+                                      ? item.sentArr[pIndex + 2].chs
+                                      : ''
+                                  }}</span
+                                >
+                              </span>
+                              <template v-if="curQue.property.pinyin_position == 'bottom'">
+                                <span
+                                  v-if="config.isShowPY && item.dhaspinyin"
+                                  :class="[
+                                    'NNPE-pinyin',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                    noFont.indexOf(item.sentArr[pIndex + 2].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 + 2].pinyin) == -1
+                                      ? item.sentArr[pIndex + 2].pinyin
+                                      : ''
+                                  }}</span
+                                >
+                              </template>
+                            </span>
+                          </template>
+                          <template v-else>
                             <template v-if="curQue.property.pinyin_position == 'top'">
                               <span
                                 v-if="config.isShowPY && item.dhaspinyin"
                                 class="NNPE-pinyin"
                                 :class="[
+                                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                                  noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                                 ]"
                                 :style="{
                                   fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
@@ -220,9 +516,12 @@
                               >
                             </template>
                             <span
+                              v-if="pItem.chs != '#'"
                               class="NNPE-chs"
                               :class="[
-                                pItem.padding && config.isShowPY && item.dhaspinyin ? 'padding' : '',
+                                pItem.chs != '“' && pItem.padding && config.isShowPY && item.dhaspinyin
+                                  ? 'padding'
+                                  : '',
                                 sentIndex == index ? 'wordBlank' : '',
                               ]"
                             >
@@ -240,7 +539,6 @@
                                     curTime <= curQue.wordTime[index].ed
                                       ? 'active'
                                       : '',
-                                    sentIndex == index ? 'wordBlank' : '',
                                   ]"
                                   :style="{
                                     fontFamily: pItem.config.fontFamily,
@@ -269,7 +567,7 @@
                                         ? attrib.topic_color
                                         : pItem.config.color,
                                   }"
-                                  >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
+                                  >{{ NumberList.indexOf(pItem.chs[wIndex]) == -1 ? pItem.chs[wIndex] : '' }}</span
                                 >
                               </template>
                             </span>
@@ -278,9 +576,9 @@
                                 v-if="config.isShowPY && item.dhaspinyin"
                                 class="NNPE-pinyin"
                                 :class="[
+                                  pItem.chs != '“' && pItem.padding ? 'padding' : '',
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                                 ]"
                                 :style="{
                                   fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
@@ -292,356 +590,63 @@
                                 >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                               >
                             </template>
-                          </span>
-                          <span class="NNPE-words-box">
-                            <template v-if="curQue.property.pinyin_position == 'top'">
-                              <span
-                                v-if="config.isShowPY && item.dhaspinyin"
-                                :class="[
-                                  'NNPE-pinyin',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.sentArr[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',
-                                }"
-                                >{{
-                                  NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                                    ? item.sentArr[pIndex + 1].pinyin
-                                    : ''
-                                }}</span
-                              >
-                            </template>
-                            <span class="NNPE-chs" style="text-align: left">
-                              <span
-                                :class="[
-                                  isPlaying &&
-                                  pItem.timeList[pItem.leg - 1] &&
-                                  curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
-                                  curQue.wordTime &&
-                                  curQue.wordTime[index] &&
-                                  curTime <= curQue.wordTime[index].ed
-                                    ? 'active'
-                                    : '',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                ]"
-                                :style="{
-                                  fontFamily: item.sentArr[pIndex + 1].config.fontFamily,
-                                  textDecoration: item.sentArr[pIndex + 1].config.textDecoration,
-                                  borderBottom: item.sentArr[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
-                                  fontWeight: item.sentArr[pIndex + 1].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',
-                                  color:
-                                    isPlaying &&
-                                    pItem.timeList[pItem.leg - 1] &&
-                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
-                                    curQue.wordTime &&
-                                    curQue.wordTime[index] &&
-                                    curTime <= curQue.wordTime[index].ed &&
-                                    attrib
-                                      ? attrib.topic_color
-                                      : item.sentArr[pIndex + 1].config.color,
-                                }"
-                              >
-                                {{
-                                  NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                                    ? item.sentArr[pIndex + 1].chs
-                                    : ''
-                                }}</span
-                              >
-                            </span>
-                            <template v-if="curQue.property.pinyin_position == 'bottom'">
-                              <span
-                                v-if="config.isShowPY && item.dhaspinyin"
-                                :class="[
-                                  'NNPE-pinyin',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.sentArr[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',
-                                }"
-                                >{{
-                                  NumberList.indexOf(item.sentArr[pIndex + 1].pinyin) == -1
-                                    ? item.sentArr[pIndex + 1].pinyin
-                                    : ''
-                                }}</span
-                              >
-                            </template>
-                          </span>
-                          <span
-                            v-if="
-                              item.sentArr[pIndex + 2] &&
-                              item.sentArr[pIndex + 2].chs &&
-                              chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
-                            "
-                            class="NNPE-words-box"
-                          >
-                            <template v-if="curQue.property.pinyin_position == 'top'">
-                              <span
-                                v-if="config.isShowPY && item.dhaspinyin"
-                                :class="[
-                                  'NNPE-pinyin',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.sentArr[pIndex + 2].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 + 2].pinyin) == -1
-                                    ? item.sentArr[pIndex + 2].pinyin
-                                    : ''
-                                }}</span
-                              >
-                            </template>
-                            <span class="NNPE-chs" style="text-align: left">
-                              <span
-                                :class="[
-                                  isPlaying &&
-                                  pItem.timeList[pItem.leg - 1] &&
-                                  curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
-                                  curQue.wordTime &&
-                                  curQue.wordTime[index] &&
-                                  curTime <= curQue.wordTime[index].ed
-                                    ? 'active'
-                                    : '',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                ]"
-                                :style="{
-                                  fontFamily: item.sentArr[pIndex + 2].config.fontFamily,
-                                  textDecoration: item.sentArr[pIndex + 2].config.textDecoration,
-                                  borderBottom: item.sentArr[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
-                                  fontWeight: item.sentArr[pIndex + 2].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',
-                                  color:
-                                    isPlaying &&
-                                    pItem.timeList[pItem.leg - 1] &&
-                                    curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
-                                    curQue.wordTime &&
-                                    curQue.wordTime[index] &&
-                                    curTime <= curQue.wordTime[index].ed &&
-                                    attrib
-                                      ? attrib.topic_color
-                                      : item.sentArr[pIndex + 2].config.color,
-                                }"
-                              >
-                                {{
-                                  NumberList.indexOf(item.sentArr[pIndex + 2].pinyin) == -1
-                                    ? item.sentArr[pIndex + 2].chs
-                                    : ''
-                                }}</span
-                              >
-                            </span>
-                            <template v-if="curQue.property.pinyin_position == 'bottom'">
-                              <span
-                                v-if="config.isShowPY && item.dhaspinyin"
-                                :class="[
-                                  'NNPE-pinyin',
-                                  sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.sentArr[pIndex + 2].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 + 2].pinyin) == -1
-                                    ? item.sentArr[pIndex + 2].pinyin
-                                    : ''
-                                }}</span
-                              >
-                            </template>
-                          </span>
-                        </template>
-                        <template v-else>
-                          <template v-if="curQue.property.pinyin_position == 'top'">
-                            <span
-                              v-if="config.isShowPY && item.dhaspinyin"
-                              class="NNPE-pinyin"
-                              :class="[
-                                pItem.chs != '“' && pItem.padding ? 'padding' : '',
-                                pItem.className ? pItem.className : '',
-                                sentIndex == index ? 'wordBlank' : '',
-                                noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
-                              ]"
-                              :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
-                            >
-                          </template>
-                          <span
-                            v-if="pItem.chs != '#'"
-                            class="NNPE-chs"
-                            :class="[
-                              pItem.chs != '“' && pItem.padding && config.isShowPY && item.dhaspinyin ? 'padding' : '',
-                              sentIndex == index ? 'wordBlank' : '',
-                            ]"
-                          >
-                            <template>
-                              <span
-                                v-for="(wItem, wIndex) in pItem.leg"
-                                :key="'ci' + wIndex + pIndex + index"
-                                :class="[
-                                  isPlaying &&
-                                  pItem.timeList &&
-                                  pItem.timeList[wIndex] &&
-                                  curTime >= pItem.timeList[wIndex].wordBg &&
-                                  curQue.wordTime &&
-                                  curQue.wordTime[index] &&
-                                  curTime <= curQue.wordTime[index].ed
-                                    ? 'active'
-                                    : '',
-                                ]"
-                                :style="{
-                                  fontFamily: pItem.config.fontFamily,
-                                  textDecoration: pItem.config.textDecoration,
-                                  borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
-                                  fontWeight: pItem.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',
-                                  color:
-                                    isPlaying &&
-                                    pItem.timeList &&
-                                    pItem.timeList[wIndex] &&
-                                    curTime >= pItem.timeList[wIndex].wordBg &&
-                                    curQue.wordTime &&
-                                    curQue.wordTime[index] &&
-                                    curTime <= curQue.wordTime[index].ed &&
-                                    attrib
-                                      ? attrib.topic_color
-                                      : pItem.config.color,
-                                }"
-                                >{{ NumberList.indexOf(pItem.chs[wIndex]) == -1 ? pItem.chs[wIndex] : '' }}</span
-                              >
-                            </template>
-                          </span>
-                          <template v-if="curQue.property.pinyin_position == 'bottom'">
-                            <span
-                              v-if="config.isShowPY && item.dhaspinyin"
-                              class="NNPE-pinyin"
-                              :class="[
-                                pItem.chs != '“' && pItem.padding ? 'padding' : '',
-                                pItem.className ? pItem.className : '',
-                                sentIndex == index ? 'wordBlank' : '',
-                              ]"
-                              :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(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
-                            >
                           </template>
                         </template>
                       </template>
-                    </template>
-                    <template v-else>
-                      <span
-                        :style="{
-                          height: pItem.height + 'px',
-                          width: pItem.width + 'px',
-                        }"
-                      ></span>
-                    </template>
+                      <template v-else>
+                        <span
+                          :style="{
+                            height: pItem.height + 'px',
+                            width: pItem.width + 'px',
+                          }"
+                        ></span>
+                      </template>
+                    </div>
+                  </div>
+                  <div style="overflow: hidden; clear: both"></div>
+                  <div
+                    v-if="
+                      item.enwords &&
+                      config.isShowEN &&
+                      (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
+                    "
+                    :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                  >
+                    {{ item.enwords }}
+                  </div>
+                  <div
+                    v-if="curQue.property.multilingual_position === 'para'"
+                    class="multilingual-para"
+                    :class="[item.isTitle ? 'multilingual-para-center' : '']"
+                  >
+                    {{
+                      multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
+                        ? multilingualTextList[multilingual][index]
+                        : ''
+                    }}
                   </div>
-                </div>
-                <div style="overflow: hidden; clear: both"></div>
-                <div
-                  v-if="
-                    item.enwords &&
-                    config.isShowEN &&
-                    (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
-                  "
-                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
-                >
-                  {{ item.enwords }}
-                </div>
-                <div
-                  v-if="curQue.property.multilingual_position === 'para'"
-                  class="multilingual-para"
-                  :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                >
-                  {{
-                    multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
-                      ? multilingualTextList[multilingual][index]
-                      : ''
-                  }}
                 </div>
               </div>
             </div>
-          </div>
-          <div v-show="sentIndex == index" class="Soundrecord-content">
-            <div class="Soundrecord-content-inner">
-              <Soundrecord
-                v-if="refresh"
-                type="promax"
-                class="luyin-box"
-                :TaskModel="TaskModel"
-                :answer-record-list="
-                  curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
-                "
-                :tm-index="index"
-                :sent-index="sentIndex"
-                :attrib="attrib"
-                @getWavblob="getWavblob"
-                @handleParentPlay="handleParentPlay"
-                @sentPause="sentPause"
-                @handleWav="handleWav"
-              />
-              <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
+            <div v-show="sentIndex == index" class="Soundrecord-content">
+              <div class="Soundrecord-content-inner">
+                <Soundrecord
+                  v-if="refresh"
+                  type="promax"
+                  class="luyin-box"
+                  :TaskModel="TaskModel"
+                  :answer-record-list="
+                    curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
+                  "
+                  :tm-index="index"
+                  :sent-index="sentIndex"
+                  :attrib="attrib"
+                  @getWavblob="getWavblob"
+                  @handleParentPlay="handleParentPlay"
+                  @sentPause="sentPause"
+                  @handleWav="handleWav"
+                />
+                <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
                 <Audio-compare
                   :theme-color="attrib ? attrib.topic_color : '#e35454'"
                   :index="index"
@@ -658,43 +663,44 @@
                   :attrib="attrib"
                 />
               </div> -->
+              </div>
+              <span class="full-screen-icon" @click="fullScreen">
+                <svg-icon
+                  icon-class="icon-full"
+                  size="24"
+                  :style="{
+                    color: attrib && attrib.topic_color ? attrib.topic_color : '',
+                  }"
+                />
+              </span>
             </div>
-            <span class="full-screen-icon" @click="fullScreen">
-              <svg-icon
-                icon-class="icon-full"
-                size="24"
-                :style="{
-                  color: attrib && attrib.topic_color ? attrib.topic_color : '',
-                }"
-              />
-            </span>
           </div>
-        </div>
-        <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
+          <!-- <div class="multilingual" v-for="(items, indexs) in multilingualTextList" :key="indexs">
           {{ items }}
         </div> -->
-      </div>
-    </template>
-    <template v-for="(items, indexs) in curQue.detail">
-      <div
-        v-if="
-          curQue.property.multilingual_position === 'all' &&
-          items.multilingualTextList &&
-          items.multilingualTextList[multilingual] &&
-          items.multilingualTextList[multilingual].length > 0
-        "
-        :key="indexs"
-        class="multilingual"
-      >
-        <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
-          {{
-            items.multilingualTextList && items.multilingualTextList[multilingual]
-              ? items.multilingualTextList[multilingual].join(' ')
-              : ''
-          }}
         </div>
-      </div>
-    </template>
+      </template>
+      <template v-for="(items, indexs) in curQue.detail">
+        <div
+          v-if="
+            curQue.property.multilingual_position === 'all' &&
+            items.multilingualTextList &&
+            items.multilingualTextList[multilingual] &&
+            items.multilingualTextList[multilingual].length > 0
+          "
+          :key="indexs"
+          class="multilingual"
+        >
+          <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
+            {{
+              items.multilingualTextList && items.multilingualTextList[multilingual]
+                ? items.multilingualTextList[multilingual].join(' ')
+                : ''
+            }}
+          </div>
+        </div>
+      </template>
+    </div>
     <div
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||

src/views/book/courseware/preview/components/label/LabelPreview.vue

@@ -50,7 +50,7 @@ export default {
       color: var(--color1);
       background-color: #fff;
       border-color: var(--color1);
-      border-radius: 2px;
+      border-radius: 4px;
     }
   }
 }

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

@@ -275,6 +275,10 @@ export default {
           justifyContent: styles.textAlign,
           textAlign: styles.textAlign,
         };
+      } else {
+        obj = {
+          width: '100%',
+        };
       }
       return obj;
     },