sss

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

@@ -239,13 +239,13 @@ export default {
 .NNPE-Big-Book-preview-green {
   .dialogue-answer-view {
     .number {
-      color: #24b99e !important;
+      background: #24b99e !important;
     }
   }
 }
 .NNPE-Big-Book-preview-brown {
   .number {
-    color: #bd8865 !important;
+    background: #bd8865 !important;
   }
 }
 </style>

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

@@ -5,7 +5,7 @@
       <el-switch
         style="display: block"
         v-model="showPhrases"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="本课生词"
@@ -15,7 +15,7 @@
       <el-switch
         style="display: block"
         v-model="showPractice"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="语音练习"
@@ -25,7 +25,7 @@
       <el-switch
         style="display: block"
         v-model="showWord"
-        active-color="#DE4444"
+        :active-color="activeColor"
         inactive-color="rgba(0,0,0,0.1)"
         active-text=""
         inactive-text="取词"
@@ -91,7 +91,13 @@ import WordModel from "./WordModelChs.vue"; // 语音练习模式
 
 export default {
   name: "ArticleView",
-  props: ["curQue", "NNPENewWordList", "NNPEAnnotationList", "colorBox"],
+  props: [
+    "curQue",
+    "NNPENewWordList",
+    "NNPEAnnotationList",
+    "colorBox",
+    "themeColor",
+  ],
   components: { NormalModelChs, Practice, WordModel, PhraseModel },
   data() {
     return {
@@ -107,7 +113,20 @@ export default {
       resColorArr: [],
     };
   },
-  computed: {},
+  computed: {
+    activeColor: function () {
+      let color = "";
+      if (this.themeColor == "red") {
+        color = "#DE4444";
+      } else if (this.themeColor == "green") {
+        color = "#24B99E";
+      } else if (this.themeColor == "brown") {
+        color = "#BD8865";
+      }
+
+      return color;
+    },
+  },
   watch: {},
   //方法集合
   methods: {

src/components/Adult/preview/WordPhrase.vue

@@ -50,13 +50,13 @@
                   <span
                     :class="[
                       'NPC-play-btn',
-                      mp3_index == index ? 'active' : '',
+                      mp3_index == sItem.sIndex ? 'active' : '',
                     ]"
-                    @click="palyAudio(item.new_word, index)"
+                    @click="palyAudio(sItem.new_word, sItem.sIndex)"
                   ></span>
                   <audio
                     :id="sItem.new_word"
-                    :src="sItem.mp3_list[0].url"
+                    :src="sItem.mp3_list[0].id"
                   ></audio>
                 </template>
                 <template v-else>
@@ -140,12 +140,12 @@ export default {
   //方法集合
   methods: {
     handleChange(val) {},
-    palyAudio(new_word, index) {
+    palyAudio(new_word, sIndex) {
       let _this = this;
       let node = document.getElementById(new_word);
       _this.playWord = node;
       if (node) {
-        this.mp3_index = index;
+        this.mp3_index = sIndex;
         node.play();
       }
       this.handleListenPlay();
@@ -238,16 +238,16 @@ export default {
       let _this = this;
       let mp3_index = 0;
       _this.mp3_index = mp3_index;
-      let leg = this.curQue.option.length;
-      let mp3 = this.curQue.option[mp3_index].mp3_list[0].url;
+      let leg = this.optionRes.length;
+      let mp3 = this.optionRes[mp3_index].mp3_list[0].id;
       _this.handlePlayVoice(mp3);
       _this.audio.addEventListener("ended", function () {
         if (mp3_index < leg - 1) {
           mp3_index = mp3_index + 1;
           _this.mp3_index = mp3_index;
           mp3 =
-            _this.curQue.option[mp3_index].mp3_list.length > 0 &&
-            _this.curQue.option[mp3_index].mp3_list[0].url;
+            _this.optionRes[mp3_index].mp3_list.length > 0 &&
+            _this.optionRes[mp3_index].mp3_list[0].id;
           if (mp3) {
             _this.handlePlayVoice(mp3);
           }
@@ -280,13 +280,14 @@ export default {
     console.log(this.curQue);
 
     if (this.curQue.type == "NewWord_chs") {
+      let resIndex = 0;
       let optionRes = [];
       this.curQue.option.forEach((item, index) => {
         optionRes = optionRes.concat(item);
         item.index = index + 1;
         item.forEach((sItem, sIndex) => {
-          sItem.sIndex =
-            index == 0 ? sIndex : sIndex + this.curQue.option[index - 1].length;
+          sItem.sIndex = resIndex;
+          resIndex++;
           sItem.def_str =
             sItem.definition_list.length > 0
               ? sItem.definition_list.join("；")
@@ -294,6 +295,8 @@ export default {
         });
       });
       this.optionRes = JSON.parse(JSON.stringify(optionRes));
+      console.log("======console.log(this.optionRes);");
+      console.log(this.optionRes);
     }
     console.log(this.curQue);
   },
@@ -515,4 +518,18 @@ export default {
     padding: 4px 0;
   }
 }
+.NNPE-Big-Book-preview-green {
+  .NPC-zhedie {
+    .el-collapse-item__header {
+      background: #24b99e !important;
+    }
+  }
+}
+.NNPE-Big-Book-preview-brown {
+  .NPC-zhedie {
+    .el-collapse-item__header {
+      background: #bd8865 !important;
+    }
+  }
+}
 </style>