预览问题修改

src/views/book/courseware/preview/components/article/NormalModelChs.vue

@@ -202,7 +202,9 @@
                                       curTime < item.timeList[pItem.sentIndex].ed &&
                                       attrib
                                         ? attrib.topic_color
-                                        : pItem.config.color,
+                                        : pItem.notesColor
+                                          ? pItem.notesColor
+                                          : pItem.config.color,
                                   }"
                                   @click.stop="
                                     viewNotes(
@@ -335,7 +337,9 @@
                                   curTime <= item.timeList[pItem.sentIndex].ed &&
                                   attrib
                                     ? attrib.topic_color
-                                    : item.wordsList[pIndex + 1].config.color,
+                                    : item.wordsList[pIndex + 1].notesColor
+                                      ? item.wordsList[pIndex + 1].notesColor
+                                      : item.wordsList[pIndex + 1].config.color,
                               }"
                               @click.stop="
                                 viewNotes(
@@ -477,7 +481,9 @@
                                   curTime <= item.timeList[pItem.sentIndex].ed &&
                                   attrib
                                     ? attrib.topic_color
-                                    : item.wordsList[pIndex + 2].config.color,
+                                    : item.wordsList[pIndex + 2].notesColor
+                                      ? item.wordsList[pIndex + 2].notesColor
+                                      : item.wordsList[pIndex + 2].config.color,
                               }"
                               @click.stop="
                                 viewNotes(
@@ -619,7 +625,9 @@
                                     curTime < item.timeList[pItem.sentIndex].ed &&
                                     attrib
                                       ? attrib.topic_color
-                                      : pItem.config.color,
+                                      : pItem.notesColor
+                                        ? pItem.notesColor
+                                        : pItem.config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -1548,6 +1556,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -154,7 +154,9 @@
                                     ? attrib
                                       ? attrib.topic_color
                                       : pItem.config.color
-                                    : pItem.config.color,
+                                    : pItem.notesColor
+                                      ? pItem.notesColor
+                                      : pItem.config.color,
                               }"
                               ><span
                                 v-for="(wItem, wIndex) in pItem.leg"
@@ -175,7 +177,9 @@
                                     curTime < item.timeList[pItem.sentIndex].ed &&
                                     attrib
                                       ? attrib.topic_color
-                                      : pItem.config.color,
+                                      : pItem.notesColor
+                                        ? pItem.notesColor
+                                        : pItem.config.color,
                                 }"
                                 @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                                 >{{ convertText(pItem.chs[wIndex]) }}</span
@@ -236,7 +240,9 @@
                                 textDecoration: item.wordsList[pIndex + 1].config.textDecoration,
                                 borderBottom: item.wordsList[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
                                 fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
-                                color: item.wordsList[pIndex + 1].config.color,
+                                color: item.wordsList[pIndex + 1].notesColor
+                                  ? item.wordsList[pIndex + 1].notesColor
+                                  : item.wordsList[pIndex + 1].config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -330,7 +336,9 @@
                                 textDecoration: item.wordsList[pIndex + 2].config.textDecoration,
                                 borderBottom: item.wordsList[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
                                 fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
-                                color: item.wordsList[pIndex + 2].config.color,
+                                color: item.wordsList[pIndex + 2].notesColor
+                                  ? item.wordsList[pIndex + 2].notesColor
+                                  : item.wordsList[pIndex + 2].config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -425,7 +433,9 @@
                                   ? attrib
                                     ? attrib.topic_color
                                     : pItem.config.color
-                                  : pItem.config.color,
+                                  : pItem.notesColor
+                                    ? pItem.notesColor
+                                    : pItem.config.color,
                             }"
                             ><span
                               v-for="(wItem, wIndex) in pItem.leg"
@@ -446,7 +456,9 @@
                                   curTime < item.timeList[pItem.sentIndex].ed &&
                                   attrib
                                     ? attrib.topic_color
-                                    : pItem.config.color,
+                                    : pItem.notesColor
+                                      ? pItem.notesColor
+                                      : pItem.config.color,
                               }"
                               @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                               >{{ convertText(pItem.chs[wIndex]) }}</span
@@ -603,7 +615,7 @@
                                   textDecoration: pItem.config.textDecoration,
                                   borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                   fontWeight: pItem.config.fontWeight,
-                                  color: pItem.config.color,
+                                  color: pItem.notesColor ? pItem.notesColor : pItem.config.color,
                                   height:
                                     attrib && attrib.font_size
                                       ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
@@ -848,7 +860,7 @@
                                 textDecoration: pItem.config.textDecoration,
                                 borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
                                 fontWeight: pItem.config.fontWeight,
-                                color: pItem.config.color,
+                                color: pItem.notesColor ? pItem.notesColor : pItem.config.color,
                                 height:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                                 fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
@@ -1280,6 +1292,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };
@@ -1349,6 +1362,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -972,6 +972,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -1135,6 +1135,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/article/components/WordPhraseDetail.vue

@@ -291,6 +291,40 @@
           </div>
         </div>
       </div>
