语音矩阵的主题色

src/components/Adult/Preview.vue

@@ -6,27 +6,27 @@
     v-if="cur"
   >
     <div
-      class="NNPE-title"
       v-if="
         cur.detailList &&
-        cur.detailList.length > 0 &&
-        cur.detailList[0].sentence
+          cur.detailList.length > 0 &&
+          cur.detailList[0].sentence
       "
+      class="NNPE-title"
     >
       <!-- 页眉 -->
       <div class="NNPE-title-left">
         <div
-          class="NNPE-title-item"
           v-for="(item, index) in cur.detailList"
           :key="index"
+          class="NNPE-title-item"
         >
           <template v-if="item.wordsList.length == 0">
             <p
+              v-if="item.sentence"
               :class="[
                 'content-con',
                 /^[\u4e00-\u9fa5]/.test(item.sentence) ? 'hasCn' : '',
               ]"
-              v-if="item.sentence"
             >
               {{ item.sentence }}
             </p>
@@ -34,16 +34,16 @@
           <template v-else>
             <div class="con-box">
               <div
-                :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
                 v-for="(itemCon, indexCon) in item.resArr"
-                :key="indexCon"
                 v-show="itemCon.isShow"
+                :key="indexCon"
+                :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
               >
                 <template
                   v-if="
                     item.wordsList[indexCon + 1] &&
-                    item.wordsList[indexCon + 1].chs &&
-                    chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
+                      item.wordsList[indexCon + 1].chs &&
+                      chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
                   "
                 >
                   <div class="synthesis-box">
@@ -76,10 +76,10 @@
       </div>
     </div>
     <div
-      class="classTopic-box"
       v-if="
         cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
       "
+      class="classTopic-box"
     >
       <span
         v-for="(item, index) in cur.classTopic"
@@ -117,25 +117,25 @@
             >
               <template v-if="itemss.data">
                 <template v-if="itemss.type == 'ligature_chs'">
-                  <Ligature :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Ligature :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.data.type == 'image'">
-                  <Picture :cur-que="itemss.data" :child-type="itemss.type" :themeColor="themeColor" />
+                  <Picture :cur-que="itemss.data" :child-type="itemss.type" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'record_chs'">
-                  <Record :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Record :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'phrase_chs'">
-                  <WordPhrase :cur-que="itemss.data" :themeColor="themeColor" />
+                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'NewWord_chs'">
-                  <WordPhrase :cur-que="itemss.data" :themeColor="themeColor" />
+                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'annotation_chs'">
-                  <WordPhrase :cur-que="itemss.data" :themeColor="themeColor" />
+                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'notes_chs'">
-                  <Notes :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Notes :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'article_chs'">
                   <ArticleTemChs
@@ -143,11 +143,11 @@
                     :n-n-p-e-new-word-list="NNPENewWordList"
                     :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                     :n-n-p-e-annotation-list="NNPEAnnotationList"
-                    :themeColor="themeColor"
+                    :theme-color="themeColor"
                   />
                 </template>
                 <template v-if="itemss.type == 'sentence_segword_chs'">
-                  <SentenceSegWordViewChs :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SentenceSegWordViewChs :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'dialogue_article_chs'">
                   <DialogueArticleViewChs
@@ -155,103 +155,103 @@
                     :n-n-p-e-new-word-list="NNPENewWordList"
                     :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                     :n-n-p-e-annotation-list="NNPEAnnotationList"
-                    :colorBox="colorBox"
-                    :themeColor="themeColor"
+                    :color-box="colorBox"
+                    :theme-color="themeColor"
                   />
                 </template>
                 <template v-if="itemss.type == 'dialogue_answer_chs'">
                   <DialogueAnswerViewChs
                     :cur-que="itemss.data"
-                    :colorBox="colorBox"
-                    :themeColor="themeColor"
+                    :color-box="colorBox"
+                    :theme-color="themeColor"
                   />
                 </template>
                 <template v-if="itemss.type == 'input_record_chs'">
-                  <InputHasRecord :cur-que="itemss.data" :themeColor="themeColor" />
+                  <InputHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
-                  <TextInputRecord :cur-que="itemss.data" :themeColor="themeColor" />
+                  <TextInputRecord :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'inputItem_chs' ||
-                    itemss.type == 'sentence_input_chs' ||
-                    itemss.type == 'sentence_judge_chs' ||
-                    itemss.type == 'sentence_record_chs' ||
-                    itemss.type == 'sentence_input_record_chs'
+                      itemss.type == 'sentence_input_chs' ||
+                      itemss.type == 'sentence_judge_chs' ||
+                      itemss.type == 'sentence_record_chs' ||
+                      itemss.type == 'sentence_input_record_chs'
                   "
                 >
