对话填空-显示问题待解决

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

@@ -113,7 +113,7 @@
                                 "
                                 class="answer-input userRight"
                                 v-model="curQue.answerArr[pItem.hengIndex - 1]"
-                                :canEdit="TaskModel == 'ANSWER' ? false : true"
+                                :canEdit="false"
                               />
                             </template>
                             <template v-else>
@@ -142,7 +142,11 @@
                                 v-model="
                                   Bookanswer.input[pItem.hengIndex - 1].value
                                 "
-                                :canEdit="TaskModel == 'ANSWER' ? false : true"
+                                :canEdit="
+                                  TaskModel == 'ANSWER' || judgeAnswer
+                                    ? false
+                                    : true
+                                "
                                 :hengIndex="pItem.hengIndex - 1"
                                 @saveBlankTF="saveBlankTF"
                               />
@@ -314,13 +318,54 @@
                           >
                         </template>
                         <template v-else>
-                          <EditDiv
-                            class="answer-input"
-                            v-model="
-                              Bookanswer.input[pItem.hengIndex - 1].value
-                            "
-                            :canEdit="TaskModel == 'ANSWER' ? false : true"
-                          />
+                          <template v-if="judgeAnswer == 'standardAnswer'">
+                            <EditDiv
+                              :id="
+                                'dialogue_' +
+                                Math.random().toString(36).substr(2) +
+                                '_' +
+                                pItem.hengIndex
+                              "
+                              class="answer-input userRight"
+                              v-model="curQue.answerArr[pItem.hengIndex - 1]"
+                              :canEdit="false"
+                            />
+                          </template>
+                          <template v-else>
+                            <EditDiv
+                              :id="
+                                'dialogue_' +
+                                Math.random().toString(36).substr(2) +
+                                '_' +
+                                pItem.hengIndex
+                              "
+                              class="answer-input"
+                              :class="[
+                                curQue.answerArr &&
+                                curQue.answerArr[pItem.hengIndex - 1] &&
+                                curQue.answerArr[pItem.hengIndex - 1] ==
+                                  Bookanswer.input[pItem.hengIndex - 1].value
+                                  ? 'userRight'
+                                  : curQue.answerArr &&
+                                    curQue.answerArr[pItem.hengIndex - 1] &&
+                                    curQue.answerArr[pItem.hengIndex - 1] !=
+                                      Bookanswer.input[pItem.hengIndex - 1]
+                                        .value
+                                  ? 'userError'
+                                  : '',
+                              ]"
+                              v-model="
+                                Bookanswer.input[pItem.hengIndex - 1].value
+                              "
+                              :canEdit="
+                                TaskModel == 'ANSWER' || judgeAnswer
+                                  ? false
+                                  : true
+                              "
+                              :hengIndex="pItem.hengIndex - 1"
+                              @saveBlankTF="saveBlankTF"
+                            />
+                          </template>
                         </template>
                         <span
                           v-if="item.isHasPY > 0 && pyPosition == 'bottom'"
@@ -446,11 +491,49 @@
                     }}</span>
                   </template>
                   <template v-else>
-                    <EditDiv
-                      class="answer-input"
-                      v-model="Bookanswer.input[pItem.hengIndex - 1].value"
-                      :canEdit="TaskModel == 'ANSWER' ? false : true"
-                    />
+                    <template v-if="judgeAnswer == 'standardAnswer'">
+                      <EditDiv
+                        :id="
+                          'dialogue_' +
+                          Math.random().toString(36).substr(2) +
+                          '_' +
+                          pItem.hengIndex
+                        "
+                        class="answer-input userRight"
+                        v-model="curQue.answerArr[pItem.hengIndex - 1]"
+                        :canEdit="false"
+                      />
+                    </template>
+                    <template v-else>
+                      <EditDiv
+                        :id="
+                          'dialogue_' +
+                          Math.random().toString(36).substr(2) +
+                          '_' +
+                          pItem.hengIndex
+                        "
+                        class="answer-input"
+                        :class="[
+                          curQue.answerArr &&
+                          curQue.answerArr[pItem.hengIndex - 1] &&
+                          curQue.answerArr[pItem.hengIndex - 1] ==
+                            Bookanswer.input[pItem.hengIndex - 1].value
+                            ? 'userRight'
+                            : curQue.answerArr &&
+                              curQue.answerArr[pItem.hengIndex - 1] &&
+                              curQue.answerArr[pItem.hengIndex - 1] !=
+                                Bookanswer.input[pItem.hengIndex - 1].value
+                            ? 'userError'
+                            : '',
+                        ]"
+                        v-model="Bookanswer.input[pItem.hengIndex - 1].value"
+                        :canEdit="
+                          TaskModel == 'ANSWER' || judgeAnswer ? false : true
+                        "
+                        :hengIndex="pItem.hengIndex - 1"
+                        @saveBlankTF="saveBlankTF"
+                      />
+                    </template>
                   </template>
                 </div>
                 <div v-if="item.enwords" class="enwords">
