对话课文播放时高亮对话框

src/views/book/courseware/create/components/question/article/Article.vue

@@ -43,49 +43,6 @@
             @SubmitTranslation="handleMultilingualTranslation"
           />
         </div>
-        <template v-if="isEnable(data.property.view_pinyin)">
-          <el-divider content-position="left"
-            >拼音效果<el-button
-              v-show="isEnable(data.property.view_pinyin)"
-              type="text"
-              icon="el-icon-refresh"
-              title="刷新"
-              class="refresh-pinyin-btn"
-              @click.native="handleChangeContent"
-          /></el-divider>
-          <div v-for="(item, index) in data.detail" :key="index" class="text">
-            <template v-for="(witem, windex) in item.wordsList">
-              <div
-                v-for="(wItem, wIndex) in witem"
-                :key="windex + '-' + wIndex"
-                class="text-item"
-                :style="{
-                  textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
-                }"
-                @click="selectItem(wItem)"
-              >
-                <span class="pinyin">{{
-                  windex === 0 &&
-                  wIndex === 0 &&
-                  data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                    ? wItem.pinyin_up
-                    : wItem.pinyin
-                }}</span>
-                <span
-                  class="word"
-                  :style="{
-                    fontFamily: wItem.fontFamily,
-                    textDecoration: wItem.textDecoration,
-                    borderBottom: wItem.border === 'dotted' ? '1px dotted' : '',
-                    fontWeight: wItem.fontWeight,
-                    color: wItem.color,
-                  }"
-                  >{{ wItem.chs }}</span
-                >
-              </div>
-            </template>
-          </div>
-        </template>
       </div>
       <el-dialog
         v-if="dialogFlag"
@@ -187,6 +144,50 @@
           @sureNewWords="sureOtherNewWords"
         />
       </template>
+
+      <template v-if="isEnable(data.property.view_pinyin)">
+        <el-divider content-position="left"
+          >拼音效果<el-button
+            v-show="isEnable(data.property.view_pinyin)"
+            type="text"
+            icon="el-icon-refresh"
+            title="刷新"
+            class="refresh-pinyin-btn"
+            @click.native="handleChangeContent"
+        /></el-divider>
+        <div v-for="(item, index) in data.detail" :key="index" class="text">
+          <template v-for="(witem, windex) in item.wordsList">
+            <div
+              v-for="(wItem, wIndex) in witem"
+              :key="windex + '-' + wIndex"
+              class="text-item"
+              :style="{
+                textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
+              }"
+              @click="selectItem(wItem)"
+            >
+              <span class="pinyin">{{
+                windex === 0 &&
+                wIndex === 0 &&
+                data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                  ? wItem.pinyin_up
+                  : wItem.pinyin
+              }}</span>
+              <span
+                class="word"
+                :style="{
+                  fontFamily: wItem.fontFamily,
+                  textDecoration: wItem.textDecoration,
+                  borderBottom: wItem.border === 'dotted' ? '1px dotted' : '',
+                  fontWeight: wItem.fontWeight,
+                  color: wItem.color,
+                }"
+                >{{ wItem.chs }}</span
+              >
+            </div>
+          </template>
+        </div>
+      </template>
       <!-- </el-dialog> -->
       <!-- 添加图片 -->
       <el-dialog

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

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

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

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

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

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