+      <div class="bottom" v-if="data && data.endata">
+        <div class="from">来自百度汉语</div>
+        <div class="wordDetail">
+          <p class="word">
+            {{ data.new_word }}
+            <span v-for="(fy, i) in data.endata.mean_list" :key="i"> [{{ fy.pinyin }}] </span>
+            <img v-if="data.endata.src_tts" @click="playAudio('audiosrc')" src="@/assets/play-red.png" alt="" />
+            <audio ref="audiosrc" :src="data.endata.src_tts"></audio>
+          </p>
+          <div class="yinpin">
+            <div>
+              <span>{{ data.endata.dst }} </span>
+              <img v-if="data.endata.dst_tts" @click="playAudio('audiodst')" src="@/assets/play-red.png" alt="" />
+              <audio ref="audiodst" :src="data.endata.dst_tts"></audio>
+            </div>
+          </div>
+          <div class="jieshu" v-for="(fy, i) in data.endata.mean_list" :key="i">
+            <p v-if="data.endata.mean_list.length > 1">{{ fy.pinyin }}</p>
+            <div v-for="(fys, j) in fy.exp_list" :key="j">
+              <div class="jieshu-item">
+                <label>{{ j + 1 }}.</label>
+                <span>{{ fys.mean }}</span>
+              </div>
+
+              <div class="jieshu-item" v-if="JSON.parse(fys.sentence).length > 0 && JSON.parse(fys.sentence)[0]">
+                <label style="opacity: 0">{{ j + 1 }}.</label>
+                <div>
+                  <p v-for="(fyss, l) in JSON.parse(fys.sentence)" :key="l">{{ fyss }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="cut-area" style="display: none"></div>
   </div>
@@ -300,7 +334,7 @@
 import Strockplayredline from './Strockplayredline.vue';
 import Audio from './AudioRed.vue';
 import { TextToAudioFile } from '@/api/app';
-import { getCoursewareWordExampleSentenceList } from '@/api/article';
+import { getCoursewareWordExampleSentenceList, toolDictionary } from '@/api/article';
 import { sanitizeHTML } from '@/utils/common';
 
 export default {
@@ -461,7 +495,9 @@ export default {
         }
       }
     },
-    playAudio() {},
+    playAudio(audio) {
+      this.$refs[audio].play();
+    },
     // 关闭单词详情
     closeWordShow() {
       this.closeWord(false);
@@ -827,6 +863,7 @@ export default {
     },
     initData() {
       this.viewIntp();
+      this.getDictionary();
     },
     handleChangeTab(flag) {
       this[flag] = !this[flag];
@@ -857,6 +894,22 @@ export default {
         });
       }
     },
+    // 百度汉语内容
+    getDictionary() {
+      toolDictionary({
+        word: this.data.new_word,
+        from: 'zh',
+        to: 'en',
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            this.data.endata = res;
+          }
+        })
+        .catch((err) => {
+          this.loading3 = false;
+        });
+    },
   },
 };
 </script>
