修改移动端语音矩阵、表头分离表格

src/components/Adult/phonePreview/HeaderSparate/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="header-separate"
     v-if="judgeAnswer == 'standardAnswer' ? (userError ? true : false) : true"
+    class="header-separate"
   >
     <table
       :style="{
@@ -9,7 +9,7 @@
           curQue.tableData.colsConfig.width.length > 5
             ? width_total + 'px'
             : '',
-        fontSize: baseSizePhone + 2 + 'px'
+        fontSize: baseSizePhone + 2 + 'px',
       }"
     >
       <colgroup>
@@ -17,7 +17,7 @@
           v-for="(item, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
           :style="{
-            width: `${item.val}px`
+            width: `${item.val}px`,
           }"
         />
       </colgroup>
@@ -40,7 +40,7 @@
 
       <tbody
         :style="{
-          'text-align': `${curQue.textAlign}`
+          'text-align': `${curQue.textAlign}`,
         }"
       >
         <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
@@ -61,7 +61,7 @@
                       ? 'correct'
                       : 'error'
                     : ''
-                  : ''
+                  : '',
               ]"
               :style="{
                 'background-color':
@@ -69,14 +69,14 @@
                   `${col.background}` === '#ffffff'
                     ? 'transparent'
                     : `${col.background}`,
-                display: tdHeaderIsNone(i, j)
+                display: tdHeaderIsNone(i, j),
               }"
             >
               <div
                 class="cell-wrap"
                 :class="[
                   col.isCross ? 'cell-wrap-between' : '',
-                  'cell-wrap-' + curQue.textAlign
+                  'cell-wrap-' + curQue.textAlign,
                 ]"
               >
                 <template v-if="col.type === 'content'">
@@ -90,22 +90,19 @@
                           ? col.answer
                           : curQue.Bookanswer[i].content[j].answer
                       "
-                      @blur="
-                        judgeAnswer == 'standardAnswer'
-                          ? (col.answer = col.answer.trim())
-                          : (curQue.Bookanswer[i].content[
-                              j
-                            ].answer = curQue.Bookanswer[i].content[
-                              j
-                            ].answer.trim())
-                      "
                       type="textarea"
                       :class="[`text-${curQue.textAlign}`]"
                       :placeholder="`${isAnswerMode ? '' : ''}`"
                       :disabled="isAnswerMode"
                       :autosize="{ minRows: 1, maxRows: 6 }"
-                      @input="enterAnswer(i, j, 'input')"
                       :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+                      @blur="
+                        judgeAnswer == 'standardAnswer'
+                          ? (col.answer = col.answer.trim())
+                          : (curQue.Bookanswer[i].content[j].answer =
+                              curQue.Bookanswer[i].content[j].answer.trim())
+                      "
+                      @input="enterAnswer(i, j, 'input')"
                     />
                   </template>
                 </template>
@@ -119,21 +116,19 @@
                     <span
                       v-for="({ pinyin, chs }, k) in col.sentence_data
                         .wordsList"
