主题色修改

src/icons/svg/icon-article-phrase.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M7 37C7 29.2967 7 11 7 11C7 7.68629 9.68629 5 13 5H35V31C35 31 18.2326 31 13 31C9.7 31 7 33.6842 7 37Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M35 31C35 31 14.1537 31 13 31C9.68629 31 7 33.6863 7 37C7 40.3137 9.68629 43 13 43C15.2091 43 25.8758 43 41 43V7" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M14 37H34" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+    </g>
+  </svg>

src/icons/svg/icon-article-practice.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M1.333 29.333c0-5.891 4.776-10.667 10.667-10.667s10.667 4.776 10.667 10.667v0h-2.667c0-4.418-3.582-8-8-8s-8 3.582-8 8v0h-2.667zM12 17.333c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12 14.667c2.947 0 5.333-2.387 5.333-5.333s-2.387-5.333-5.333-5.333-5.333 2.387-5.333 5.333 2.387 5.333 5.333 5.333zM28.731 1.045c1.221 2.408 1.936 5.251 1.936 8.26 0 0.010 0 0.020-0 0.029v-0.002c0 2.977-0.697 5.792-1.936 8.288l-2.193-1.595c0.924-1.957 1.463-4.25 1.463-6.67 0-0.008 0-0.016-0-0.024v0.001c0-2.389-0.524-4.657-1.463-6.693l2.193-1.595zM24.328 4.245c0.636 1.499 1.005 3.242 1.005 5.071 0 0.006 0 0.012 0 0.018v-0.001c0 0.005 0 0.011 0 0.017 0 1.829-0.37 3.572-1.038 5.159l0.033-0.087-2.236-1.627c0.364-1.029 0.575-2.216 0.575-3.452 0-0.003 0-0.007 0-0.010v0.001c0-0.004 0-0.009 0-0.014 0-1.234-0.21-2.42-0.596-3.522l0.023 0.075 2.235-1.627z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/icon-full.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M30 24v-20h-28v20h-2v2h8.8l-1.8 3.6 1.8 0.8 2.4-4.4h9.8l2.2 4.4 1.8-0.8-1.8-3.6h8.8v-2h-2zM22.2 24h-18.2v-18h24v18h-5.8z" fill="currentColor"></path><path d="M6 22h20v-14h-20v14z" fill="currentColor"></path>
+    </g>
+  </svg>

src/icons/svg/icon-pencil.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L2.58555 4.27834C2.66132 4.05271 2.92697 3.89498 3.23121 3.89498H6.76879C7.07303 3.89498 7.33835 4.05171 7.41412 4.27735L9 9M5 4.0226C4.25022 4.0226 3.87533 4.0226 3.67622 3.84922C3.65023 3.8266 3.62692 3.80226 3.60654 3.77649C3.45039 3.57898 3.563 3.30516 3.78822 2.75753C4.25832 1.61443 4.49337 1.04288 4.9206 1.00363C4.97334 0.998789 5.02666 0.998789 5.0794 1.00363C5.50663 1.04288 5.74168 1.61443 6.21179 2.75753C6.437 3.30516 6.54961 3.57898 6.39346 3.77649C6.37308 3.80226 6.34977 3.8266 6.32378 3.84922C6.12467 4.0226 5.74978 4.0226 5 4.0226Z" stroke="currentColor" stroke-linecap="round"/>
+</svg>

src/icons/svg/icon-wbfx.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M40 20.8421V6C40 4.89543 39.1046 4 38 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H26" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M14 17H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M28 17H34" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M14 28H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M14 34H20" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M17 20L17 14" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><path d="M37.728 37.728L41.9707 41.9707" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"></path><circle cx="33.4854" cy="33.4853" r="6" transform="rotate(45 33.4854 33.4853)" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></circle>
+    </g>
+  </svg>

src/styles/variables.scss

@@ -25,8 +25,8 @@ $header-h: 64px; // 顶部内容高度
 $courseware-width: 1000px; // 教材内容宽度
 $courseware-left-margin: 100px; // 教材左页边距
 $courseware-right-margin: 100px; // 教材右页边距
-$courseware-top-margin: 65px; // 教材顶部页边距
-$courseware-bottom-margin: 65px; // 教材底部页边距
+$courseware-top-padding: 65px; // 教材顶部页边距
+$courseware-bottom-padding: 65px; // 教材底部页边距
 $component-spacing: 24px; // 组件间间距
 $title-content-spacing: 65px; // 标题与内容间距
 $border-component-spacing: 10px; // 组件边框与组件内容间距

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

@@ -314,13 +314,33 @@ export default {
   width: 100%;
   height: 100%;
   min-height: 500px;
-  margin-top: $courseware-top-margin;
-  margin-bottom: $courseware-bottom-margin;
+  padding-top: $courseware-top-padding;
+  padding-bottom: $courseware-bottom-padding;
+  margin: 15px 0;
   background-color: #fff;
   background-repeat: no-repeat;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
 
+  &::before,
+  &::after {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    pointer-events: none;
+    content: '';
+    background: #f9f9f9;
+  }
+
+  &::before {
+    top: -15px;
+  }
+
+  &::after {
+    bottom: -15px;
+  }
+
   .row {
     display: grid;
     gap: $component-spacing;

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

@@ -36,7 +36,6 @@
           type && type == 'normal' ? 'record-time-flex' : '',
         ]"
         :style="{
-          fontSize: attrib && attrib.font_size ? attrib.font_size : '',
           color: microphoneStatus && attrib && attrib.topic_color ? attrib.topic_color : '',
         }"
         >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
@@ -130,7 +129,6 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
         :style="{
-          fontSize: attrib && attrib.font_size ? attrib.font_size : '',
           color: microphoneStatus && attrib && attrib.topic_color ? attrib.topic_color : '',
         }"
         >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
@@ -441,6 +439,7 @@ export default {
   }
 
   .playBack {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
     margin-left: 8px;

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

@@ -127,6 +127,15 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              backgroundColor:
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
                             }"
                           >
                             <template>
@@ -142,6 +151,17 @@
                                     ? 'wordActive'
                                     : '',
                                 ]"
+                                :style="{
+                                  color:
+                                    isPlaying &&
+                                    pItem.chstimeList &&
+                                    pItem.chstimeList[wIndex] &&
+                                    curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                    curTime < item.timeList[pItem.sentIndex].ed &&
+                                    attrib
+                                      ? attrib.topic_color
+                                      : '',
+                                }"
                                 @click.stop="
                                   viewNotes(
                                     $event,
@@ -223,6 +243,25 @@
                               height: '28px',
                               display: 'inline-block',
                               width: item.wordsList[pIndex + 1].chs.trim() === '' ? '6px' : '',
+                              backgroundColor:
+                                isPlaying &&
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
+                              color:
+                                pItem.chstimeList &&
+                                pItem.chstimeList[pItem.leg - 1] &&
+                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                curQue.wordTime &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : '',
                             }"
                             @click.stop="
                               viewNotes(
@@ -311,6 +350,25 @@
                               height: '28px',
                               display: 'inline-block',
                               width: item.wordsList[pIndex + 2].chs.trim() === '' ? '6px' : '',
+                              backgroundColor:
+                                isPlaying &&
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
+                              color:
+                                pItem.chstimeList &&
+                                pItem.chstimeList[pItem.leg - 1] &&
+                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                curQue.wordTime &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : '',
                             }"
                             @click.stop="
                               viewNotes(
@@ -380,6 +438,17 @@
                             pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                             pItem.paraIndex == paraIndex && pItem.sentIndex == sentIndex ? 'overActive' : '',
                           ]"
