Merge branch 'gcj'

src/components/Adult/inputModules/ArticleTemChs/components/ArticleChs.vue

@@ -57,6 +57,9 @@ export default {
         text: this.curQue.article,
       }).then((res) => {
         console.log(res);
+        let fileList = [res.data.fileInfo];
+        //this.$set(this.curQue, "mp3_file_base64", res.data.fileBase64);
+        this.$set(this.curQue, "mp3_list", fileList);
         this.CreadMp3loading = false;
       });
     },

src/components/Adult/inputModules/Neword.vue

@@ -82,7 +82,7 @@ export default {
         name: "生词",
         title: "",
         isInfor: true,
-        titleBg: "", //标题背景颜色
+        titleBg: "themeColor", //标题背景颜色
         option: [
           [
             {

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

@@ -394,7 +394,7 @@ export default {
     handleChangeTime(time) {
       if (time) {
         this.curTime = time;
-        this.$refs.audioLine.onTimeupdateTime(time / 1000);
+        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
       }
     },
     //经过每个词，高亮句子

src/components/Adult/preview/AudioLine.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="Audio">
+  <div :class="['Audio', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '']">
     <div class="audioLine" v-if="!hideSlider">
       <div
         class="play"
-        :class="
-          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn'
-        "
+        :class="[
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+        ]"
         @click="PlayAudio"
       />
       <template v-if="!isRepeat">
@@ -28,7 +28,13 @@
     <div class="audioLine2" v-else>
       <div
         class="play-icon"
-        :class="audio.playing ? 'playBtn-icon' : 'pauseBtn-icon'"
+        :class="
+          audio.loading
+            ? 'loadBtn'
+            : audio.playing
+            ? 'playBtn-icon'
+            : 'pauseBtn-icon'
+        "
         @click="PlayAudio"
       />
     </div>
@@ -52,6 +58,7 @@ export default {
   components: {},
   props: [
     "mp3",
+    "mp3Source",
     "getCurTime",
     "stopAudio",
     "width",
@@ -78,6 +85,7 @@ export default {
       },
       audioAllTime: null, // 展示总时间
       duioCurrentTime: null, // 剩余时间
+      count: 0,
     };
   },
   // 计算属性 类似于data概念
@@ -125,6 +133,7 @@ export default {
       console.log("音频开始播放了");
       _this.audio.playing = true;
       _this.audio.isPlaying = true;
+      _this.audio.loading = false;
     });
     _this.$refs[audioId].addEventListener("pause", function () {
       _this.audio.playing = false;
@@ -184,8 +193,11 @@ export default {
       }
     },
     oncanplaythrough() {
+      let _this = this;
+      //setTimeout(() => {
       console.log("音频加载完成");
-      this.audio.loading = false;
+      _this.audio.loading = false;
+      //}, 10000);
     },
     // 点击 拖拽播放音频
     changeCurrentTime(value) {
@@ -302,19 +314,6 @@ export default {
       height: 16px;
       cursor: pointer;
       display: block;
-      &.loadBtn {
-        background: url("../../../assets/NPC/loading-red.png") no-repeat left
-          top;
-        background-size: 100% 100%;
-      }
-      // &.playBtn {
-      //   background: url("../../../assets/pause.png") no-repeat left top;
-      //   background-size: 100% 100%;
-      // }
-      // &.pauseBtn {
-      //   background: url("../../../assets/play.png") no-repeat left top;
-      //   background-size: 100% 100%;
-      // }
     }
 
     span {
@@ -327,7 +326,7 @@ export default {
       text-align: right;
     }
   }
-  > .audioLine2 {
+  .audioLine2 {
     .play-icon {
       width: 16px;
       height: 16px;
@@ -343,37 +342,8 @@ export default {
       }
     }
   }
-}
-.NPC-Big-Book-preview-green {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
-    background-size: 100% 100%;
-  }
-}
-.NPC-Big-Book-preview-red {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
-    background-size: 100% 100%;
-  }
-}
-.NPC-Big-Book-preview-brown {
-  .playBtn-icon {
-    background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
-      left top;
-    background-size: 100% 100%;
-  }
-  .pauseBtn-icon {
-    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
+  .loadBtn {
+    background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
     background-size: 100% 100%;
   }
 }
@@ -429,6 +399,25 @@ export default {
     .el-slider__button {
       background: #24b99e !important;
     }
+    .audioLine2 {
+      .play-icon {
+        &.playBtn-icon {
+          background: url("../../../assets/NPC/icon-voice-play-green.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn-icon {
+          background: url("../../../assets/NPC/play-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 {
@@ -439,6 +428,25 @@ export default {
     .el-slider__button {
       background: #bd8865 !important;
     }
+    .audioLine2 {
+      .play-icon {
+        &.playBtn-icon {
+          background: url("../../../assets/NPC/icon-voice-play-brown.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn-icon {
+          background: url("../../../assets/NPC/play-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/DialogueAnswerViewChs.vue

@@ -3,78 +3,74 @@
   <div class="dialogue-answer-view NPC-zhedie">
     <!-- 标题 -->
     <template v-if="curQue.title">
-            <div class="topTitle">
-              <div class="NPC-top-left">
-                <span class="NPC-topTitle-text">{{ curQue.title }}</span>
-              </div>
-              <div class="NPC-top-right">
-                <span class="NPC-top-right-text" @click="handleChangeTab">{{
-                  wordShow ? "收起" : "展开"
-                }}</span>
-                <img
-                  v-if="wordShow"
-                  src="../../../../assets/NPC/down.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  class="rotate"
-                  src="../../../../assets/NPC/down.png"
-                  alt=""
-                />
-              </div>
+      <div class="topTitle">
+        <div class="NPC-top-left">
+          <span class="NPC-topTitle-text">{{ curQue.title }}</span>
+        </div>
+        <div class="NPC-top-right" @click="handleChangeTab">
+          <span class="NPC-top-right-text">{{
+            wordShow ? "收起" : "展开"
+          }}</span>
+          <img v-if="wordShow" src="../../../../assets/NPC/down.png" alt="" />
+          <img
+            v-else
+            class="rotate"
+            src="../../../../assets/NPC/down.png"
+            alt=""
+          />
+        </div>
+      </div>
+      <el-collapse-transition>
+        <div :class="['dialogue-answer-content']" v-show="wordShow">
+          <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+          <div
+            :class="[
+              'dialogue-answer-inner',
+              curQue.option &&
+              curQue.option.length > 0 &&
+              curQue.option[index] &&
+              curQue.option[index].detail &&
+              curQue.option[index].detail.length > 0
+                ? 'hasoption'
+                : '',
+              index == curQue.list.length - 1 ? 'haspadding' : '',
+            ]"
+            v-for="(item, index) in curQue.list"
+            :key="'list' + index"
+          >
+            <span class="number" v-if="item.number">{{ item.number }}</span>
+            <div
+              class="dialogue-img"
+              v-if="item.img_list && item.img_list.length > 0"
+            >
+              <el-image
+                style="width: 196px; height: 164px"
+                :src="item.img_list[0].id"
+                fit="scale-down"
+              ></el-image>
             </div>
-            <el-collapse-transition>
-            <div :class="['dialogue-answer-content']" v-show="wordShow">
-                <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
-                <div
-                :class="[
-                    'dialogue-answer-inner',
-                    curQue.option &&
-                    curQue.option.length > 0 &&
-                    curQue.option[index] &&
-                    curQue.option[index].detail &&
-                    curQue.option[index].detail.length > 0
-                    ? 'hasoption'
-                    : '',
-                    index == curQue.list.length - 1 ? 'haspadding' : '',
-                ]"
-                v-for="(item, index) in curQue.list"
-                :key="'list' + index"
-                >
-                <span class="number" v-if="item.number">{{ item.number }}</span>
-                <div
-                    class="dialogue-img"
-                    v-if="item.img_list && item.img_list.length > 0"
-                >
-                    <el-image
-                    style="width: 196px; height: 164px"
-                    :src="item.img_list[0].id"
-                    fit="scale-down"
-                    ></el-image>
-                </div>
 
-                <div class="dialogue-answer-model">
-                    <AnswerModel
-                    :curQue="item"
-                    :pyPosition="curQue.pyPosition"
-                    :colorBox="colorBox"
-                    />
-                </div>
-                <template
-                    v-if="
-                    curQue.option &&
-                    curQue.option.length > 0 &&
-                    curQue.option[index] &&
-                    curQue.option[index].detail &&
-                    curQue.option[index].detail.length > 0
-                    "
-                >
-                    <OptionModel :curOption="curQue.option[index]" :index="index" />
-                </template>
-                </div>
+            <div class="dialogue-answer-model">
+              <AnswerModel
+                :curQue="item"
+                :pyPosition="curQue.pyPosition"
+                :colorBox="colorBox"
+              />
             </div>
-            </el-collapse-transition>
+            <template
+              v-if="
+                curQue.option &&
+                curQue.option.length > 0 &&
+                curQue.option[index] &&
+                curQue.option[index].detail &&
+                curQue.option[index].detail.length > 0
+              "
+            >
+              <OptionModel :curOption="curQue.option[index]" :index="index" />
+            </template>
+          </div>
+        </div>
+      </el-collapse-transition>
     </template>
     <template v-else>
       <div class="dialogue-answer-content">
@@ -153,9 +149,9 @@ export default {
     saveBookanswer(answer, listIndex) {
       this.curQue.Bookanswer[listIndex] = answer;
     },
-    handleChangeTab(){
-        this.wordShow = !this.wordShow
-    }
+    handleChangeTab() {
+      this.wordShow = !this.wordShow;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

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

@@ -394,7 +394,6 @@ export default {
     handleWav() {},
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
-      console.log(this.curTime);
     },
     handleData() {
       let resArr = [];

src/components/Adult/preview/InputHasRecord.vue

@@ -1,130 +1,130 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes InputHasRecord" :class="[curQue.guide?'NPC-zhedie':'']" v-if="curQue">
+  <div
+    class="Big-Book-prev-Textdes InputHasRecord"
+    :class="[curQue.guide ? 'NPC-zhedie' : '']"
+    v-if="curQue"
+  >
     <template v-if="curQue.guide">
-            <div class="topTitle">
-              <div class="NPC-top-left">
-                <span class="NPC-topTitle-text">{{ curQue.guide }}</span>
-              </div>
-              <div class="NPC-top-right">
-                <span class="NPC-top-right-text" @click="handleChangeTab">{{
-                  wordShow ? "收起" : "展开"
-                }}</span>
-                <img
-                  v-if="wordShow"
-                  src="../../../assets/NPC/down.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  class="rotate"
-                  src="../../../assets/NPC/down.png"
-                  alt=""
-                />
-              </div>
-            </div>
-            <el-collapse-transition>
-                <div
-                    class="NPC-word-list"
-                    v-if="curQue.option && curQue.option.length > 0"
-                    v-show="wordShow"
+      <div class="topTitle">
+        <div class="NPC-top-left">
+          <span class="NPC-topTitle-text">{{ curQue.guide }}</span>
+        </div>
+        <div class="NPC-top-right" @click="handleChangeTab">
+          <span class="NPC-top-right-text">{{
+            wordShow ? "收起" : "展开"
+          }}</span>
+          <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
+          <img
+            v-else
+            class="rotate"
+            src="../../../assets/NPC/down.png"
+            alt=""
+          />
+        </div>
+      </div>
+      <el-collapse-transition>
+        <div
+          class="NPC-word-list"
+          v-if="curQue.option && curQue.option.length > 0"
+          v-show="wordShow"
+        >
+          <h2 v-if="curQue.title">{{ curQue.title }}</h2>
+          <div v-for="(items, indexs) in curQue.option" :key="indexs">
+            <div class="item-content">
+              <b class="xuhao" v-if="items.number">{{ items.number }}</b>
+              <template v-if="items.detail.wordsList.length == 0">
+                <p
+                  :class="['content-con', items.font]"
+                  v-if="items.detail.sentence"
                 >
-                    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
-                    <div v-for="(items, indexs) in curQue.option" :key="indexs">
-                    <div class="item-content">
-                        <b class="xuhao" v-if="items.number">{{ items.number }}</b>
-                        <template v-if="items.detail.wordsList.length == 0">
-                        <p
-                            :class="['content-con', items.font]"
-                            v-if="items.detail.sentence"
-                        >
-                            {{ items.detail.sentence }}
-                        </p>
-                        </template>
-                        <template v-else>
-                        <div class="con-box">
-                            <div
-                            :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
-                            v-for="(itemCon, indexCon) in items.detail.resArr"
-                            :key="indexCon"
-                            v-show="itemCon.isShow"
-                            >
-                            <template
-                                v-if="
-                                items.detail.wordsList[indexCon + 1] &&
-                                items.detail.wordsList[indexCon + 1].chs &&
-                                chsFhList.indexOf(
-                                    items.detail.wordsList[indexCon + 1].chs
-                                ) > -1
-                                "
-                            >
-                                <div class="synthesis-box">
-                                <div>
-                                    <span
-                                    class="pinyin"
-                                    :class="[
-                                        noFont.indexOf(itemCon.pinyin) > -1
-                                        ? 'noFont'
-                                        : '',
-                                    ]"
-                                    >{{ itemCon.pinyin }}</span
-                                    >
-                                    <span class="hanzi content-con">{{
-                                    itemCon.chs
-                                    }}</span>
-                                </div>
-                                <div style="text-align: left">
-                                    <span
-                                    class="pinyin"
-                                    :class="[
-                                        noFont.indexOf(
-                                        items.detail.wordsList[indexCon + 1].pinyin
-                                        ) > -1
-                                        ? 'noFont'
-                                        : '',
-                                    ]"
-                                    >{{
-                                        items.detail.wordsList[indexCon + 1].pinyin
-                                    }}</span
-                                    >
-                                    <span class="hanzi content-con">{{
-                                    items.detail.wordsList[indexCon + 1].chs
-                                    }}</span>
-                                </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <span
-                                class="pinyin"
-                                :class="[
-                                    noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
-                                ]"
-                                >{{ itemCon.pinyin }}</span
-                                >
-                                <span class="hanzi content-con">{{ itemCon.chs }}</span>
-                            </template>
-                            </div>
+                  {{ items.detail.sentence }}
+                </p>
+              </template>
+              <template v-else>
+                <div class="con-box">
+                  <div
+                    :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
+                    v-for="(itemCon, indexCon) in items.detail.resArr"
+                    :key="indexCon"
+                    v-show="itemCon.isShow"
+                  >
+                    <template
+                      v-if="
+                        items.detail.wordsList[indexCon + 1] &&
+                        items.detail.wordsList[indexCon + 1].chs &&
+                        chsFhList.indexOf(
+                          items.detail.wordsList[indexCon + 1].chs
+                        ) > -1
+                      "
+                    >
+                      <div class="synthesis-box">
+                        <div>
+                          <span
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(itemCon.pinyin) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            >{{ itemCon.pinyin }}</span
+                          >
+                          <span class="hanzi content-con">{{
+                            itemCon.chs
+                          }}</span>
                         </div>
-                        </template>
-                    </div>
-                    <div class="inputInner">
-                        <el-input
-                        :class="['textarea', items.record ? '' : 'textareaNoRecord']"
-                        type="textarea"
-                        v-model="textareaCon"
-                        placeholder="输入"
-                        ></el-input>
-                        <div v-if="items.record" class="luyin-inner">
-                        <Soundrecord
-                            @handleWav="handleWav"
-                            type="promax"
-                            class="luyin-box"
-                        />
+                        <div style="text-align: left">
+                          <span
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                items.detail.wordsList[indexCon + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : '',
+                            ]"
+                            >{{
+                              items.detail.wordsList[indexCon + 1].pinyin
+                            }}</span
+                          >
+                          <span class="hanzi content-con">{{
+                            items.detail.wordsList[indexCon + 1].chs
+                          }}</span>
                         </div>
-                    </div>
-                    </div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ itemCon.pinyin }}</span
+                      >
+                      <span class="hanzi content-con">{{ itemCon.chs }}</span>
+                    </template>
+                  </div>
                 </div>
-            </el-collapse-transition>
+              </template>
+            </div>
+            <div class="inputInner">
+              <el-input
+                :class="['textarea', items.record ? '' : 'textareaNoRecord']"
+                type="textarea"
+                v-model="textareaCon"
+                placeholder="输入"
+              ></el-input>
+              <div v-if="items.record" class="luyin-inner">
+                <Soundrecord
+                  @handleWav="handleWav"
+                  type="promax"
+                  class="luyin-box"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-collapse-transition>
     </template>
     <template v-else>
       <h2 v-if="curQue.title" style="margin-top: 0">{{ curQue.title }}</h2>
@@ -266,9 +266,9 @@ export default {
         }
       }
     },
-    handleChangeTab(){
-        this.wordShow = !this.wordShow
-    }
+    handleChangeTab() {
+      this.wordShow = !this.wordShow;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -400,7 +400,7 @@ export default {
     height: 48px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    border-radius: 8px 8px 0 0 ;
+    border-radius: 8px 8px 0 0;
     .NPC-top-left {
       display: flex;
       justify-content: flex-start;

src/components/Adult/preview/Notes.vue

@@ -1,59 +1,44 @@
 <template>
   <div class="NPC-zhedie">
-          <div class="topTitle">
-            <div class="NPC-top-left">
-              <span class="NPC-topTitle-text">{{ curQue.title }}</span>
-            </div>
-            <div class="NPC-top-right">
-              <span class="NPC-top-right-text" @click="handleChangeTab">{{
-                wordShow ? "收起" : "展开"
-              }}</span>
-              <img
-                v-if="wordShow"
-                src="../../../assets/NPC/down.png"
-                alt=""
-              />
-              <img
-                v-else
-                class="rotate"
-                src="../../../assets/NPC/down.png"
-                alt=""
-              />
-            </div>
+    <div class="topTitle">
+      <div class="NPC-top-left">
+        <span class="NPC-topTitle-text">{{ curQue.title }}</span>
+      </div>
+      <div class="NPC-top-right" @click="handleChangeTab">
+        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
+        <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
+        <img v-else class="rotate" src="../../../assets/NPC/down.png" alt="" />
+      </div>
+    </div>
+    <el-collapse-transition>
+      <div class="NPC-notes-list" v-show="wordShow">
+        <div
+          class="NPC-notes"
+          v-for="(item, index) in curQue.option"
+          :key="'NPC-notes' + index"
+        >
+          <div class="NPC-notes-con">
+            <span class="NPC-notes-con-number">{{ item.number }}</span>
+            <span class="NPC-notes-con-text">{{ item.con }}</span>
+          </div>
+          <div class="NPC-notes-trans">
+            {{ item.interpret }}
           </div>
-          <el-collapse-transition>
-            <div class="NPC-notes-list" v-show="wordShow">
+          <div class="NPC-notes-note" v-if="item.note" v-html="item.note"></div>
+          <div
+            class="NPC-notes-note-img"
+            v-if="item.img_list && item.img_list.length > 0"
+          >
             <div
-                class="NPC-notes"
-                v-for="(item, index) in curQue.option"
-                :key="'NPC-notes' + index"
+              v-for="(imgItem, imgIndex) in item.img_list"
+              :key="'imgList' + imgIndex"
             >
-                <div class="NPC-notes-con">
-                <span class="NPC-notes-con-number">{{ item.number }}</span>
-                <span class="NPC-notes-con-text">{{ item.con }}</span>
-                </div>
-                <div class="NPC-notes-trans">
-                {{ item.interpret }}
-                </div>
-                <div
-                class="NPC-notes-note"
-                v-if="item.note"
-                v-html="item.note"
-                ></div>
-                <div
-                class="NPC-notes-note-img"
-                v-if="item.img_list && item.img_list.length > 0"
-                >
-                <div
-                    v-for="(imgItem, imgIndex) in item.img_list"
-                    :key="'imgList' + imgIndex"
-                >
-                    <img :src="imgItem.id" class="NPC-notes-img" />
-                </div>
-                </div>
+              <img :src="imgItem.id" class="NPC-notes-img" />
             </div>
-            </div>
-          </el-collapse-transition>
+          </div>
+        </div>
+      </div>
+    </el-collapse-transition>
   </div>
 </template>
 
@@ -79,9 +64,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleChangeTab(){
-        this.wordShow = !this.wordShow
-    }
+    handleChangeTab() {
+      this.wordShow = !this.wordShow;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

src/components/Adult/preview/TextInputRecord.vue

@@ -60,10 +60,32 @@ export default {
       // }
     },
     handleWav(data) {},
-    handleReplaceTone(e){
-        let value = e.target.value
-        
-    }
+    handleReplaceTone(e) {
+      let value = e.target.value;
+
+      // if (value) {
+      //   let reg = /\s+/g;
+      //   let reg2 = /^[A-Za-z](.*?)\d$/g;
+      //   let valueArr = value.split(reg);
+      //   console.log(valueArr);
+      //   valueArr.forEach((item, index) => {
+      //     if (reg2.test(item)) {
+      //       debugger;
+      //       let obj = this.handleValue(item);
+      //     }
+      //   });
+      // }
+    },
+    handleValue(valItem) {
+      let reg = /\d+/g;
+      let numList = [];
+      if (reg.test(valItem)) {
+        numList = valItem.match(reg);
+      }
+      console.log(numList);
+      let arr = valItem.split(reg);
+      console.log(arr);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {

src/components/Adult/preview/WordPhrase.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="NPC-zhedie">
-    <div class="topTitle">
+  <div class="NPC-zhedie" v-if="curQue">
+    <div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
       <div class="NPC-top-left">
         <span class="NPC-topTitle-text">{{ curQue.title }}</span>
         <span
@@ -8,14 +8,23 @@
           @click.stop="playNewwords"
         ></span>
       </div>
-      <div class="NPC-top-right">
-        <span class="NPC-top-right-text" @click="handleChangeTab">{{
-          wordShow ? "收起" : "展开"
-        }}</span>
-        <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
-        <img v-else src="../../../assets/NPC/up.png" alt="" />
+      <div class="NPC-top-right" @click="handleChangeTab">
+        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
+        <template v-if="curQue.titleBg == 'white'">
+          <img
+            v-if="wordShow"
+            src="../../../assets/NPC/down-black.png"
+            alt=""
+          />
+          <img v-else src="../../../assets/NPC/up-black.png" alt="" />
+        </template>
+        <template v-else>
+          <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
+          <img v-else src="../../../assets/NPC/up.png" alt="" />
+        </template>
       </div>
     </div>
+
     <el-collapse-transition>
       <div
         class="NPC-word-list"
@@ -532,9 +541,7 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     overflow: hidden;
     border-radius: 8px 8px 0 0;
-    &.topTitleWhite {
-      background: #fff;
-    }
+
     .NPC-top-left {
       display: flex;
       justify-content: flex-start;
@@ -589,6 +596,72 @@ export default {
       animation-timing-function: linear;
     }
   }
+  .topTitleWhite {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 24px;
+    padding-right: 16px;
+    height: 48px;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    border-radius: 8px 8px 0 0;
+
+    .NPC-top-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .NPC-topTitle-text {
+        font-family: "sourceR";
+        font-size: 16px;
+        color: #000;
+        font-weight: bold;
+        margin-right: 8px;
+      }
+      .NPC-play-all {
+        width: 16px;
+        height: 16px;
+        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
+        background-size: 100% 100%;
+        cursor: pointer;
+        &.active {
+          width: 16px;
+          height: 16px;
+          background: url("../../../assets/NPC/icon-voice-play-red.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .NPC-top-right {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      cursor: pointer;
+      &-text {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 16px;
+        color: #000;
+      }
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+      }
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .rotate {
+      animation-name: firstrotate;
+      animation-direction: 2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+    }
+  }
   .el-collapse-item__content {
     padding-bottom: 0;
   }
@@ -631,6 +704,20 @@ export default {
     .tabNum {
       background: #24b99e !important;
     }
+    .topTitleWhite {
+      .NPC-top-left {
+        .NPC-play-all {
+          background: url("../../../assets/NPC/play-green.png") no-repeat left
+            top;
+          background-size: 100% 100%;
+          &.active {
+            background: url("../../../assets/NPC/play-green.png") no-repeat left
+              top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 }
 .NPC-Big-Book-preview-brown {
@@ -641,6 +728,20 @@ export default {
     .tabNum {
       background: #bd8865 !important;
     }
+    .topTitleWhite {
+      .NPC-top-left {
+        .NPC-play-all {
+          background: url("../../../assets/NPC/play-brown.png") no-repeat left
+            top;
+          background-size: 100% 100%;
+          &.active {
+            background: url("../../../assets/NPC/play-brown.png") no-repeat left
+              top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -99,14 +99,10 @@
                 >{{ wordShow ? "收起" : "展开" }}
                 <img
                   v-if="wordShow"
-                  src="../../../../assets/newImage/common/show-black.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  src="../../../../assets/newImage/common/hide-black.png"
+                  src="../../../../assets/NPC/down-black.png"
                   alt=""
                 />
+                <img v-else src="../../../../assets/NPC/up-black.png" alt="" />
               </span>
             </div>
             <el-collapse-transition>
@@ -130,14 +126,10 @@
                 >{{ wordShow2 ? "收起" : "展开" }}
                 <img
                   v-if="wordShow2"
-                  src="../../../../assets/newImage/common/show-black.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  src="../../../../assets/newImage/common/hide-black.png"
+                  src="../../../../assets/NPC/down-black.png"
                   alt=""
                 />
+                <img v-else src="../../../../assets/NPC/up-black.png" alt="" />
               </span>
             </div>
             <el-collapse-transition>
@@ -161,14 +153,9 @@
                 >{{ wordShow3 ? "收起" : "展开" }}
                 <img
                   v-if="wordShow3"
-                  src="../../../../assets/newImage/common/show-black.png"
-                  alt=""
-                />
-                <img
-                  v-else
-                  src="../../../../assets/newImage/common/hide-black.png"
-                  alt=""
+                  src="../../../../assets/NPC/down-black.png"
                 />
+                <img v-else src="../../../../assets/NPC/up-black.png" alt="" />
               </span>
             </div>
             <el-collapse-transition>

src/styles/index.scss

@@ -277,6 +277,18 @@ input:-ms-input-placeholder {
                 width: 25px;
             }
         }
+      &.Audio-tts{
+        .audioLine {
+          .playBtn {
+              background: url("../assets/NPC/tts-play-red.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+          .pauseBtn {
+              background: url("../assets/NPC/tts-red.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+      }
+      }
     }
     .Repeat-16 {
         background: url("../assets/icon/Repeat-16-normal-red.png") no-repeat left top;
@@ -309,6 +321,19 @@ input:-ms-input-placeholder {
                     width: 25px;
                 }
             }
+            &.Audio-tts{
+              .audioLine {
+                .playBtn {
+                    background: url("../assets/NPC/tts-play-green.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                .pauseBtn {
+                    background: url("../assets/NPC/tts-green.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                
+            }
+            }
         }
         .Repeat-16 {
           background: url("../assets/icon/Repeat-16-normal-Green.png") no-repeat left top;
@@ -342,6 +367,19 @@ input:-ms-input-placeholder {
                     width: 25px;
                 }
             }
+            &.Audio-tts{
+              .audioLine {
+                .playBtn {
+                    background: url("../assets/NPC/tts-play-brown.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                .pauseBtn {
+                    background: url("../assets/NPC/tts-brown.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                
+            }
+            }
         }
         .Repeat-16 {
           background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;