语音矩阵全屏

src/components/Adult/preview/AudioCompareMatrix.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="compara-content">
     <template v-if="wavblob">
-      <div v-if="!isRecord" style="width: 16px; height: 16px; margin-left: 8px" @click.stop.capture="playAudio">
+      <div
+        v-if="!isRecord"
+        :class="[type == 'full' ? 'compare-box-big' : 'compare-box']"
+        @click.stop.capture="playAudio"
+      >
         <audio-line
           ref="audioLine"
           :mp3="url"
@@ -9,26 +13,35 @@
           audio-id="audioCompareMatrix"
           :stop-audio="stopAudio"
           :hide-slider="true"
+          :type="type"
           @handleChangeStopAudio="handleChangeStopAudio"
           @sentPause="sentPause"
           @playChange="playChange"
         />
       </div>
-      <div v-else style="width: 16px; height: 16px; margin-left: 8px">
+      <div v-else :class="[type == 'full' ? 'compare-box-big' : 'compare-box']">
         <audio-red
           ref="audioRed"
           :mp3="wavblob"
           :is-compare="true"
           :theme-color="themeColor"
+          :type="type"
           @sentPause="sentPause"
         />
       </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>
 </template>
@@ -40,23 +53,24 @@ import AudioRed from "./components/AudioRed.vue";
 export default {
   components: {
     AudioLine,
-    AudioRed
+    AudioRed,
   },
   props: [
     "themeColor",
     "isRecord",
     "wavblob",
     "url",
+    "type",
     "sentPause",
     "matrixSelectLrc",
     "getCurTime",
-    "curTime"
+    "curTime",
   ],
   data() {
     return {
       playing: false,
       stopAudio: true,
-      unWatch: null
+      unWatch: null,
     };
   },
   watch: {
@@ -76,7 +90,7 @@ export default {
       if (!newVal) {
         this.playChange(false);
       }
-    }
+    },
   },
   methods: {
     playAudio() {
@@ -94,7 +108,7 @@ export default {
         this.$refs.audioLine.PlayAudio();
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", val => {
+        this.unWatch = this.$watch("curTime", (val) => {
           if (val >= end) {
             this.unWatch();
             this.handleParentPlay();
@@ -112,7 +126,7 @@ export default {
 
     playChange(playing) {
       this.playing = playing;
-      this.$emit('playing', playing);
+      this.$emit("playing", playing);
     },
 
     // 暂停音频播放
@@ -122,16 +136,32 @@ export default {
     // 音频播放时改变布尔值
     handleChangeStopAudio() {
       this.stopAudio = false;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+.compare-box {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  &-big {
+    width: 24px;
+    height: 24px;
+    margin-left: 0px;
+  }
+}
 .compare-disable {
-  display: block;
   width: 16px;
   height: 16px;
+  display: block;
   margin-left: 8px;
+  &-big {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin-left: 0px;
+  }
 }
 </style>

src/components/Adult/preview/AudioLineSentence.vue

@@ -30,7 +30,7 @@
         />
         <span :class="bgIndex == 1 ? 'color-white' : ''">
           {{ realFormatSecond(audio.maxTime) }}
-        
+
         </span>
       </template>
     </div> -->
@@ -160,7 +160,7 @@ export default {
     _this.$refs[audioId].addEventListener("pause", function () {
       _this.audio.playing = false;
       if (_this.audio.currentTime * 1000 + 500 > _this.ed) {
-        //_this.$emit("sentPause", true);
+        // _this.$emit("sentPause", true);
         _this.playValue = 0;
         _this.audio.isPlaying = false;
       }
@@ -195,7 +195,7 @@ export default {
     PlayAudio() {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
-      audio.forEach((item) => {
+      audio.forEach(item => {
         if (item.src == this.mp3) {
           if (item.id !== audioId) {
             item.pause();
@@ -205,7 +205,7 @@ export default {
         }
       });
       let video = document.getElementsByTagName("video");
-      video.forEach((vItem) => {
+      video.forEach(vItem => {
         vItem.pause();
       });
       this.$set(this.audio, "isPlaying", true);
@@ -259,9 +259,9 @@ export default {
     // 音频加载完之后
     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);
+      // this.audio.maxTime = parseInt(res.target.duration);
+      // this.playTime = parseInt(this.maxTime);
+      // this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
     },
     // 当音频当前时间改变后，进度条也要改变
     onTimeupdate(res) {
@@ -289,7 +289,7 @@ export default {
       this.playValue = (time / this.audio.maxTime) * 100;
       if (playFlag) {
         let audio = document.getElementsByTagName("audio");
-        audio.forEach((item) => {
+        audio.forEach(item => {
           if (item.id !== audioId) {
             item.pause();
           }

src/components/Adult/preview/Soundrecorddiff.vue

@@ -10,8 +10,8 @@
       </div>
     </div>
     <div
-      :class="['hasRecord', bgIndex == 1 ? 'hasRecord-white' : '']"
       v-if="!microphoneStatus && recordList.length > 0"
+      :class="['hasRecord', bgIndex == 1 ? 'hasRecord-white' : '']"
     >
       <div
         :class="[bgIndex == 1 ? 'playBack-white' : 'playBack', hasMicro]"
@@ -23,9 +23,9 @@
           )
         "
       />
-      <span class="record-time"
-        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
-      >
+      <span
+        class="record-time"
+      >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span>
       <el-select
         v-model="selectIndex"
         placeholder="无录音"
@@ -157,11 +157,12 @@ export default {
           //   ) {
           _this.wavblob = _this.recordList[_this.selectIndex].wavData;
           _this.$emit("getWavblob", _this.wavblob);
-          if (this.recordList[this.selectIndex].selectData)
+          if (this.recordList[this.selectIndex].selectData) {
             this.$emit(
               "getSelectData",
               this.recordList[this.selectIndex].selectData
             );
+          }
           //   }
         };
       }
@@ -249,8 +250,7 @@ export default {
       this.audio.pause();
       this.oldIndex = null;
       this.$emit("getWavblob", this.wavblob);
-      if (this.recordList[index].selectData)
-        this.$emit("getSelectData", this.recordList[index].selectData);
+      if (this.recordList[index].selectData) { this.$emit("getSelectData", this.recordList[index].selectData); }
       this.$emit("sentPause", false);
     },
     handleDelete() {
@@ -278,7 +278,7 @@ export default {
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .NNPE-Book-record {
   display: flex;

src/components/Adult/preview/VoiceMatrix.vue

@@ -6,7 +6,7 @@
           :class="[
             themeColor.length === 0 || themeColor === 'red'
               ? 'serial-number'
-              : `serial-number-${themeColor}`
+              : `serial-number-${themeColor}`,
           ]"
         >
           {{ curQue.voiceMatrix.audioSerialNumber }}
@@ -22,7 +22,7 @@
           :class="[
             'Repeat-16',
             'audio-simple-repeat',
-            isRepeat ? '' : 'disabled'
+            isRepeat ? '' : 'disabled',
           ]"
           @click="isRepeat = !isRepeat"
         />
@@ -45,7 +45,7 @@
         v-if="curQue.voiceMatrix.matrix.length > 0"
         class="matrix"
         :style="{
-          'grid-template': `36px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(36px, 1fr) / 36px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(36px, 1fr)`
+          'grid-template': `36px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(36px, 1fr) / 36px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(36px, 1fr)`,
         }"
         @mouseleave="clearSelectCell"
       >
@@ -60,7 +60,7 @@
                 (selectColumn === i ||
                   (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
@@ -76,7 +76,7 @@
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -93,7 +93,7 @@
                 (selectRow === i ||
                   (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
           >
@@ -107,7 +107,7 @@
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -131,7 +131,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                   (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : ''
+                  : '',
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -153,7 +153,7 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -167,7 +167,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : ''
+                    : '',
                 ]"
               />
               <!-- 分词 -->
@@ -188,10 +188,10 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 :style="{
-                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
+                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
                 }"
                 @click="matrixCellClick(i, j)"
               >
@@ -238,7 +238,7 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -269,7 +269,7 @@
                       column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -294,7 +294,7 @@
                 (selectRow === i ||
                   (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -310,7 +310,7 @@
                 (selectColumn === i ||
                   (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -344,7 +344,7 @@
         :handle-change-stop-audio="handleChangeStopAudio"
         @playing="playChange"
       />
-      <span class="fullscreen" @click="fullScreen">
+      <span ref="fullscreen" class="fullscreen" @click="fullScreen">
         <span>全屏模式</span>
         <el-image :src="fullscreenSrc" />
       </span>
@@ -374,22 +374,19 @@ export default {
     AudioLine,
     Soundrecord,
     AudioCompare,
-    VoiceFullscreen
+    VoiceFullscreen,
   },
   props: ["curQue", "themeColor"],
   data() {
     return {
       // 组件id
-      cid: Math.random()
-        .toString(36)
-        .substr(2, 10),
+      cid: Math.random().toString(36).substr(2, 10),
       isFull: false,
       curTime: 0,
       playing: false,
       stopAudio: true,
       unWatch: null,
       lrcArray: [],
-      cellTimer: null,
       fileName: "",
       // 底色行、列
       selectRow: -1,
@@ -397,18 +394,18 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0
+        index: 0,
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1
+        column: -1,
       },
       isRepeat: false,
       // 跟读所需属性
       wavblob: null,
       isRecord: false,
-      matrixSelectLrc: null
+      matrixSelectLrc: null,
     };
   },
   computed: {
@@ -442,7 +439,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column
+        column,
       };
     },
 
@@ -466,12 +463,12 @@ export default {
         return require("@/assets/NPC/full-screen-red.png");
       }
       return require(`@/assets/NPC/full-screen-${themeColor}.png`);
-    }
+    },
   },
   watch: {
     hasSelectedCell() {
       this.handleParentPlay();
-    }
+    },
   },
   created() {
     Bus.$on("audioPause", id => {
@@ -485,6 +482,10 @@ export default {
     document
       .querySelector("body")
       .addEventListener("click", this.restoreAudioStatus);
+    // 如果一行内有两个语音矩阵，隐藏 全屏模式 文字
+    if (Number(window.getComputedStyle(this.$refs.fullscreen).width.replace('px', '')) < 80) {
+      this.$refs.fullscreen.children[0].hidden = true;
+    }
   },
   beforeDestroy() {
     document
@@ -527,13 +528,8 @@ export default {
     },
 
     setRecordingFileName(row, column) {
-      let {
-        type,
-        text,
-        sentence_data,
-        pinyin_english_data,
-        text_brackets
-      } = this.curQue.voiceMatrix.matrix[row][column];
+      let { type, text, sentence_data, pinyin_english_data, text_brackets } =
+        this.curQue.voiceMatrix.matrix[row][column];
       if (type === "text") this.fileName = text;
       if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
       if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
@@ -552,7 +548,7 @@ export default {
         "matrix-checkbox-row-",
         "audio-simple-image",
         "audio-simple-repeat",
-        "luyin-box"
+        "luyin-box",
       ];
 
       let operable = event.path.some(item => {
@@ -725,7 +721,7 @@ export default {
           return {
             begin_time: lrc_data.begin_time,
             end_time: this.mp3Duration,
-            text: lrc_data.text
+            text: lrc_data.text,
           };
         }
         return lrc_data;
@@ -794,8 +790,8 @@ export default {
           }
         });
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -1278,6 +1274,7 @@ $select-color-brown-active: #a37557;
       .el-image {
         width: 16px;
         height: 16px;
+        margin-left: 8px;
         vertical-align: text-bottom;
       }
     }

src/components/Adult/preview/VoiceMatrixFullscreenAudio.vue

@@ -0,0 +1,476 @@
+<template>
+  <div :class="['Audio', 'AudioFull']">
+    <div
+      :class="['audioLine3', bgIndex == 1 ? 'audioLine3-green' : '']"
+      @click="hasSelectedCell ? parentPalyAudio() : PlayAudio()"
+    >
+      <div
+        class="play"
+        :class="[
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+        ]"
+      />
+    </div>
+
+    <audio
+      :id="audioId"
+      :ref="audioId"
+      :src="mp3"
+      preload="meta"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "mp3",
+    "bgIndex",
+    "getCurTime",
+    "stopAudio",
+    "width",
+    "isRepeat",
+    "themeColor",
+    "hideSlider",
+    "ed",
+    "bg",
+    "audioId",
+    "type",
+    "hasSelectedCell",
+  ],
+  data() {
+    // 这里存放数据
+    return {
+      playValue: 0,
+      audio: {
+        // 该字段是音频是否处于播放状态的属性
+        playing: false,
+        // 音频当前播放时长
+        currentTime: 0,
+        // 音频最大播放时长
+        maxTime: 0,
+        isPlaying: false,
+        loading: false,
+      },
+      audioAllTime: null, // 展示总时间
+      duioCurrentTime: null, // 剩余时间
+      count: 0,
+      loading: null,
+      isClick: false,
+    };
+  },
+  // 计算属性 类似于data概念
+  computed: {
+    sliderWidth() {
+      let width = 0;
+      if (this.width) {
+        width = this.width;
+      } else {
+        width = 662;
+      }
+      return width;
+    },
+  },
+  // 监控data中数据变化
+  watch: {
+    stopAudio: {
+      handler(val) {
+        if (val) {
+          this.$refs[this.audioId].pause();
+          this.audio.playing = false;
+        }
+      }
+    },
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+      },
+    },
+  },
+  mounted() {
+    let audioId = this.audioId;
+    this.$refs[audioId].addEventListener("loadstart", () => {});
+    this.$refs[audioId].addEventListener("play", () => {
+      this.audio.playing = true;
+      this.audio.isPlaying = true;
+      this.audio.loading = false;
+    });
+    this.$refs[audioId].addEventListener("pause", () => {
+      this.audio.playing = false;
+      if (this.hideSlider && this.audio.currentTime * 1000 + 500 > this.ed) {
+        this.$emit("sentPause", true);
+      }
+      this.$emit("handleListenRead", false);
+    });
+    this.$refs[audioId].addEventListener("ended", () => {
+      this.audio.playing = false;
+      this.audio.isPlaying = false;
+      this.$emit("handleListenRead", false);
+      this.isClick = false;
+    });
+
+    this.$nextTick(() => {
+      document
+        .getElementsByClassName("el-slider__button-wrapper")[0]
+        .addEventListener("mousedown", () => {
+          this.$refs[audioId].pause();
+          this.audio.playing = false;
+        });
+    });
+  },
+  methods: {
+    parentPalyAudio() {
+      if (this.hasSelectedCell) {
+        return this.$emit("parentPlayAudio");
+      }
+    },
+
+    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();
+      });
+
+      if (this.audio.playing) {
+        this.$refs[audioId].pause();
+        this.audio.playing = false;
+        this.$emit("handleListenRead", false);
+        this.isClick = false;
+      } else {
+        if (this.count == 0) {
+          this.audio.loading = true;
+          this.count++;
+        }
+        if (this.hideSlider) {
+          this.$refs[audioId].play();
+          this.onTimeupdateTime(this.bg / 1000);
+        } else {
+          this.$refs[audioId].play();
+        }
+        this.$emit("handleChangeStopAudio");
+        this.$emit("handleListenRead", true);
+        this.isClick = true;
+      }
+    },
+    oncanplaythrough() {
+      // 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) {
+      return this.realFormatSecond(
+        parseInt((this.audio.maxTime / 100) * index)
+      );
+    },
+    // 音频加载完之后
+    onLoadedmetadata(res) {
+      this.audio.maxTime = parseInt(res.target.duration);
+      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
+    },
+    // 当音频当前时间改变后，进度条也要改变
+    onTimeupdate(res) {
+      let audioId = this.audioId;
+      this.audio.currentTime = res.target.currentTime;
+      this.getCurTime(res.target.currentTime);
+      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
+      if (this.type == "audioLine") {
+        if (!this.isClick && this.audio.currentTime * 1000 > this.ed) {
+          this.$refs[audioId].pause();
+          this.$emit("emptyEd");
+        }
+      } else if (this.audio.currentTime * 1000 > this.ed) {
+        this.$refs[audioId].pause();
+      }
+    },
+    onTimeupdateTime(res, playFlag) {
+      if (!res) return;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
+      this.playValue = (res / 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;
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.AudioFull {
+  .audioLine {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background: #ffffff;
+    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%;
+  }
+  .audioLine3 {
+    width: 56px;
+    height: 56px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .play {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      &.playBtn {
+        background: url("../../../assets/icon/pause-24-normal-red.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &.pauseBtn {
+        background: url("../../../assets/icon/play-24-normal-red.png") no-repeat
+          left top;
+        background-size: 100% 100%;
+      }
+    }
+    &-green {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      .play {
+        &.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%;
+        }
+      }
+    }
+  }
+}
+</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;
+  }
+  .el-slider__button {
+    width: 8px;
+    height: 8px;
+    top: 12px;
+    position: absolute;
+  }
+  .el-slider__runway {
+    margin: 0;
+    padding: 0;
+    background: #e5e5e5;
+    border-radius: 0px;
+    height: 2px;
+  }
+  .el-slider {
+    position: relative;
+  }
+}
+.NPC-Book-Sty {
+  .Audio {
+    .el-slider__bar {
+      height: 2px;
+      background: #de4444;
+    }
+    .el-slider__button {
+      background: #de4444;
+      border: none;
+    }
+  }
+}
+.NPC-Big-Book-preview-green {
+  .Audio {
+    .el-slider__bar {
+      background: #24b99e !important;
+    }
+    .el-slider__button {
+      background: #24b99e !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 {
+  .Audio {
+    .el-slider__bar {
+      background: #bd8865 !important;
+    }
+    .el-slider__button {
+      background: #bd8865 !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>

vue.config.js

@@ -43,16 +43,16 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn/`,
-        //target: `http://gcls.helxsoft.cn/`,
+        // target: `http://gcls.utschool.cn/`,
+        target: `http://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
       [process.env.VUE_APP_PDF]: {
-        // target: 'https://file-kf.helxsoft.cn/',
-        target: 'https://file-cs.helxsoft.cn/',
+        target: 'https://file-kf.helxsoft.cn/',
+        // target: 'https://file-cs.helxsoft.cn/',
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_PDF]: ''