语音全屏

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
+    <a class="ArticleView-full" @click="fullScreen">全屏模式</a>
     <div class="aduioLine-box aduioLine-practice">
       <div
         class="aduioLine-content"
@@ -242,7 +243,10 @@
                 @handleParentPlay="handleParentPlay"
                 @sentPause="sentPause"
               />
-              <div class="compare-box">
+              <div
+                class="compare-box"
+                v-if="curQue.mp3_list && curQue.mp3_list.length > 0"
+              >
                 <Audio-compare
                   :themeColor="themeColor"
                   :index="index"
@@ -258,10 +262,26 @@
                 />
               </div>
             </div>
+            <span class="full-screen-icon" @click="fullScreen"> </span>
           </div>
         </div>
       </div>
     </template>
+    <div class="voice-full-screen" :id="'screen-' + mathNum">
+      <Voicefullscreen
+        v-if="isFull && resObj"
+        :themeColor="themeColor"
+        :curQue="curQue"
+        :sentList="resObj.sentList"
+        :sentIndex="sentIndex"
+        :mp3="curQue.mp3_list[0].id"
+        :noFont="noFont"
+        :NNPENewWordList="NNPENewWordList"
+        :currentTreeID="currentTreeID"
+        @exitFullscreen="exitFullscreen"
+        @changeIsFull="changeIsFull"
+      />
+    </div>
   </div>
 </template>
 
@@ -270,13 +290,15 @@ import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
 import AudioCompare from "../AudioCompare.vue";
+import Voicefullscreen from "../Voicefullscreen.vue";
 export default {
   name: "ArticleView",
-  props: ["curQue", "noFont", "themeColor"],
+  props: ["curQue", "noFont", "themeColor", "NNPENewWordList", "currentTreeID"],
   components: {
     AudioLine,
     Soundrecord,
     AudioCompare,
+    Voicefullscreen,
   },
   data() {
     return {
@@ -291,6 +313,8 @@ export default {
       currSent: null, //当前句子的时间
       isRecord: false,
       wavblob: null,
+      isFull: false,
+      mathNum: Math.random().toString(36).substr(2),
     };
   },
   computed: {
@@ -314,6 +338,46 @@ export default {
   },
   //方法集合
   methods: {
+    pauseAudio() {
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        item.pause();
+      });
+    },
+    //语音全屏
+    fullScreen() {
+      this.pauseAudio();
+      this.isFull = true;
+      this.goFullscreen();
+    },
+    goFullscreen() {
+      let id = "screen-" + this.mathNum;
+      var element = document.getElementById(id);
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      }
+    },
+    exitFullscreen() {
+      this.isFull = false;
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    },
+    changeIsFull() {
+      this.isFull = false;
+    },
     getWavblob(wavblob) {
       this.wavblob = wavblob;
     },
@@ -399,6 +463,7 @@ export default {
         });
       });
       this.resObj = { sentList: resArr, timeList: timeList };