-                  <SentenceInput :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SentenceInput :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'NumberCombination_chs'">
-                  <NumberSelectHasRecord :cur-que="itemss.data" :themeColor="themeColor" />
+                  <NumberSelectHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type === 'voice_matrix'">
-                  <voice-matrix :cur-que="itemss.data" :themeColor="themeColor" />
+                  <voice-matrix :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'toneSelect_chs'">
-                  <SelectTone :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SelectTone :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'sudoku_chs'">
-                  <Soduko :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Soduko :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'single_chs'">
-                  <Single :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Single :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'text_problem_chs'">
-                  <TextProblem :cur-que="itemss.data" :themeColor="themeColor" />
+                  <TextProblem :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'newWord_preview_chs'">
-                  <NewWordShow :cur-que="itemss.data" :themeColor="themeColor" />
+                  <NewWordShow :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template
                   v-if="itemss.type == 'listen_record_single_syllable_chs'"
                 >
-                  <SelectYinjie :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SelectYinjie :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'sentence_listen_read_chs'">
-                  <SentenceListenRead :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SentenceListenRead :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'sort_chs'">
-                  <SentenceSortQP :cur-que="itemss.data" :themeColor="themeColor" />
+                  <SentenceSortQP :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
-                  <Checkbox :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Checkbox :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'record_control_mini' ||
-                    itemss.type == 'record_control_normal' ||
-                    itemss.type == 'record_control_pro' ||
-                    itemss.type == 'record_control_promax'
+                      itemss.type == 'record_control_normal' ||
+                      itemss.type == 'record_control_pro' ||
+                      itemss.type == 'record_control_promax'
                   "
                 >
-                  <RecordModule :cur-que="itemss.data" :themeColor="themeColor" />
+                  <RecordModule :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'upload_control_chs' ||
-                    itemss.type == 'upload_control_preview_chs'
+                      itemss.type == 'upload_control_preview_chs'
                   "
                 >
                   <UploadControlView
                     :cur-que="itemss.data"
                     :type="itemss.type"
-                    :themeColor="themeColor"
+                    :theme-color="themeColor"
                   />
                 </template>
                 <template v-if="itemss.type == 'CourseStart_chs'">
                   <CourseStart
                     :cur-que="itemss.data"
-                    :handleNNPEnext="handleNNPEnext"
-                    :themeColor="themeColor"
+                    :handle-n-n-p-enext="handleNNPEnext"
+                    :theme-color="themeColor"
                   />
                 </template>
                 <template v-if="itemss.type == 'tinydemo_chs'">
-                  <Tinydemo :cur-que="itemss.data" :themeColor="themeColor" />
+                  <Tinydemo :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'video_chs'">
-                  <VideoControl :cur-que="itemss.data" :type="itemss.type" :themeColor="themeColor" />
+                  <VideoControl :cur-que="itemss.data" :type="itemss.type" :theme-color="themeColor" />
                 </template>
               </template>
             </div>
@@ -287,7 +287,7 @@ import SentenceSortQP from "./preview/SentenceSortQP.vue"; // 句子拖拽排序
 import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
 import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
 import RecordModule from "./preview/RecordModule.vue"; // 录音组件
-import UploadControlView from "./preview/UploadControlView.vue"; //预览控件
+import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
 import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
 import CourseStart from "./preview/CourseStart.vue"; // 封面
 import Tinydemo from "./preview/TinyModule.vue"; // 富文本