@@ -614,7 +697,6 @@ export default {
     saveBlankTF(value, hengIndex) {
       let _this = this;
       let answerArr = this.curQue.answerArr;
-      console.log(answerArr);
       if (answerArr.length > 0) {
         if (value.trim() == answerArr[hengIndex]) {
           _this.$set(
@@ -1125,12 +1207,16 @@ export default {
   &-userAnswer,
   &-standardAnswer,
   &-studentAnswer {
-    .answer-input {
-      &.userRight {
-        color: #2ca767;
-      }
-      &.userError {
-        color: #ed342d;
+    .NNPE-detail {
+      .NNPE-words {
+        .answer-input {
+          &.userRight {
+            color: #2ca767;
+          }
+          &.userError {
+            color: #ed342d;
+          }
+        }
       }
     }
   }

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

@@ -11,7 +11,11 @@
     >
       {{ judgeAnswer == "userAnswer" ? "Your answer" : "Student answers" }}
     </h6>
+    <h6 v-else class="standardTitle" style="margin: 0 0 8px 24px">
+      Standard answer
+    </h6>
     <!-- 标题 -->
+
     <template v-if="curQue.title">
       <div class="topTitle">
         <div class="NPC-top-left">
@@ -30,6 +34,7 @@
           />
         </div>
       </div>
+
       <el-collapse-transition>
         <div :class="['dialogue-answer-content']" v-show="wordShow">
           <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
@@ -94,52 +99,54 @@
           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>
+          <template>
+            <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"
-              :Bookanswer="curQue.Bookanswer[index]"
-              :pyPosition="curQue.pyPosition"
-              :colorBox="colorBox"
-              :listIndex="index"
-              :TaskModel="TaskModel"
-              :judgeAnswer="judgeAnswer"
-            />
-          </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>
-          <template
-            v-if="
-              curQue.wordcard &&
-              curQue.wordcard.length > 0 &&
-              curQue.wordcard[index]
-            "
-          >
-            <WordcardModel
-              :curWordcard="curQue.wordcard[index]"
-              :index="index"
-              :pyPosition="curQue.pyPosition"
-            />
+            <div class="dialogue-answer-model">
+              <AnswerModel
+                :curQue="item"
+                :Bookanswer="curQue.Bookanswer[index]"
+                :pyPosition="curQue.pyPosition"
+                :colorBox="colorBox"
+                :listIndex="index"
+                :TaskModel="TaskModel"
+                :judgeAnswer="judgeAnswer"
+              />
+            </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>
+            <template
+              v-if="
+                curQue.wordcard &&
+                curQue.wordcard.length > 0 &&
+                curQue.wordcard[index]
+              "
+            >
+              <WordcardModel
+                :curWordcard="curQue.wordcard[index]"
+                :index="index"
+                :pyPosition="curQue.pyPosition"
+              />
+            </template>
           </template>
         </div>
       </div>
@@ -187,6 +194,17 @@ export default {
     handleChangeTab() {
       this.wordShow = !this.wordShow;
     },
+    handleData() {
+      let list = JSON.parse(JSON.stringify(this.curQue.list));
+      list.forEach((item) => {
+        let answerArr = [];
+        if (item.answer) {
+          answerArr = item.answer.split("\n");
+        }
+        item.answerArr = answerArr;
+      });
+      this.$set(this.curQue, "list", list);
+    },
     initAnswer() {
       let reg = /_{2,}/g;
       let BookAnswer = [];
@@ -196,7 +214,6 @@ export default {
         if (item.answer) {
           answerArr = item.answer.split("\n");
         }
-
         let arr = item.article.match(reg);
         let paraLeg = item.detail.length;
         let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
@@ -230,7 +247,6 @@ export default {
         }
         BookAnswer.push(userAnswer);
       });
-      console.log(BookAnswer);
       this.$set(this.curQue, "Bookanswer", BookAnswer);
     },
   },
@@ -239,6 +255,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     if (this.curQue) {
+      this.handleData();
       if (!this.curQue.Bookanswer) {
         this.initAnswer();
       }

src/styles/index.scss

@@ -2,444 +2,501 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
+
 // @import './sidebar.scss';
 body {
-    height: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 html {
-    height: 100%;
-    box-sizing: border-box;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 *,
 *:before,
 *:after {
-    box-sizing: inherit;
-    // white-space: pre-wrap;
+  box-sizing: inherit;
+  // white-space: pre-wrap;
 }
 
 a:focus,
 a:active {
-    outline: none;
+  outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: none;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
 }
 
 div:focus {
-    outline: none;
+  outline: none;
 }
 
 .clearfix {
-    &:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: ' ';
-        clear: both;
-        height: 0;
-    }
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: ' ';
+    clear: both;
+    height: 0;
+  }
 }
 
 // main-container global css
 .app-container {
-    padding: 20px;
+  padding: 20px;
 }
 
 // 重写分页样式
 .el-pagination {
-    padding-top: 20px;
+  padding-top: 20px;
 }
 
 .el-message__icon {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 .Book_flex {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .Book_flex_start {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .Book_flex .insert_pinyin {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    cursor: pointer;
-    margin-left: 15px;
-    >img {
-        width: 24px;
-        height: 20px;
-        margin-right: 8px;
-    }
-    >span {
-        line-height: 24px;
-        font-size: 14px;
-    }
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 15px;
+
+  >img {
+    width: 24px;
+    height: 20px;
+    margin-right: 8px;
+  }
+
+  >span {
+    line-height: 24px;
+    font-size: 14px;
+  }
 }
 
 .Book_flex_start .insert_pinyin {
-    display: flex;
-    justify-content: flex-start;
-    align-content: flex-start;
-    cursor: pointer;
-    margin-left: 15px;
-    >img {
-        width: 24px;
-        height: 20px;
-        margin-right: 8px;
-    }
-    >span {
-        line-height: 24px;
-        font-size: 14px;
-    }
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  cursor: pointer;
+  margin-left: 15px;
+
+  >img {
+    width: 24px;
+    height: 20px;
+    margin-right: 8px;
+  }
+
+  >span {
+    line-height: 24px;
+    font-size: 14px;
+  }
 }
 
 .Book_border_radius_6 {
-    border-radius: 6px;
+  border-radius: 6px;
 }
 
 .Book_tm_index {
-    font-size: 14px;
-    margin: 0;
+  font-size: 14px;
+  margin: 0;
 }
 
 .Book_enter_container {
-    padding: 20px 32px 20px 0px;
-    border: 1px solid #d0d0d0;
-    width: 80%;
-    border-radius: 8px;
-    .sentenceChoice_notice {
-        font-size: 14px;
-        color: red;
-        line-height: 20px;
-        margin-bottom: 10px;
-        padding-left: 50px;
-    }
+  padding: 20px 32px 20px 0px;
+  border: 1px solid #d0d0d0;
+  width: 80%;
+  border-radius: 8px;
+
+  .sentenceChoice_notice {
+    font-size: 14px;
+    color: red;
+    line-height: 20px;
+    margin-bottom: 10px;
+    padding-left: 50px;
+  }
 }
 
 .zhuanTtf {
-    font-family: zhuan;
+  font-family: zhuan;
 }
 
 .Book_orange_color {
-    color: #FFD46E;
+  color: #FFD46E;
 }
 
 .Big-Book-Maxwidth {
-    .el-textarea {
-        width: 100%;
-        margin-right: 15px;
-    }
+  .el-textarea {
+    width: 100%;
+    margin-right: 15px;
+  }
 }
 
 .Big-Book {
-    &-content {
-        width: 100%;
-    }
-    &-main {
-        width: 100%;
-    }
-    &-left-text {
-        display: block;
-        font-size: 14px;
-    }
-    &-con-top {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-        ;
-    }
+  &-content {
+    width: 100%;
+  }
+
+  &-main {
+    width: 100%;
+  }
+
+  &-left-text {
+    display: block;
+    font-size: 14px;
+  }
+
+  &-con-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    ;
+  }
 }
 
 input::-webkit-input-placeholder {
-    color: rgba($color: #000000, $alpha: 0.3);
+  color: rgba($color: #000000, $alpha: 0.3);
 }
 
 input::-moz-placeholder {
-    color: rgba($color: #000000, $alpha: 0.3);
+  color: rgba($color: #000000, $alpha: 0.3);
 }
 
 input:-moz-placeholder {
-    color: rgba($color: #000000, $alpha: 0.3);
+  color: rgba($color: #000000, $alpha: 0.3);
 }
 
 input:-ms-input-placeholder {
-    color: rgba($color: #000000, $alpha: 0.3);
+  color: rgba($color: #000000, $alpha: 0.3);
 }
 
 .adult-book-input-sty {
-    .flex-start {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
-    .flex-center {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+  .flex-start {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .flex-align-center {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .flex-justify-center {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .adult-book-input-item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 10px;
+  }
+
+  .adult-book-lable {
+    width: 70px;
+    font-size: 14px;
+    display: block;
+    text-align: right;
+    margin-right: 8px;
+    line-height: 32px;
+
+    &-bottom {
+      margin-bottom: 10px;
+      display: block;
     }
-    .flex-align-center {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
+  }
+
+  .adult-book-main {
+    min-height: 32px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .adult-book-input {
+    width: 500px;
+    margin-right: 10px;
+
+    &-800 {
+      width: 800px;
     }
-    .flex-justify-center {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
+  }
+
+  .el-radio-group {
+    padding: 8px 0;
+  }
+
+  .adult-book-del-icon {
+    padding: 8px;
+    cursor: pointer;
+  }
+}
+
+.adult-book-preview-sty {
+  .Audio {
+    .audioLine {
+      .playBtn {
+        background: url("../assets/icon/pause-16-normal-red.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+
+      .pauseBtn {
+        background: url("../assets/icon/play-16-normal-red.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+
     }
-    .adult-book-input-item {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        margin-bottom: 10px;
+
+    .audioLine-green {
+      .playBtn {
+        background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+
+      .pauseBtn {
+        background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
     }
-    .adult-book-lable {
-        width: 70px;
-        font-size: 14px;
-        display: block;
-        text-align: right;
-        margin-right: 8px;
-        line-height: 32px;
-        &-bottom {
-            margin-bottom: 10px;
-            display: block;
+
+    &.Audio-tts {
+      .audioLine {
+        .playBtn {
+          background: url("../assets/NPC/tts-play-red.png") no-repeat left top;
+          background-size: 100% 100%;
         }
-    }
-    .adult-book-main {
-        min-height: 32px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-    }
-    .adult-book-input {
-        width: 500px;
-        margin-right: 10px;
-        &-800 {
-            width: 800px;
+
+        .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;
+    background-size: 100% 100%;
+
+    &.disabled {
+      background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+      background-size: 100% 100%;
     }
-    .el-radio-group {
-        padding: 8px 0;
+  }
+
+  .pinyin-16 {
+    background: url("../assets/icon/pinyin-16-normal-red.png") no-repeat left top;
+    background-size: 100% 100%;
+
+    &.disabled {
+      background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+      background-size: 100% 100%;
     }
-    .adult-book-del-icon {
-        padding: 8px;
-        cursor: pointer;
+  }
+
+  .EN-16 {
+    background: url("../assets/icon/EN-16-normal-red.png") no-repeat left top;
+    background-size: 100% 100%;
+
+    &.disabled {
+      background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
+      background-size: 100% 100%;
     }
-}
+  }
 
-.adult-book-preview-sty {
+  &.NPC-Big-Book-preview-green {
     .Audio {
-        .audioLine {
-            .playBtn {
-                background: url("../assets/icon/pause-16-normal-red.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
-            .pauseBtn {
-                background: url("../assets/icon/play-16-normal-red.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
-            
+      .audioLine {
+        .playBtn {
+          background: url("../assets/icon/pause-16-normal-Green.png") no-repeat left top;
+          background-size: 100% 100%;
+        }
+
+        .pauseBtn {
+          background: url("../assets/icon/play-16-normal-Green.png") no-repeat left top;
+          background-size: 100% 100%;
         }
-        .audioLine-green{
+
+        .el-slider__button-wrapper {
+          width: 25px;
+        }
+
+        .audioLine-green {
           .playBtn {
             background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
             background-size: 100% 100%;
-        }
-        .pauseBtn {
+          }
+
+          .pauseBtn {
             background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
             background-size: 100% 100%;
+          }
         }
+      }
+
+      &.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%;
+          }
         }
-        &.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;
+      background: url("../assets/icon/Repeat-16-normal-Green.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
         background-size: 100% 100%;
-        &.disabled {
-            background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
-            background-size: 100% 100%;
-        }
+      }
     }
+
     .pinyin-16 {
-        background: url("../assets/icon/pinyin-16-normal-red.png") no-repeat left top;
+      background: url("../assets/icon/pinyin-16-normal-Green.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
         background-size: 100% 100%;
-        &.disabled {
-            background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
-            background-size: 100% 100%;
-        }
+      }
     }
+
     .EN-16 {
-        background: url("../assets/icon/EN-16-normal-red.png") no-repeat left top;
+      background: url("../assets/icon/EN-16-normal-Green.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
         background-size: 100% 100%;
-        &.disabled {
-            background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
-            background-size: 100% 100%;
-        }
+      }
     }
-    &.NPC-Big-Book-preview-green {
-        .Audio {
-            .audioLine {
-                .playBtn {
-                    background: url("../assets/icon/pause-16-normal-Green.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .pauseBtn {
-                    background: url("../assets/icon/play-16-normal-Green.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .el-slider__button-wrapper {
-                    width: 25px;
-                }
-                .audioLine-green{
-                  .playBtn {
-                    background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .pauseBtn {
-                    background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                }
-            }
-            &.Audio-tts {
-                .audioLine {
-                    .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;
-            background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
+  }
+
+  &.NPC-Big-Book-preview-brown {
+    .Audio {
+      .audioLine {
+        .playBtn {
+          background: url("../assets/icon/pause-16-normal-Brown.png") no-repeat left top;
+          background-size: 100% 100%;
         }
-        .pinyin-16 {
-            background: url("../assets/icon/pinyin-16-normal-Green.png") no-repeat left top;
-            background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
+
+        .pauseBtn {
+          background: url("../assets/icon/play-16-normal-Brown.png") no-repeat left top;
+          background-size: 100% 100%;
         }
-        .EN-16 {
-            background: url("../assets/icon/EN-16-normal-Green.png") no-repeat left top;
-            background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
+
+        .el-slider__button-wrapper {
+          width: 25px;
         }
-    }
-    &.NPC-Big-Book-preview-brown {
-        .Audio {
-            .audioLine {
-                .playBtn {
-                    background: url("../assets/icon/pause-16-normal-Brown.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .pauseBtn {
-                    background: url("../assets/icon/play-16-normal-Brown.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .el-slider__button-wrapper {
-                    width: 25px;
-                }
-            }
-            .audioLine-green{
-              .playBtn {
-                background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
-            .pauseBtn {
-                background: url("../assets/icon/play-24-normal-yellow.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
-            }
-            &.Audio-tts {
-                .audioLine {
-                    .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%;
-                    }
-                }
-            }
+      }
+
+      .audioLine-green {
+        .playBtn {
+          background: url("../assets/icon/pause-24-normal-yellow.png") no-repeat left top;
+          background-size: 100% 100%;
         }
-        .Repeat-16 {
-            background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;
-            background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/Repeat-16-disable-Black.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%;
         }
-        .pinyin-16 {
-            background: url("../assets/icon/pinyin-16-normal-Brown.png") no-repeat left top;
+      }
+
+      &.Audio-tts {
+        .audioLine {
+          .playBtn {
+            background: url("../assets/NPC/tts-play-brown.png") no-repeat left top;
             background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
-        }
-        .EN-16 {
-            background: url("../assets/icon/EN-16-normal-Brown.png") no-repeat left top;
+          }
+
+          .pauseBtn {
+            background: url("../assets/NPC/tts-brown.png") no-repeat left top;
             background-size: 100% 100%;
-            &.disabled {
-                background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
-                background-size: 100% 100%;
-            }
+          }
         }
+      }
+    }
+
+    .Repeat-16 {
+      background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+
+    .pinyin-16 {
+      background: url("../assets/icon/pinyin-16-normal-Brown.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+
+    .EN-16 {
+      background: url("../assets/icon/EN-16-normal-Brown.png") no-repeat left top;
+      background-size: 100% 100%;
+
+      &.disabled {
+        background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
     }
+  }
 }
 
 //新实用汉语
@@ -449,4 +506,11 @@ input:-ms-input-placeholder {
 .adult-book-DNC {}
 
 //HSK
-.adult-book-HSK {}
+.adult-book-HSK {}
+
+.standardTitle {
+  font-weight: 510;
+  font-size: 16px;
+  line-height: 150%;
+  color: #CC5E20;
+}

src/views/courseView.vue

@@ -219,10 +219,10 @@ export default {
       }
     },
     finishTaskMaterial(data, time, rightNumber, errorNumber) {
-      console.log("用户提交的答案："+data);
-      console.log("答题时间"+time);
-      console.log("答对个数"+rightNumber);
-      console.log("答错个数"+errorNumber);
+      console.log("用户提交的答案：" + data);
+      console.log("答题时间" + time);
+      console.log("答对个数" + rightNumber);
+      console.log("答错个数" + errorNumber);
     },
   },
 };