Merge branch 'gcj'

# Conflicts:
#	src/components/Adult/preview/DialogueArticleViewChs/index.vue

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/AudioCompare.vue

@@ -2,7 +2,10 @@
 <template>
   <div class="compara-content">
     <template v-if="wavblob">
-      <div style="width: 16px; height: 16px; margin-left: 8px" v-if="!isR">
+      <div
+        :class="type == 'full' ? 'compare-box-big' : 'compare-box'"
+        v-if="!isR"
+      >
         <AudioLine
           :mp3="url"
           :getCurTime="getCurTime"
@@ -15,22 +18,31 @@
           :ed="ed"
           @handleChangeStopAudio="handleChangeStopAudio"
           @sentPause="sentPause"
+          :type="type"
         />
       </div>
-      <div style="width: 16px; height: 16px; margin-left: 8px" v-else>
+      <div :class="type == 'full' ? 'compare-box-big' : 'compare-box'" v-else>
         <audio-red
           v-if="sentIndex == index"
           :mp3="wavblob"
           :isCompare="true"
           :themeColor="themeColor"
           @sentPause="sentPause"
+          :type="type"
         />
       </div>
     </template>
     <template v-else>
       <img
-        src="../../../assets/NPC/compare-disable.png"
-        class="compare-disable"
+        :src="
+          type == 'full'
+            ? require('../../../assets/NPC/compare-disable-24.png')
+            : require('../../../assets/NPC/compare-disable.png')
+        "
+        :class="[
+          'compare-disable',
+          type == 'full' ? 'compare-disable-big' : '',
+        ]"
       />
     </template>
   </div>