+                          :style="{
+                            backgroundColor:
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed &&
+                              curTime &&
+                              attrib
+                                ? attrib.assist_color
+                                : '',
+                          }"
                         >
                           <template>
                             <span
@@ -399,6 +468,15 @@
                                 height: '28px',
                                 display: 'inline-block',
                                 width: pItem.chs[wIndex].trim() === '' ? '6px' : '',
+                                color:
+                                  isPlaying &&
+                                  pItem.chstimeList &&
+                                  pItem.chstimeList[wIndex] &&
+                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                  curTime < item.timeList[pItem.sentIndex].ed &&
+                                  attrib
+                                    ? attrib.topic_color
+                                    : '',
                               }"
                               @click.stop="
                                 viewNotes(

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

@@ -107,6 +107,12 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                  ? attrib
+                                    ? attrib.topic_color
+                                    : ''
+                                  : '',
                             }"
                             @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
@@ -243,6 +249,12 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            color:
+                              newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                ? attrib
+                                  ? attrib.topic_color
+                                  : ''
+                                : '',
                           }"
                           @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span

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

@@ -70,6 +70,9 @@
           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
             :class="['NNPE-detail']"
@@ -143,6 +146,13 @@
                               height: '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
+                                  : '',
                             }"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                           >
@@ -190,6 +200,14 @@
                             height: '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
+                                : '',
                           }"
                         >
                           {{
@@ -248,6 +266,14 @@
                             height: '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
+                                : '',
                           }"
                         >
                           {{
@@ -311,6 +337,15 @@
                             height: '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
+                                : '',
                           }"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                         >
@@ -408,7 +443,15 @@
                 />
               </div>
             </div>
-            <span class="full-screen-icon" @click="fullScreen"> </span>
+            <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">
@@ -1122,11 +1165,12 @@ export default {
     }
 
     .full-screen-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
-      background: url('@/assets/full-screen-red.png') no-repeat left top;
-      background-size: 100% 100%;
+
+      // background: url('@/assets/full-screen-red.png') no-repeat left top;
+      // background-size: 100% 100%;
     }
   }
 

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

@@ -111,6 +111,15 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              backgroundColor:
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
                             }"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                           >
@@ -144,6 +153,15 @@
                               fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              backgroundColor:
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
                             }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
@@ -200,6 +218,15 @@
                               fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              backgroundColor:
+                                item.timeList &&
+                                item.timeList[pItem.sentIndex] &&
+                                curTime >= item.timeList[pItem.sentIndex].bg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                curTime &&
+                                attrib
+                                  ? attrib.assist_color
+                                  : '',
                             }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
@@ -244,6 +271,15 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            backgroundColor:
+                              item.timeList &&
+                              item.timeList[pItem.sentIndex] &&
+                              curTime >= item.timeList[pItem.sentIndex].bg &&
+                              curTime <= item.timeList[pItem.sentIndex].ed &&
+                              curTime &&
+                              attrib
+                                ? attrib.assist_color
+                                : '',
                           }"
                           @click="showWordDetail($event, pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span

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

@@ -17,6 +17,7 @@
           @handleChangeStopAudio="handleChangeStopAudio"
           @sentPause="sentPause"
           @playChange="getPlayStatus"
+          :attrib="attrib"
         />
       </div>
       <div v-else :class="type == 'full' ? 'compare-box-big' : 'compare-box'">
@@ -28,6 +29,7 @@
           :type="type"
           @sentPause="sentPause"
           @getPlayStatus="getPlayStatus"
+          :attrib="attrib"
         />
       </div>
     </template>