+      console.log(this.resObj);
     },
     mergeWordTime(resArr, wordTimeList) {
       resArr.forEach((item, index) => {
@@ -513,6 +578,21 @@ export default {
 //@import url(); 引入公共css类
 .NNPE-ArticleView {
   width: 100%;
+  position: relative;
+  .ArticleView-full {
+    position: absolute;
+    top: -33px;
+    background: url("../../../../assets/NPC/full-screen-red.png") left center
+      no-repeat;
+    background-size: 16px 16px;
+    padding-left: 24px;
+    color: #000000;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: bold;
+    left: 0;
+    z-index: 99999;
+  }
   .NPC-sentences-list {
     padding: 16px 0;
   }
@@ -640,7 +720,7 @@ export default {
   .Soundrecord-content {
     margin-top: 8px;
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     &-inner {
       display: flex;
@@ -661,65 +741,72 @@ export default {
         align-items: center;
       }
     }
+    .full-screen-icon {
+      width: 16px;
+      height: 16px;
+      background: url("../../../../assets/NPC/full-screen-red.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
   }
 }
 .NPC-Big-Book-preview-green {
-    .NNPE-ArticleView {
-        .NNPE-detail-box {
-            &.active {
-                background: rgba(36, 185, 158, 0.15);
+  .NNPE-ArticleView {
+    .NNPE-detail-box {
+      &.active {
+        background: rgba(36, 185, 158, 0.15);
+      }
+    }
+    .NNPE-detail {
+      .NNPE-words {
+        &-box {
+          > span {
+            &.NNPE-chs {
+              .active {
+                color: #24b99e;
+              }
             }
+          }
         }
-        .NNPE-detail {
-            .NNPE-words {
-                &-box {
-                    > span {
-                        &.NNPE-chs {
-                            .active {
-                                color: #24B99E;
-                            }
-                        }
-                    }
-                }
-                > span {
-                    &.NNPE-chs {
-                        .active {
-                            color: #24B99E;
-                        }
-                    }
-                }
+        > span {
+          &.NNPE-chs {
+            .active {
+              color: #24b99e;
             }
+          }
         }
+      }
     }
-  
+  }
 }
 .NPC-Big-Book-preview-brown {
-    .NNPE-ArticleView {
-        .NNPE-detail-box {
-            &.active {
-                background: rgba(189, 136, 101, 0.15);
+  .NNPE-ArticleView {
+    .NNPE-detail-box {
+      &.active {
+        background: rgba(189, 136, 101, 0.15);
+      }
+    }
+    .NNPE-detail {
+      .NNPE-words {
+        &-box {
+          > span {
+            &.NNPE-chs {
+              .active {
+                color: #bd8865;
+              }
             }
+          }
         }
-        .NNPE-detail {
-            .NNPE-words {
-                &-box {
-                    > span {
-                        &.NNPE-chs {
-                            .active {
-                                color: #BD8865;
-                            }
-                        }
-                    }
-                }
-                > span {
-                    &.NNPE-chs {
-                        .active {
-                            color: #BD8865;
-                        }
-                    }
-                }
+        > span {
+          &.NNPE-chs {
+            .active {
+              color: #bd8865;
             }
+          }
         }
+      }
     }
+  }
 }
 </style>

src/components/Adult/preview/ArticleViewChs/index.vue

@@ -77,6 +77,8 @@
         :wordFontsize="wordFontsize"
         :themeColor="themeColor"
         :noFont="noFont"
+        :NNPENewWordList="NNPENewWordList"
+        :currentTreeID="currentTreeID"
         v-if="showPractice"
       />
       <WordModel
@@ -222,7 +224,6 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    overflow: hidden;
     background: #fff;
     box-sizing: border-box;
     .aduioLine-box {

src/components/Adult/preview/AudioLineSentence.vue

@@ -1,12 +1,10 @@
 <template>
-  <div
-    :class="[
-      'Audio',
-      'AudioFull',
-      mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '',
-    ]"
-  >
-    <div v-if="!hideSlider" class="audioLine">
+  <!-- mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '', -->
+  <div :class="['Audio', 'AudioFull']">
+    <div
+      v-if="!hideSlider"
+      :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']"
+    >
       <div
         class="play"
         :class="[
@@ -21,7 +19,7 @@
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
-        <span>
+        <span :class="bgIndex == 1 ? 'color-white' : ''">
           {{ realFormatSecond(audio.maxTime) }}
           <!-- <template v-if="audio.playing">-</template
           >{{
@@ -77,6 +75,7 @@ export default {
     "maxTime",
     "hideSlider",
     "bgIndex",
+    "wordPlay",
   ],
   data() {
     // 这里存放数据
@@ -130,17 +129,28 @@ export default {
         if (val) this.$emit("handleChangeStopAudio");
       },
     },
+    "audio.isPlaying": {
+      handler(val) {
+        this.$emit("isPlayChange", val);
+      },
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
+    _this.$nextTick(() => {
+      if (_this.wordPlay) {
+        _this.PlayAudio();
+      }
+    });
+
     let audioId = _this.audioId;
     _this.$refs[audioId].addEventListener("loadstart", function () {});
     _this.$refs[audioId].addEventListener("play", function () {
       _this.audio.playing = true;
-      _this.audio.isPlaying = true;
+      // _this.audio.isPlaying = true;
       _this.audio.loading = false;
     });
     _this.$refs[audioId].addEventListener("pause", function () {
@@ -148,6 +158,11 @@ export default {
       if (_this.audio.currentTime * 1000 + 500 > _this.ed) {
         //_this.$emit("sentPause", true);
         _this.playValue = 0;
+        _this.audio.isPlaying = false;
+      }
+      if (_this.wordPlay) {
+        _this.$emit("changePlayStatus");
+        _this.audio.isPlaying = false;
       }
     });
     _this.$refs[audioId].addEventListener("ended", function () {
@@ -189,6 +204,7 @@ export default {
       video.forEach((vItem) => {
         vItem.pause();
       });
+      this.$set(this.audio, "isPlaying", true);
 
       if (this.audio.playing) {
         this.$refs[audioId].pause();
@@ -244,14 +260,16 @@ export default {
     onTimeupdate(res) {
       let _this = this;
       let audioId = _this.audioId;
+
       _this.audio.currentTime = res.target.currentTime;
       _this.getCurTime(res.target.currentTime);
       let time = _this.audio.currentTime - _this.bg / 1000;
       _this.playValue = (time / _this.audio.maxTime) * 100;
-      console.log(time, _this.audio.maxTime, _this.playValue);
       setTimeout(() => {
         if (_this.audio.currentTime * 1000 > _this.ed) {
-          _this.$refs[audioId].pause();
+          if (_this.$refs[audioId]) {
+            _this.$refs[audioId].pause();
+          }
         }
       }, 50);
     },
@@ -331,6 +349,9 @@ export default {
     // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 4px;
+    &-green {
+      background: 0 0;
+    }
     .play {
       margin-right: 12px;
       margin-left: 8px;
@@ -351,6 +372,9 @@ export default {
       font-size: 16px;
       line-height: 24px;
       text-align: right;
+      &.color-white {
+        color: #fff;
+      }
     }
   }
   .audioLine2 {
@@ -411,6 +435,14 @@ export default {
   .el-slider__button-wrapper {
     width: 25px;
   }
+  .audioLine-green {
+    .el-slider__bar {
+      background: #ffc600 !important;
+    }
+    .el-slider__button {
+      background: #ffc600 !important;
+    }
+  }
 }
 .NPC-Book-Sty {
   .AudioFull {
@@ -423,6 +455,14 @@ export default {
       background: #de4444;
       border: none;
     }
+    .audioLine-green {
+      .el-slider__bar {
+        background: #ffc600 !important;
+      }
+      .el-slider__button {
+        background: #ffc600 !important;
+      }
+    }
   }
 }
 .NPC-Big-Book-preview-green {
@@ -433,6 +473,14 @@ export default {
     .el-slider__button {
       background: #24b99e !important;
     }
+    .audioLine-green {
+      .el-slider__bar {
+        background: #ffc600 !important;
+      }
+      .el-slider__button {
+        background: #ffc600 !important;
+      }
+    }
     .audioLine2 {
       .play-icon {
         &.playBtn-icon {
@@ -462,6 +510,14 @@ export default {
     .el-slider__button {
       background: #bd8865 !important;
     }
+    .audioLine-green {
+      .el-slider__bar {
+        background: #ffc600 !important;
+      }
+      .el-slider__button {
+        background: #ffc600 !important;
+      }
+    }
     .audioLine2 {
       .play-icon {
         &.playBtn-icon {

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
+    <a class="ArticleView-full" @click="fullScreen">全屏模式</a>
     <div class="aduioLine-box aduioLine-practice">
       <div class="aduioLine-content">
         <template
@@ -138,7 +139,7 @@
                                 :class="[
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.pinyin) > -1
+                                  noFont.indexOf(pItem.pinyin) > -1
                                     ? 'noFont'
                                     : '',
                                 ]"
@@ -179,7 +180,7 @@
                                 :class="[
                                   pItem.className ? pItem.className : '',
                                   sentIndex == index ? 'wordBlank' : '',
-                                  noFont.indexOf(item.pinyin) > -1
+                                  noFont.indexOf(pItem.pinyin) > -1
                                     ? 'noFont'
                                     : '',
                                 ]"
@@ -336,7 +337,10 @@
                 @handleParentPlay="handleParentPlay"
                 @sentPause="sentPause"
               />
-              <div class="compare-box">
+              <div
+                class="compare-box"
+                v-if="curQue.mp3_list && curQue.mp3_list.length > 0"
+              >
                 <Audio-compare
                   :themeColor="themeColor"
                   :index="index"
@@ -357,15 +361,20 @@
         </div>
       </div>
     </template>
-    <div class="voice-full-screen" v-if="isFull && resObj">
+    <div class="voice-full-screen" :id="'screen-' + mathNum">
       <Voicefullscreen
+        v-if="isFull && resObj"
         :themeColor="themeColor"
         :curQue="curQue"
         :sentList="resObj.sentList"
         :sentIndex="sentIndex"
         :mp3="curQue.mp3_list[0].id"
         :noFont="noFont"
+        :NNPENewWordList="NNPENewWordList"
+        :currentTreeID="currentTreeID"
+        :isFull="isFull"
         @exitFullscreen="exitFullscreen"
+        @changeIsFull="changeIsFull"
       />
     </div>
   </div>
@@ -380,7 +389,15 @@ import AudioCompare from "../AudioCompare.vue";
 import Voicefullscreen from "../Voicefullscreen.vue";
 export default {
   name: "ArticleView",
-  props: ["curQue", "colorBox", "noFont", "themeColor", "isShowEN"],
+  props: [
+    "curQue",
+    "colorBox",
+    "noFont",
+    "themeColor",
+    "isShowEN",
+    "NNPENewWordList",
+    "currentTreeID",
+  ],
   components: {
     AudioLine,
     Soundrecord,
@@ -448,6 +465,7 @@ export default {
       currSent: null, //当前句子的时间
       isRecord: false,
       isFull: false,
+      mathNum: Math.random().toString(36).substr(2),
     };
   },
   computed: {
@@ -471,25 +489,45 @@ export default {
   },
   //方法集合
   methods: {
+    pauseAudio() {
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        item.pause();
+      });
+    },
     //语音全屏
-    fullScreen() {
+    fullScreen(type) {
+      this.pauseAudio();
       this.isFull = true;
-      // var element = document.documentElement;
-      // if (element.requestFullscreen) {
-      //   element.requestFullscreen();
-      // } else if (element.mozRequestFullScreen) {
-      //   // 兼容火狐
-      //   element.mozRequestFullScreen();
-      // } else if (element.webkitRequestFullscreen) {
-      //   // 兼容谷歌
-      //   element.webkitRequestFullscreen();
-      // } else if (element.msRequestFullscreen) {
-      //   // 兼容IE
-      //   element.msRequestFullscreen();
-      // }
+      this.goFullscreen();
+    },
+    goFullscreen() {
+      let id = "screen-" + this.mathNum;
+      var element = document.getElementById(id);
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      }
     },
     exitFullscreen() {
       this.isFull = false;
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    },
+    changeIsFull() {
+      this.isFull = false;
     },
     getWavblob(wavblob) {
       this.wavblob = wavblob;
@@ -708,6 +746,21 @@ export default {
 //@import url(); 引入公共css类
 .NNPE-ArticleView {
   width: 100%;
+  position: relative;
+  .ArticleView-full {
+    position: absolute;
+    top: -33px;
+    background: url("../../../../assets/NPC/full-screen-red.png") left center
+      no-repeat;
+    background-size: 16px 16px;
+    padding-left: 24px;
+    color: #000000;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: bold;
+    left: 0;
+    z-index: 99999;
+  }
   .NPC-sentences-list {
     padding: 0px 0 24px 0;
   }
@@ -916,10 +969,10 @@ export default {
     }
   }
   .voice-full-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    // z-index: 9999;
   }
 }
 </style>

src/components/Adult/preview/DialogueArticleViewChs/index.vue

@@ -1,8 +1,14 @@
 <!--  -->
 <template>
-  <div class="NPC-ArticleView NPC-ArticleView-container" v-if="curQue">
+  <div
+    class="NPC-ArticleView NPC-ArticleView-container"
+    id="articleBoby"
+    v-if="curQue"
+  >
     <div class="ArticleView-header">
-      <a :class="['ArticleView-full']" v-if="showPractice">全屏模式</a>
+      <!-- <a :class="['ArticleView-full']" v-if="showPractice" @click="goFullscreen"
+        >全屏模式</a
+      > -->
       <template v-if="curQue.checkList.indexOf(1) > -1">
         <el-switch
           style="display: block"
@@ -87,6 +93,8 @@
         :themeColor="themeColor"
         :noFont="noFont"
         :isShowEN="isShowEN"
+        :currentTreeID="currentTreeID"
+        :NNPENewWordList="NNPENewWordList"
         @changeEN="changeEN"
         v-if="showPractice"
       />
@@ -159,6 +167,14 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    goFullscreen() {
+      var element = document.getElementById("articleBoby");
+      if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullScreen) {
+        element.webkitRequestFullScreen();
+      }
+    },
     // 英文的显示和隐藏
     changeEN() {
       this.isShowEN = !this.isShowEN;
@@ -183,6 +199,7 @@ export default {
       this[obj2] = false;
       this.showPreview = false;
     },
+    articleFullScreen() {},
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -210,24 +227,22 @@ export default {
 //@import url(); 引入公共css类
 .NPC-ArticleView {
   width: 100%;
+  &:-webkit-full-screen {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:-moz-full-screen {
+    width: 100%;
+    height: 100%;
+  }
   .ArticleView-header {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 16px;
     position: relative;
-    .ArticleView-full{
-        position: absolute;
-        background: url('../../../../assets/NPC/full-screen-red.png') left center no-repeat;
-        background-size: 16px 16px;
-        padding-left: 24px;
-        color: #000000;
-        font-size: 14px;
-        line-height: 24px;
-        font-weight: bold;
-        left: 0;
-        top: 0;
-    }
+
     .setting-fontsize {
       display: flex;
       margin-left: 24px;
@@ -252,7 +267,6 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    overflow: hidden;
     background: #fff;
     box-sizing: border-box;
     .aduioLine-box {
@@ -265,9 +279,7 @@ export default {
 <style lang="scss">
 .NNPE-tableList-item-noMargin {
   .NPC-ArticleView {
-    &.NPC-ArticleView-container {
-      margin-bottom: 0;
-    }
+    background: #fff;
   }
 }
 .NPC-ArticleView {

src/components/Adult/preview/Soundrecorddiff.vue

@@ -2,8 +2,8 @@
 <template>
   <div class="NNPE-Book-record">
     <div :class="['record-main', microphoneStatus ? 'active' : '']">
-      <div class="record-main-inner">
-        <div class="record" @click="microphone" />
+      <div class="record-main-inner" @click="microphone">
+        <div class="record" />
         <span v-if="microphoneStatus" class="record-time">{{
           handleDateTime(recordtime)
         }}</span>
@@ -269,6 +269,7 @@ export default {
         this.isPlaying = false;
         clearInterval(this.timer);
       }
+      this.$emit("getRerordStatus", this.recordList.length > 0);
     },
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -352,6 +353,7 @@ export default {
       box-sizing: border-box;
       background: #de4444;
       border: 1px solid rgba(0, 0, 0, 0.1);
+      cursor: pointer;
     }
   }
 
@@ -360,7 +362,6 @@ export default {
     height: 24px;
     background: url("../../../assets/NPC/voice-24.png") center no-repeat;
     background-size: 100%;
-    cursor: pointer;
   }
   .record-time {
     color: #fff;

src/components/Adult/preview/TextInputRecord.vue

@@ -47,7 +47,7 @@
           @input="handleInput"
           :class="['item-input']"
           v-model="curQue.Bookanswer[indexs]"
-          @keyup.enter="handleReplaceTone"
+          @keyup.enter="handleReplaceTone($event, indexs)"
           placeholder="输入"
         />
         <template v-if="items.IsRecord">
@@ -116,8 +116,9 @@ export default {
       // }
     },
     handleWav(data) {},
-    handleReplaceTone(e) {
+    handleReplaceTone(e, index) {
       let _this = this;
+      _this.resArr = [];
       let value = e.target.value;
 
       if (value) {
@@ -126,15 +127,16 @@ export default {
         valueArr.forEach((item, index) => {
           this.handleValue(item);
         });
+        let str = "";
         setTimeout(() => {
-          let str = "";
           _this.resArr.forEach((item) => {
+            str += " ";
             item.forEach((sItem) => {
               if (sItem.number && sItem.con) {
                 let number = Number(sItem.number);
                 let con = sItem.con;
                 let word = _this.addTone(number, con);
-                str += word + " ";
+                str += word;
               } else {
                 if (sItem.number) {
                   str += sItem.number;
@@ -144,6 +146,7 @@ export default {
               }
             });
           });
+          _this.$set(_this.curQue.Bookanswer, index, str.trim());
         }, 1000);
       }
     },
@@ -191,16 +194,14 @@ export default {
           } else if (con.indexOf("ui") > -1) {
             zm2 = _this.tableData[3][number - 1];
             con = con.replace("i", zm2);
-          } else if (zm == "v") {
-            if (
-              con.indexOf("yv") > -1 ||
-              con.indexOf("jv") > -1 ||
-              con.indexOf("qv") > -1 ||
-              con.indexOf("xv") > -1
-            ) {
-              zm2 = _this.tableData[4][number - 1];
-              con = con.replace("v", zm2);
-            }
+          } else if (
+            con.indexOf("yv") > -1 ||
+            con.indexOf("jv") > -1 ||
+            con.indexOf("qv") > -1 ||
+            con.indexOf("xv") > -1
+          ) {
+            zm2 = _this.tableData[4][number - 1];
+            con = con.replace("v", zm2);
           } else {
             con = con.replace(zm, zm2);
           }

src/components/Adult/preview/Voicefullscreen.vue

@@ -17,7 +17,10 @@
         </div>
       </div>
       <div class="top-middle">
-        <div :class="['audio-box', bgIndex == 1 ? 'audio-box-green' : '']">
+        <div
+          v-if="mp3"
+          :class="['audio-box', bgIndex == 1 ? 'audio-box-green' : '']"
+        >
           <AudioLineSentence
             :key="'sent' + curSentIndex"
             :mp3="mp3"
@@ -88,7 +91,7 @@
         @click="exitFullScreen"
       >
         <span
-          :class="['close-icon', bgIndex == 1 ? 'close-icon-yellow' : '']"
+          :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
         ></span>
       </div>
     </div>
@@ -101,8 +104,8 @@
       <div
         :class="[
           'vc-left vc-left-grey',
-          isShow && bgIndex == 0 ? 'vc-left-black' : '',
-          isShow && bgIndex == 1 ? 'vc-left-white' : '',
+          isShowPN && bgIndex == 0 ? 'vc-left-black' : '',
+          isShowPN && bgIndex == 1 ? 'vc-left-white' : '',
         ]"
         @click="prevSentence"
       ></div>
@@ -110,17 +113,19 @@
         <div class="NNPE-words-box">
           <div
             class="NNPE-words"
-            v-for="(pItem, pIndex) in item.sentArr"
+            v-for="(pItem, pIndex) in item"
             :key="'wordsList' + pIndex"
             :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+            @dblclick="showWordDetail($event, pItem)"
+            @click="playWord(pItem)"
           >
             <template v-if="!pItem.width">
               <template v-if="pItem.isShow">
                 <template
                   v-if="
-                    item.sentArr[pIndex + 1] &&
-                    item.sentArr[pIndex + 1].chs &&
-                    chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
+                    item[pIndex + 1] &&
+                    item[pIndex + 1].chs &&
+                    chsFhList.indexOf(item[pIndex + 1].chs) > -1
                   "
                 >
                   <span class="NNPE-words-box">
@@ -130,7 +135,7 @@
                         class="NNPE-pinyin"
                         :class="[
                           pItem.className ? pItem.className : '',
-                          noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
                         >{{ pItem.pinyin }}</span
@@ -152,9 +157,17 @@
                             curQue.wordTime &&
                             curQue.wordTime[curSentIndex] &&
                             curTime <= curQue.wordTime[curSentIndex].ed
-                              ? 'active'
+                              ? bgIndex == 0
+                                ? 'active'
+                                : 'active-yellow'
                               : '',
                             bgIndex == 1 ? 'font-white' : '',
+                            bgIndex == 0 && wordIndex == pItem.wordIndex
+                              ? 'wordActive'
+                              : '',
+                            bgIndex == 1 && wordIndex == pItem.wordIndex
+                              ? 'wordActive-blue'
+                              : '',
                           ]"
                           >{{ pItem.chs[wIndex] }}</span
                         >
@@ -166,7 +179,7 @@
                         class="NNPE-pinyin"
                         :class="[
                           pItem.className ? pItem.className : '',
-                          noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
                         >{{ pItem.pinyin }}</span
@@ -179,13 +192,13 @@
                         v-if="isShowPY"
                         :class="[
                           'NNPE-pinyin',
-                          noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1
+                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
                             ? 'noFont'
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
                         style="text-align: left"
-                        >{{ item.sentArr[pIndex + 1].pinyin }}</span
+                        >{{ item[pIndex + 1].pinyin }}</span
                       >
                     </template>
                     <span class="NNPE-chs" style="text-align: left">
@@ -197,12 +210,13 @@
                           curQue.wordTime &&
                           curQue.wordTime[curSentIndex] &&
                           curTime <= curQue.wordTime[curSentIndex].ed
-                            ? 'active'
+                            ? bgIndex == 0
+                              ? 'active'
+                              : 'active-yellow'
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
-                      >
-                        {{ item.sentArr[pIndex + 1].chs }}</span
+                        >{{ item[pIndex + 1].chs }}</span
                       >
                     </span>
                     <template v-if="curQue.pyPosition == 'bottom'">
@@ -210,13 +224,13 @@
                         v-if="isShowPY"
                         :class="[
                           'NNPE-pinyin',
-                          noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1
+                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
                             ? 'noFont'
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
                         style="text-align: left"
-                        >{{ item.sentArr[pIndex + 1].pinyin }}</span
+                        >{{ item[pIndex + 1].pinyin }}</span
                       >
                     </template>
                   </span>
@@ -230,7 +244,7 @@
                         :class="[
                           pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
-                          noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
                         >{{ pItem.pinyin }}</span
@@ -254,9 +268,17 @@
                           curQue.wordTime &&
                           curQue.wordTime[curSentIndex] &&
                           curTime <= curQue.wordTime[curSentIndex].ed
-                            ? 'active'
+                            ? bgIndex == 0
+                              ? 'active'
+                              : 'active-yellow'
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
+                          bgIndex == 0 && wordIndex == pItem.wordIndex
+                            ? 'wordActive'
+                            : '',
+                          bgIndex == 1 && wordIndex == pItem.wordIndex
+                            ? 'wordActive-blue'
+                            : '',
                         ]"
                         >{{ pItem.chs[wIndex] }}</span
                       >
@@ -300,8 +322,8 @@
       <div
         :class="[
           'vc-left vc-right-grey',
-          isShow && bgIndex == 0 ? 'vc-right-black' : '',
-          isShow && bgIndex == 1 ? 'vc-right-white' : '',
+          isShowPN && bgIndex == 0 ? 'vc-right-black' : '',
+          isShowPN && bgIndex == 1 ? 'vc-right-white' : '',
         ]"
         @click="nextSentence"
       ></div>
@@ -325,7 +347,7 @@
             type="full"
             :themeColor="themeColor"
             :index="curSentIndex"
-            :curSentIndex="curSentIndex"
+            :sentIndex="curSentIndex"
             :url="curQue.mp3_list[0].id"
             :bg="bg"
             :ed="ed"
@@ -346,6 +368,39 @@
         {{ curSentIndex + 1 }}/{{ sentList.length }}
       </div>
     </div>
+
+    <template v-if="isShow">
+      <div
+        ref="wordcard"
+        class="NNPE-wordDetail"
+        :style="{ top: top + 'px', left: left + 'px' }"
+      >
+        <Wordcard
+          :word="word"
+          :changeWordCard="changeWordCard"
+          :themeColor="themeColor"
+          :currentTreeID="currentTreeID"
+        />
+      </div>
+    </template>
+    <div class="word-play-audio" v-if="isWordPlay">
+      <AudioLineSentence
+        :mp3="mp3"
+        :getCurTime="getCurWordTime"
+        ref="audioLineWord"
+        :audioId="'artPraAudioId' + curSentIndex + wordIndex"
+        :stopAudio="stopAudio"
+        :width="120"
+        :hideSlider="false"
+        :bg="wordbg"
+        :ed="worded"
+        :maxTime="wordMaxTime"
+        :bgIndex="bgIndex"
+        :isRepeat="isRepeat"
+        :wordPlay="true"
+        @changePlayStatus="changePlayStatus"
+      />
+    </div>
   </div>
 </template>
 
@@ -353,11 +408,13 @@
 import AudioLineSentence from "./AudioLineSentence.vue";
 import Soundrecorddiff from "./Soundrecorddiff.vue";
 import AudioCompare from "./AudioCompare.vue";
+import Wordcard from "./components/Wordcard.vue";
 export default {
   components: {
     AudioLineSentence,
     Soundrecorddiff,
     AudioCompare,
+    Wordcard,
   },
   props: [
     "sentList",
@@ -367,6 +424,8 @@ export default {
     "curQue",
     "noFont",
     "themeColor",
+    "NNPENewWordList",
+    "currentTreeID",
   ],
   data() {
     return {
@@ -408,18 +467,34 @@ export default {
       stopAudio: false,
       isRecord: false,
       isShowCompare: false,
-      isShow: false,
+      isShowPN: false,
       curSentIndex: 0,
+      oldHz: "",
+      hz: "",
+      clientY: 0,
+      top: 0,
+      left: 0,
+      newWordList: [],
+      pinyin: "",
+      wordIndex: -1,
+      isShow: false,
+      wordbg: 0,
+      worded: 0,
+      wordMaxTime: 0,
+      isWordPlay: false,
+      curWordTime: 0,
+      isPlaying: true,
     };
   },
   computed: {
-    isPlaying: function () {
-      let playing = false;
-      if (this.$refs.audioLineSent) {
-        playing = this.$refs.audioLineSent.audio.isPlaying;
-      }
-      return playing;
-    },
+    // isPlaying: function () {
+    //   let playing = false;
+    //   if (this.$refs.audioLineSent) {
+    //     playing = this.$refs.audioLineSent.audio.isPlaying;
+    //   }
+    //   console.log(playing);
+    //   return playing;
+    // },
   },
   watch: {
     sentIndex: {
@@ -429,9 +504,39 @@ export default {
       },
       deep: true,
     },
+    hz: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          _this.handleNewWords(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
+    isPlayChange(bool) {
+      this.isPlaying = bool;
+    },
     //添加收藏
     addColl() {
       let Bookdetail = sessionStorage.getItem("Bookdetail");
@@ -440,7 +545,7 @@ export default {
       }
       let MethodName = "order-collection_manager-AddMyCollection";
       let text = "";
-      this.item.sentArr.forEach((item) => {
+      this.item.forEach((item) => {
         if (item.chs != "#") {
           text += item.chs;
         }
@@ -471,7 +576,7 @@ export default {
       });
     },
     showPrevNext(bool) {
-      this.isShow = bool;
+      this.isShowPN = bool;
     },
     prevSentence() {
       if (this.curSentIndex == 0) {
@@ -515,12 +620,32 @@ export default {
         _this.curTime = curTime * 1000;
       }
     },
+    getCurWordTime(curTime) {
+      let _this = this;
+      // if (_this.isRepeat) {
+      //   let time = curTime * 1000;
+      //   if (time > _this.worded || time < _this.worded) {
+      //     _this.curWordTime = _this.worded;
+      //     _this.$refs.audioLineWord.onTimeupdateTime(_this.wordbg / 1000);
+      //   } else {
+      //     _this.curWordTime = curTime * 1000;
+      //   }
+      // } else {
+      _this.curWordTime = curTime * 1000;
+      // }
+    },
     changeBg(bgIndex) {
       this.bgIndex = bgIndex;
     },
     getSentence() {
       let _this = this;
-      _this.item = _this.sentList[_this.curSentIndex];
+      _this.pauseAudio();
+      let item = _this.sentList[_this.curSentIndex];
+      if (item.sentArr) {
+        _this.item = item.sentArr;
+      } else {
+        _this.item = item;
+      }
       _this.bg = _this.curQue.wordTime[_this.curSentIndex].bg;
       _this.ed = _this.curQue.wordTime[_this.curSentIndex].ed;
       let maxTime = (_this.ed - _this.bg) / 1000;
@@ -529,11 +654,21 @@ export default {
       } else {
         _this.maxTime = maxTime;
       }
-      console.log(_this.sentList);
+    },
+    pauseAudio() {
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        item.pause();
+      });
     },
     exitFullScreen() {
+      this.pauseAudio();
       this.$emit("exitFullscreen");
     },
+    changeFullScreen() {
+      this.pauseAudio();
+      this.$emit("changeIsFull");
+    },
     handleWav(data) {},
     // 录音时暂停音频播放
     handleParentPlay() {
@@ -543,14 +678,172 @@ export default {
     handleChangeStopAudio() {
       this.stopAudio = false;
     },
+    //播放音频
+    playWord(item) {
+      let _this = this;
+      _this.wordIndex = item.wordIndex;
+      let leg = item.timeList.length;
+      _this.wordbg = item.timeList[0].wordBg;
+      _this.worded = item.timeList[leg - 1].wordEd;
+      let wordMaxTime = (_this.worded - _this.wordbg) / 1000;
+      if (wordMaxTime < 1) {
+        _this.wordMaxTime = 1;
+      } else {
+        _this.wordMaxTime = wordMaxTime;
+      }
+      _this.isWordPlay = true;
+    },
+    changePlayStatus() {
+      this.isWordPlay = false;
+      this.wordIndex = -1;
+    },
+    showWordDetail(e, item) {
+      let _this = this;
+      if (_this.chsFhList.indexOf(item.chs) > -1) {
+        return;
+      }
+      if (_this.oldHz != item.chs) {
+        this.isShow = false;
+        setTimeout(() => {
+          _this.hz = item.chs;
+          _this.pinyin = item.pinyin;
+          _this.wordIndex = item.wordIndex;
+        }, 50);
+      }
+      _this.clientY = e.clientY;
+
+      let left = e.clientX;
+      let width = 0;
+      if (item.chs.length == 1 || item.chs.length == 2) {
+        width = 304;
+      } else if (item.chs.length == 3 || item.chs.length == 4) {
+        width = 432;
+      } else if (item.chs.length > 3) {
+        width = 560;
+      }
+      // if (left - this.bodyLeft > this.contentWidth / 2) {
+      //   _this.left = left - width + 10;
+      // } else {
+      _this.left = left - width / 2;
+      //}
+    },
+    changeWordCard(isShow) {
+      let _this = this;
+      _this.isShow = isShow;
+      _this.oldHz = "";
+      _this.hz = "";
+      _this.wordIndex = -1;
+    },
+    // 处理分词数据
+    handleNewWords(val) {
+      let _this = this;
+      _this.isShow = true;
+      _this.word = null;
+
+      if (_this.newWordList.indexOf(val) > -1) {
+        for (let i = 0; i < this.NNPENewWordList.length; i++) {
+          let pItem = this.NNPENewWordList[i];
+          for (let j = 0; j < pItem.length; j++) {
+            let item = pItem[j];
+            if (item.new_word.trim() == val.trim()) {
+              let wordlist = val.split("");
+              this.word = { list: wordlist, detail: item };
+              break;
+            }
+          }
+        }
+      } else {
+        let wordlist = val.split("");
+        let option = {
+          definition_list: [],
+          mp3_list: [],
+          new_word: val,
+          pinyin: _this.pinyin,
+        };
+        _this.word = { list: wordlist, detail: option };
+      }
+      _this.oldHz = val;
+    },
+    handleNewword() {
+      let NewWordList = [];
+      this.NNPENewWordList.forEach((item) => {
+        item.forEach((wItem) => {
+          NewWordList.push(wItem.new_word);
+        });
+      });
+      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.curSentIndex = this.sentIndex;
-    console.log(this.curSentIndex);
-    this.getSentence();
+    let _this = this;
+    if (_this.NNPENewWordList) {
+      _this.handleNewword();
+    }
+    _this.curSentIndex = _this.sentIndex;
+    _this.getSentence();
+    let isFullscreen =
+      document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.fullScreen ||
+      document.mozFullScreen ||
+      document.webkitIsFullScreen;
+    isFullscreen = !!isFullscreen;
+    document.addEventListener("fullscreenchange", () => {
+      let isFullscreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen;
+
+      if (!isFullscreen) {
+        _this.changeFullScreen();
+      }
+    });
+    document.addEventListener("mozfullscreenchange", () => {
+      let isFullscreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen;
+
+      if (!isFullscreen) {
+        _this.changeFullScreen();
+      }
+    });
+    document.addEventListener("webkitfullscreenchange", () => {
+      let isFullscreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen;
+
+      if (!isFullscreen) {
+        _this.changeFullScreen();
+      }
+    });
+    document.addEventListener("msfullscreenchange", () => {
+      let isFullscreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen;
+
+      if (!isFullscreen) {
+        _this.changeFullScreen();
+      }
+    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -564,11 +857,15 @@ export default {
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .voicefull {
-  width: 100vh;
+  width: 100%;
   height: 100vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  .NNPE-wordDetail {
+    position: fixed;
+    z-index: 9999;
+  }
   &.bg1 {
     background: #fff;
   }
@@ -811,6 +1108,10 @@ export default {
     }
     .NNPE-words {
       float: left;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
       &-box {
         float: left;
         > span {
@@ -830,12 +1131,12 @@ export default {
             &.textLeft {
               text-align: left;
             }
-            &.wordBlank {
-              color: rgba(0, 0, 0, 0.85);
-            }
             &.font-white {
               color: #fff;
             }
+            &.wordBlank {
+              color: rgba(0, 0, 0, 0.85);
+            }
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
@@ -843,12 +1144,21 @@ export default {
             line-height: 56px;
             padding-bottom: 16px;
             color: rgba(0, 0, 0, 0.85);
-
+            .font-white {
+              color: #fff;
+            }
             .active {
               color: #de4444;
+              &-yellow {
+                color: #ffc600;
+              }
             }
-            .font-white {
-              color: #fff;
+
+            .wordActive {
+              color: #de4444;
+            }
+            .wordActive-blue {
+              color: #ffc600;
             }
           }
           // &.padding {
@@ -871,6 +1181,9 @@ export default {
           line-height: 40px;
           height: 40px;
           color: rgba(0, 0, 0, 0.85);
+          &.font-white {
+            color: #fff;
+          }
           &.noFont {
             font-family: initial;
           }
@@ -880,9 +1193,6 @@ export default {
           &.wordBlank {
             color: rgba(0, 0, 0, 0.85);
           }
-          &.font-white {
-            color: #fff;
-          }
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
@@ -890,11 +1200,20 @@ export default {
           line-height: 56px;
           padding-bottom: 16px;
           color: rgba(0, 0, 0, 0.85);
+          .font-white {
+            color: #fff;
+          }
           .active {
             color: #de4444;
+            &-yellow {
+              color: #ffc600;
+            }
           }
-          .font-white {
-            color: #fff;
+          .wordActive {
+            color: #de4444;
+          }
+          .wordActive-blue {
+            color: #ffc600;
           }
         }
         &.padding {
@@ -945,6 +1264,10 @@ export default {
     }
   }
 }
+.word-play-audio {
+  position: absolute;
+  left: -1000px;
+}
 </style>
 <style lang="scss">
 .NPC-Big-Book-preview-green {

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -92,7 +92,7 @@
         <div class="zhedie-white">
           <div v-if="list1 && list1.length > 0" v-loading="loading1">
             <div class="topTitle">
-              <span>本课例句（{{list1.length}}）</span>
+              <span>本课例句（{{ list1.length }}）</span>
               <span @click="handleChangeTab('wordShow')"
                 >{{ wordShow ? "收起" : "展开" }}
                 <img
@@ -119,7 +119,7 @@
           </div>
           <div v-if="list2 && list2.length > 0" v-loading="loading2">
             <div class="topTitle">
-              <span>本书例句（{{list2.length}}）</span>
+              <span>本书例句（{{ list2.length }}）</span>
               <span @click="handleChangeTab('wordShow2')"
                 >{{ wordShow2 ? "收起" : "展开" }}
                 <img
@@ -146,7 +146,7 @@
           </div>
           <div v-if="list3 && list3.length > 0" v-loading="loading3">
             <div class="topTitle">
-              <span>本套教材例句（{{list3.length}}）</span>
+              <span>本套教材例句（{{ list3.length }}）</span>
               <span @click="handleChangeTab('wordShow3')"
                 >{{ wordShow3 ? "收起" : "展开" }}
                 <img

src/styles/index.scss

@@ -267,6 +267,16 @@ input:-ms-input-placeholder {
             }
             
         }
+        .audioLine-green{
+          .playBtn {
+            background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
+            background-size: 100% 100%;
+        }
+        .pauseBtn {
+            background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
+            background-size: 100% 100%;
+        }
+        }
         &.Audio-tts {
             .audioLine {
                 .playBtn {
@@ -318,6 +328,16 @@ input:-ms-input-placeholder {
                 .el-slider__button-wrapper {
                     width: 25px;
                 }
+                .audioLine-green{
+                  .playBtn {
+                    background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                .pauseBtn {
+                    background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                }
             }
             &.Audio-tts {
                 .audioLine {
@@ -372,6 +392,16 @@ input:-ms-input-placeholder {
                     width: 25px;
                 }
             }
+            .audioLine-green{
+              .playBtn {
+                background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+            .pauseBtn {
+                background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+            }
             &.Audio-tts {
                 .audioLine {
                     .playBtn {

src/views/adultInput.vue

@@ -1364,6 +1364,17 @@ export default {
               });
             } else if (topicIitem.type == "NewWord_chs") {
               topicIitem.data.option.forEach((item) => {
+                item.map((sItem) => {
+                  sItem.audio_file_id = "";
+                  if (sItem.mp3_list && sItem.mp3_list.length > 0) {
+                    sItem.audio_file_id = sItem.mp3_list[0].id
+                      .replace("[FID##", "")
+                      .replace("##FID]", "");
+                  }
+                  sItem.audio_begin_time = 0;
+                  sItem.audio_end_time = 0;
+                  return sItem;
+                });
                 new_word_list = new_word_list.concat(item);
               });
             }