@@ -1303,7 +1356,7 @@ export default {
 
   .bottom {
     padding-bottom: 23px;
-    margin-top: 16px;
+    margin-top: 16px !important;
 
     .from {
       display: flex;
@@ -1311,7 +1364,6 @@ export default {
       justify-content: flex-end;
 
       //   text-align: right;
-      margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
       color: #000;
@@ -1324,9 +1376,10 @@ export default {
     }
 
     .wordDetail {
-      width: 538px;
+      // width: 538px;
       padding-bottom: 23px;
-      margin-left: 40px;
+
+      // margin-left: 40px;
       border-bottom: 1px solid rgba(0, 0, 0, 10%);
 
       p {
@@ -1334,15 +1387,27 @@ export default {
       }
 
       .word {
+        display: flex;
+        align-items: center;
         font-size: 24px;
         font-weight: bold;
         line-height: 28px;
         color: #000;
+
+        img {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+
+        span {
+          margin: 0 5px;
+        }
       }
 
       .yinpin {
         display: flex;
-        margin-top: 16px;
+        margin: 16px 0;
         font-size: 16px;
         line-height: 150%;
         color: #000;
@@ -1370,18 +1435,30 @@ export default {
       }
 
       .jieshu {
-        display: flex;
-        margin-top: 16px;
+        margin-bottom: 10px;
         font-size: 16px;
         line-height: 150%;
         color: #000;
 
-        > :nth-child(1) {
-          width: 30px;
-        }
+        .jieshu-item {
+          display: flex;
+          font-size: 13px;
+          line-height: 25px;
 
-        :nth-child(2) {
-          width: 524px;
+          label {
+            margin-right: 6px;
+            color: #848691;
+            word-break: keep-all;
+          }
+
+          > span {
+            font-weight: bold;
+            color: #272933;
+          }
+
+          > div {
+            color: #272933;
+          }
         }
       }
     }

src/views/book/courseware/preview/components/article/index.vue

@@ -593,6 +593,7 @@ export default {
 
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -13,6 +13,7 @@
         >
           <div
             class="number-box"
+            :class="['number-box-' + data.property.frame_size]"
             :style="{
               marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
             }"
@@ -53,6 +54,7 @@
                     <el-image
                       v-if="items.file_list[0]"
                       class="items-image"
+                      :class="['frame-size-' + data.property.frame_size]"
                       :src="items.file_list[0].file_url"
                       fit="contain"
                       :style="{
@@ -64,6 +66,7 @@
                   <template v-else-if="items && items.type === 'lian'">
                     <span
                       class="items-lian"
+                      :class="['items-lian-' + data.property.frame_size]"
                       :style="{
                         color:
                           data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -105,6 +108,7 @@
                       item.content_list[indexs + 1].type !== 'lian'
                         ? 'NoborderRight'
                         : '',
+                      'frame-size-' + data.property.frame_size,
                     ]"
                     :play-color="
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -138,6 +142,7 @@
                       item.content_list[indexs + 1].type !== 'lian'
                         ? 'NoborderRight'
                         : '',
+                      'frame-size-' + data.property.frame_size,
                     ]"
                     :style="{
                       borderColor:
@@ -226,7 +231,7 @@
                       items.hz_info && items.hz_info[0].hzDetail.hz_json ? items.hz_info[0].hzDetail.hz_json : []
                     "
                     class="hanzi-storck"
-                    :class="['strock-chinese', 'border-right-none']"
+                    :class="['strock-chinese', 'border-right-none', 'frame-size-' + data.property.frame_size]"
                     :bg-type="data.property.frame_type"
                     :play-color="
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -262,7 +267,7 @@
                   :book-text="item.content"
                   :target-div="'write-praT-1' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
-                  :class="['strock-chinese']"
+                  :class="['strock-chinese', 'frame-size-' + data.property.frame_size]"
                   :bg-type="data.property.frame_type"
                   :play-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -281,7 +286,7 @@
                   :target-div="'write-praT-2' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
-                  :class="['strock-chinese']"
+                  :class="['strock-chinese', 'frame-size-' + data.property.frame_size]"
                   :bg-type="data.property.frame_type"
                   :play-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -297,7 +302,7 @@
               <!-- 书写 -->
               <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                 <div
-                  :class="['strockplay-newWord']"
+                  :class="['strockplay-newWord', 'frame-size-' + data.property.frame_size]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color
@@ -414,7 +419,12 @@
         :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
         @handleWav="handleWav"
       />
-      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
+      <PreviewOperation
+        v-if="data.property.model === 'miao'"
+        @showAnswerAnalysis="showAnswerAnalysis"
+        @retry="retry"
+        :isShowAnswer="isShowAnswers"
+      />
       <AnswerCorrect
         :answer-correct="data?.answer_correct"
         :visible.sync="visibleAnswerCorrect"
@@ -473,6 +483,7 @@ export default {
       miao_arr: [],
       if_miao_show: false, // 描红模块
       randomId: Math.random().toString(36).substring(2, 12),
+      isShowAnswers: false,
     };
   },
   computed: {},
@@ -495,7 +506,16 @@ export default {
       this.answer.record_list = val;
     },
   },
-  created() {},
+  created() {
+    if (
+      (this.data.answer_list && this.data.answer_list.length > 0) ||
+      (this.data.analysis_list && this.data.analysis_list.length > 0)
+    ) {
+      this.isShowAnswers = true;
+    } else {
+      this.isShowAnswers = false;
+    }
+  },
   methods: {
     handleWav(data) {
       this.data.record_list = data;
@@ -722,6 +742,14 @@ export default {
     height: 80px;
     margin-right: 16px;
 
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
+
     .number {
       display: block;
       width: 24px;
@@ -761,6 +789,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .items-lian {
     display: block;
     height: 80px;
@@ -768,6 +806,16 @@ export default {
     font-size: 34px;
     line-height: 80px;
     color: #346cda;
+
+    &-middle {
+      height: 70px;
+      line-height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+      line-height: 60px;
+    }
   }
 
   .items-flex {

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -26,6 +26,7 @@
               :id="item.id"
               :key="'op' + i"
               class="option_one"
+              :class="['option_one-' + data.property.frame_size]"
               :style="{
                 background:
                   data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -69,6 +70,7 @@
               <!-- @click="writeWord(conItem, items.pinyin)" -->
               <div
                 class="strockplay-newWord"
+                :class="['frame-size-' + data.property.frame_size]"
                 :style="{
                   borderColor:
                     data.unified_attrib && data.unified_attrib.topic_color
@@ -102,7 +104,7 @@
           <div class="image">
             <img src="@/assets/drag-arrows.png" alt="" />
           </div>
-          <div class="answer">
+          <div class="answer" :class="['answer-' + data.property.frame_size]">
             <!-- :disabled="TaskModel == 'ANSWER' ? true : items.is_example ? true : false" -->
 
             <draggable
@@ -111,6 +113,7 @@
               group="site"
               :disabled="items.is_example"
               class="content-box content-boxs"
+              :class="['content-boxs-' + data.property.frame_size]"
               :move="onMove"
             >
               <transition-group>
@@ -118,7 +121,10 @@
                   v-for="(answer, i) in answer.answer_list[row].answer_list"
                   :key="'op' + i"
                   class="option_one"
-                  :class="[items.is_example ? 'option_one_example' : classNameJudge(items, row)]"
+                  :class="[
+                    items.is_example ? 'option_one_example' : classNameJudge(items, row),
+                    'option_one-' + data.property.frame_size,
+                  ]"
                   :index="'form' + i"
                   :style="{
                     borderColor:
@@ -141,7 +147,10 @@
                   v-if="answer.answer_list[row].answer_list.length == 0"
                   :key="row"
                   class="option_one"
-                  :class="[isJudgingRightWrong && items.answer ? 'wrong' : '']"
+                  :class="[
+                    isJudgingRightWrong && items.answer ? 'wrong' : '',
+                    'option_one-' + data.property.frame_size,
+                  ]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -191,6 +200,7 @@
                 <template v-if="items.hz_info.length > 0">
                   <div
                     class="strockplay-newWord"
+                    :class="['frame-size-' + data.property.frame_size]"
                     :style="{
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color
@@ -229,7 +239,7 @@
               <div class="answer">
                 <div
                   class="option_one"
-                  :class="[items.is_example ? 'option_one_example' : '']"
+                  :class="[items.is_example ? 'option_one_example' : '', 'option_one-' + data.property.frame_size]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color
@@ -408,6 +418,14 @@ export default {
   .content-boxs {
     height: 80px;
     overflow: hidden;
+
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
   }
 
   .option {
@@ -429,6 +447,16 @@ export default {
       background: #9dcaff;
       border-radius: 4px;
 
+      &-middle {
+        width: 62px;
+        height: 62px;
+      }
+
+      &-small {
+        width: 52px;
+        height: 52px;
+      }
+
       img {
         max-width: 100%;
         max-height: 100%;
@@ -455,6 +483,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .one {
     display: flex;
     align-items: center;
@@ -505,6 +543,16 @@ export default {
       width: 80px;
       height: 80px;
 
+      &-middle {
+        width: 70px;
+        height: 70px;
+      }
+
+      &-small {
+        width: 60px;
+        height: 60px;
+      }
+
       .option_one {
         display: flex;
         align-items: center;
@@ -515,6 +563,16 @@ export default {
         border: 2px solid #346cda;
         border-radius: 4px;
 
+        &-middle {
+          width: 70px;
+          height: 70px;
+        }
+
+        &-small {
+          width: 60px;
+          height: 60px;
+        }
+
         &.right {
           background: #e9f7f2 !important;
           border-color: $right-color !important;

src/views/book/courseware/preview/components/dialogue_article/NormalModelChs.vue

@@ -203,7 +203,9 @@
                                         curTime < item.timeList[pItem.sentIndex].ed &&
                                         attrib
                                           ? attrib.topic_color
-                                          : pItem.config.color,
+                                          : pItem.notesColor
+                                            ? pItem.notesColor
+                                            : pItem.config.color,
                                       fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                       lineHeight:
                                         attrib && attrib.font_size
@@ -312,7 +314,9 @@
                                     curTime <= item.timeList[pItem.sentIndex].ed &&
                                     attrib
                                       ? attrib.topic_color
-                                      : item.wordsList[pIndex + 1].config.color,
+                                      : item.wordsList[pIndex + 1].notesColor
+                                        ? item.wordsList[pIndex + 1].notesColor
+                                        : item.wordsList[pIndex + 1].config.color,
                                   fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                   lineHeight:
                                     attrib && attrib.font_size
@@ -435,7 +439,9 @@
                                     curTime <= item.timeList[pItem.sentIndex].ed &&
                                     attrib
                                       ? attrib.topic_color
-                                      : item.wordsList[pIndex + 2].config.color,
+                                      : item.wordsList[pIndex + 2].notesColor
+                                        ? item.wordsList[pIndex + 2].notesColor
+                                        : item.wordsList[pIndex + 2].config.color,
                                   fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                   lineHeight:
                                     attrib && attrib.font_size
@@ -561,7 +567,9 @@
                                       curTime <= item.timeList[pItem.sentIndex].ed &&
                                       attrib
                                         ? attrib.topic_color
-                                        : pItem.config.color,
+                                        : pItem.notesColor
+                                          ? pItem.notesColor
+                                          : pItem.config.color,
                                     fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                                     lineHeight:
                                       attrib && attrib.font_size
@@ -989,6 +997,7 @@ export default {
 
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -168,7 +168,9 @@
                                       ? attrib
                                         ? attrib.topic_color
                                         : pItem.config.color
-                                      : pItem.config.color,
+                                      : pItem.notesColor
+                                        ? pItem.notesColor
+                                        : pItem.config.color,
                                 }"
                                 @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                                 >{{ convertText(pItem.chs) }}</span
@@ -241,7 +243,9 @@
                                       ? attrib
                                         ? attrib.topic_color
                                         : item.wordsList[pIndex + 1].config.color
-                                      : item.wordsList[pIndex + 1].config.color,
+                                      : item.wordsList[pIndex + 1].notesColor
+                                        ? item.wordsList[pIndex + 1].notesColor
+                                        : item.wordsList[pIndex + 1].config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -343,7 +347,9 @@
                                       ? attrib
                                         ? attrib.topic_color
                                         : item.wordsList[pIndex + 2].config.color
-                                      : item.wordsList[pIndex + 2].config.color,
+                                      : item.wordsList[pIndex + 2].notesColor
+                                        ? item.wordsList[pIndex + 2].notesColor
+                                        : item.wordsList[pIndex + 2].config.color,
                                 }"
                                 @click.stop="
                                   viewNotes(
@@ -423,7 +429,9 @@
                                     ? attrib
                                       ? attrib.topic_color
                                       : pItem.config.color
-                                    : pItem.config.color,
+                                    : pItem.notesColor
+                                      ? pItem.notesColor
+                                      : pItem.config.color,
                               }"
                               @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                               >{{ convertText(pItem.chs) }}</span
@@ -873,6 +881,7 @@ export default {
 
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

@@ -1084,6 +1084,7 @@ export default {
 
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

@@ -775,6 +775,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/dialogue_article/index.vue

@@ -591,6 +591,7 @@ export default {
               },
               matchWords: wItem.matchWords,
               matchNotes: wItem.matchNotes,
+              notesColor: wItem.notesColor,
               img: wItem.img,
               imgPosition: wItem.imgPosition,
             };

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -58,7 +58,7 @@
         />
       </div>
     </div>
-    <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
+    <PreviewOperation v-if="data.input_list.length > 0" @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
     <AnswerCorrect
       :answer-correct="data?.answer_correct"
       :visible.sync="visibleAnswerCorrect"

src/views/book/courseware/preview/components/image_text/components/MagazineSentence.vue

@@ -419,6 +419,7 @@ export default {
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.handlePlay();
     this.audio.addEventListener('timeupdate', () => {
       this.currentTime = this.audio.currentTime;
       const currentTime = this.audio.currentTime;
@@ -481,6 +482,7 @@ export default {
           this.isPlay = false;
           this.currentTime = 0;
           this.sentenceActive -= 1;
+          this.handlePlay();
         } else {
           this.$message.warning('已经是第一句');
         }
@@ -489,6 +491,7 @@ export default {
         this.isPlay = false;
         this.currentTime = 0;
         this.sentenceActive += 1;
+        this.handlePlay();
       } else {
         this.$message.warning('已经是最后一句');
       }
@@ -518,6 +521,9 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    this.audio.pause();
+  },
 };
 </script>
 

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -346,7 +346,7 @@ export default {
       let svg = document.createElementNS(svgNS, 'svg');
       svg.setAttribute(
         'style',
-        `position:absolute; width: 74px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;overflow: visible;`,
+        `position:absolute; width: 102px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;overflow: visible;`,
       );
       svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
       // 向SVG元素添加 path 元素
@@ -546,7 +546,7 @@ export default {
 
     .list-item {
       display: flex;
-      column-gap: 72px;
+      column-gap: 100px;
       align-items: stretch;
       padding: 1px;
 

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -11,6 +11,7 @@
       >
         <div
           class="number-box"
+          :class="['number-box-' + data.property.frame_size]"
           :style="{
             marginTop: isEnable(data.property.view_pinyin)
               ? '30px'
@@ -111,6 +112,7 @@
                   <el-image
                     v-if="items.file_list[0]"
                     class="items-image"
+                    :class="['frame-size-' + data.property.frame_size]"
                     :src="items.file_list[0].file_url"
                     fit="contain"
                     :style="{
@@ -122,6 +124,7 @@
                 <template v-else-if="items && items.type === 'lian'">
                   <span
                     class="items-lian"
+                    :class="['items-lian-' + data.property.frame_size]"
                     :style="{
                       color:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -156,6 +159,7 @@
                     item.content_list[indexs + 1].type !== 'lian'
                       ? 'NoborderRight'
                       : '',
+                    'frame-size-' + data.property.frame_size,
                   ]"
                   bg-type="tian"
                   :style="{
@@ -234,6 +238,7 @@
           >
             <div
               class="number-box"
+              :class="['number-box-' + data.property.frame_size]"
               :style="{
                 marginTop: isEnable(data.property.view_pinyin)
                   ? '30px'
@@ -335,6 +340,7 @@
                       <el-image
                         v-if="items.file_list[0]"
                         class="items-image"
+                        :class="['frame-size-' + data.property.frame_size]"
                         :src="items.file_list[0].file_url"
                         fit="contain"
                         :style="{
@@ -348,6 +354,7 @@
                     <template v-else-if="items && items.type === 'lian'">
                       <span
                         class="items-lian"
+                        :class="['items-lian-' + data.property.frame_size]"
                         :style="{
                           color:
                             data.unified_attrib && data.unified_attrib.topic_color
@@ -386,6 +393,7 @@
                         item.content_list[indexs + 1].type !== 'lian'
                           ? 'NoborderRight'
                           : '',
+                        'frame-size-' + data.property.frame_size,
                       ]"
                       :style="{
                         borderColor:
@@ -582,6 +590,14 @@ export default {
     height: 80px;
     margin-right: 16px;
 
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
+
     .number {
       display: block;
       width: 24px;
@@ -620,6 +636,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .items-lian {
     display: block;
     height: 80px;
@@ -627,6 +653,16 @@ export default {
     font-size: 34px;
     line-height: 80px;
     color: #346cda;
+
+    &-middle {
+      height: 70px;
+      line-height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+      line-height: 60px;
+    }
   }
 
   .inputdv {

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -23,7 +23,8 @@
         :style="{ color: playColor ? playColor : '' }"
         @click="playHanzi"
       />
-      <div :id="targetDiv" class="character-target-div" :style="{ padding: '5px' }"></div>
+      <!-- :style="{ padding: '5px' }" -->
+      <div :id="targetDiv" class="character-target-div"></div>
     </template>
     <template v-else>
       <span class="book-text">{{ Book_text }}</span>

src/views/book/courseware/preview/components/new_word/components/WordPhraseDetail.vue

@@ -216,6 +216,40 @@
           </div>
         </div>
       </div>
+      <div class="bottom" v-if="data && data.endata">
+        <div class="from">来自百度汉语</div>
+        <div class="wordDetail">
+          <p class="word">
+            {{ data.new_word }}
+            <span v-for="(fy, i) in data.endata.mean_list" :key="i"> [{{ fy.pinyin }}] </span>
+            <img v-if="data.endata.src_tts" @click="playAudio('audiosrc')" src="@/assets/play-red.png" alt="" />
+            <audio ref="audiosrc" :src="data.endata.src_tts"></audio>
+          </p>
+          <div class="yinpin">
+            <div>
+              <span>{{ data.endata.dst }} </span>
+              <img v-if="data.endata.dst_tts" @click="playAudio('audiodst')" src="@/assets/play-red.png" alt="" />
+              <audio ref="audiodst" :src="data.endata.dst_tts"></audio>
+            </div>
+          </div>
+          <div class="jieshu" v-for="(fy, i) in data.endata.mean_list" :key="i">
+            <p v-if="data.endata.mean_list.length > 1">{{ fy.pinyin }}</p>
+            <div v-for="(fys, j) in fy.exp_list" :key="j">
+              <div class="jieshu-item">
+                <label>{{ j + 1 }}.</label>
+                <span>{{ fys.mean }}</span>
+              </div>
+
+              <div class="jieshu-item" v-if="JSON.parse(fys.sentence).length > 0 && JSON.parse(fys.sentence)[0]">
+                <label style="opacity: 0">{{ j + 1 }}.</label>
+                <div>
+                  <p v-for="(fyss, l) in JSON.parse(fys.sentence)" :key="l">{{ fyss }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="cut-area" style="display: none"></div>
   </div>
@@ -224,7 +258,7 @@
 <script>
 import Strockplayredline from './Strockplayredline.vue';
 import AudioRed from '../../voice_matrix/components/AudioRed.vue';
-import { getCoursewareWordExampleSentenceList } from '@/api/article';
+import { getCoursewareWordExampleSentenceList, toolDictionary } from '@/api/article';
 import { sanitizeHTML } from '@/utils/common';
 
 export default {
@@ -351,7 +385,9 @@ export default {
         }
       }
     },
-    playAudio() {},
+    playAudio(audio) {
+      this.$refs[audio].play();
+    },
     // 关闭单词详情
     closeWordShow() {
       this.closeWord(false);
@@ -724,6 +760,7 @@ export default {
       }
       this.data.new_word_str = new_word_str;
       this.viewIntp();
+      this.getDictionary();
     },
     handleChangeTab(flag) {
       this[flag] = !this[flag];
@@ -765,6 +802,22 @@ export default {
         });
       }
     },
+    // 百度汉语内容
+    getDictionary() {
+      toolDictionary({
+        word: this.data.new_word,
+        from: 'zh',
+        to: 'en',
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            this.data.endata = res;
+          }
+        })
+        .catch((err) => {
+          this.loading3 = false;
+        });
+    },
   },
 };
 </script>
@@ -1212,7 +1265,7 @@ export default {
 
   .bottom {
     padding-bottom: 23px;
-    margin-top: 16px;
+    margin-top: 16px !important;
 
     .from {
       display: flex;
@@ -1220,7 +1273,6 @@ export default {
       justify-content: flex-end;
 
       //   text-align: right;
-      margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
       color: #000;
@@ -1233,9 +1285,10 @@ export default {
     }
 
     .wordDetail {
-      width: 538px;
+      // width: 538px;
       padding-bottom: 23px;
-      margin-left: 40px;
+
+      // margin-left: 40px;
       border-bottom: 1px solid rgba(0, 0, 0, 10%);
 
       p {
@@ -1243,15 +1296,27 @@ export default {
       }
 
       .word {
+        display: flex;
+        align-items: center;
         font-size: 24px;
         font-weight: bold;
         line-height: 28px;
         color: #000;
+
+        img {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+
+        span {
+          margin: 0 5px;
+        }
       }
 
       .yinpin {
         display: flex;
-        margin-top: 16px;
+        margin: 16px 0;
         font-size: 16px;
         line-height: 150%;
         color: #000;
@@ -1279,18 +1344,30 @@ export default {
       }
 
       .jieshu {
-        display: flex;
-        margin-top: 16px;
+        margin-bottom: 10px;
         font-size: 16px;
         line-height: 150%;
         color: #000;
 
-        > :nth-child(1) {
-          width: 30px;
-        }
+        .jieshu-item {
+          display: flex;
+          font-size: 13px;
+          line-height: 25px;
 
-        :nth-child(2) {
-          width: 524px;
+          label {
+            margin-right: 6px;
+            color: #848691;
+            word-break: keep-all;
+          }
+
+          > span {
+            font-weight: bold;
+            color: #272933;
+          }
+
+          > div {
+            color: #272933;
+          }
         }
       }
     }

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -150,7 +150,15 @@
           />
         </template>
       </div>
-      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
+      <PreviewOperation
+        v-if="
+          data.property.fun_type !== 'show' ||
+          (data.property.fun_type === 'show' && isEnable(data.property.is_enable_voice_answer))
+        "
+        @showAnswerAnalysis="showAnswerAnalysis"
+        @retry="retry"
+        :isShowAnswer="isShowAnswers"
+      />
       <AnswerCorrect
         :answer-correct="data?.answer_correct"
         :visible.sync="visibleAnswerCorrect"
@@ -261,6 +269,7 @@ export default {
       active_letter: '', // 选中字母的值
       active_letter_index: 0, // 选择字母索引
       select_item_index: 0, // 小题索引
+      isShowAnswers: false,
     };
   },
   watch: {
@@ -286,6 +295,15 @@ export default {
   },
   created() {
     // console.log(this.data);
+    if (
+      data.property.fun_type !== 'show' ||
+      (data.property.fun_type === 'show' && this.data.answer_list && this.data.answer_list.length > 0) ||
+      (this.data.analysis_list && this.data.analysis_list.length > 0)
+    ) {
+      this.isShowAnswers = true;
+    } else {
+      this.isShowAnswers = false;
+    }
   },
   methods: {
     chooseTone(item, value) {

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -27,7 +27,12 @@
           @handleWav="handleWav"
         />
       </div>
-      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" :isShowAnswer="isShowAnswers" />
+      <PreviewOperation
+        v-if="isEnable(data.is_enable_input)"
+        :is-show-answer="isShowAnswers"
+        @showAnswerAnalysis="showAnswerAnalysis"
+        @retry="retry"
+      />
       <AnswerCorrect
         :answer-correct="data?.answer_correct"
         :visible.sync="visibleAnswerCorrect"

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -54,20 +54,22 @@
       :analysis-list="data.analysis_list"
       @closeAnswerAnalysis="closeAnswerAnalysis"
     >
-      <ul slot="right-answer" class="option-list">
-        <draggable v-model="right_answer_list" animation="300" :disabled="true">
-          <transition-group
-            class="group"
-            :style="{
-              flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
-            }"
-          >
-            <li v-for="(item, i) in right_answer_list" :key="i" :class="['drag-item']">
-              <span class="rich-text" v-html="convertText(sanitizeHTML(item.content))"></span>
-            </li>
-          </transition-group>
-        </draggable>
-      </ul>
+      <div slot="right-answer" class="right-answer">
+        <ul v-for="(li, i) in rightAnswerList" :key="i" class="option-list">
+          <draggable :value="li" :disabled="true">
+            <transition-group
+              class="group"
+              :style="{
+                flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
+              }"
+            >
+              <li v-for="(item, j) in li" :key="j" :class="['drag-item']">
+                <span class="rich-text" v-html="convertText(sanitizeHTML(item.content))"></span>
+              </li>
+            </transition-group>
+          </draggable>
+        </ul>
+      </div>
     </AnswerAnalysis>
   </div>
 </template>
@@ -88,13 +90,27 @@ export default {
       data: getSortData(),
       arrangeTypeList,
       move_list: [], // 移动后的数组
-      right_answer_list: [], // 正确答案列表
       drag: false,
       clickIndexList: [], // 点击选中的索引
       is_all_right: false, // 是否全对
       orderTypeList,
     };
   },
+  computed: {
+    rightAnswerList() {
+      const optionList = this.data.option_list;
+      if (!optionList.length) return [];
+      const rightNumber = optionList[0].custom_serial_number.split('/').length;
+      return Array.from({ length: rightNumber }, (_, i) => {
+        return optionList
+          .map((item) => ({
+            ...item,
+            custom_serial_number: item.custom_serial_number.split('/')[i],
+          }))
+          .sort((a, b) => Number(a.custom_serial_number) - Number(b.custom_serial_number));
+      });
+    },
+  },
   watch: {
     move_list: {
       handler(val) {
@@ -110,24 +126,6 @@ export default {
         this.move_list = this.answer.answer_list.map((mark) =>
           this.data.option_list.find((item) => item.mark === mark),
         );
-        const rightAnswerNum = this.move_list[0].custom_serial_number.split('/').length; // 正确答案组数
-        let correctSerial = 0; // 目前是第几组是正确答案
-        for (let i = 0; i < rightAnswerNum; i++) {
-          let isRight = this.move_list.every(
-            ({ custom_serial_number }, index) => index + 1 === Number(custom_serial_number.split('/')[i]),
-          );
-          if (isRight) {
-            this.is_all_right = isRight;
-            correctSerial = i;
-            break;
-          }
-        }
-
-        this.right_answer_list = this.data.option_list.toSorted(
-          (a, b) =>
-            Number(a.custom_serial_number.split('/')[correctSerial]) -
-            Number(b.custom_serial_number.split('/')[correctSerial]),
-        );
       },
       immediate: true,
     },
@@ -252,5 +250,17 @@ export default {
     line-height: 24px;
     color: #000;
   }
+
+  .right-answer {
+    .option-list {
+      margin-bottom: 16px;
+
+      .group {
+        .drag-item {
+          cursor: default;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/book/courseware/preview/components/upload_control/UploadControlPreview.vue

@@ -25,7 +25,7 @@
             :preview-src-list="[data.answer.answer_list[0].file_url]"
           />
         </template>
-        <template v-else-if="data.answer.answer_list[0].file_name.indexOf('pdf') !== -1">
+        <template v-else>
           <iframe
             id="ifm"
             :src="data.answer.answer_list[0].newpath"
@@ -72,24 +72,34 @@ export default {
   data() {
     return {
       data: getUploadControlData(),
-      acceptFileType: '.png,.jpg,.pdf',
+      acceptFileType: '.png,.jpg,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.mp3,.wma,.mp4,.mov,.zip,.rar',
       file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
       showIframe: false,
     };
   },
   methods: {
     changeFillId(fileList) {
-      this.data.answer.answer_list = [fileList[0].response.file_info_list[0]];
-      let path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(fileList[0].response.file_info_list[0].file_url)}`;
-      this.data.answer.answer_list[0].newpath = path;
-      this.$forceUpdate();
+      if (fileList.length > 0) {
+        this.data.answer.answer_list = [fileList[0].response.file_info_list[0]];
+        let path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(fileList[0].response.file_info_list[0].file_url)}`;
+        this.data.answer.answer_list[0].newpath = path;
+        this.$forceUpdate();
+      }
     },
     remove() {
       if (!this.isJudgingRightWrong) {
         if (this.data.answer.answer_list.length > 0) {
-          this.data.answer.answer_list = [];
-          this.$message.success('删除成功');
-          this.$forceUpdate();
+          this.$confirm('确定要删除此文件吗?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+            .then(() => {
+              this.data.answer.answer_list = [];
+              this.$message.success('删除成功');
+              this.$forceUpdate();
+            })
+            .catch(() => {});
         }
       }
     },

src/views/book/courseware/preview/components/upload_control/components/UploadView.vue

@@ -51,11 +51,12 @@ export default {
       let UserCode = '';
       let UserType = '';
       if (userInfor) {
-        let user = getToken();
-        UserCode = user.user_code;
-        UserType = user.user_type;
-        SessionID = user.session_id;
+        let token = getToken();
+        UserCode = token?.gcls_sys_session_info?.user_id ?? '';
+        UserType = token?.gcls_sys_session_info?.user_type ?? '';
+        SessionID = token?.gcls_sys_session_info?.session_id ?? '';
       }
+
       return `${process.env.VUE_APP_EEP}/FileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid`;
     },
   },
@@ -107,13 +108,8 @@ export default {
           this.$message.warning('上传图片大小不能超过2M');
           return false; // 必须返回false
         }
-      } else if (file.type.indexOf('application/pdf') !== -1) {
-        if (file.size > 20 * 1024 * 1024) {
-          this.$message.warning('上传pdf大小不能超过20M');
-          return false; // 必须返回false
-        }
-      } else if (file.size > 500 * 1024 * 1024) {
-        this.$message.warning('上传文件大小不能超过500M');
+      } else if (file.size > 20 * 1024 * 1024) {
+        this.$message.warning('上传pdf大小不能超过20M');
         return false; // 必须返回false
       }
 
@@ -177,7 +173,7 @@ export default {
   justify-content: center;
   width: 141px;
   height: 39px;
-  margin: -20px auto 10px;
+  margin: 20px auto 10px;
   font-size: 16px;
   line-height: 150%;
   color: #000;

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -24,7 +24,7 @@
     </div>
     <!-- v-if="Object.keys(this.userAnswer).length === data.file_info_list.length" -->
     <el-button
-      v-if="data.property.feed_back === 'total'"
+      v-if="data.property.feed_back === 'total' && answerNumber === data.file_info_list.length"
       type="primary"
       :style="{
         background:
@@ -128,6 +128,7 @@ export default {
         rightRate: 0,
       },
       player: null,
+      answerNumber: 0, // 用户答题个数
     };
   },
   watch: {
@@ -253,6 +254,7 @@ export default {
         this.visible = false;
         this.player.play();
       }
+      this.answerNumber = Object.keys(this.userAnswer).length;
     },
     lookReport() {
       this.player.pause();

src/web_preview/index.vue

@@ -83,7 +83,10 @@
       <div
         ref="previewMain"
         class="main-container"
-        :style="{ paddingLeft: navigationShow ? '15px' : '315px', paddingRight: sidebarShow ? '15px' : '315px' }"
+        :style="{
+          paddingLeft: !isFullScreen && navigationShow ? '15px' : '315px',
+          paddingRight: !isFullScreen && sidebarShow ? '15px' : '315px',
+        }"
       >
         <!-- 左侧菜单栏 - 收缩 -->
         <div v-if="!navigationShow && !isFullScreen" class="catalogue-bar" @click="toggleNavigationShow">