@@ -452,9 +452,9 @@ export default {
         //   });
         // }
         _this.cur = _this.contextData;
-        _this.cur.cur_fn_data.forEach((item) => {
-          item.table_list.forEach((items) => {
-            items.forEach((itemss) => {
+        _this.cur.cur_fn_data.forEach(item => {
+          item.table_list.forEach(items => {
+            items.forEach(itemss => {
               if (itemss.data && itemss.data.type == "NewWord_chs") {
                 _this.NNPENewWordList = _this.NNPENewWordList.concat(
                   itemss.data.option

src/components/Adult/preview/VoiceMatrix.vue

@@ -2,7 +2,13 @@
   <div v-if="curQue" class="voice-matrix">
     <div class="voice-matrix-audio">
       <div v-if="curQue.voiceMatrix.isAudioNumber" class="audio-number">
-        <span class="serial-number">
+        <span
+          :class="[
+            themeColor.length === 0 || themeColor === 'red'
+              ? 'serial-number'
+              : `serial-number-${themeColor}`
+          ]"
+        >
           {{ curQue.voiceMatrix.audioSerialNumber }}
         </span>
       </div>
@@ -50,7 +56,7 @@
                   (selectedLine.type === 'column' && selectedLine.index === i)
               "
               :class="[
-                'matrix-checkbox-row',
+                `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
                   : ''
@@ -79,7 +85,7 @@
                   (selectedLine.type === 'row' && selectedLine.index === i)
               "
               :class="[
-                'matrix-checkbox-column',
+                `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
                   : ''
@@ -100,7 +106,7 @@
                   ? 'read'
                   : '',
                 i === 0 && curQue.voiceMatrix.firstLineHighlight
-                  ? 'highlight'
+                  ? `highlight-${themeColor}`
                   : ''
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
@@ -110,7 +116,7 @@
                 v-if="column.type === 'text'"
                 :key="`column-${i}-${j}`"
                 :class="[
-                  column.text.length === 0 ? 'space' : 'column',
+                  column.text.length === 0 ? 'space' : `column-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
                     (selectedLine.type === 'column' &&
                       selectedLine.index === j) ||
@@ -134,7 +140,7 @@
                 :class="[
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
-                    ? 'highlight-bc'
+                    ? `highlight-bc-${themeColor}`
                     : ''
                 ]"
               />
@@ -143,7 +149,7 @@
                 v-else-if="column.type === 'SentenceSegwordChs'"
                 :key="`column-${i}-${j}`"
                 :class="[
-                  'sentence',
+                  `sentence-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
                     (selectedLine.type === 'column' &&
                       selectedLine.index === j) ||
@@ -237,7 +243,7 @@ export default {
     AudioLine,
     Soundrecord
   },
-  props: ["curQue"],
+  props: ["curQue", "themeColor"],
   data() {
     return {
       curTime: 0,
@@ -245,8 +251,8 @@ export default {
       stopAudio: true,
       unWatch: null,
       lrcArray: [],
-      voicePauseSrc: require("../../../assets/common/icon-voice-red.png"),
-      voicePlaySrc: require("../../../assets/common/icon-voice-red-play.png"),
+      // voicePauseSrc: require("../../../assets/common/icon-voice-red.png"),
+      // voicePlaySrc: require("../../../assets/common/icon-voice-red-play.png"),
       fileName: "",
       // 底色行、列
       selectRow: -1,
@@ -275,6 +281,20 @@ export default {
       let { type, index } = this.selectedLine;
       let { row, column } = this.selectCell;
       return (type.length > 0 && index >= 0) || (row >= 0 && column >= 0);
+    },
+    voicePauseSrc() {
+      let themeColor = this.themeColor;
+      if (themeColor.length === 0 || themeColor === "red") {
+        return require("../../../assets/NPC/play-red.png");
+      }
+      return require(`../../../assets/NPC/play-${themeColor}.png`);
+    },
+    voicePlaySrc() {
+      let themeColor = this.themeColor;
+      if (themeColor.length === 0 || themeColor === "red") {
+        return require("../../../assets/NPC/icon-voice-play-red.png");
+      }
+      return require(`../../../assets/NPC/icon-voice-play-${themeColor}.png`);
     }
   },
   watch: {
@@ -450,9 +470,20 @@ export default {
 $select-color: #de4444;
 $border-color: #e6e6e6;
 
+$select-color-green: #24b99e;
+$select-color-green-bc: rgba(36, 185, 158, 0.25);
+$select-color-green-hover: #3dd4b8;
+$select-color-green-active: #1fa189;
+
+$select-color-brown: #bd8865;
+$select-color-brown-bc: rgb(189, 136, 101, 0.25);
+$select-color-brown-hover: #d6a687;
+$select-color-brown-active: #a37557;
+
 .voice-matrix {
   height: 100%;
   width: 100%;
+  margin-top: 16px;
   color: #262626;
 
   &-audio {
@@ -464,6 +495,7 @@ $border-color: #e6e6e6;
     .audio-number {
       padding: 11px 0 0 12px;
 
+      %serial-number,
       .serial-number {
         display: inline-block;
         width: 16px;
@@ -472,9 +504,22 @@ $border-color: #e6e6e6;
         line-height: 16px;
         font-size: 12px;
         background-color: $select-color;
+        font-family: "robot";
         color: #fff;
         border-radius: 50%;
       }
+
+      .serial-number-green {
+        @extend %serial-number;
+
+        background-color: $select-color-green;
+      }
+
+      .serial-number-brown {
+        @extend %serial-number;
+
+        background-color: $select-color-brown;
+      }
     }
 
     .audio-simple {
@@ -537,25 +582,85 @@ $border-color: #e6e6e6;
         }
       }
 
-      .matrix-checkbox-row {
+      .matrix-checkbox-row-,
+      .matrix-checkbox-row-red {
+        @extend %matrix-checkbox;
+      }
+
+      .matrix-checkbox-row-green {
+        @extend %matrix-checkbox;
+
+        &.active {
+          border-color: $select-color-green-active;
+
+          &::after {
+            border-color: $select-color-green-active;
+          }
+        }
+      }
+
+      .matrix-checkbox-row-brown {
         @extend %matrix-checkbox;
+
+        &.active {
+          border-color: $select-color-brown-active;
+
+          &::after {
+            border-color: $select-color-brown-active;
+          }
+        }
       }
 
-      .matrix-checkbox-column {
+      %matrix-checkbox-column,
+      .matrix-checkbox-column-,
+      .matrix-checkbox-column-red {
         @extend %matrix-checkbox;
 
         top: calc(50% - 7px);
         right: -2px;
       }
 
+      .matrix-checkbox-column-green {
+        @extend %matrix-checkbox-column;
+
+        &.active {
+          border-color: $select-color-green-active;
+
+          &::after {
+            border-color: $select-color-green-active;
+          }
+        }
+      }
+
+      .matrix-checkbox-column-brown {
+        @extend %matrix-checkbox-column;
+
+        &.active {
+          border-color: $select-color-brown-active;
+
+          &::after {
+            border-color: $select-color-brown-active;
+          }
+        }
+      }
+
       .read {
         background-color: #eaeaea;
       }
 
-      .highlight {
+      .highlight-,
+      .highlight-red {
         color: $select-color;
       }
 
+      .highlight-green {
+        color: $select-color-green;
+      }
+
+      .highlight-brown {
+        color: $select-color-brown;
+      }
+
       .column-wrapper {
         padding: 4px;
 
@@ -584,10 +689,13 @@ $border-color: #e6e6e6;
           }
         }
 
-        .column {
+        %column-red,
+        .column-,
+        .column-red {
           @extend %column;
 
           position: relative;
+          font-family: "GB-PINYINOK-B FZJCGFKTK";
 
           &::before {
             display: inline-block;
@@ -597,7 +705,35 @@ $border-color: #e6e6e6;
           }
         }
 
-        .sentence {
+        .column-green {
+          @extend %column-red;
+
+          &.selected {
+            color: $select-color-green;
+            border-color: $select-color-green;
+          }
+
+          &.playing {
+            background-color: $select-color-green-bc;
+          }
+        }
+
+        .column-brown {
+          @extend %column-red;
+
+          &.selected {
+            color: $select-color-brown;
+            border-color: $select-color-brown;
+          }
+
+          &.playing {
+            background-color: $select-color-brown-bc;
+          }
+        }
+
+        %sentence,
+        .sentence-,
+        .sentence-red {
           @extend %column;
 
           display: inline-grid;
@@ -618,6 +754,32 @@ $border-color: #e6e6e6;
           }
         }
 
+        .sentence-green {
+          @extend %sentence;
+
+          &.selected {
+            color: $select-color-green;
+            border-color: $select-color-green;
+          }
+
+          &.playing {
+            background-color: $select-color-green-hover;
+          }
+        }
+
+        .sentence-brown {
+          @extend %sentence;
+
+          &.selected {
+            color: $select-color-brown;
+            border-color: $select-color-brown;
+          }
+
+          &.playing {
+            background-color: $select-color-brown-hover;
+          }
+        }
+
         .connection {
           position: relative;
           top: calc(50% - 1px);
@@ -627,8 +789,17 @@ $border-color: #e6e6e6;
           border-radius: 4px;
           background-color: #252525;
 
-          &.highlight-bc {
-            background-color: #f00;
+          &.highlight-bc-,
+          &.highlight-bc-red {
+            background-color: $select-color;
+          }
+
+          &.highlight-bc-green {
+            background-color: $select-color-green;
+          }
+
+          &.highlight-bc-brown {
+            background-color: $select-color-brown;
           }
         }
       }
@@ -657,6 +828,10 @@ $border-color: #e6e6e6;
 <style lang="scss">
 .voice-matrix {
   &-audio {
+    .audioLine {
+      border-radius: 8px 8px 0 0 !important;
+    }
+
     .el-slider {
       width: 100% !important;
     }