-                      :key="
-                        `${
-                          curQue.pinyinPosition === 'top' ||
-                          curQue.pinyinPosition === 'left'
-                            ? 'pinyin'
-                            : 'chs'
-                        }-${k}`
-                      "
+                      :key="`${
+                        curQue.pinyinPosition === 'top' ||
+                        curQue.pinyinPosition === 'left'
+                          ? 'pinyin'
+                          : 'chs'
+                      }-${k}`"
                       :class="[
                         `${
                           curQue.pinyinPosition === 'top' ||
                           curQue.pinyinPosition === 'left'
                             ? 'pinyin'
                             : 'chs'
-                        }`
+                        }`,
                       ]"
                     >
                       {{
@@ -148,21 +143,19 @@
                     <span
                       v-for="({ pinyin, chs }, k) in col.sentence_data
                         .wordsList"
-                      :key="
-                        `${
-                          curQue.pinyinPosition === 'top' ||
-                          curQue.pinyinPosition === 'left'
-                            ? 'chs'
-                            : 'pinyin'
-                        }-${k}`
-                      "
+                      :key="`${
+                        curQue.pinyinPosition === 'top' ||
+                        curQue.pinyinPosition === 'left'
+                          ? 'chs'
+                          : 'pinyin'
+                      }-${k}`"
                       :class="[
                         `${
                           curQue.pinyinPosition === 'top' ||
                           curQue.pinyinPosition === 'left'
                             ? 'chs'
                             : 'pinyin'
-                        }`
+                        }`,
                       ]"
                     >
                       {{
@@ -179,7 +172,7 @@
                   v-else-if="col.type === 'prePinyin'"
                   :style="{
                     'flex-direction':
-                      col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse'
+                      col.prefixOrSuffix === 'prefix' ? 'row' : 'row-reverse',
                   }"
                   class="pre-pinyin"
                 >
@@ -187,7 +180,7 @@
                   <div
                     class="right-pinyin"
                     :style="{
-                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`
+                      'grid-template-columns': `repeat(${col.sentence_data.wordsList.length}, auto)`,
                     }"
                   >
                     <span
@@ -198,8 +191,7 @@
                       {{ pinyin }}
                     </span>
                     <span
-                      v-for="({ pinyin, chs }, k) in col.sentence_data
-                        .wordsList"
+                      v-for="({ chs }, k) in col.sentence_data.wordsList"
                       :key="`pre-chs-${k}`"
                       class="chs"
                     >
@@ -207,17 +199,17 @@
                     </span>
                   </div>
                 </div>
-                <div class="stem-content" v-else-if="col.type === 'mulText'">
+                <div v-else-if="col.type === 'mulText'" class="stem-content">
                   <div
-                    :class="['sent-main']"
                     v-for="(sdItem, sdIndex) in col.mulText.detail"
                     :key="'sent-option-items' + j + sdIndex"
+                    :class="['sent-main']"
                   >
                     <div class="sent-que-box">
                       <div
-                        class="sent-que"
                         v-for="(sddItem, sddIndex) in sdItem.detail"
                         :key="'sent-option-items' + j + sdIndex + sddIndex"
+                        class="sent-que"
                         :style="{
                           paddingLeft:
                             sddItem.config.wordPadding.indexOf('left') > -1
@@ -226,28 +218,28 @@
                           paddingRight:
                             sddItem.config.wordPadding.indexOf('right') > -1
                               ? '4px'
-                              : '0px'
+                              : '0px',
                         }"
                       >
                         <!-- 补全句子 -->
                         <OneSentenceTemp
                           :detail="sddItem"
-                          :pyPosition="curQue.pinyinPosition"
-                          :TaskModel="TaskModel"
-                          :Bookanswer="curQue.Bookanswer[i].content[j]"
-                          :judgeAnswer="judgeAnswer"
-                          :correctAnswer="col.mulText.correct.complateArr"
-                          :isInput="true"
+                          :py-position="curQue.pinyinPosition"
+                          :task-model="TaskModel"
+                          :bookanswer="curQue.Bookanswer[i].content[j]"
+                          :judge-answer="judgeAnswer"
+                          :correct-answer="col.mulText.correct.complateArr"
+                          :is-input="true"
                           :fn_check_list="[]"
-                          :pyNumber="col.pyNumber && col.pyNumber[sdIndex]"
-                          :hengLeg="sdItem.hengLeg"
-                          :maxFontsize="baseSizePhone"
+                          :py-number="col.pyNumber && col.pyNumber[sdIndex]"
+                          :heng-leg="sdItem.hengLeg"
+                          :max-fontsize="baseSizePhone"
                         />
                         <template
                           v-if="
                             sddItem.img_list &&
-                              sddItem.img_list.length > 0 &&
-                              sddItem.img_list[0].id
+                            sddItem.img_list.length > 0 &&
+                            sddItem.img_list[0].id
                           "
                         >
                           <img
@@ -269,7 +261,7 @@
                       ? col
                       : curQue.Bookanswer[i].content[j]
                   "
-                  :isAnswerMode="isAnswerMode"
+                  :is-answer-mode="isAnswerMode"
                   @enterAnswer="enterAnswer"
                 />
               </div>
@@ -291,32 +283,32 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true
+      required: true,
     },
     themeColor: {
       type: String,
-      required: true
+      required: true,
     },
     judgeAnswer: {
-      type: String
+      type: String,
     },
     TaskModel: {
-      type: String
+      type: String,
     },
     baseSizePhone: {
-      type: Number
-    }
+      type: Number,
+    },
   },
   data() {
     return {
       isAnswerMode: false,
       userError: false,
       userAnswer: {
-        completeInput: []
+        completeInput: [],
       },
       userBookanswer: [],
       chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
-      width_total: 0 //总宽度
+      width_total: 0, // 总宽度
     };
   },
   computed: {
@@ -324,24 +316,24 @@ export default {
       const hp = this.curQue.headerEnglishPosition;
       if (hp === "top") {
         return {
-          "flex-direction": "column-reverse"
+          "flex-direction": "column-reverse",
         };
       }
       if (hp === "right") {
         return {
           "flex-direction": "row",
-          "column-gap": "8px"
+          "column-gap": "8px",
         };
       }
       if (hp === "bottom") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
       if (hp === "left") {
         return {
           "flex-direction": "row-reverse",
-          "column-gap": "8px"
+          "column-gap": "8px",
         };
       }
     },
@@ -349,28 +341,28 @@ export default {
       let pyPos = this.curQue.pinyinPosition;
       if (pyPos === "left") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "top") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
 
       if (pyPos === "right") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "bottom") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
-    }
+    },
   },
   created() {
     if (this.judgeAnswer) {
@@ -382,9 +374,9 @@ export default {
       this.width_total = 0;
       this.curQue.tableData.body.forEach((item, i) => {
         arr.push({
-          content: []
+          content: [],
         });
-        item.content.forEach(items => {
+        item.content.forEach((items) => {
           if (items.type === "mulText") {
             flag = true;
           }
@@ -397,19 +389,19 @@ export default {
                 items.CrossAnswer &&
                 items.CrossAnswer !== "normal")
                 ? "[JUDGE##F##JUDGE]"
-                : ""
+                : "",
           });
         });
       });
       if (!flag) {
         this.$set(this.curQue, "Bookanswer", arr);
       }
-      this.curQue.tableData.colsConfig.width.forEach(width => {
+      this.curQue.tableData.colsConfig.width.forEach((width) => {
         this.width_total += width.val;
       });
     } else {
-      this.curQue.Bookanswer.forEach(item => {
-        item.content.forEach(item => {
+      this.curQue.Bookanswer.forEach((item) => {
+        item.content.forEach((item) => {
           if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
             this.userError = true;
             return;
@@ -444,36 +436,32 @@ export default {
             this.curQue.Bookanswer[i].content[j].userAnswerJudge =
               "[JUDGE##T##JUDGE]";
           }
-        } else {
-          if (this.curQue.tableData.body[i].content[j].answer) {
-            this.curQue.Bookanswer[i].content[j].userAnswerJudge =
-              "[JUDGE##F##JUDGE]";
-          }
+        } else if (this.curQue.tableData.body[i].content[j].answer) {
+          this.curQue.Bookanswer[i].content[j].userAnswerJudge =
+            "[JUDGE##F##JUDGE]";
         }
-      } else {
-        if (
-          this.curQue.Bookanswer[i].content[j].CrossAnswer ==
-          this.curQue.tableData.body[i].content[j].CrossAnswer
-        ) {
-          if (this.curQue.tableData.body[i].content[j].answer) {
-            if (
-              this.curQue.Bookanswer[i].content[j].answer ==
-              this.curQue.tableData.body[i].content[j].answer
-            ) {
-              this.curQue.Bookanswer[i].content[j].userAnswerJudge =
-                "[JUDGE##T##JUDGE]";
-            } else {
-              this.curQue.Bookanswer[i].content[j].userAnswerJudge =
-                "[JUDGE##F##JUDGE]";
-            }
-          } else {
+      } else if (
+        this.curQue.Bookanswer[i].content[j].CrossAnswer ==
+        this.curQue.tableData.body[i].content[j].CrossAnswer
+      ) {
+        if (this.curQue.tableData.body[i].content[j].answer) {
+          if (
+            this.curQue.Bookanswer[i].content[j].answer ==
+            this.curQue.tableData.body[i].content[j].answer
+          ) {
             this.curQue.Bookanswer[i].content[j].userAnswerJudge =
               "[JUDGE##T##JUDGE]";
+          } else {
+            this.curQue.Bookanswer[i].content[j].userAnswerJudge =
+              "[JUDGE##F##JUDGE]";
           }
         } else {
           this.curQue.Bookanswer[i].content[j].userAnswerJudge =
-            "[JUDGE##F##JUDGE]";
+            "[JUDGE##T##JUDGE]";
         }
+      } else {
+        this.curQue.Bookanswer[i].content[j].userAnswerJudge =
+          "[JUDGE##F##JUDGE]";
       }
     },
     // 控制首尾表格显隐
@@ -569,7 +557,7 @@ export default {
             items.mulText.detail.forEach((sdItem, sdIndex) => {
               let isHasPY = 0;
               let maxFontsize = 0;
-              sdItem.detail.forEach(sddItem => {
+              sdItem.detail.forEach((sddItem) => {
                 if (sddItem.wordsList.length > 0) {
                   sddItem.wordsList.forEach((sItem, sIndex) => {
                     let reg = /_{2,}/g;
@@ -579,7 +567,7 @@ export default {
                       sItem.hengIndex = hengIndex;
                       hengIndex++;
                     }
-                    //补全句子
+                    // 补全句子
                     if (!this.curQue.Bookanswer) {
                       let reg = /_{2,}/g;
                       if (reg.test(sItem.chs)) {
@@ -600,7 +588,7 @@ export default {
                               bool || !complateArr[sItem.hengIndex]
                                 ? ""
                                 : "[JUDGE##F##JUDGE]",
-                            input_Isexample: bool ? true : false
+                            input_Isexample: Boolean(bool),
                           };
                           Bookanswer[index].content[indexs].completeInput.push(
                             JSON.parse(JSON.stringify(obj))
@@ -630,15 +618,12 @@ export default {
                     maxFontsize =
                       fontSize > maxFontsize ? fontSize : maxFontsize;
                   });
-                } else {
-                  if (sddItem.sentence) {
-                    let fontSize = JSON.parse(
-                      JSON.stringify(sddItem.config.fontSize)
-                    );
-                    fontSize = Number(fontSize.replace("px", ""));
-                    maxFontsize =
-                      fontSize > maxFontsize ? fontSize : maxFontsize;
-                  }
+                } else if (sddItem.sentence) {
+                  let fontSize = JSON.parse(
+                    JSON.stringify(sddItem.config.fontSize)
+                  );
+                  fontSize = Number(fontSize.replace("px", ""));
+                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                 }
               });
               sdItem.maxFontsize = maxFontsize;
@@ -704,15 +689,15 @@ export default {
         });
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(sItem) {
       if (this.chsFhList.indexOf(sItem.chs) > -1) {
         sItem.isShow = false;
       } else {
         sItem.isShow = true;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -773,6 +758,8 @@ export default {
             ::v-deep .el-textarea__inner {
               text-align: $type;
               background-color: transparent;
+              cursor: text !important;
+              caret-color: #606266 !important;
             }
           }
         }

src/components/Adult/phonePreview/VoiceMatrix.vue

@@ -6,7 +6,7 @@
           :class="[
             themeColor.length === 0 || themeColor === 'red'
               ? 'serial-number'
-              : `serial-number-${themeColor}`
+              : `serial-number-${themeColor}`,
           ]"
         >
           {{ curQue.voiceMatrix.audioSerialNumber }}
@@ -22,7 +22,7 @@
           :class="[
             'Repeat-16',
             'audio-simple-repeat',
-            isRepeat ? '' : 'disabled'
+            isRepeat ? '' : 'disabled',
           ]"
           @click="isRepeat = !isRepeat"
         />
@@ -35,9 +35,9 @@
         :get-cur-time="getCurTime"
         :stop-audio="stopAudio"
         :mp3-source="mp3Source"
+        :base-size-phone="baseSizePhone"
         @handleChangeStopAudio="handleChangeStopAudio"
         @playChange="playChange"
-        :baseSizePhone="baseSizePhone"
       />
     </div>
     <!-- 语音矩阵 -->
@@ -49,7 +49,7 @@
         v-if="curQue.voiceMatrix.matrix.length > 0"
         class="matrix"
         :style="{
-          'grid-template': `36px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(36px, 1fr) / 36px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(36px, 1fr)`
+          'grid-template': `36px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(36px, 1fr) / 36px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(36px, 1fr)`,
         }"
         @mouseleave="clearSelectCell"
       >
@@ -64,7 +64,7 @@
               (selectColumn === i ||
                 (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
@@ -72,15 +72,11 @@
               v-if="
                 row.type !== 'connection' && curQue.voiceMatrix.columnSelection
               "
-              v-show="
-                selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i)
-              "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -97,21 +93,17 @@
               (selectRow === i ||
                 (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
           >
             <span
               v-if="curQue.voiceMatrix.rowSelection"
-              v-show="
-                selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
-              "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -135,7 +127,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                 (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : ''
+                  : '',
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -157,7 +149,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -171,7 +163,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : ''
+                    : '',
                 ]"
               />
               <!-- 分词 -->
@@ -192,10 +184,10 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 :style="{
-                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
+                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
                 }"
                 @click="matrixCellClick(i, j)"
               >
@@ -203,13 +195,11 @@
                   v-for="({ pinyin, chs }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="
-                      `${
-                        column.sentence_data.pyPosition === 'top'
-                          ? 'pinyin'
-                          : 'chs'
-                      }-${w}`
-                    "
+                    :key="`${
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'pinyin'
+                        : 'chs'
+                    }-${w}`"
                     :class="
                       column.sentence_data.pyPosition === 'top'
                         ? 'pinyin'
@@ -225,13 +215,11 @@
                   v-for="({ pinyin, chs }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="
-                      `${
-                        column.sentence_data.pyPosition === 'top'
-                          ? 'chs'
-                          : 'pinyin'
-                      }-${w}`
-                    "
+                    :key="`${
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'chs'
+                        : 'pinyin'
+                    }-${w}`"
                     :class="
                       column.sentence_data.pyPosition === 'top'
                         ? 'chs'
@@ -262,7 +250,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -293,7 +281,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -302,7 +290,7 @@
                     :class="[
                       getBracketsOuterTypeClass(
                         column.text_brackets.brackets_outer_type
-                      )
+                      ),
                     ]"
                   >
                     {{ column.text_brackets.brackets_outer }}
@@ -312,7 +300,7 @@
                     :class="[
                       column.text_brackets.brackets_inner_type === 'pinyin'
                         ? 'pinyin'
-                        : 'english'
+                        : 'english',
                     ]"
                   >
                     {{ column.text_brackets.brackets_inner }}
@@ -330,7 +318,7 @@
               (selectRow === i ||
                 (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -346,7 +334,7 @@
               (selectColumn === i ||
                 (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : ''
+                : '',
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -365,12 +353,12 @@
         :select-data="selectData"
         :answer-record-list="curQue.Bookanswer.recordList"
         :task-model="TaskModel"
+        :base-size-phone="baseSizePhone"
         @getWavblob="getWavblob"
         @getSelectData="getSelectData"
         @handleParentPlay="pauseOtherAudio"
         @sentPause="sentPause"
         @handleWav="handleWav"
-        :baseSizePhone="baseSizePhone"
       />
       <AudioCompare
         :style="{ flex: 1 }"
@@ -418,15 +406,13 @@ export default {
     AudioLine,
     Soundrecord,
     AudioCompare,
-    VoiceFullscreen
+    VoiceFullscreen,
   },
   props: ["curQue", "themeColor", "TaskModel", "baseSizePhone"],
   data() {
     return {
       // 组件id
-      cid: Math.random()
-        .toString(36)
-        .substr(2, 10),
+      cid: Math.random().toString(36).substr(2, 10),
       isFull: false,
       curTime: 0,
       playing: false,
@@ -440,19 +426,19 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0
+        index: 0,
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1
+        column: -1,
       },
       isRepeat: false,
       // 跟读所需属性
       wavblob: null,
       isRecord: false,
       matrixSelectLrc: null,
-      refresh: true
+      refresh: true,
     };
   },
   computed: {
@@ -486,7 +472,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column
+        column,
       };
     },
 
@@ -506,7 +492,7 @@ export default {
     },
     fullscreenSrc() {
       return require("../../../assets/NPC/full-screen-red.png");
-    }
+    },
   },
   watch: {
     hasSelectedCell() {
@@ -522,11 +508,11 @@ export default {
           });
         }
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
-    Bus.$on("audioPause", id => {
+    Bus.$on("audioPause", (id) => {
       if (this.cid === id) return;
       this.$nextTick(() => {
         if (this.$refs.luyin?.microphoneStatus) this.$refs.luyin.microphone();
@@ -535,7 +521,7 @@ export default {
     });
     if (!this.curQue.Bookanswer) {
       let bookanswer = {
-        recordList: []
+        recordList: [],
       };
       this.$set(this.curQue, "Bookanswer", bookanswer);
     }
@@ -588,13 +574,8 @@ export default {
     },
 
     setRecordingFileName(row, column) {
-      let {
-        type,
-        text,
-        sentence_data,
-        pinyin_english_data,
-        text_brackets
-      } = this.curQue.voiceMatrix.matrix[row][column];
+      let { type, text, sentence_data, pinyin_english_data, text_brackets } =
+        this.curQue.voiceMatrix.matrix[row][column];
       if (type === "text") this.fileName = text;
       if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
       if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
@@ -649,7 +630,7 @@ export default {
       this.lrcArray = [];
       let { type, index } = this.selectedLine;
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach(item => {
+        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
           let data = this.getLrcData(item);
           if (data && "begin_time" in data) this.lrcArray.push(data);
         });
@@ -658,7 +639,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach(item => {
+        this.curQue.voiceMatrix.matrix.forEach((item) => {
           let data = this.getLrcData(item[index]);
           if (data && "begin_time" in data) this.lrcArray.push(data);
         });
@@ -681,7 +662,7 @@ export default {
         this.$refs.audioLine.PlayAudio();
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", val => {
+        this.unWatch = this.$watch("curTime", (val) => {
           if (val >= end) {
             if (!this.hasSelectedCell) return this.unWatch();
             this.handleParentPlay();
@@ -736,7 +717,7 @@ export default {
       }
       let arr = [];
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach(item => {
+        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
           let data = this.getLrcData(item);
           if (data) arr.push(data);
         });
@@ -745,7 +726,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach(item => {
+        this.curQue.voiceMatrix.matrix.forEach((item) => {
           let data = this.getLrcData(item[index]);
           if (data) arr.push(data);
         });
@@ -771,7 +752,7 @@ export default {
           return {
             begin_time: lrc_data.begin_time,
             end_time: this.mp3Duration,
-            text: lrc_data.text
+            text: lrc_data.text,
           };
         }
         return lrc_data;
@@ -790,7 +771,7 @@ export default {
         audio.length > 0 &&
         window.location.href.indexOf("GCLS-Learn") == -1
       ) {
-        audio.forEach(item => {
+        audio.forEach((item) => {
           item.pause();
         });
       }
@@ -840,7 +821,7 @@ export default {
         // 监听是否已到结束时间，为了选中效果 - 0.01
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", val => {
+        this.unWatch = this.$watch("curTime", (val) => {
           if (val >= end) {
             this.handleParentPlay();
             this.$refs.audioLine.onTimeupdateTime(end);
@@ -855,8 +836,8 @@ export default {
     },
     handleWav(list, tmIndex = 0) {
       this.$set(this.curQue.Bookanswer, "recordList", list);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/Adult/phonePreview/VoiceMatrixFullscreen.vue

@@ -24,7 +24,7 @@
               <span
                 :class="[
                   'font-jian-black',
-                  bgIndex === 1 ? 'font-jian-yellow' : ''
+                  bgIndex === 1 ? 'font-jian-yellow' : '',
                 ]"
                 @click="setFontSize('-')"
               />
@@ -35,21 +35,21 @@
                   'font-jian-black',
                   bgIndex === 1
                     ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled'
+                    : 'font-jian-white-disabled',
                 ]"
               />
             </template>
             <span
               :class="[
                 'font-img-black',
-                bgIndex === 1 ? 'font-img-yellow' : ''
+                bgIndex === 1 ? 'font-img-yellow' : '',
               ]"
             />
             <template v-if="hzSize <= 76">
               <span
                 :class="[
                   'font-jia-black',
-                  bgIndex === 1 ? 'font-jia-yellow' : ''
+                  bgIndex === 1 ? 'font-jia-yellow' : '',
                 ]"
                 @click="setFontSize('+')"
               />
@@ -60,7 +60,7 @@
                   'font-jia-black',
                   bgIndex === 1
                     ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled'
+                    : 'font-jia-white-disabled',
                 ]"
               />
             </template>
@@ -90,7 +90,7 @@
               :class="[
                 'repeat-icon',
                 !isRepeat ? 'disabled' : 'auto-icon',
-                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
+                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : '',
               ]"
             />
           </div>
@@ -102,7 +102,9 @@
               :class="[
                 'pinyin-icon',
                 !isShowPY || !isHasPY ? 'disabled' : '',
-                isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
+                isShowPY && isHasPY && bgIndex === 1
+                  ? 'pinyin-icon-yellow'
+                  : '',
               ]"
             />
           </div>
@@ -114,7 +116,7 @@
               :class="[
                 'en-icon',
                 !isShowEN || !isHasEN ? 'disabled' : '',
-                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
+                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : '',
               ]"
             />
           </div>
@@ -136,7 +138,7 @@
         class="matrix"
         :style="{
           'grid-template': `96px repeat(${curQue.voiceMatrix.matrix.length}, auto) minmax(1.5em, 1fr) / 112px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) minmax(124px, 1fr)`,
-          'font-size': `${hzSize}px`
+          'font-size': `${hzSize}px`,
         }"
         @mouseleave="clearSelectCell"
       >
@@ -152,15 +154,11 @@
               v-if="
                 row.type !== 'connection' && curQue.voiceMatrix.columnSelection
               "
-              v-show="
-                selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i)
-              "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -176,15 +174,11 @@
           >
             <span
               v-if="curQue.voiceMatrix.rowSelection"
-              v-show="
-                selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
-              "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -198,7 +192,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                 (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : ''
+                  : '',
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -220,7 +214,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -234,7 +228,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : ''
+                    : '',
                 ]"
               />
               <!-- 分词 -->
@@ -255,10 +249,10 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 :style="{
-                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
+                  'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
                 }"
                 @click="matrixCellClick(i, j)"
               >
@@ -266,18 +260,16 @@
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="
-                      `${
-                        column.sentence_data.pyPosition === 'top'
-                          ? 'pinyin'
-                          : 'chs'
-                      }-${w}`
-                    "
+                    :key="`${
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'pinyin'
+                        : 'chs'
+                    }-${w}`"
                     :style="{
                       visibility:
                         column.sentence_data.pyPosition === 'top' && isShowPY
                           ? 'visible'
-                          : 'hidden'
+                          : 'hidden',
                     }"
                     :class="
                       column.sentence_data.pyPosition === 'top'
@@ -294,18 +286,16 @@
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="
-                      `${
-                        column.sentence_data.pyPosition === 'top'
-                          ? 'chs'
-                          : 'pinyin'
-                      }-${w}`
-                    "
+                    :key="`${
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'chs'
+                        : 'pinyin'
+                    }-${w}`"
                     :style="{
                       visibility:
                         column.sentence_data.pyPosition !== 'top' && isShowPY
                           ? 'hidden'
-                          : 'visible'
+                          : 'visible',
                     }"
                     :class="
                       column.sentence_data.pyPosition === 'top'
@@ -337,7 +327,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -371,7 +361,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -453,7 +443,7 @@ export default {
     VoiceMatrixFullscreenAudio,
     Soundrecorddiff,
     AudioCompare,
-    Wordcard
+    Wordcard,
   },
   props: ["mp3", "curQue", "themeColor", "recordList"],
   data() {
@@ -483,12 +473,12 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0
+        index: 0,
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1
+        column: -1,
       },
       isRepeat: false,
       // 跟读所需属性
@@ -500,7 +490,7 @@ export default {
       cellTimer: null,
       // 拼音、英文显隐判断
       isShowPY: true,
-      isShowEN: true
+      isShowEN: true,
     };
   },
   computed: {
@@ -532,7 +522,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column
+        column,
       };
     },
     // 矩阵的行、列数从 0 开始
@@ -540,9 +530,9 @@ export default {
       const matrixArr = this.curQue.voiceMatrix.matrix;
       return {
         rows: matrixArr.length - 1,
-        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1
+        columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1,
       };
-    }
+    },
   },
   watch: {
     isRecording(newVal) {
@@ -566,7 +556,7 @@ export default {
           }
         }, 50);
       }
-    }
+    },
   },
   created() {
     document.addEventListener("keyup", this.handleKeyup);
@@ -575,8 +565,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange"
-    ].forEach(event => {
+      "msfullscreenchange",
+    ].forEach((event) => {
       document.addEventListener(event, this.handleFullscreen);
     });
   },
@@ -586,8 +576,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange"
-    ].forEach(event => {
+      "msfullscreenchange",
+    ].forEach((event) => {
       document.removeEventListener(event, this.handleFullscreen);
     });
   },
@@ -630,13 +620,8 @@ export default {
     },
 
     setRecordingFileName(row, column) {
-      let {
-        type,
-        text,
-        sentence_data,
-        pinyin_english_data,
-        text_brackets
-      } = this.curQue.voiceMatrix.matrix[row][column];
+      let { type, text, sentence_data, pinyin_english_data, text_brackets } =
+        this.curQue.voiceMatrix.matrix[row][column];
       if (type === "text") this.fileName = text;
       if (type === "SentenceSegwordChs") this.fileName = sentence_data.sentence;
       if (type === "PinyinEnglish") this.fileName = pinyin_english_data.pinyin;
@@ -685,7 +670,7 @@ export default {
       this.lrcArray = [];
       let { type, index } = this.selectedLine;
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach(item => {
+        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
           let data = this.getLrcData(item);
           if (data) this.lrcArray.push(data);
         });
@@ -694,7 +679,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach(item => {
+        this.curQue.voiceMatrix.matrix.forEach((item) => {
           let data = this.getLrcData(item[index]);
           if (data) this.lrcArray.push(data);
         });
@@ -717,7 +702,7 @@ export default {
         this.$refs.audioLine.PlayAudio();
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", val => {
+        this.unWatch = this.$watch("curTime", (val) => {
           if (val >= end) {
             if (!this.hasSelectedCell) return this.unWatch();
             this.handleParentPlay();
@@ -767,7 +752,7 @@ export default {
       }
       let arr = [];
       if (type.length > 0 && index >= 0 && type === "row") {
-        this.curQue.voiceMatrix.matrix[index].forEach(item => {
+        this.curQue.voiceMatrix.matrix[index].forEach((item) => {
           let data = this.getLrcData(item);
           if (data) arr.push(data);
         });
@@ -776,7 +761,7 @@ export default {
       }
 
       if (type.length > 0 && index >= 0 && type === "column") {
-        this.curQue.voiceMatrix.matrix.forEach(item => {
+        this.curQue.voiceMatrix.matrix.forEach((item) => {
           let data = this.getLrcData(item[index]);
           if (data) arr.push(data);
         });
@@ -802,7 +787,7 @@ export default {
           return {
             begin_time: lrc_data.begin_time,
             end_time: this.mp3Duration,
-            text: lrc_data.text
+            text: lrc_data.text,
           };
         }
         return lrc_data;
@@ -823,7 +808,7 @@ export default {
         // 监听是否已到结束时间，为了选中效果 - 0.01
         if (end_time === -1) return;
         let end = end_time / 1000 - 0.01;
-        this.unWatch = this.$watch("curTime", val => {
+        this.unWatch = this.$watch("curTime", (val) => {
           if (val >= end) {
             this.handleParentPlay();
             this.$refs.audioLine.onTimeupdateTime(end);
@@ -957,7 +942,7 @@ export default {
         audio.length > 0 &&
         window.location.href.indexOf("GCLS-Learn") == -1
       ) {
-        audio.forEach(item => {
+        audio.forEach((item) => {
           item.pause();
         });
       }
@@ -969,8 +954,8 @@ export default {
     changeFullScreen() {
       this.pauseAudio();
       this.$emit("changeIsFull");
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -1149,6 +1134,7 @@ $dark-color-play: #fff2c6;
         > span {
           width: 24px;
           height: 24px;
+          white-space: nowrap;
           border-radius: 100%;
 
           cursor: pointer;
@@ -1514,6 +1500,7 @@ $dark-color-play: #fff2c6;
           transition: 0.2s;
           cursor: pointer;
           user-select: none;
+          white-space: nowrap;
 
           &:hover {
             border-color: #8c8c8c;