@@ -57,6 +69,7 @@ export default {
     "stopAudio",
     "handleChangeStopAudio",
     "themeColor",
+    "type",
   ],
   data() {
     return {
@@ -91,10 +104,26 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
+.compare-box {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  &-big {
+    width: 24px;
+    height: 24px;
+    margin-left: 0px;
+  }
+}
 .compare-disable {
   width: 16px;
   height: 16px;
   display: block;
   margin-left: 8px;
+  &-big {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin-left: 0px;
+  }
 }
 </style>

src/components/Adult/preview/AudioLine.vue

@@ -27,14 +27,15 @@
     </div>
     <div v-else class="audioLine2">
       <div
-        class="play-icon"
-        :class="
+        :class="[
+          'play-icon',
           audio.loading
             ? 'loadBtn'
             : audio.playing
             ? 'playBtn-icon'
-            : 'pauseBtn-icon'
-        "
+            : 'pauseBtn-icon',
+          type == 'full' ? 'play-icon-big' : '',
+        ]"
         @click="PlayAudio"
       />
     </div>
@@ -68,6 +69,7 @@ export default {
     "ed",
     "bg",
     "audioId",
+    "type",
   ],
   data() {
     // 这里存放数据
@@ -339,14 +341,18 @@ export default {
       width: 16px;
       height: 16px;
       cursor: pointer;
+      &-big {
+        width: 24px;
+        height: 24px;
+      }
       &.playBtn-icon {
-        background: url("../../../assets/icon/pauseC-16-normal-red.png")
+        background: url("../../../assets/icon/pauseC-24-normal-red.png")
           no-repeat left top;
         background-size: 100% 100%;
       }
       &.pauseBtn-icon {
-        background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
-          left top;
+        background: url("../../../assets/NPC/compare-pause-red-24.png")
+          no-repeat left top;
         background-size: 100% 100%;
       }
     }
@@ -359,6 +365,17 @@ export default {
 </style>
 <style lang="scss">
 .Audio {
+  .el-slider__bar {
+    height: 2px;
+    background: #de4444;
+  }
+  .el-slider__button {
+    background: #de4444;
+    border: none;
+  }
+  .el-slider__button-wrapper {
+    width: 25px;
+  }
   .el-slider__button-wrapper {
     position: relative;
     z-index: 0;
@@ -379,14 +396,6 @@ export default {
   .el-slider {
     position: relative;
   }
-  .el-slider__bar {
-    height: 2px;
-    background: rgba(118, 99, 236, 1);
-  }
-  .el-slider__button {
-    background: rgba(118, 99, 236, 1);
-    border: none;
-  }
 }
 .NPC-Book-Sty {
   .Audio {

src/components/Adult/preview/AudioLineSentence.vue

@@ -0,0 +1,542 @@
+<template>
+  <!-- mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '', -->
+  <div :class="['Audio', 'AudioFull']">
+    <div
+      v-if="!hideSlider"
+      :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']"
+    >
+      <div
+        class="play"
+        :class="[
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+        ]"
+        @click="PlayAudio"
+      />
+      <template>
+        <el-slider
+          v-model="playValue"
+          :style="{ width: sliderWidth + 'px', height: '6px' }"
+          :format-tooltip="formatProcessToolTip"
+          @change="changeCurrentTime"
+        />
+        <span :class="bgIndex == 1 ? 'color-white' : ''">
+          {{ realFormatSecond(audio.maxTime) }}
+          <!-- <template v-if="audio.playing">-</template
+          >{{
+            audio.maxTime
+              ? realFormatSecond(audio.maxTime - audio.currentTime - bg / 1000)
+              : ""
+          }} -->
+        </span>
+      </template>
+    </div>
+    <div v-else class="audioLine2">
+      <div
+        class="play-icon"
+        :class="
+          audio.loading
+            ? 'loadBtn'
+            : audio.playing
+            ? 'playBtn-icon'
+            : 'pauseBtn-icon'
+        "
+        @click="PlayAudio"
+      />
+    </div>
+    <audio
+      :id="audioId"
+      :ref="audioId"
+      :src="mp3"
+      preload="meta"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+    />
+  </div>
+</template>
+
+<script>
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: [
+    "mp3",
+    "mp3Source",
+    "getCurTime",
+    "stopAudio",
+    "width",
+    "isRepeat",
+    "themeColor",
+    "ed",
+    "bg",
+    "audioId",
+    "maxTime",
+    "hideSlider",
+    "bgIndex",
+    "wordPlay",
+  ],
+  data() {
+    // 这里存放数据
+    return {
+      playValue: 0,
+      audio: {
+        // 该字段是音频是否处于播放状态的属性
+        playing: false,
+        // 音频当前播放时长
+        currentTime: 0,
+        // 音频最大播放时长
+        maxTime: 0,
+        isPlaying: false,
+        loading: false,
+      },
+      playTime: parseInt(this.maxTime),
+      audioAllTime: null, // 展示总时间
+      duioCurrentTime: null, // 剩余时间
+      count: 0,
+      loading: null,
+    };
+  },
+  // 计算属性 类似于data概念
+  computed: {
+    sliderWidth() {
+      let width = 0;
+      if (this.width) {
+        width = this.width;
+      } else {
+        width = 662;
+      }
+      return width;
+    },
+  },
+  // 监控data中数据变化
+  watch: {
+    stopAudio: {
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+          _this.$refs[_this.audioId].pause();
+          _this.audio.playing = false;
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+        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.loading = false;
+    });
+    _this.$refs[audioId].addEventListener("pause", function () {
+      _this.audio.playing = false;
+      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 () {
+      _this.audio.playing = false;
+      _this.audio.isPlaying = false;
+      _this.$emit("handleListenRead", false);
+    });
+
+    this.$nextTick(() => {
+      document
+        .getElementsByClassName("el-slider__button-wrapper")[0]
+        .addEventListener("mousedown", function () {
+          _this.$refs[audioId].pause();
+          _this.audio.playing = false;
+        });
+    });
+  },
+  // 生命周期-挂载之前
+  beforeMount() {},
+  // 生命周期-更新之后
+  updated() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+  // 方法集合
+  methods: {
+    PlayAudio() {
+      let audioId = this.audioId;
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        if (item.src == this.mp3) {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        } else {
+          item.pause();
+        }
+      });
+      let video = document.getElementsByTagName("video");
+      video.forEach((vItem) => {
+        vItem.pause();
+      });
+      this.$set(this.audio, "isPlaying", true);
+
+      if (this.audio.playing) {
+        this.$refs[audioId].pause();
+        this.audio.playing = false;
+        this.$emit("handleListenRead", false);
+      } else {
+        if (this.count == 0) {
+          this.audio.loading = true;
+          this.count++;
+        }
+
+        this.$refs[audioId].play();
+        this.onTimeupdateTime(this.bg / 1000);
+
+        this.$emit("handleChangeStopAudio");
+        this.$emit("handleListenRead", true);
+      }
+    },
+    oncanplaythrough() {
+      let _this = this;
+      // setTimeout(() => {
+      _this.audio.loading = false;
+
+      // }, 10000);
+    },
+    // 点击 拖拽播放音频
+    changeCurrentTime(value) {
+      let audioId = this.audioId;
+      this.$refs[audioId].play();
+      this.audio.playing = true;
+      this.$refs[audioId].currentTime = parseInt(
+        (value / 100) * this.audio.maxTime
+      );
+    },
+    mousedown() {
+      let audioId = this.audioId;
+      this.$refs[audioId].pause();
+      this.audio.playing = false;
+    },
+    // 进度条格式化toolTip
+    formatProcessToolTip(index) {
+      index = parseInt((this.audio.maxTime / 100) * index);
+      return this.realFormatSecond(index);
+    },
+    // 音频加载完之后
+    onLoadedmetadata(res) {
+      this.audio.maxTime = parseInt(this.maxTime);
+      //this.audio.maxTime = parseInt(res.target.duration);
+      //this.playTime = parseInt(this.maxTime);
+      //this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
+    },
+    // 当音频当前时间改变后，进度条也要改变
+    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;
+      setTimeout(() => {
+        if (_this.audio.currentTime * 1000 > _this.ed) {
+          if (_this.$refs[audioId]) {
+            _this.$refs[audioId].pause();
+          }
+        }
+      }, 50);
+    },
+    onTimeupdateTime(res, playFlag) {
+      if (!res) return;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
+      let time = res - this.bg / 1000;
+      this.playValue = (time / this.audio.maxTime) * 100;
+      if (playFlag) {
+        let audio = document.getElementsByTagName("audio");
+        audio.forEach((item) => {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        });
+        this.$refs[audioId].play();
+      }
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
+  },
+  // 生命周期-创建之前
+  beforeCreated() {},
+  // 生命周期-更新之前
+  beforUpdate() {},
+  // 生命周期-销毁之前
+  beforeDestory() {},
+  // 生命周期-销毁完成
+  destoryed() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.AudioFull {
+  width: 100%;
+  .audioLine {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background: #ffffff;
+    // border: 1px solid rgba(0, 0, 0, 0.1);
+    // 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;
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      cursor: pointer;
+      display: block;
+    }
+
+    span {
+      font-size: 16px;
+      line-height: 19px;
+      color: #000;
+      margin-left: 8px;
+      margin-right: 12px;
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: right;
+      &.color-white {
+        color: #fff;
+      }
+    }
+  }
+  .audioLine2 {
+    .play-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      &.playBtn-icon {
+        background: url("../../../assets/icon/pauseC-16-normal-red.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &.pauseBtn-icon {
+        background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
+          left top;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .loadBtn {
+    background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
+}
+</style>
+<style lang="scss">
+.AudioFull {
+  .el-slider__button-wrapper {
+    position: relative;
+    z-index: 0;
+  }
+  .el-slider__button {
+    width: 6px;
+    height: 12px;
+    border-radius: 6px;
+    top: 12px;
+    position: absolute;
+  }
+  .el-slider__runway {
+    margin: 0;
+    padding: 0;
+    background: #e5e5e5;
+    border-radius: 6px;
+    height: 6px;
+  }
+  .el-slider {
+    position: relative;
+  }
+  .el-slider__bar {
+    height: 6px;
+    border-radius: 6px 0 0 6px;
+    background: #de4444;
+  }
+  .el-slider__button {
+    background: #de4444;
+    border: none;
+  }
+  .el-slider__button-wrapper {
+    width: 25px;
+  }
+  .audioLine-green {
+    .el-slider__bar {
+      background: #ffc600 !important;
+    }
+    .el-slider__button {
+      background: #ffc600 !important;
+    }
+  }
+}
+.NPC-Book-Sty {
+  .AudioFull {
+    .el-slider__bar {
+      height: 6px;
+      border-radius: 6px;
+      background: #de4444;
+    }
+    .el-slider__button {
+      background: #de4444;
+      border: none;
+    }
+    .audioLine-green {
+      .el-slider__bar {
+        background: #ffc600 !important;
+      }
+      .el-slider__button {
+        background: #ffc600 !important;
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-green {
+  .AudioFull {
+    .el-slider__bar {
+      background: #24b99e !important;
+    }
+    .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 {
+          background: url("../../../assets/icon/pauseC-16-normal-Green.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn-icon {
+          background: url("../../../assets/NPC/compare-pause-green.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .loadBtn {
+      background: url("../../../assets/NPC/loading-green.png") no-repeat left
+        top;
+      background-size: 100% 100%;
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .AudioFull {
+    .el-slider__bar {
+      background: #bd8865 !important;
+    }
+    .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 {
+          background: url("../../../assets/icon/pauseC-16-normal-Brown.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn-icon {
+          background: url("../../../assets/NPC/compare-pause-brown.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .loadBtn {
+      background: url("../../../assets/NPC/loading-brown.png") no-repeat left
+        top;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

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"
@@ -352,10 +356,27 @@
                 />
               </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"
+        :isFull="isFull"
+        @exitFullscreen="exitFullscreen"
+        @changeIsFull="changeIsFull"
+      />
+    </div>
   </div>
 </template>
 
@@ -365,14 +386,24 @@ import AudioLine from "../AudioLine.vue";
 import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
 import RoleChs from "./RoleChs.vue";
 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,
     RoleChs,
     AudioCompare,
+    Voicefullscreen,
   },
   filters: {
     handlePinyin(wordsList) {
@@ -433,6 +464,8 @@ export default {
       isRepeat: false,
       currSent: null, //当前句子的时间
       isRecord: false,
+      isFull: false,
+      mathNum: Math.random().toString(36).substr(2),
     };
   },
   computed: {
@@ -456,6 +489,46 @@ export default {
   },
   //方法集合
   methods: {
+    pauseAudio() {
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        item.pause();
+      });
+    },
+    //语音全屏
+    fullScreen(type) {
+      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;
     },
@@ -673,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;
   }
@@ -848,8 +936,10 @@ export default {
     }
   }
   .Soundrecord-content {
-    padding: 0px 0px 8px 68px;
-
+    padding: 0px 10px 8px 68px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     &-inner {
       display: flex;
       justify-content: flex-start;
@@ -869,6 +959,20 @@ 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;
+    }
+  }
+  .voice-full-screen {
+    // 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 {
@@ -263,6 +277,11 @@ export default {
 }
 </style>
 <style lang="scss">
+.NNPE-tableList-item-noMargin {
+  .NPC-ArticleView {
+    background: #fff;
+  }
+}
 .NPC-ArticleView {
   &.NPC-ArticleView-container {
     margin-bottom: 24px;

src/components/Adult/preview/Soundrecorddiff.vue

@@ -0,0 +1,477 @@
+<!--  -->
+<template>
+  <div class="NNPE-Book-record">
+    <div :class="['record-main', microphoneStatus ? 'active' : '']">
+      <div class="record-main-inner" @click="microphone">
+        <div class="record" />
+        <span v-if="microphoneStatus" class="record-time">{{
+          handleDateTime(recordtime)
+        }}</span>
+      </div>
+    </div>
+    <div
+      :class="['hasRecord', bgIndex == 1 ? 'hasRecord-white' : '']"
+      v-if="!microphoneStatus && recordList.length > 0"
+    >
+      <div
+        :class="[bgIndex == 1 ? 'playBack-white' : 'playBack', hasMicro]"
+        @click="
+          playmicrophone(
+            selectIndex || selectIndex == 0
+              ? recordList[selectIndex].toltime
+              : ''
+          )
+        "
+      />
+      <span class="record-time"
+        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
+      >
+      <el-select
+        v-model="selectIndex"
+        placeholder="无录音"
+        @change="handleChangeRecord"
+      >
+        <el-option
+          v-for="(item, index) in recordList"
+          :key="item.id"
+          :label="item.name"
+          :value="index"
+        />
+      </el-select>
+      <a class="record-delete" @click="handleDelete" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Recorder from "js-audio-recorder"; // 录音插件
+export default {
+  components: {},
+  props: ["wavData", "type", "fileName", "selectData", "bgIndex"],
+  data() {
+    return {
+      recorder: new Recorder({
+        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+      }),
+      microphoneStatus: false,
+      hasMicro: "", // 录音后的样式class
+      wavblob: null,
+      audio: new window.Audio(),
+      recordList: [], // 录音文件数组
+      recordtime: 0, // 录音时长
+      timer: null, // 计时器
+      recordFile: 1, // 录音文件名
+      selectIndex: null, // 选中的录音索引
+      oldIndex: null, // 存储播放录音索引
+      playtime: 0, // 播放时间
+      isPlaying: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleActive();
+    let that = this;
+    window.stopAudioSound = function () {
+      if (that.audio) {
+        that.audio.pause();
+      }
+    };
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.audio.addEventListener("play", function () {
+      _this.changeStatus("active");
+      _this.isPlaying = true;
+    });
+    _this.audio.addEventListener("pause", function () {
+      _this.changeStatus("normal");
+    });
+    _this.audio.addEventListener("ended", function () {
+      _this.changeStatus("normal");
+      _this.isPlaying = false;
+    });
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
+  methods: {
+    // 开始录音
+    microphone() {
+      let _this = this;
+      if (!this.microphoneStatus) {
+        _this.$emit("getWavblob", null);
+        this.$emit("getSelectData", { type: "" });
+        // 开始录音
+        this.recorder.start();
+        this.microphoneStatus = true;
+        this.recordtime = 0;
+        this.isPlaying = false;
+        clearInterval(_this.timer);
+        _this.timer = setInterval(() => {
+          _this.recordtime++;
+        }, 1000);
+        this.$emit("handleParentPlay");
+        let obj = {
+          name: _this.fileName
+            ? _this.fileName + _this.recordFile
+            : "新录音" + _this.recordFile,
+          id: _this.recordFile + Math.round(Math.random() * 10),
+        };
+        if (this.selectData) obj.selectData = this.selectData;
+        _this.recordList.push(obj);
+        _this.recordFile++;
+        _this.selectIndex = _this.recordList.length - 1;
+      } else {
+        this.hasMicro = "normal";
+        this.recorder.stop();
+        clearInterval(_this.timer);
+        let toltime = this.recorder.duration; // 录音总时长
+        let fileSize = this.recorder.fileSize; // 录音总大小
+        // 录音结束，获取取录音数据
+        let PCMBlob = this.recorder.getPCMBlob(); // 获取 PCM 数据
+        let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
+        // this.wavblob = wav;
+        this.microphoneStatus = false;
+        let reader = new window.FileReader();
+        reader.readAsDataURL(wav);
+        reader.onloadend = () => {
+          _this.recordList[_this.selectIndex].wavData = reader.result;
+          _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
+          _this.recordList[_this.selectIndex].fileSize = fileSize;
+          //   if (
+          //     (_this.type && _this.type == "normal") ||
+          //     (_this.type && _this.type == "mini")
+          //   ) {
+          _this.wavblob = _this.recordList[_this.selectIndex].wavData;
+          _this.$emit("getWavblob", _this.wavblob);
+          if (this.recordList[this.selectIndex].selectData)
+            this.$emit(
+              "getSelectData",
+              this.recordList[this.selectIndex].selectData
+            );
+          //   }
+        };
+      }
+      _this.$emit(
+        "getRerordStatus",
+        !_this.microphoneStatus && _this.recordList.length > 0
+      );
+    },
+    playmicrophone(totalTimes) {
+      this.isPlaying = true;
+      if (this.selectIndex || this.selectIndex == 0) {
+        let totalTime = totalTimes;
+        let _this = this;
+        if (!this.audio.paused) {
+          this.audio.pause();
+          clearInterval(_this.timer);
+        } else if (this.audio.paused && _this.oldIndex == _this.selectIndex) {
+          _this.audio.play();
+          if (_this.recordtime == 0) {
+            _this.recordtime = totalTimes;
+            _this.playtime = 0;
+          }
+          _this.timer = setInterval(() => {
+            if (_this.playtime < totalTime) {
+              _this.playtime++;
+              _this.recordtime = totalTime - _this.playtime;
+            } else {
+              clearInterval(_this.timer);
+            }
+          }, 1000);
+        } else {
+          _this.audio.pause();
+          _this.audio.load();
+          _this.audio.src = _this.wavblob;
+          _this.oldIndex = _this.selectIndex;
+          _this.audio.play();
+          _this.playtime = 0;
+          _this.recordtime = totalTime;
+          clearInterval(_this.timer);
+          _this.timer = setInterval(() => {
+            if (_this.playtime < totalTime) {
+              _this.playtime++;
+              _this.recordtime = totalTime - _this.playtime;
+            } else {
+              clearInterval(_this.timer);
+            }
+          }, 1000);
+        }
+      }
+    },
+    // 高亮初始值
+    handleActive() {
+      if (this.wavData) {
+        // this.hasMicro = "normal";
+      } else {
+        this.hasMicro = "";
+      }
+    },
+    changeStatus(status) {
+      this.hasMicro = status;
+    },
+    // 格式化录音时长
+    handleDateTime(time) {
+      if (parseInt(time / 60) < 10) {
+        time =
+          ("0" + parseInt(time / 60)).substring(
+            ("0" + parseInt(time / 60)).length - 2
+          ) +
+          ":" +
+          ("0" + (time % 60)).substring(("0" + (time % 60)).length - 2);
+      } else {
+        time =
+          parseInt(time / 60) +
+          ":" +
+          ("0" + (time % 60)).substring(("0" + (time % 60)).length - 2);
+      }
+      return time;
+    },
+    handleChangeRecord(index) {
+      this.recordtime = this.recordList[index].toltime;
+      this.wavblob = this.recordList[index].wavData;
+      this.hasMicro = "normal";
+      clearInterval(this.timer);
+      this.audio.pause();
+      this.oldIndex = null;
+      this.$emit("getWavblob", this.wavblob);
+      if (this.recordList[index].selectData)
+        this.$emit("getSelectData", this.recordList[index].selectData);
+      this.$emit("sentPause", false);
+    },
+    handleDelete() {
+      if (this.selectIndex || this.selectIndex == 0) {
+        this.recordList.splice(this.selectIndex, 1);
+        this.selectIndex =
+          this.recordList.length > 0 ? this.recordList.length - 1 : null;
+        this.hasMicro = this.recordList.length > 0 ? "normal" : "";
+        this.recordtime =
+          this.recordList.length > 0
+            ? this.recordList[this.selectIndex].toltime
+            : 0;
+        this.audio.pause();
+        this.audio = new window.Audio();
+        this.wavblob =
+          this.recordList.length > 0
+            ? this.recordList[this.selectIndex].wavData
+            : null;
+        this.oldIndex = null;
+        this.isPlaying = false;
+        clearInterval(this.timer);
+      }
+      this.$emit("getRerordStatus", this.recordList.length > 0);
+    },
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NNPE-Book-record {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // max-width: 292px;
+  height: 32px;
+  // border: 1px solid rgba(0, 0, 0, 0.1);
+  // border-radius: 8px;
+  .playBack {
+    width: 24px;
+    height: 24px;
+    margin-left: 8px;
+    background: url("../../../assets/icon/play-24-normal-Black.png") center
+      no-repeat;
+    background-size: 100%;
+    cursor: pointer;
+    &.normal {
+      background: url("../../../assets/icon/play-24-normal-Black.png") center
+        no-repeat;
+      background-size: 100%;
+    }
+    &.active {
+      background: url("../../../assets/icon/pause-24-normal-Black.png") center
+        no-repeat;
+      background-size: 100%;
+    }
+  }
+  .playBack-white {
+    width: 24px;
+    height: 24px;
+    margin-left: 8px;
+    background: url("../../../assets/icon/play-24-normal-white.png") center
+      no-repeat;
+    background-size: 100%;
+    cursor: pointer;
+    &.normal {
+      background: url("../../../assets/icon/play-24-normal-white.png") center
+        no-repeat;
+      background-size: 100%;
+    }
+    &.active {
+      background: url("../../../assets/icon/pause-24-normal-white.png") center
+        no-repeat;
+      background-size: 100%;
+    }
+    .record-time {
+      color: #fff;
+    }
+  }
+  .line {
+    width: 1px;
+    height: 16px;
+    background: rgba(0, 0, 0, 0.85);
+    opacity: 0.2;
+    margin-left: 8px;
+  }
+  .record-main {
+    width: 162px;
+    height: 136px;
+    box-sizing: border-box;
+    padding: 40px 8px 40px 40px;
+    &.active {
+      background: url("../../../assets/NPC/vocie-gif.png") no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-inner {
+      padding: 16px 16px;
+      box-sizing: border-box;
+      width: fit-content;
+      height: 56px;
+      border-radius: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      background: #de4444;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+    }
+  }
+
+  .record {
+    width: 24px;
+    height: 24px;
+    background: url("../../../assets/NPC/voice-24.png") center no-repeat;
+    background-size: 100%;
+  }
+  .record-time {
+    color: #fff;
+    font-size: 16px;
+    line-height: 150%;
+    margin-left: 8px;
+    font-family: "robot";
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+    margin-left: 16px;
+  }
+  .hasRecord {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 56px;
+    padding: 16px 0 16px 16px;
+    border-radius: 40px 0 0 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 0px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+
+    .record-time {
+      width: 46px;
+      color: #000000;
+      text-align: center;
+    }
+
+    .el-select {
+      margin-left: 16px;
+    }
+    .record-delete {
+      width: 24px;
+      height: 24px;
+      margin-left: 16px;
+      background: url("../../../assets/NPC/del-24.png") center no-repeat;
+      background-size: 100%;
+      display: block;
+    }
+    &-white {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-right: 0;
+      .record-time {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.NNPE-Book-record {
+  .hasRecord {
+    .el-select {
+      flex: 1;
+      height: 24px;
+      &.proSelect {
+        width: 78px;
+      }
+      .el-input__inner {
+        width: 115px;
+        box-sizing: border-box;
+        height: 24px;
+        line-height: 22px;
+        border: 0px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 4px;
+        padding: 0px 11px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+      }
+      .el-input {
+        .el-select__caret {
+          color: #000;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .el-input__icon {
+        width: 16px;
+      }
+      .el-input__suffix {
+        right: 3px;
+      }
+    }
+    &-white {
+      .el-select {
+        .el-input__inner {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px;
+          color: #fff;
+        }
+        .el-input {
+          .el-select__caret {
+            color: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+        .el-input__icon {
+          width: 16px;
+        }
+        .el-input__suffix {
+          right: 3px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,1321 @@
+<!--  -->
+<template>
+  <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
+    <div class="voicefull-top">
+      <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+        <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+          <span
+            :class="['bg-white', bgIndex == 0 ? 'active' : '']"
+            @click="changeBg(0)"
+          ></span>
+        </div>
+        <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
+          <span
+            :class="['bg-green', bgIndex == 1 ? 'active' : '']"
+            @click="changeBg(1)"
+          ></span>
+        </div>
+      </div>
+      <div class="top-middle">
+        <div
+          v-if="mp3"
+          :class="['audio-box', bgIndex == 1 ? 'audio-box-green' : '']"
+        >
+          <AudioLineSentence
+            :key="'sent' + curSentIndex"
+            :mp3="mp3"
+            :getCurTime="getCurTime"
+            ref="audioLineSent"
+            :audioId="'artPraAudioId' + curSentIndex"
+            :stopAudio="stopAudio"
+            :width="120"
+            :hideSlider="false"
+            :bg="bg"
+            :ed="ed"
+            :maxTime="maxTime"
+            :bgIndex="bgIndex"
+            :isRepeat="isRepeat"
+          />
+        </div>
+        <div
+          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+          @click="changeStatus('isRepeat')"
+        >
+          <span
+            :class="[
+              'repeat-icon',
+              !isRepeat ? 'disabled' : '',
+              isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
+            ]"
+          ></span>
+        </div>
+        <div
+          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+          @click="changeStatus('isShowPY')"
+        >
+          <span
+            :class="[
+              'pinyin-icon',
+              !isShowPY ? 'disabled' : '',
+              isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
+            ]"
+          ></span>
+        </div>
+        <div
+          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+          @click="changeStatus('isShowEN')"
+        >
+          <span
+            :class="[
+              'en-icon',
+              !isShowEN ? 'disabled' : '',
+              isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
+            ]"
+          ></span>
+        </div>
+        <div
+          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+          @click="addColl('isColl')"
+        >
+          <span
+            :class="[
+              'coll-icon',
+              !isColl ? 'disabled' : '',
+              isColl && bgIndex == 1 ? 'coll-icon-yellow' : '',
+            ]"
+          ></span>
+        </div>
+      </div>
+      <div
+        :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+        @click="exitFullScreen"
+      >
+        <span
+          :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
+        ></span>
+      </div>
+    </div>
+    <div
+      class="voicefull-content"
+      v-if="item"
+      @mousemove="showPrevNext(true)"
+      @mouseleave="showPrevNext(false)"
+    >
+      <div
+        :class="[
+          'vc-left vc-left-grey',
+          isShowPN && bgIndex == 0 ? 'vc-left-black' : '',
+          isShowPN && bgIndex == 1 ? 'vc-left-white' : '',
+        ]"
+        @click="prevSentence"
+      ></div>
+      <div class="vc-main">
+        <div class="NNPE-words-box">
+          <div
+            class="NNPE-words"
+            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[pIndex + 1] &&
+                    item[pIndex + 1].chs &&
+                    chsFhList.indexOf(item[pIndex + 1].chs) > -1
+                  "
+                >
+                  <span class="NNPE-words-box">
+                    <template v-if="curQue.pyPosition == 'top'">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
+                    <span
+                      class="NNPE-chs"
+                      :class="[pItem.padding && isShowPY ? 'padding' : '']"
+                    >
+                      <template>
+                        <span
+                          v-for="(wItem, wIndex) in pItem.leg"
+                          :key="'ci' + wIndex + pIndex"
+                          :class="[
+                            isPlaying &&
+                            pItem.timeList &&
+                            pItem.timeList[wIndex] &&
+                            curTime >= pItem.timeList[wIndex].wordBg &&
+                            curQue.wordTime &&
+                            curQue.wordTime[curSentIndex] &&
+                            curTime <= curQue.wordTime[curSentIndex].ed
+                              ? 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
+                        >
+                      </template>
+                    </span>
+                    <template v-if="curQue.pyPosition == 'bottom'">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
+                  </span>
+                  <span class="NNPE-words-box">
+                    <template v-if="curQue.pyPosition == 'top'">
+                      <span
+                        v-if="isShowPY"
+                        :class="[
+                          'NNPE-pinyin',
+                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
+                            ? 'noFont'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        style="text-align: left"
+                        >{{ item[pIndex + 1].pinyin }}</span
+                      >
+                    </template>
+                    <span class="NNPE-chs" style="text-align: left">
+                      <span
+                        :class="[
+                          isPlaying &&
+                          pItem.timeList[pItem.leg - 1] &&
+                          curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                          curQue.wordTime &&
+                          curQue.wordTime[curSentIndex] &&
+                          curTime <= curQue.wordTime[curSentIndex].ed
+                            ? bgIndex == 0
+                              ? 'active'
+                              : 'active-yellow'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        >{{ item[pIndex + 1].chs }}</span
+                      >
+                    </span>
+                    <template v-if="curQue.pyPosition == 'bottom'">
+                      <span
+                        v-if="isShowPY"
+                        :class="[
+                          'NNPE-pinyin',
+                          noFont.indexOf(item[pIndex + 1].pinyin) > -1
+                            ? 'noFont'
+                            : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        style="text-align: left"
+                        >{{ item[pIndex + 1].pinyin }}</span
+                      >
+                    </template>
+                  </span>
+                </template>
+                <template v-else>
+                  <template v-if="curQue.pyPosition == 'top'">
+                    <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
+                  </template>
+                  <span
+                    v-if="pItem.chs != '#'"
+                    class="NNPE-chs"
+                    :class="[pItem.padding && isShowPY ? 'padding' : '']"
+                  >
+                    <template>
+                      <span
+                        v-for="(wItem, wIndex) in pItem.leg"
+                        :key="'ci' + wIndex + pIndex + curSentIndex"
+                        :class="[
+                          isPlaying &&
+                          pItem.timeList &&
+                          pItem.timeList[wIndex] &&
+                          curTime >= pItem.timeList[wIndex].wordBg &&
+                          curQue.wordTime &&
+                          curQue.wordTime[curSentIndex] &&
+                          curTime <= curQue.wordTime[curSentIndex].ed
+                            ? 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
+                      >
+                    </template>
+                  </span>
+                  <template v-if="curQue.pyPosition == 'bottom'">
+                    <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
+                      <span
+                        v-if="isShowPY"
+                        class="NNPE-pinyin"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          pItem.className ? pItem.className : '',
+                          bgIndex == 1 ? 'font-white' : '',
+                        ]"
+                        >{{ pItem.pinyin }}</span
+                      >
+                    </template>
+                  </template>
+                </template>
+              </template>
+            </template>
+            <template v-else>
+              <span
+                :style="{
+                  height: pItem.height + 'px',
+                  width: pItem.width + 'px',
+                }"
+              ></span>
+            </template>
+          </div>
+        </div>
+        <div style="clear: both; overflow: hidden"></div>
+        <div
+          v-if="item.enwords && isShowEN"
+          :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
+        >
+          {{ item.enwords }}
+        </div>
+      </div>
+      <div
+        :class="[
+          'vc-left vc-right-grey',
+          isShowPN && bgIndex == 0 ? 'vc-right-black' : '',
+          isShowPN && bgIndex == 1 ? 'vc-right-white' : '',
+        ]"
+        @click="nextSentence"
+      ></div>
+    </div>
+    <div class="voicefull-bottom">
+      <div class="bottom-left">
+        <Soundrecorddiff
+          @handleWav="handleWav"
+          @getWavblob="getWavblob"
+          @handleParentPlay="handleParentPlay"
+          @sentPause="sentPause"
+          @getRerordStatus="getRerordStatus"
+          :bgIndex="bgIndex"
+        />
+        <div
+          :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
+          v-if="isShowCompare"
+        >
+          <Audio-compare
+            :bgIndex="bgIndex"
+            type="full"
+            :themeColor="themeColor"
+            :index="curSentIndex"
+            :sentIndex="curSentIndex"
+            :url="curQue.mp3_list[0].id"
+            :bg="bg"
+            :ed="ed"
+            :wavblob="wavblob"
+            :getCurTime="getCurTime"
+            :sentPause="sentPause"
+            :isRecord="isRecord"
+            :handleChangeStopAudio="handleChangeStopAudio"
+          />
+        </div>
+      </div>
+      <div
+        :class="[
+          'page-count',
+          bgIndex == 0 ? 'page-count-white' : 'page-count-green',
+        ]"
+      >
+        {{ 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>
+
+<script>
+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",
+    "sentIndex",
+    "mp3",
+    "wordTimeList",
+    "curQue",
+    "noFont",
+    "themeColor",
+    "NNPENewWordList",
+    "currentTreeID",
+  ],
+  data() {
+    return {
+      bgIndex: 0,
+      maxTime: 0,
+      item: null,
+      bg: 0,
+      ed: 0,
+      isShowPY: true,
+      isRepeat: false,
+      isShowEN: true,
+      isColl: false,
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
+      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      curTime: 0,
+      wavblob: null,
+      stopAudio: false,
+      isRecord: false,
+      isShowCompare: 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;
+    //   }
+    //   console.log(playing);
+    //   return playing;
+    // },
+  },
+  watch: {
+    sentIndex: {
+      handler: function (newVal, oldVal) {
+        this.curSentIndex = newVal;
+        this.getSentence();
+      },
+      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");
+      if (Bookdetail) {
+        Bookdetail = JSON.parse(Bookdetail);
+      }
+      let MethodName = "order-collection_manager-AddMyCollection";
+      let text = "";
+      this.item.forEach((item) => {
+        if (item.chs != "#") {
+          text += item.chs;
+        }
+      });
+      let sentence_json = {
+        item: JSON.stringify(this.item),
+        bg: this.bg,
+        ed: this.ed,
+      };
+      let data = {
+        goods_id: this.currentTreeID,
+        goods_type: 501,
+        goods_name: Bookdetail.name,
+        goods_person_name_desc: Bookdetail.description
+          ? Bookdetail.description
+          : "",
+        goods_picture_id: Bookdetail.picture_id ? Bookdetail.picture_id : "",
+        goods_price: Bookdetail.price,
+        sentence: {
+          sentence_text: text,
+          sentence_json: JSON.stringify(sentence_json),
+        },
+      };
+      console.log(text);
+      LearnWebSI(MethodName, data).then((res) => {
+        this.isColl = true;
+        this.$message.success("收藏成功！");
+      });
+    },
+    showPrevNext(bool) {
+      this.isShowPN = bool;
+    },
+    prevSentence() {
+      if (this.curSentIndex == 0) {
+        this.$message.warning("已经是第一个句子了");
+        return;
+      }
+      this.curSentIndex = this.curSentIndex - 1;
+      this.getSentence();
+    },
+    nextSentence() {
+      if (this.curSentIndex == this.sentList.length - 1) {
+        this.$message.warning("已经是最后一个句子了");
+        return;
+      }
+      this.curSentIndex = this.curSentIndex + 1;
+      this.getSentence();
+    },
+    changeStatus(key) {
+      this[key] = !this[key];
+    },
+    getRerordStatus(bool) {
+      this.isShowCompare = bool;
+    },
+    getWavblob(wavblob) {
+      this.wavblob = wavblob;
+    },
+    sentPause(isRecord) {
+      this.isRecord = isRecord;
+    },
+    getCurTime(curTime) {
+      let _this = this;
+      if (_this.isRepeat) {
+        let time = curTime * 1000;
+        if (time > _this.ed || time < _this.bg) {
+          _this.curTime = _this.bg;
+          this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
+        } else {
+          _this.curTime = curTime * 1000;
+        }
+      } else {
+        _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.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;
+      if (maxTime < 1) {
+        _this.maxTime = 1;
+      } else {
+        _this.maxTime = maxTime;
+      }
+    },
+    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() {
+      this.stopAudio = true;
+    },
+    // 音频播放时改变布尔值
+    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() {
+    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() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.voicefull {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .NNPE-wordDetail {
+    position: fixed;
+    z-index: 9999;
+  }
+  &.bg1 {
+    background: #fff;
+  }
+  &.bg2 {
+    background: linear-gradient(180deg, #274533 0%, #385f45 100%);
+  }
+  &-top {
+    height: 136px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 40px;
+    .select-bg {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 96px;
+      height: 56px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      &.select-bg-blue {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      > div {
+        width: 36px;
+        height: 36px;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &.bg-white-box {
+          background: 0 0;
+          margin-right: 4px;
+          &.active {
+            background: #de4444;
+          }
+        }
+        &.bg-green-box {
+          background: #fff;
+          &.active {
+            background: #ffc600;
+          }
+        }
+
+        > span {
+          width: 24px;
+          height: 24px;
+          border-radius: 100%;
+          box-sizing: border-box;
+          cursor: pointer;
+          &.bg-white {
+            background: #fff;
+          }
+          &.bg-green {
+            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
+          }
+        }
+      }
+    }
+    .top-middle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .audio-box {
+        padding: 0 16px;
+        height: 56px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &-green {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+    .op-btn {
+      width: 56px;
+      height: 56px;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      cursor: pointer;
+      margin-left: 32px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      &-green {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      &.close-btn {
+        background: #274533;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      > span {
+        width: 24px;
+        height: 24px;
+        &.close-icon {
+          background: url("../../../assets/icon/cross-24-normal-black.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+          &-white {
+            background: url("../../../assets/icon/cross-24-normal-white.png")
+              no-repeat left top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+  }
+  .repeat-icon {
+    background: url("../../../assets/icon/Repeat-24-normal-red.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/Repeat-24-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/Repeat-24-normal-yellow.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+  .pinyin-icon {
+    background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/pinyin-24-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/pinyin-24-normal-yellow.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+  .en-icon {
+    background: url("../../../assets/icon/EN-24-normal-Red.png") no-repeat left
+      top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/EN-24-disable-Black.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/EN-24-normal-yellow.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+  }
+  .coll-icon {
+    background: url("../../../assets/icon/bookmarkfill-24-normal-red.png")
+      no-repeat left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/bookmarkfill-24-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/bookmarkfill-24-normal-yellow.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 36px;
+    display: flex;
+    align-items: center;
+
+    .vc-left {
+      width: 64px;
+      height: 64px;
+      cursor: pointer;
+      &-grey {
+        background: url("../../../assets/NPC/left-grey.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &-black {
+        background: url("../../../assets/NPC/left-black.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &-white {
+        background: url("../../../assets/NPC/left-white.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+    .vc-right {
+      width: 64px;
+      height: 64px;
+      cursor: pointer;
+      &-grey {
+        background: url("../../../assets/NPC/right-grey.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &-black {
+        background: url("../../../assets/NPC/right-black.png") no-repeat left
+          top;
+        background-size: 100% 100%;
+      }
+      &-white {
+        background: url("../../../assets/NPC/right-white.png") no-repeat left
+          top;
+        background-size: 100% 100%;
+      }
+    }
+    .vc-main {
+      width: fit-content;
+      margin: 0 auto;
+      .enwords {
+        padding: 0 3px;
+        margin-top: 40px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 24px;
+        line-height: 32px;
+        font-family: "robot";
+        &-green {
+          color: rgba(255, 255, 255, 0.65);
+        }
+      }
+    }
+    .NNPE-words {
+      float: left;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      &-box {
+        float: left;
+        > span {
+          display: block;
+          &.NNPE-pinyin {
+            font-family: "GB-PINYINOK-B";
+            font-weight: normal;
+            font-size: 32px;
+            line-height: 40px;
+
+            height: 40px;
+            color: rgba(0, 0, 0, 0.85);
+
+            &.noFont {
+              font-family: initial;
+            }
+            &.textLeft {
+              text-align: left;
+            }
+            &.font-white {
+              color: #fff;
+            }
+            &.wordBlank {
+              color: rgba(0, 0, 0, 0.85);
+            }
+          }
+          &.NNPE-chs {
+            font-family: "FZJCGFKTK";
+            font-size: 48px;
+            line-height: 56px;
+            padding-bottom: 16px;
+            color: rgba(0, 0, 0, 0.85);
+            .font-white {
+              color: #fff;
+            }
+            .active {
+              color: #de4444;
+              &-yellow {
+                color: #ffc600;
+              }
+            }
+
+            .wordActive {
+              color: #de4444;
+            }
+            .wordActive-blue {
+              color: #ffc600;
+            }
+          }
+          // &.padding {
+          //   padding-right: 6px;
+          // }
+        }
+      }
+      &.textLeft {
+        text-align: left;
+      }
+      &.textCenter {
+        text-align: center;
+      }
+      > span {
+        display: block;
+        &.NNPE-pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-weight: normal;
+          font-size: 32px;
+          line-height: 40px;
+          height: 40px;
+          color: rgba(0, 0, 0, 0.85);
+          &.font-white {
+            color: #fff;
+          }
+          &.noFont {
+            font-family: initial;
+          }
+          &.textLeft {
+            text-align: left;
+          }
+          &.wordBlank {
+            color: rgba(0, 0, 0, 0.85);
+          }
+        }
+        &.NNPE-chs {
+          font-family: "FZJCGFKTK";
+          font-size: 48px;
+          line-height: 56px;
+          padding-bottom: 16px;
+          color: rgba(0, 0, 0, 0.85);
+          .font-white {
+            color: #fff;
+          }
+          .active {
+            color: #de4444;
+            &-yellow {
+              color: #ffc600;
+            }
+          }
+          .wordActive {
+            color: #de4444;
+          }
+          .wordActive-blue {
+            color: #ffc600;
+          }
+        }
+        &.padding {
+          padding: 0 3px;
+        }
+      }
+    }
+  }
+  &-bottom {
+    height: 136px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 40px;
+    .bottom-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .compare-box {
+        height: 56px;
+        padding: 16px 16px;
+        box-sizing: border-box;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 0 40px 40px 0;
+        border-left: 0px solid rgba(0, 0, 0, 0.1);
+        &-white {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          border-left: 0;
+        }
+      }
+    }
+    .page-count {
+      padding: 8px;
+      font-size: 16px;
+      line-height: 24px;
+      font-family: "robot";
+      color: #000000;
+      min-width: 60px;
+      box-sizing: border-box;
+      border-radius: 8px;
+      background: #fff;
+      text-align: center;
+      &-green {
+        color: #ffffff;
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}
+.word-play-audio {
+  position: absolute;
+  left: -1000px;
+}
+</style>
+<style lang="scss">
+.NPC-Big-Book-preview-green {
+  .bg2 {
+    .repeat-icon {
+      background: url("../../../assets/icon/Repeat-24-normal-Green.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .pinyin-icon {
+      background: url("../../../assets/icon/pinyin-24-normal-green.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .en-icon {
+      background: url("../../../assets/icon/EN-24-normal-Green.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+    .coll-icon {
+      background: url("../../../assets/icon/bookmarkfill-24-normal-green.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .bg2 {
+    .repeat-icon {
+      background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .pinyin-icon {
+      background: url("../../../assets/icon/pinyin-24-normal-brown.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .en-icon {
+      background: url("../../../assets/icon/EN-24-normal-Brown.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+    .coll-icon {
+      background: url("../../../assets/icon/bookmarkfill-24-normal-brown.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/components/Adult/preview/components/AudioRed.vue

@@ -1,14 +1,14 @@
 <!--  -->
 <template>
   <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
-    <img :src="voiceSrc">
+    <img :src="voiceSrc" :class="type == 'full' ? 'icon-big' : ''" />
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  props: ["seconds", "mp3", "wav", "themeColor", "isCompare"],
+  props: ["seconds", "mp3", "wav", "themeColor", "isCompare", "type"],
   data() {
     return {
       audio: new Audio(),
@@ -17,15 +17,15 @@ export default {
         ? this.themeColor == "green"
           ? require("../../../../assets/NPC/play-green.png")
           : this.themeColor == "brown"
-            ? require("../../../../assets/NPC/play-brown.png")
-            : require("../../../../assets/NPC/play-red.png")
+          ? require("../../../../assets/NPC/play-brown.png")
+          : require("../../../../assets/NPC/play-red.png")
         : require("../../../../assets/NPC/play-red.png"),
       voicePlaySrc: this.themeColor
         ? this.themeColor == "green"
           ? require("../../../../assets/NPC/icon-voice-play-green.png")
           : this.themeColor == "brown"
-            ? require("../../../../assets/NPC/icon-voice-play-brown.png")
-            : require("../../../../assets/NPC/icon-voice-play-red.png")
+          ? require("../../../../assets/NPC/icon-voice-play-brown.png")
+          : require("../../../../assets/NPC/icon-voice-play-red.png")
         : require("../../../../assets/NPC/icon-voice-play-red.png"),
     };
   },
@@ -33,25 +33,25 @@ export default {
     comparePauseSrc() {
       switch (this.themeColor) {
         case "green":
-          return require("../../../../assets/NPC/compare-pause-green.png");
+          return require("../../../../assets/NPC/compare-pause-green-24.png");
         case "brown":
-          return require("../../../../assets/NPC/compare-pause-brown.png");
+          return require("../../../../assets/NPC/compare-pause-brown-24.png");
         case "red":
-          return require("../../../../assets/NPC/compare-pause-red.png");
+          return require("../../../../assets/NPC/compare-pause-red-24.png");
         default:
-          return require("../../../../assets/NPC/compare-pause-red.png");
+          return require("../../../../assets/NPC/compare-pause-red-24.png");
       }
     },
     comparePlaySrc() {
       switch (this.themeColor) {
         case "green":
-          return require("../../../../assets/icon/pauseC-16-normal-Green.png");
+          return require("../../../../assets/icon/pauseC-24-normal-Green.png");
         case "brown":
-          return require("../../../../assets/icon/pauseC-16-normal-Brown.png");
+          return require("../../../../assets/icon/pauseC-24-normal-Brown.png");
         case "red":
-          return require("../../../../assets/icon/pauseC-16-normal-red.png");
+          return require("../../../../assets/icon/pauseC-24-normal-red.png");
         default:
-          return require("../../../../assets/icon/pauseC-16-normal-red.png");
+          return require("../../../../assets/icon/pauseC-24-normal-red.png");
       }
     },
   },
@@ -118,7 +118,7 @@ export default {
         this.audio.pause();
       }
     },
-  }
+  },
 };
 </script>
 <style lang='scss' scoped>
@@ -141,8 +141,13 @@ export default {
     }
   }
   img {
+    width: 16px;
     height: 16px;
     float: left;
   }
+  .icon-big {
+    width: 24px;
+    height: 24px;
+  }
 }
 </style>

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/components/Adult/preview/components/Wordcard.vue

@@ -11,7 +11,9 @@
       <i class="el-icon-close" @click="changeWordCard(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
-      <span v-if="word.detail.pinyin">{{ word.detail.pinyin.toLowerCase() }}</span>
+      <span v-if="word.detail.pinyin">{{
+        word.detail.pinyin.toLowerCase()
+      }}</span>
       <div style="margin-left: 4px" v-if="mp3Url">
         <Audio :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
       </div>
@@ -98,19 +100,35 @@
     </template>
     <div class="bwc-more-intp" @click="viewIntp">查看更多</div>
     <div class="bwc-footer">
-      <button class="bwc-btn">
-        <img
-          :src="
-            themeColor
-              ? themeColor == 'green'
-                ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                : themeColor == 'brown'
-                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+      <button class="bwc-btn" @click="addColl">
+        <template v-if="!collFlag">
+          <img
+            :src="
+              themeColor
+                ? themeColor == 'green'
+                  ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                  : themeColor == 'brown'
+                  ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                  : require('../../../../assets/icon/starline-16-normal-red.png')
                 : require('../../../../assets/icon/starline-16-normal-red.png')
-              : require('../../../../assets/icon/starline-16-normal-red.png')
-          "
-          class="collect-icon"
-        />
+            "
+            class="collect-icon"
+          />
+        </template>
+        <template v-else>
+          <img
+            :src="
+              themeColor
+                ? themeColor == 'green'
+                  ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                  : themeColor == 'brown'
+                  ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                  : require('../../../../assets/icon/starline-16-normal-red.png')
+                : require('../../../../assets/icon/starline-16-normal-red.png')
+            "
+            class="practice-icon"
+          />
+        </template>
         收藏
       </button>
       <button
@@ -158,7 +176,7 @@ import Audio from "./AudioRed.vue";
 import Strockplayredline from "./Strockplayredline.vue";
 import Practice from "./Practice.vue";
 import WordPhraseDetail from "./WordPhraseDetail.vue";
-import { getContentFile, getContent, getHZChineseInfo } from "@/api/ajax";
+import { getContentFile, LearnWebSI, getHZChineseInfo } from "@/api/ajax";
 import { isChn } from "@/utils/index";
 
 export default {
@@ -180,6 +198,7 @@ export default {
       dataDetail: null,
       defChsArr: [],
       defEnArr: [],
+      collFlag: false,
     };
   },
   computed: {},
@@ -196,6 +215,30 @@ export default {
   },
   //方法集合
   methods: {
+    addColl() {
+      let Bookdetail = sessionStorage.getItem("Bookdetail");
+      if (Bookdetail) {
+        Bookdetail = JSON.parse(Bookdetail);
+      }
+      let MethodName = "order-collection_manager-AddMyCollection";
+      let data = {
+        goods_id: this.currentTreeID,
+        goods_type: 501,
+        goods_name: Bookdetail.name,
+        goods_person_name_desc: Bookdetail.description
+          ? Bookdetail.description
+          : "",
+        goods_picture_id: Bookdetail.picture_id ? Bookdetail.picture_id : "",
+        goods_price: Bookdetail.price,
+        new_word: {
+          new_word: this.word.detail.new_word,
+        },
+      };
+      LearnWebSI(MethodName, data).then((res) => {
+        this.collFlag = true;
+        this.$message.success("收藏成功！");
+      });
+    },
     async writeWord(words, pinyin) {
       let _this = this;
       const MethodName = "tool-ChineseSCConvert";

src/styles/index.scss

@@ -265,17 +265,17 @@ input:-ms-input-placeholder {
                 background: url("../assets/icon/play-16-normal-red.png") no-repeat left top;
                 background-size: 100% 100%;
             }
-            .el-slider__bar {
-                height: 2px;
-                background: #DE4444;
-            }
-            .el-slider__button {
-                background: #DE4444;
-                border: none;
-            }
-            .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 {
@@ -328,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 {
@@ -382,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

@@ -758,7 +758,6 @@ import Table from "@/components/Adult/inputModules/Table.vue";
 import PlayRecord from "@/components/Adult/inputModules/PlayRecord.vue";
 import UploadPdf from "@/components/Adult/inputModules/UploadPdf.vue";
 
-
 import Textdes from "@/components/Adult/inputModules/Textdes.vue";
 import Record from "@/components/Adult/inputModules/Record.vue";
 import Hanzi from "@/components/Adult/inputModules/Hanzi.vue";
@@ -1365,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);
               });
             }
@@ -1402,7 +1412,11 @@ export default {
       let resArr = [];
       list.forEach((item) => {
         if (item != "#" && this.NumberList.indexOf(item) < 0) {
-          resArr.push(item);
+          let obj = {
+            word: item,
+            word_bt: "",
+          };
+          resArr.push(obj);
         }
       });
       return resArr;

src/views/courseList.vue

@@ -6,7 +6,7 @@
       <div class="inner">
         <div class="btn-box">
           <span @click="handleAdd">
-            <img src="../assets/common/icon-add.png">新建教材
+            <img src="../assets/common/icon-add.png" />新建教材
           </span>
           <!-- <el-button @click="handleAdd" size="small" type="primary"
             ><img src="../assets/common/icon-add.png">新建教材</el-button
@@ -65,11 +65,9 @@
                 />
               </el-select>
             </el-form-item>
-            <el-button
-              size="medium"
-              type="primary"
-              @click="onSubmit"
-            >查询</el-button>
+            <el-button size="medium" type="primary" @click="onSubmit"
+              >查询</el-button
+            >
           </el-form-item>
         </el-form>
         <div class="table-box">
@@ -84,36 +82,16 @@
               prop="name"
               width="150"
             />
-            <el-table-column
-              label="英文名"
-              prop="name_english"
-              width="150"
-            />
-            <el-table-column
-              label="作者"
-              prop="author"
-              width="100"
-            />
-            <el-table-column
-              label="版本"
-              prop="edition"
-              width="100"
-            />
-            <el-table-column
-              label="出版社"
-              prop="publisher"
-              width="150"
-            />
+            <el-table-column label="英文名" prop="name_english" width="150" />
+            <el-table-column label="作者" prop="author" width="100" />
+            <el-table-column label="版本" prop="edition" width="100" />
+            <el-table-column label="出版社" prop="publisher" width="150" />
             <el-table-column
               label="出版编号"
               prop="publish_number"
               width="100"
             />
-            <el-table-column
-              label="所属机构"
-              prop="org_name"
-              width="150"
-            />
+            <el-table-column label="所属机构" prop="org_name" width="150" />
             <el-table-column
               :formatter="handleStatus"
               label="发布状态"
@@ -128,32 +106,30 @@
             />
             <el-table-column fixed="right" label="操作" prop width="300">
               <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  @click="handleClick(scope.row)"
-                >编辑</el-button>
-                <el-button
-                  type="text"
-                  @click="handleView(scope.row)"
-                >预览</el-button>
+                <el-button type="text" @click="handleClick(scope.row)"
+                  >编辑</el-button
+                >
+                <el-button type="text" @click="handleView(scope.row)"
+                  >预览</el-button
+                >
                 <el-button
                   type="text"
                   @click="handleUp(scope.row, scope.$index)"
-                >{{
-                  scope.row.publish_status === 0 ? "上架" : "下架"
-                }}</el-button>
+                  >{{
+                    scope.row.publish_status === 0 ? "上架" : "下架"
+                  }}</el-button
+                >
                 <el-button
                   type="text"
                   @click="handleEdit(scope.row, scope.$index)"
-                >教材信息</el-button>
-                <el-button
-                  type="text"
-                  @click="handleDiscount(scope.row)"
-                >优惠码</el-button>
-                <el-button
-                  type="text"
-                  @click="handleDel(scope.row)"
-                >删除</el-button>
+                  >教材信息</el-button
+                >
+                <el-button type="text" @click="handleDiscount(scope.row)"
+                  >优惠码</el-button
+                >
+                <el-button type="text" @click="handleDel(scope.row)"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -183,11 +159,7 @@
           label-width="90px"
           prop="name"
         >
-          <el-input
-            v-model="formDialog.name"
-            autocomplete="off"
-            name="name"
-          />
+          <el-input v-model="formDialog.name" autocomplete="off" name="name" />
         </el-form-item>
         <el-form-item
           class="label-input"
@@ -289,28 +261,21 @@
                     <el-radio label="1" v-model="formDialog.publish_status">上架</el-radio>
                 </el-form-item>-->
         <el-form-item label="发布范围" label-width="90px" prop="publish_scope">
-          <el-radio
-            v-model="formDialog.publish_scope"
-            :label="0"
-          >机构内用户可见</el-radio>
-          <el-radio
-            v-model="formDialog.publish_scope"
-            :label="1"
-          >所有用户可见</el-radio>
+          <el-radio v-model="formDialog.publish_scope" :label="0"
+            >机构内用户可见</el-radio
+          >
+          <el-radio v-model="formDialog.publish_scope" :label="1"
+            >所有用户可见</el-radio
+          >
         </el-form-item>
         <el-form-item label="主题颜色" label-width="90px" prop="theme_color">
-          <el-radio
-            v-model="formDialog.theme_color"
-            label="red"
-          >红色</el-radio>
-          <el-radio
-            v-model="formDialog.theme_color"
-            label="green"
-          >绿色</el-radio>
-          <el-radio
-            v-model="formDialog.theme_color"
-            label="brown"
-          >棕色</el-radio>
+          <el-radio v-model="formDialog.theme_color" label="red">红色</el-radio>
+          <el-radio v-model="formDialog.theme_color" label="green"
+            >绿色</el-radio
+          >
+          <el-radio v-model="formDialog.theme_color" label="brown"
+            >棕色</el-radio
+          >
         </el-form-item>
         <el-form-item label="教材图片" label-width="90px" prop="fileList">
           <el-upload
@@ -333,11 +298,9 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFlag = false">取 消</el-button>
-        <el-button
-          :loading="loading"
-          type="primary"
-          @click="submitCourse"
-        >确 定</el-button>
+        <el-button :loading="loading" type="primary" @click="submitCourse"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -405,7 +368,7 @@ export default {
         picture_id: "",
         id: "",
         publisher: "",
-        theme_color: ''
+        theme_color: "",
       },
       agencyList: [
         {
@@ -548,6 +511,7 @@ export default {
     },
     // 预览
     handleView(row) {
+      sessionStorage.setItem("Bookdetail", JSON.stringify(row));
       this.$router.push("/courseview?bookId=" + row.id);
     },
     // 优惠码
@@ -571,7 +535,7 @@ export default {
         picture_id: "",
         id: "",
         publisher: "",
-        theme_color: ''
+        theme_color: "",
       };
       this.agency = "";
       this.fileList = [];
@@ -580,10 +544,12 @@ export default {
     // 新建教材提交
     submitCourse() {
       const _this = this;
-      _this.$refs.formDialog.validate(valid => {
+      _this.$refs.formDialog.validate((valid) => {
         _this.formDialog.name = _this.formDialog.name.trim();
         _this.formDialog.author = _this.formDialog.author.trim();
-        if (_this.formDialog.description !== "") { _this.formDialog.description = _this.formDialog.description.trim(); }
+        if (_this.formDialog.description !== "") {
+          _this.formDialog.description = _this.formDialog.description.trim();
+        }
         if (valid) {
           // if (
           //   (!this.formDialog.price && this.formDialog.price != 0)
@@ -617,7 +583,7 @@ export default {
           this.formDialog.publish_status = 1;
           let data = JSON.parse(JSON.stringify(_this.formDialog));
           getContent(MethodName, data)
-            .then(res => {
+            .then((res) => {
               this.$message.success("操作成功");
               if (_this.formDialog.id) {
                 this.$set(_this.tableData, this.rowIndex, data);
@@ -650,7 +616,7 @@ export default {
         publish_status: this.form.publish_status,
         is_control_publish_scope: "false",
       };
-      getContent(MethodName, data).then(res => {
+      getContent(MethodName, data).then((res) => {
         let _this = this;
         _this.tableData = res.book_list;
         _this.courseTotal = res.total_count;
@@ -667,7 +633,7 @@ export default {
       };
       let dataList = [];
       getContentFile(MethodName, data)
-        .then(res => {
+        .then((res) => {
           dataList = res.org_list;
           if (this.pageIndex === res.total_page) {
             // 获取到最后的值时，不再监听滚动条的动作，移除滚动事件
@@ -690,7 +656,7 @@ export default {
         audited_status: -1,
       };
       console.log("MethodName");
-      getContentFile(MethodName, data).then(res => {
+      getContentFile(MethodName, data).then((res) => {
         if (res && res.org_list.length > 0) {
           this.myOrgList = this.myOrgList.concat(res.org_list);
           this.diaMyOrgList = res.org_list;
@@ -704,7 +670,7 @@ export default {
         audited_status: 1,
       };
       console.log("MethodName");
-      getContentFile(MethodName, data).then(res => {
+      getContentFile(MethodName, data).then((res) => {
         if (res && res.org_list.length > 0) {
           this.diaMyOrgList = res.org_list;
         }
@@ -739,7 +705,9 @@ export default {
     },
     // 处理教材价格 失去焦点保留两位小数
     blurPrice() {
-      if (this.formDialog.price) { this.formDialog.price = Number(this.formDialog.price).toFixed(2); }
+      if (this.formDialog.price) {
+        this.formDialog.price = Number(this.formDialog.price).toFixed(2);
+      }
     },
     handleSuccess(response, file, fileList) {
       if (response.status == 1) {
@@ -787,7 +755,7 @@ export default {
         id: row.id,
       };
       getContent(MethodName, data)
-        .then(res => {
+        .then((res) => {
           this.formDialog = {
             id: res.id,
             name: res.name,
@@ -804,6 +772,7 @@ export default {
             theme_color: res.theme_color,
             edition: res.edition,
           };
+          sessionStorage.setItem("Bookdetail", JSON.stringify(this.formDialog));
           if (res.picture_url) {
             let obj = {
               name: "",
@@ -832,7 +801,7 @@ export default {
             id: row.id,
           };
           getContent(MethodName, data)
-            .then(res => {
+            .then((res) => {
               this.currentPage = 1;
               this.getList();
               this.$message({
@@ -859,7 +828,7 @@ export default {
         data.publish_status = 0;
         updataData.publish_status = 0;
       }
-      getContent(Mname, data).then(res => {
+      getContent(Mname, data).then((res) => {
         this.$message.success("操作成功");
         this.$set(this.tableData, index, updataData);
       });