@@ -67,6 +69,7 @@ export default {
     'themeColor',
     'type',
     'getPlayStatus',
+    'attrib',
   ],
   data() {
     return {
@@ -102,8 +105,8 @@ export default {
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .compare-box {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   margin-left: 8px;
 
   &-big {
@@ -115,8 +118,8 @@ export default {
 
 .compare-disable {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   margin-left: 8px;
 
   &-big {

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

@@ -384,8 +384,8 @@ export default {
 
   .audioLine2 {
     .play-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
 
       &.playBtn-icon {

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

@@ -1,7 +1,15 @@
 <!--  -->
 <template>
   <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
-    <img :src="voiceSrc" :class="type == 'full' ? 'icon-big' : ''" />
+    <img
+      :src="voiceSrc"
+      :class="type == 'full' ? 'icon-big' : ''"
+      class="icon-mask"
+      :style="{
+        backgroundColor: themeColor,
+        maskImage: `url(${voiceSrc})`,
+      }"
+    />
   </div>
 </template>
 

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

@@ -22,19 +22,30 @@
       <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
         <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
           <div class="left-content">
-            <div class="strockplay">
+            <div
+              class="strockplay"
+              :style="{
+                borderColor: attrib ? attrib.topic_color : '',
+              }"
+            >
               <Strockplayredline
                 :play-storkes="true"
                 :word-num="item.con.length"
                 :Book_text="item.con"
                 :target-div="'pra' + item.con + index"
+                :attrib="attrib"
               />
             </div>
             <div class="left-content-pra">
               <div>
                 <span v-if="item.pinyin">{{ item.pinyin.toLowerCase() }}</span>
                 <div v-if="mp3Url" style="margin-left: 4px">
-                  <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="themeColor" :bg="bg" :ed="ed" />
+                  <Audio
+                    :mp3="mp3Url ? mp3Url : ''"
+                    :theme-color="attrib ? attrib.topic_color : '#e35454'"
+                    :bg="bg"
+                    :ed="ed"
+                  />
                 </div>
               </div>
             </div>
@@ -81,6 +92,7 @@
                     :hanzicolor="hanzicolor"
                     :play-storkes="true"
                     :target-div="'write-pra' + cur.stem[0].con"
+                    :attrib="attrib"
                   />
                 </template>
                 <template v-else>
@@ -93,6 +105,7 @@
                     :tab-index="0"
                     :TaskModel="TaskModel"
                     :write-list="writeList"
+                    :attrib="attrib"
                     @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
@@ -103,20 +116,43 @@
               </div>
 
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
-                <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">描红</li>
-                <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">临摹</li>
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  :style="{
+                    background: attrib ? attrib.topic_color : '',
+                  }"
+                  @click="changeNav(0)"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  :style="{
+                    background: attrib ? attrib.assist_color : '',
+                    color: attrib ? attrib.topic_color : '',
+                  }"
+                  @click="changeNav(1)"
+                >
+                  临摹
+                </li>
               </ul>
             </div>
           </template>
         </div>
         <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : '']">
           <div class="left-content">
-            <div class="strockplay">
+            <div
+              class="strockplay"
+              :style="{
+                borderColor: attrib ? attrib.topic_color : '',
+              }"
+            >
               <Strockplayredline
                 :play-storkes="true"
                 :word-num="item.TChinese.length"
                 :Book_text="item.TChinese"
                 :target-div="'praT' + item.TChinese + index"
+                :attrib="attrib"
               />
             </div>
             <div class="left-content-pra"></div>
@@ -163,6 +199,7 @@
                     :hanzicolor="hanzicolor"
                     :play-storkes="true"
                     :target-div="'write-praT' + cur.stem[0].TChinese"
+                    :attrib="attrib"
                   />
                 </template>
                 <template v-else>
@@ -175,6 +212,7 @@
                     :tab-index="1"
                     :TaskModel="TaskModel"
                     :write-list="writeList"
+                    :attrib="attrib"
                     @saveWriteAnswer="saveWriteAnswer"
                   />
                   <div class="footer">
@@ -185,8 +223,25 @@
               </div>
 
               <ul v-if="TaskModel != 'ANSWER'" class="nav-list">
-                <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">描红</li>
-                <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">临摹</li>
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  :style="{
+                    background: attrib ? attrib.topic_color : '',
+                  }"
+                  @click="changeNav(0)"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  :style="{
+                    background: attrib ? attrib.assist_color : '',
+                    color: attrib ? attrib.topic_color : '',
+                  }"
+                  @click="changeNav(1)"
+                >
+                  临摹
+                </li>
               </ul>
             </div>
           </template>
@@ -211,7 +266,18 @@ export default {
     Freewrite,
     Audio,
   },
-  props: ['cur', 'changePraShow', 'themeColor', 'currentTreeID', 'mp3Url', 'TaskModel', 'writeList', 'bg', 'ed'],
+  props: [
+    'cur',
+    'changePraShow',
+    'themeColor',
+    'currentTreeID',
+    'mp3Url',
+    'TaskModel',
+    'writeList',
+    'bg',
+    'ed',
+    'attrib',
+  ],
   data() {
     return {
       //   learn_mode: "",

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

@@ -13,8 +13,11 @@
               ? 'brown-border'
               : 'red-border',
       ]"
+      :style="{ color: attrib ? attrib.topic_color : '' }"
       @click="playHanzi"
-    ></div>
+    >
+      <SvgIcon icon-class="hanzi-strock-play" size="22" class="strock-play-btn" />
+    </div>
 
     <div :id="targetDiv" class="character-target-div"></div>
   </div>
@@ -25,7 +28,7 @@ import { GetStaticResources } from '@/api/app';
 const HanziWriter = require('hanzi-writer');
 export default {
   components: {},
-  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor'],
+  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor', 'attrib'],
   data() {
     return {
       writer: null,
@@ -69,7 +72,7 @@ export default {
       _this.writer = null;
       // var ren = require("hanzi-writer-data/国");
       _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
-        charDataLoader (char, onComplete) {
+        charDataLoader(char, onComplete) {
           let MethodName = 'hz_resource_manager-GetHZStrokesContent';
           let data = {
             hz: char,
@@ -114,7 +117,7 @@ export default {
 .strock-play-box {
   position: absolute;
   top: 0;
-  right: -2px;
+  right: 0;
   z-index: 999;
   display: flex;
   align-items: center;
@@ -125,8 +128,8 @@ export default {
 }
 
 .red-border {
-  background: url('@/assets/strock-play-red-click.png');
-  background-size: 100%;
+  // background: url('@/assets/strock-play-red-click.png');
+  // background-size: 100%;
 }
 
 // .strock-play-box:active {

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

@@ -7,8 +7,8 @@
       </div>
       <div v-if="word.detail" class="bwc-top">
         <span v-if="word.detail.pinyin">{{ word.detail.pinyin.toLowerCase() }}</span>
-        <div v-if="mp3Url" style="margin-left: 4px">
-          <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="themeColor" :bg="bg" :ed="ed" />
+        <div style="margin-left: 4px">
+          <Audio :mp3="mp3Url ? mp3Url : ''" :theme-color="attrib ? attrib.topic_color : '#e35454'" :bg="bg" :ed="ed" />
         </div>
 
         <!-- <img
@@ -29,7 +29,10 @@
         <div
           v-if="word.detail.new_word.length < 5"
           class="bwc-Strockplay"
-          :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
+          :style="{
+            width: word.detail.new_word.length * 126 + 4 + 'px',
+            borderColor: attrib ? attrib.topic_color : '',
+          }"
         >
           <div v-for="(conItem, conindex) in word.detail.new_word" :key="conindex" class="strockplay">
             <Strockplayredline
@@ -38,8 +41,19 @@
               :target-div="'bwcHanziIntp' + conItem + conindex"
               :word-num="word.detail.new_word.length"
               :theme-color="themeColor"
+              :attrib="attrib"
             />
-            <img
+            <svg-icon
+              v-if="word.detail.new_word.length > 1"
+              icon-class="icon-pencil"
+              size="24"
+              :style="{
+                color: attrib && attrib.topic_color ? attrib.topic_color : '#de4444',
+              }"
+              class="collect-icon"
+              @click="writeWord(conItem, '', word.detail.new_word.length)"
+            />
+            <!-- <img
               v-if="word.detail.new_word.length > 1"
               :src="
                 themeColor
@@ -52,11 +66,23 @@
               "
               class="collect-icon"
               @click="writeWord(conItem, '', word.detail.new_word.length)"
-            />
-            <div v-if="conindex < word.detail.new_word.length - 1" class="bwc-line"></div>
+            /> -->
+            <div
+              v-if="conindex < word.detail.new_word.length - 1"
+              class="bwc-line"
+              :style="{
+                background: attrib && attrib.topic_color ? attrib.topic_color : '',
+              }"
+            ></div>
           </div>
         </div>
-        <p v-else class="bwc-tolength">
+        <p
+          v-else
+          class="bwc-tolength"
+          :style="{
+            borderColor: attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        >
           <span v-for="(item, index) in word.detail.new_word" :key="index">{{ item }}</span>
         </p>
       </div>
@@ -121,7 +147,15 @@
           class="bwc-btn bwc-btn2"
           @click="writeWord(word.detail.new_word, word.detail.pinyin, word.detail.new_word.length)"
         >
-          <img
+          <svg-icon
+            icon-class="icon-pencil"
+            size="16"
+            :style="{
+              color: attrib && attrib.topic_color ? attrib.topic_color : '#de4444',
+            }"
+            class="collect-icon"
+          />
+          <!-- <img
             :src="
               themeColor
                 ? themeColor == 'green'
@@ -132,7 +166,7 @@
                 : require('@/assets/icon/Pencil-16-normal-red.png')
             "
             class="collect-icon"
-          />
+          /> -->
           写一写
         </button>
       </div>
@@ -158,6 +192,7 @@
           :write-list="writeList"
           :bg="bg"
           :ed="ed"
+          :attrib="attrib"
           @changeCurQue="changeCurQue"
         />
       </div>
@@ -170,6 +205,7 @@
           :theme-color="themeColor"
           :bg="bg"
           :ed="ed"
+          :attrib="attrib"
         />
       </div>
     </template>
@@ -202,6 +238,7 @@ export default {
     'mp3Url',
     'bg',
     'ed',
+    'attrib',
   ],
   data() {
     return {

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

@@ -6,23 +6,36 @@
     <div class="main">
       <div class="NPC-ArticleView NPC-ArticleView-container">
         <div class="ArticleView-header">
-          <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
+          <a class="ArticleView-full" @click="fullScreen">
+            <svg-icon
+              icon-class="icon-full"
+              size="24"
+              :style="{
+                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+            />
+          </a>
           <div>
             <div
               v-if="
                 (tokenData && tokenData.popedom_code_list && tokenData.popedom_code_list.indexOf(2100001) != -1) ||
                 (tokenData && tokenData.user_type === 'APP')
               "
-              class="left"
-              :style="{ marginLeft: '104px' }"
+              :style="{ marginLeft: '40px' }"
               @click="submit"
+              title="文本分析"
             >
-              <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
-              文本分析
+              <svg-icon
+                icon-class="icon-wbfx"
+                size="24"
+                :style="{
+                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                }"
+              />
             </div>
           </div>
           <div class="right">
-            <template v-if="data.property.is_enable_new_word === 'true'">
+            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
                 v-model="showPhrases"
                 style="display: block"
@@ -54,7 +67,40 @@
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
               />
-            </template>
+            </template> -->
+            <a
+              v-if="data.property.is_enable_new_word === 'true'"
+              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
+              :style="{
+                color:
+                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-ci" size="24" />本课生词</a
+            >
+            <a
+              v-if="data.property.is_enable_read === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
+              :style="{
+                color:
+                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-practice" size="24" />语音练习</a
+            >
+            <a
+              v-if="data.property.is_enable_word === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
+              :style="{
+                color:
+                  showWord && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-phrase" size="24" />取词</a
+            >
           </div>
           <!-- <div class="setting-fontsize">
         <a @click="handleFontsize('-')"
@@ -338,9 +384,10 @@ export default {
       }
     },
     // 切换开关
-    handleSwitchChange(obj1, obj2) {
+    handleSwitchChange(obj1, obj2, obj3) {
       this[obj1] = false;
       this[obj2] = false;
+      this[obj3] = !this[obj3];
       this.showPreview = false;
     },
     handleObj(list) {
@@ -633,13 +680,14 @@ export default {
       top: 0;
       left: 0;
       z-index: 1;
-      padding-left: 24px;
       font-size: 16px;
       font-weight: bold;
       line-height: 24px;
       color: #000;
-      background: url('@/assets/full-screen-red.png') left center no-repeat;
-      background-size: 20px 20px;
+      cursor: pointer;
+
+      // background: url('@/assets/full-screen-red.png') left center no-repeat;
+      // background-size: 20px 20px;
     }
 
     .ArticleView-header {
@@ -654,13 +702,15 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: 24px;
+
+        // padding-left: 24px;
         font-size: 16px;
         font-weight: bold;
         line-height: 24px;
         cursor: pointer;
-        background: url('@/assets/wbfx-icon.png') left center no-repeat;
-        background-size: 20px;
+
+        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
+        // background-size: 20px;
 
         img {
           width: 20px;
@@ -671,6 +721,15 @@ export default {
 
       .right {
         display: flex;
+        gap: 24px;
+
+        a {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          color: rgba(0, 0, 0, 65%);
+          cursor: pointer;
+        }
       }
 
       .setting-fontsize {

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -17,15 +17,35 @@
               marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
             }"
           >
-            <span class="number">{{ index + 1 }}</span>
+            <span
+              class="number"
+              :style="{
+                background:
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+              >{{ index + 1 }}</span
+            >
           </div>
           <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
-            <div v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin" class="pinyin">
+            <div
+              v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+              class="pinyin"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+              }"
+            >
               {{ item.pinyin }}
             </div>
             <div class="items-flex">
               <div v-for="(items, indexs) in item.content_list" :key="indexs" class="items">
-                <div v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin" class="pinyin">
+                <div
+                  v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin"
+                  class="pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
+                >
                   {{ items.pinyin }}
                 </div>
                 <div class="items-content">
@@ -38,7 +58,14 @@
                     />
                   </template>
                   <template v-else-if="items && items.type === 'lian'">
-                    <span class="items-lian">{{ items.con }}</span>
+                    <span
+                      class="items-lian"
+                      :style="{
+                        background:
+                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                      }"
+                      >{{ items.con }}</span
+                    >
                   </template>
                   <Strockplayredline
                     v-if="items && items.type === 'hanzi'"
@@ -52,7 +79,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
+                    :target-div="'newWordTemplate-character' + items.con + index + indexs + randomId"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     :bg-type="data.property.frame_type"
                     class="hanzi-storck"
@@ -72,6 +99,15 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
+                    :play-color="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
 
                   <div
@@ -93,6 +129,12 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                     @click="
                       freeWrite(
                         userAnswer[index][indexs].imgArr ? userAnswer[index][indexs].imgArr : null,
@@ -137,11 +179,19 @@
                 <AudioPlay
                   v-if="isEnable(data.property.is_enable_voice)"
                   :file-id="item.audio_file_id"
-                  theme-color="gray"
+                  :theme-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
                 />
-                <span v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin" class="pinyin">{{
-                  item.pinyin
-                }}</span>
+                <span
+                  v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+                  class="pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
+                  >{{ item.pinyin }}</span
+                >
               </div>
             </div>
             <div class="card-box">
@@ -155,11 +205,22 @@
                     :Book_text="items.con"
                     :play-storkes="isEnable(data.property.is_enable_stroke)"
                     :cur-item="null"
-                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
-                    :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    :target-div="'newWordTemplate-character-answer' + items.con + index + indexs"
+                    :hz_json="
+                      items.hz_info && items.hz_info[0].hzDetail.hz_json ? items.hz_info[0].hzDetail.hz_json : []
+                    "
                     class="hanzi-storck"
                     :class="['strock-chinese', 'border-right-none']"
                     :bg-type="data.property.frame_type"
+                    :play-color="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
                 </div>
               </template>
@@ -168,6 +229,12 @@
                 v-for="(itemI, indexI) in item.miao_arr"
                 :key="indexI + index"
                 style="display: flex"
+                :style="{
+                  borderColor:
+                    data.unified_attrib && data.unified_attrib.topic_color
+                      ? data.unified_attrib.topic_color
+                      : '#346cda',
+                }"
                 @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
               >
                 <Strockplayredlines
@@ -177,26 +244,50 @@
                   "
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-1' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :class="['strock-chinese']"
                   :bg-type="data.property.frame_type"
+                  :play-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
                 <Strockplayredlines
                   v-else
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-2' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
                   :class="['strock-chinese']"
                   :bg-type="data.property.frame_type"
+                  :play-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
               </div>
               <!-- 书写 -->
               <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                 <div
                   :class="['strockplay-newWord']"
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                   @click="
                     freeWrite(
                       userAnswer[index].strokes_content_list[indexs].imgArr
@@ -244,6 +335,7 @@
           :disabled="disabled"
           :show-play="isEnable(data.property.is_enable_play_back)"
           :bg-type="data.property.frame_type"
+          :attrib="data.unified_attrib"
           @closeIfFreeShow="closeIfFreeShow"
           @changePraShow="changePraShow"
           @changeCurQue="changeCurQue"
@@ -261,7 +353,7 @@
             "
             :play-storkes="false"
             :book-text="current_hz"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT-3' + current_hz + active_col_index + active_index + randomId"
             :book-strokes="current_hz_data"
             :stroke-color="
               disabled &&
@@ -272,6 +364,7 @@
                 : ''
             "
             :bg-type="data.property.frame_type"
+            :play-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
           />
           <Strockred
             ref="strockRed"
@@ -284,7 +377,7 @@
             ]"
             :book-text="current_hz"
             :hanzi-color="hanzi_color"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT' + current_hz + active_col_index + active_index + randomId"
             :book-strokes="current_hz_data"
             :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
             :show-error-tip="isEnable(data.property.is_enable_error)"
@@ -339,6 +432,7 @@ export default {
       show_preview: false,
       miao_arr: [],
       if_miao_show: false, // 描红模块
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   computed: {},
@@ -422,7 +516,12 @@ export default {
       this.active_index = index;
       this.active_col_index = indexs;
 
-      this.current_hz = this.data.option_list[index].content_list[indexs].con;
+      this.current_hz =
+        this.data.option_list[index] &&
+        this.data.option_list[index].content_list[indexs] &&
+        this.data.option_list[index].content_list[indexs].con
+          ? this.data.option_list[index].content_list[indexs].con
+          : '';
       this.current_hz_data = imgUrl;
     },
     // 删除记录
@@ -487,12 +586,13 @@ export default {
   }
 
   .audio-wrapper-nobg {
-    height: 16px;
+    height: 24px;
 
     :deep .audio-play {
-      width: 16px;
-      height: 16px;
-      color: #000;
+      width: 24px;
+      height: 24px;
+
+      // color: #000;
       background-color: initial;
     }
 
@@ -590,6 +690,7 @@ export default {
     font-family: 'League';
     font-size: 20px;
     font-weight: 400;
+    line-height: 30px;
     color: rgba(0, 0, 0, 50%);
     text-align: center;
   }
@@ -751,7 +852,7 @@ export default {
   :deep .strockplay-redInner {
     width: 80px;
     height: 80px;
-    border: 2px solid #346cda !important;
+    border-width: 2px !important;
     border-radius: 8px;
   }
 

src/views/book/courseware/preview/components/character_base/components/FreewriteLettle.vue

@@ -2,8 +2,8 @@
   <div class="practice practiceSingleNPC">
     <i class="el-icon-close close-icon" @click="changePraShow()"></i>
     <div class="right-content">
-      <SvgIcon v-if="bgType === 'tian'" icon-class="hanzi-writer-bg" class="character-target-bg" />
-      <svg-icon v-else-if="bgType === 'mi'" icon-class="mi" class="character-target-bg" />
+      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" v-if="bgType === 'tian'" />
+      <svg-icon icon-class="mi" class="character-target-bg" v-else-if="bgType === 'mi'" />
       <div class="right-strockred">
         <template v-if="!hasPlay && data && data.strokes_image">
           <img class="img" :src="data.strokes_image" alt="" />
@@ -28,18 +28,18 @@
         <li
           v-if="showPlay"
           :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'"
+          @click="play()"
           :style="{
             backgroundColor:
               currenHzData && currenHzData.strokes_content && attrib && attrib.topic_color ? attrib.topic_color : '',
           }"
-          @click="play()"
         >
           播放
         </li>
         <li
           :class="disabled ? 'disabled' : ''"
-          :style="{ backgroundColor: attrib && attrib.topic_color ? attrib.topic_color : '#de4444' }"
           @click="handleWriteImg"
+          :style="{ backgroundColor: attrib && attrib.topic_color ? attrib.topic_color : '#de4444' }"
         >
           保存
         </li>

src/views/book/courseware/preview/components/character_base/components/Strockplayredline.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="character-target-box">
       <SvgIcon v-if="bgType === 'tian'" icon-class="hanzi-writer-bg" class="character-target-bg" />
-      <svg-icon v-else-if="bgType === 'mi'" icon-class="mi" class="character-target-bg" />
+      <svg-icon icon-class="mi" class="character-target-bg" v-else-if="bgType === 'mi'" />
       <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
     </div>
   </div>

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

@@ -160,6 +160,14 @@
                                   fontFamily: pItem.config.fontFamily,
                                   height: '28px',
                                   display: 'inline-block',
+                                  color:
+                                    pItem.chstimeList &&
+                                    pItem.chstimeList[wIndex] &&
+                                    curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                    curTime < item.timeList[pItem.sentIndex].ed &&
+                                    attrib
+                                      ? attrib.topic_color
+                                      : '',
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -226,6 +234,15 @@
                               fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                pItem.chstimeList &&
+                                pItem.chstimeList[pItem.leg - 1] &&
+                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                curQue.wordTime &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : '',
                             }"
                             @click.stop="
                               viewNotes(
@@ -302,6 +319,15 @@
                               fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                pItem.chstimeList &&
+                                pItem.chstimeList[pItem.leg - 1] &&
+                                curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
+                                curQue.wordTime &&
+                                curTime <= item.timeList[pItem.sentIndex].ed &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : '',
                             }"
                             @click.stop="
                               viewNotes(
@@ -380,6 +406,14 @@
                                 fontFamily: pItem.config.fontFamily,
                                 height: '28px',
                                 display: 'inline-block',
+                                color:
+                                  pItem.chstimeList &&
+                                  pItem.chstimeList[wIndex] &&
+                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                  curTime <= item.timeList[pItem.sentIndex].ed &&
+                                  attrib
+                                    ? attrib.topic_color
+                                    : '',
                               }"
                               @click.stop="
                                 viewNotes(
@@ -491,6 +525,7 @@
             class="luyin-box"
             :TaskModel="TaskModel"
             :answer-record-list="curQue.Bookanswer.normalModel.recordList"
+            :attrib="attrib"
             @handleWav="handleWav"
           />
         </div>
@@ -887,7 +922,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] === noteNum) {
-            noteIndex = String(i) + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }

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

@@ -124,6 +124,12 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                  ? attrib
+                                    ? attrib.topic_color
+                                    : ''
+                                  : '',
                             }"
                             @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
@@ -265,6 +271,12 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            color:
+                              newWordList.indexOf(pItem.chs) > -1 || pItem.words
+                                ? attrib
+                                  ? attrib.topic_color
+                                  : ''
+                                : '',
                           }"
                           @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span

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

@@ -1,32 +1,32 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div v-if="curQue" class="NNPE-ArticleView">
     <!-- <a class="ArticleView-full" @click="fullScreen">黑板模式</a> -->
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'top'
       "
+      class="aduioLine-box aduioLine-practice-npc"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPraAudio"
-            :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
             ref="audioLine"
-            :stopAudio="stopAudio"
+            audio-id="diaPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
             :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
-            :isRepeat="isRepeat"
-            :mp3Source="curQue.mp3_list[0].source"
+            :is-repeat="isRepeat"
+            :mp3-source="curQue.mp3_list[0].source"
             :ed="ed"
             type="audioLine"
+            :attrib="attrib"
             @handleChangeStopAudio="handleChangeStopAudio"
             @emptyEd="emptyEd"
-            :attrib="attrib"
           />
         </template>
       </div>
@@ -67,14 +67,17 @@
     </div>
 
     <template v-if="resObj">
-      <p class="notice" v-if="curQue.notice" style="padding-top: 24px">
+      <p v-if="curQue.notice" class="notice" style="padding-top: 24px">
         {{ curQue.notice }}
       </p>
       <div class="NPC-sentences-list">
         <div
-          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
           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
             class="NNPE-detail"
@@ -88,7 +91,7 @@
           >
             <template v-if="item.sentArr[0].sentIndex == 0">
               <RoleChs
-                :curRole="item.roleDetail"
+                :cur-role="item.roleDetail"
                 :color="
                   (curQue.wordTime &&
                     curQue.wordTime[index] &&
@@ -132,7 +135,7 @@
                     >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                   >
                 </div> -->
-                <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+                <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                   <span
                     :class="[
                       'chs',
@@ -171,9 +174,9 @@
                 <div style="overflow: hidden; clear: both"></div>
                 <div class="NNPE-words-box">
                   <div
-                    class="NNPE-words"
                     v-for="(pItem, pIndex) in item.sentArr"
                     :key="'wordsList' + pIndex"
+                    class="NNPE-words"
                     :class="[
                       pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                       pItem.chs == '“' ? 'textRight' : '',
@@ -231,6 +234,17 @@
                                     fontFamily: pItem.config.fontFamily,
                                     height: '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
+                                        : '',
                                   }"
                                   >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
                                 >
@@ -279,6 +293,16 @@
                                   fontFamily: item.sentArr[pIndex + 1].config.fontFamily,
                                   height: '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
+                                      : '',
                                 }"
                               >
                                 {{
@@ -302,12 +326,12 @@
                             </template>
                           </span>
                           <span
-                            class="NNPE-words-box"
                             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
@@ -338,6 +362,16 @@
                                   fontFamily: item.sentArr[pIndex + 2].config.fontFamily,
                                   height: '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
+                                      : '',
                                 }"
                               >
                                 {{
@@ -404,6 +438,17 @@
                                   fontFamily: pItem.config.fontFamily,
                                   height: '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.chs[wIndex] }}</span
                               >
@@ -448,9 +493,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     multilingualTextList[multilingual] && multilingualTextList[multilingual][index]
@@ -466,37 +511,46 @@
               <Soundrecord
                 type="promax"
                 class="luyin-box"
-                @getWavblob="getWavblob"
-                @handleParentPlay="handleParentPlay"
-                @sentPause="sentPause"
                 :TaskModel="TaskModel"
-                :answerRecordList="
+                :answer-record-list="
                   curQue.Bookanswer.practiceModel[index] && curQue.Bookanswer.practiceModel[index].recordList
                 "
-                :tmIndex="index"
-                @handleWav="handleWav"
-                :sentIndex="sentIndex"
+                :tm-index="index"
                 v-if="refresh"
+                :sent-index="sentIndex"
+                :attrib="attrib"
+                @getWavblob="getWavblob"
+                @handleParentPlay="handleParentPlay"
+                @sentPause="sentPause"
+                @handleWav="handleWav"
               />
-              <div class="compare-box" v-if="curQue.mp3_list && curQue.mp3_list.length > 0">
+              <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
                 <Audio-compare
-                  :themeColor="attrib ? attrib.topic_color : '#e35454'"
+                  :theme-color="attrib ? attrib.topic_color : '#e35454'"
                   :index="index"
-                  :sentIndex="sentIndex"
+                  :sent-index="sentIndex"
                   :url="curQue.mp3_list[0].id"
                   :bg="curQue.wordTime[index].bg"
                   :ed="curQue.wordTime[index].ed"
                   :wavblob="wavblob"
-                  :getCurTime="getCurTime"
-                  :sentPause="sentPause"
-                  :isRecord="isRecord"
-                  :handleChangeStopAudio="handleChangeStopAudio"
-                  :getPlayStatus="getPlayStatus"
+                  :get-cur-time="getCurTime"
+                  :sent-pause="sentPause"
+                  :is-record="isRecord"
+                  :handle-change-stop-audio="handleChangeStopAudio"
+                  :get-play-status="getPlayStatus"
                   :attrib="attrib"
                 />
               </div>
             </div>
-            <span class="full-screen-icon" @click="fullScreen"> </span>
+            <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">
@@ -506,9 +560,9 @@
     </template>
     <template v-for="(items, indexs) in curQue.detail">
       <div
-        class="multilingual"
-        :key="indexs"
         v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+        :key="indexs"
+        class="multilingual"
       >
         <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
           {{
@@ -520,30 +574,30 @@
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'bottom'
       "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPraAudio"
-            :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
             ref="audioLine"
-            :stopAudio="stopAudio"
+            audio-id="diaPraAudio"
+            :mp3="curQue.mp3_list[0].url"
+            :get-cur-time="getCurTime"
+            :stop-audio="stopAudio"
             :width="colLength == 2 ? 175 : isPhone ? 200 : 750"
-            :isRepeat="isRepeat"
-            :mp3Source="curQue.mp3_list[0].source"
+            :is-repeat="isRepeat"
+            :mp3-source="curQue.mp3_list[0].source"
             :ed="ed"
             type="audioLine"
+            :attrib="attrib"
             @handleChangeStopAudio="handleChangeStopAudio"
             @emptyEd="emptyEd"
-            :attrib="attrib"
           />
         </template>
       </div>
@@ -581,27 +635,27 @@
         />
       </div>
     </div>
-    <div class="voice-full-screen" :id="'screen-' + mathNum">
+    <div :id="'screen-' + mathNum" class="voice-full-screen">
       <Voicefullscreen
         v-if="isFull && resObj"
-        :themeColor="attrib ? attrib.topic_color : '#e35454'"
-        :curQue="curQue"
-        :sentList="resObj.sentList"
-        :sentIndex="sentIndex"
+        :theme-color="attrib ? attrib.topic_color : '#e35454'"
+        :cur-que="curQue"
+        :sent-list="resObj.sentList"
+        :sent-index="sentIndex"
         :mp3="curQue.mp3_list && curQue.mp3_list[0] ? curQue.mp3_list[0].id : ''"
-        :noFont="noFont"
+        :no-font="noFont"
         :NNPENewWordList="NNPENewWordList"
-        :currentTreeID="currentTreeID"
-        :isFull="isFull"
+        :current-tree-i-d="currentTreeID"
+        :is-full="isFull"
         :config="config"
         :TaskModel="TaskModel"
+        :NpcNewWordMp3="NpcNewWordMp3"
+        :attrib="attrib"
         @handleWav="handleWav"
         @changePinyin="changePinyin"
         @changeEN="changeEN"
         @exitFullscreen="exitFullscreen"
         @changeIsFull="changeIsFull"
-        :NpcNewWordMp3="NpcNewWordMp3"
-        :attrib="attrib"
       />
     </div>
   </div>
@@ -616,20 +670,6 @@ import AudioCompare from '../article/components/AudioCompare.vue';
 import Voicefullscreen from '../article/Voicefullscreen.vue';
 export default {
   name: 'ArticleView',
-  props: [
-    'curQue',
-    'colorBox',
-    'noFont',
-    'attrib',
-    'config',
-    'NNPENewWordList',
-    'currentTreeID',
-    'TaskModel',
-    'colLength',
-    'NpcNewWordMp3',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Soundrecord,
@@ -642,7 +682,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -653,7 +693,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -661,18 +701,32 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'colorBox',
+    'noFont',
+    'attrib',
+    'config',
+    'NNPENewWordList',
+    'currentTreeID',
+    'TaskModel',
+    'colLength',
+    'NpcNewWordMp3',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       wavblob: null,
       resObj: null,
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
       stopAudio: false,
       sentIndex: 0,
       isRepeat: false,
-      currSent: null, //当前句子的时间
+      currSent: null, // 当前句子的时间
       isRecord: false,
       isFull: false,
       mathNum: Math.random().toString(36).substr(2),
@@ -686,7 +740,7 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
+    isPlaying() {
       let playing = false;
       if (this.$refs.audioLine) {
         playing = this.$refs.audioLine.audio.isPlaying;
@@ -696,7 +750,7 @@ export default {
   },
   watch: {
     sentIndex: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         if (newVal != oldVal) {
           let Bookanswer = _this.curQue.Bookanswer;
@@ -716,7 +770,7 @@ export default {
       deep: true,
     },
     isFull: {
-      handler: function (newVal, oldVal) {
+      handler(newVal, oldVal) {
         let _this = this;
         _this.refresh = false;
         if (!newVal) {
@@ -729,10 +783,25 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      this.handleData();
+    }
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
     getPlayStatus(val) {
-      //this.isPlaying = val;
+      // this.isPlaying = val;
     },
     pauseAudio() {
       let audio = document.getElementsByTagName('audio');
@@ -750,7 +819,7 @@ export default {
         });
       }
     },
-    //语音全屏
+    // 语音全屏
     fullScreen(type) {
       this.pauseAudio();
       this.pauseVideo();
@@ -758,8 +827,8 @@ export default {
       this.goFullscreen();
     },
     goFullscreen() {
-      let id = 'screen-' + this.mathNum;
-      var element = document.getElementById(id);
+      let id = `screen-${this.mathNum}`;
+      let element = document.getElementById(id);
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.msRequestFullscreen) {
@@ -821,8 +890,8 @@ export default {
         let trans_arr = item.translation.split('\n');
         this.$set(this.multilingualTextList, item.type, trans_arr);
       });
-      let resArr = [],
-        sentArrTotal = [];
+      let resArr = [];
+      let sentArrTotal = [];
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let wordTimeList = curQue.wordTime;
       let dhaspinyin = false; // 每段是否有拼音
@@ -843,20 +912,18 @@ export default {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -867,11 +934,11 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              startIndex: startIndex,
-              endIndex: endIndex,
+              startIndex,
+              endIndex,
               leg: wItem.chs.length,
               timeList: [],
-              words: words,
+              words,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -880,10 +947,10 @@ export default {
             if (wItem.pinyin) dhaspinyin = true;
           });
           let objs = {
-            roleDetail: roleDetail,
-            sentArr: sentArr,
+            roleDetail,
+            sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/\'/g, '’'),
-            dhaspinyin: dhaspinyin,
+            dhaspinyin,
           };
           sentArrTotal.push(sentArr);
           resArr.push(objs);
@@ -895,7 +962,7 @@ export default {
 
       this.resObj = { sentList: resArr };
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -921,7 +988,7 @@ export default {
         });
       });
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.pinyin) > -1) {
         wItem.isShow = false;
@@ -930,43 +997,41 @@ export default {
       }
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0,
+        words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
-            }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
+        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length == item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr == item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -982,7 +1047,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -991,7 +1056,7 @@ export default {
       });
       return listRes;
     },
-    //计算总时间
+    // 计算总时间
     countWordTime(sentArr) {
       let total = 0;
       sentArr.forEach((item) => {
@@ -999,7 +1064,7 @@ export default {
       });
       return total;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, index, ed) {
       let _this = this;
       if (_this.isRepeat) {
@@ -1016,7 +1081,7 @@ export default {
       this.ed = undefined;
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.curQue.Bookanswer.practiceModel[tmIndex] = {
         recordList: [],
       };
@@ -1030,7 +1095,7 @@ export default {
     handleChangeStopAudio() {
       this.stopAudio = false;
     },
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -1061,22 +1126,7 @@ export default {
       });
       this.newWordList = JSON.parse(JSON.stringify(NewWordList));
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      this.handleData();
-    }
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>
@@ -1348,11 +1398,12 @@ export default {
     }
 
     .full-screen-icon {
-      width: 16px;
-      height: 16px;
+      width: 24px;
+      height: 24px;
       cursor: pointer;
-      background: url('@/assets/full-screen-red.png') no-repeat left top;
-      background-size: 100% 100%;
+
+      // background: url('@/assets/full-screen-red.png') no-repeat left top;
+      // background-size: 100% 100%;
     }
   }
 

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

@@ -126,6 +126,13 @@
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
+                              color:
+                                paraIndex == pItem.paraIndex &&
+                                sentIndex == pItem.sentIndex &&
+                                wordIndex == pItem.wordIndex &&
+                                attrib
+                                  ? attrib.topic_color
+                                  : '',
                             }"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                           >
@@ -247,6 +254,13 @@
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
+                            color:
+                              paraIndex == pItem.paraIndex &&
+                              sentIndex == pItem.sentIndex &&
+                              wordIndex == pItem.wordIndex &&
+                              attrib
+                                ? attrib.topic_color
+                                : '',
                           }"
                           @click="showWordDetail($event, pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span

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

@@ -6,7 +6,15 @@
     <div class="main">
       <div class="NPC-ArticleView NPC-ArticleView-container">
         <div class="ArticleView-header">
-          <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
+          <a class="ArticleView-full" @click="fullScreen" title="全屏">
+            <svg-icon
+              icon-class="icon-full"
+              size="24"
+              :style="{
+                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+            />
+          </a>
           <div>
             <div
               v-if="
@@ -14,15 +22,22 @@
                 (tokenData && tokenData.user_type === 'APP')
               "
               class="left"
-              :style="{ marginLeft: '104px' }"
+              :style="{ marginLeft: '40px' }"
               @click="submit"
+              title="文本分析"
             >
               <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
-              文本分析
+              <svg-icon
+                icon-class="icon-wbfx"
+                size="24"
+                :style="{
+                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                }"
+              />
             </div>
           </div>
           <div class="right">
-            <template v-if="data.property.is_enable_new_word === 'true'">
+            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
                 v-model="showPhrases"
                 style="display: block"
@@ -54,7 +69,40 @@
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
               />
-            </template>
+            </template> -->
+            <a
+              v-if="data.property.is_enable_new_word === 'true'"
+              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
+              :style="{
+                color:
+                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-ci" size="24" />本课生词</a
+            >
+            <a
+              v-if="data.property.is_enable_read === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
+              :style="{
+                color:
+                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-practice" size="24" />语音练习</a
+            >
+            <a
+              v-if="data.property.is_enable_word === 'true'"
+              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
+              :style="{
+                color:
+                  showWord && data.unified_attrib && data.unified_attrib.topic_color
+                    ? data.unified_attrib.topic_color
+                    : '',
+              }"
+              ><svg-icon icon-class="icon-article-phrase" size="24" />取词</a
+            >
           </div>
         </div>
         <div ref="ArticleViewbody" class="ArticleView-body">
@@ -323,9 +371,10 @@ export default {
       }
     },
     // 切换开关
-    handleSwitchChange(obj1, obj2) {
+    handleSwitchChange(obj1, obj2, obj3) {
       this[obj1] = false;
       this[obj2] = false;
+      this[obj3] = !this[obj3];
       this.showPreview = false;
     },
     handleObj(list) {
@@ -619,13 +668,14 @@ export default {
       top: 0;
       left: 0;
       z-index: 1;
-      padding-left: 24px;
       font-size: 16px;
       font-weight: bold;
       line-height: 24px;
       color: #000;
-      background: url('@/assets/full-screen-red.png') left center no-repeat;
-      background-size: 20px 20px;
+      cursor: pointer;
+
+      // background: url('@/assets/full-screen-red.png') left center no-repeat;
+      // background-size: 20px 20px;
     }
 
     .ArticleView-header {
@@ -640,13 +690,15 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: 24px;
+
+        // padding-left: 24px;
         font-size: 16px;
         font-weight: bold;
         line-height: 24px;
         cursor: pointer;
-        background: url('@/assets/wbfx-icon.png') left center no-repeat;
-        background-size: 20px;
+
+        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
+        // background-size: 20px;
 
         img {
           width: 20px;
@@ -657,6 +709,15 @@ export default {
 
       .right {
         display: flex;
+        gap: 24px;
+
+        a {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          color: rgba(0, 0, 0, 65%);
+          cursor: pointer;
+        }
       }
 
       .setting-fontsize {

src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

@@ -7,13 +7,13 @@
         type="primary"
         :class="[full_type ? 'exit-btn' : '']"
         style="margin-bottom: 10px"
-        @click="toggleFullScreen"
         :style="{
           background:
             data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
           borderColor:
             data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
         }"
+        @click="toggleFullScreen"
         >{{ full_type ? '退出全屏' : '进入全屏' }}</el-button
       >
       <iframe :src="games_url" width="100%" :height="full_type ? '100%' : '580px'" style="border: none"></iframe>

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -649,6 +649,9 @@ export default {
   .pinyin-common {
     margin-bottom: 5px;
 
+    &.pinyin-common-isExample {
+    }
+
     :deep .edit-div {
       font-family: 'League';
     }

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -192,7 +192,7 @@ export default {
     position: absolute;
     top: -2px;
     right: -2px;
-    z-index: 998;
+    z-index: 1;
 
     // @include font_color("sub_color");
     display: flex;

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

@@ -398,8 +398,8 @@
                         item.new_word && (item.header_con || item.label)
                           ? ''
                           : !item.new_word && (item.header_con || item.label)
-                            ? '40px 12px 0 12px'
-                            : '12px',
+                            ? '20px 6px 0 6px'
+                            : '6px',
                     }"
                   >
                     <div class="header-info-preview">
@@ -417,13 +417,13 @@
                     <div v-if="item.file_list[0]" class="item-image">
                       <el-image
                         :style="{
-                          width: '368px',
+                          width: '209px',
                           height:
                             item.new_word && (item.header_con || item.label)
-                              ? '220px'
+                              ? '138px'
                               : !item.new_word && (item.header_con || item.label)
-                                ? '240px'
-                                : '294px',
+                                ? '180px'
+                                : '160px',
                         }"
                         :src="item.pic_url"
                         :preview-src-list="[item.pic_url]"
@@ -442,7 +442,7 @@
                     :style="{
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-                      paddingTop: item.collocation || item.liju_list || item.definition_list ? '' : '50px',
+                      paddingTop: item.collocation || item.liju_list || item.definition_list ? '' : '24px',
                     }"
                   >
                     <div class="header-info-preview">
@@ -522,7 +522,7 @@
                               :paly-width="'18px'"
                               :BoxbgType="'0'"
                               :cur-item="itemh.hzDetail.hz_json"
-                              :target-div="'writeTops-item-' + indexh + '-' + itemh.con + '-' + index + '-' + indexs"
+                              :target-div="'writeTops-item-newword' + indexh + '-' + itemh.con + '-' + index"
                               :class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
                               class="writeTop-item"
                               :style="{
@@ -1231,18 +1231,18 @@ export default {
     position: relative;
     display: flex;
     column-gap: 8px;
-    width: 400px;
+    width: 225px;
 
     .left,
     .right {
       position: relative;
       box-sizing: border-box;
       width: 100%;
-      min-height: 270px;
-      padding: 8px 12px 18px;
+      min-height: 140px;
+      padding: 4px 6px 9px;
       overflow: hidden;
       background: #fff;
-      border: 4px solid #fff;
+      border: 2px solid #fff;
       border-radius: 24px;
 
       .header-info {
@@ -1269,13 +1269,13 @@ export default {
       }
     }
 
-    min-height: 332px;
+    min-height: 220px;
     transition: 0.6s;
     perspective: 1000px;
     transform-style: preserve-3d;
 
     .left-preview {
-      padding-top: 40px;
+      padding-top: 24px;
 
       // padding-bottom: 32px;
       // position: absolute;
@@ -1292,9 +1292,9 @@ export default {
       h5 {
         padding: 0 12px;
         margin: 0;
-        font-size: 20px;
+        font-size: 16px;
         font-weight: 400;
-        line-height: 32px;
+        line-height: 1.5;
         color: #000;
       }
 
@@ -1303,7 +1303,7 @@ export default {
         top: -4px;
         right: -4px;
         padding: 0 16px 0 8px;
-        font-size: 20px;
+        font-size: 16px;
         font-weight: 500;
         line-height: 150%;
         color: #fff;
@@ -1334,10 +1334,10 @@ export default {
       position: absolute;
       right: 8px;
       bottom: 8px;
-      width: 40px;
-      height: 40px;
-      padding: 8px;
-      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+      font-size: 20px;
       line-height: 1;
       color: #fff;
       cursor: pointer;
@@ -1428,7 +1428,7 @@ export default {
 
     .right-preview {
       display: block;
-      padding: 36px;
+      padding: 24px 6px 6px;
 
       .pinyin-box {
         margin-bottom: 8px;
@@ -1448,8 +1448,14 @@ export default {
           text-align: center;
 
           :deep .strockplayInner {
-            width: 76px;
-            height: 76px;
+            width: 40px;
+            height: 40px;
+
+            .strock-play-box,
+            .playStorkes-btn {
+              width: 9px !important;
+              height: 9px !important;
+            }
           }
 
           p {
@@ -1485,7 +1491,7 @@ export default {
 
         > div {
           display: flex;
-          margin-bottom: 8px;
+          margin-bottom: 4px;
 
           label,
           p {
@@ -1511,7 +1517,7 @@ export default {
 
       :deep p {
         margin: 0;
-        line-height: 1.5;
+        line-height: 1.2;
       }
     }
 
@@ -1578,9 +1584,9 @@ export default {
     }
 
     .con-preview {
-      margin-top: 8px;
+      margin: 8px 0;
       font-family: '楷体';
-      font-size: 38px;
+      font-size: 28px;
       font-weight: 400;
       line-height: 100%;
       color: #000;
@@ -1588,7 +1594,7 @@ export default {
 
       &-big {
         margin: 0;
-        font-size: 86px;
+        font-size: 46px;
       }
     }
 

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

@@ -116,7 +116,7 @@ export default {
 
 .character-target-div {
   position: relative;
-  z-index: 998;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="describe-preview" :style="getAreaStyle()">
+  <div :class="['describe-preview']" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
@@ -152,6 +152,19 @@ export default {
 .describe-preview {
   @include preview-base;
 
+  &.middle {
+    margin-top: calc($title-content-spacing - $component-spacing);
+    margin-bottom: calc($title-content-spacing - $component-spacing);
+  }
+
+  &.top {
+    margin-bottom: calc($title-content-spacing - $component-spacing);
+  }
+
+  &.bottom {
+    margin-top: calc($title-content-spacing - $component-spacing);
+  }
+
   :deep .el-dialog {
     position: fixed;
     margin: 0 !important;

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

@@ -111,8 +111,8 @@
                             class="record-box"
                             :answer-record-list="data.audio_answer_list"
                             :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-                            :attrib="data.unified_attrib"
                             @handleWav="handleMiniWav($event, item)"
+                            :attrib="data.unified_attrib"
                           />
                         </template>
                         <span v-if="data.property.pinyin_position === 'bottom'" class="pinyin">&nbsp;</span>
@@ -135,12 +135,12 @@
                       <span
                         v-if="item.type === 'text'"
                         :key="index"
+                        v-html="sanitizeHTML(item.value)"
                         :style="{
                           fontSize:
                             data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                           fontFamily: data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
                         }"
-                        v-html="sanitizeHTML(item.value)"
                       ></span>
                       <template v-if="item.type === 'input'">
                         <template v-if="data.property.fill_type === fillTypeList[0].value">
@@ -195,8 +195,8 @@
                             class="record-box"
                             :answer-record-list="data.audio_answer_list"
                             :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-                            :attrib="data.unified_attrib"
                             @handleWav="handleMiniWav($event, item)"
+                            :attrib="data.unified_attrib"
                           />
                         </template>
                         <span

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -24,6 +24,7 @@
         <AudioLine
           v-show="!hasSelectedCell"
           ref="audioLine"
+          P
           audio-id="voiceMatrixAudio"
           :mp3="mp3Url"
           :get-cur-time="getCurTime"

src/views/book/courseware/preview/components/voice_matrix/components/AudioLine.vue

@@ -401,8 +401,8 @@ export default {
 
   .audioLine2 {
     .play-icon {
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
       cursor: pointer;
 
       &-big {

src/web_preview/index.vue

@@ -426,21 +426,17 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
     overflow: auto;
     background: url('@/assets/preview-bg.png') repeat;
 
-    &.fullscreen {
+    .catalogue-bar {
       display: flex;
-
-      & .catalogue-bar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 54px;
-        height: 54px;
-        margin: -9px 6px 0 240px;
-        cursor: pointer;
-        background-color: #fff;
-        border-radius: 2px;
-        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
-      }
+      align-items: center;
+      justify-content: center;
+      width: 54px;
+      height: 54px;
+      margin: -9px 6px 0 240px;
+      cursor: pointer;
+      background-color: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
     }
   }
 
@@ -473,14 +469,14 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       width: $courseware-left-margin;
       min-width: $courseware-left-margin;
       max-width: $courseware-left-margin;
-      background-color: #ecf0f1;
+      background-color: #f9f9f9;
     }
 
     .preview-right {
       width: $courseware-right-margin;
       min-width: $courseware-right-margin;
       max-width: $courseware-right-margin;
-      background-color: #ecf0f1;
+      background-color: #f9f9f9;
     }
 
     &.no-audit {