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

src/components/Adult/inputModules/HeaderSeparate/index.vue

@@ -45,17 +45,17 @@
       <table class="preview-table">
         <thead>
           <tr>
-            <td></td>
+            <td />
             <td
               v-for="(item, k) in curQue.tableData.colsConfig.width"
               :key="`tfoot-${k}`"
             >
-              第{{k+1}}列
+              第{{ k + 1 }}列
             </td>
-            <td></td>
+            <td />
           </tr>
           <tr>
-            <th></th>
+            <th />
             <th v-for="(num, i) in curQue.tableData.headers" :key="`th-${i}`">
               <el-input v-model="num.text">
                 <template slot="prepend">文本</template>
@@ -71,37 +71,45 @@
                 </el-select>
               </el-input>
             </th>
-            <th></th>
+            <th />
           </tr>
         </thead>
         <tbody>
           <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
-            <td width="60">第{{i+1}}行</td>
+            <td width="60">第{{ i + 1 }}行</td>
             <td v-for="(col, j) in row.content" :key="`td-${j}`">
-              <p>{{col.message+' '+col.text+' '+col.sentence_data.sentence}}</p>
+              <p>
+                {{
+                  col.message +
+                  " " +
+                  col.text +
+                  " " +
+                  col.sentence_data.sentence
+                }}
+              </p>
               <template v-if="col.mulText">
                 <ul
-                class="option-detail-detail"
-                v-for="(dItem, dIndex) in col.mulText.detail"
-                :key="'ddItem' + dIndex"
+                  v-for="(dItem, dIndex) in col.mulText.detail"
+                  :key="'ddItem' + dIndex"
+                  class="option-detail-detail"
                 >
-                <li
+                  <li
                     v-for="(ddItem, ddIndex) in dItem.detail"
                     :key="'ddItem' + dIndex + ddIndex"
-                >
+                  >
                     <span
-                    :class="[
+                      :class="[
                         ddItem.config.wordPadding.indexOf('left') > -1
-                        ? 'dleft'
-                        : '',
+                          ? 'dleft'
+                          : '',
                         ddItem.config.wordPadding.indexOf('right') > -1
-                        ? 'dright'
-                        : '',
+                          ? 'dright'
+                          : '',
                         !ddItem.sentence ? 'placeholder' : '',
-                    ]"
-                    >{{ ddItem.sentence }}</span
+                      ]"
+                      >{{ ddItem.sentence }}</span
                     >
-                </li>
+                  </li>
                 </ul>
               </template>
               <el-button @click="edit(i, j)">编辑</el-button>
@@ -111,7 +119,7 @@
             </td>
           </tr>
           <tr>
-            <td></td>
+            <td />
             <td
               v-for="(width, i) in curQue.tableData.colsConfig.width"
               :key="`width-${i}`"
@@ -121,7 +129,7 @@
               </el-input>
               <el-button size="mini" @click="deleteCol(i)">删除列</el-button>
             </td>
-            <td></td>
+            <td />
           </tr>
         </tbody>
       </table>
@@ -195,13 +203,13 @@ export default {
                       seg_words: "",
                       wordsList: [],
                     },
-                    mulText:{
-                        correct: {
-                            completeInput: ""
-                        },
-                        detail: [],
-                        input_Isexample: false,
-                    }
+                    mulText: {
+                      correct: {
+                        completeInput: "",
+                      },
+                      detail: [],
+                      input_Isexample: false,
+                    },
                   },
                   {
                     type: "content",
@@ -224,13 +232,13 @@ export default {
                       seg_words: "",
                       wordsList: [],
                     },
-                    mulText:{
-                        correct: {
-                            completeInput: ""
-                        },
-                        detail: [],
-                        input_Isexample: false,
-                    }
+                    mulText: {
+                      correct: {
+                        completeInput: "",
+                      },
+                      detail: [],
+                      input_Isexample: false,
+                    },
                   },
                   {
                     type: "content",
@@ -253,13 +261,13 @@ export default {
                       seg_words: "",
                       wordsList: [],
                     },
-                    mulText:{
-                        correct: {
-                            completeInput: ""
-                        },
-                        detail: [],
-                        input_Isexample: false,
-                    }
+                    mulText: {
+                      correct: {
+                        completeInput: "",
+                      },
+                      detail: [],
+                      input_Isexample: false,
+                    },
                   },
                 ],
               },
@@ -322,13 +330,13 @@ export default {
             seg_words: "",
             wordsList: [],
           },
-          mulText:{
+          mulText: {
             correct: {
-                completeInput: ""
+              completeInput: "",
             },
             detail: [],
             input_Isexample: false,
-          }
+          },
         });
       });
       this.curQue.tableData.headers.push({
@@ -374,13 +382,13 @@ export default {
             seg_words: "",
             wordsList: [],
           },
-          mulText:{
+          mulText: {
             correct: {
-                completeInput: ""
+              completeInput: "",
             },
             detail: [],
             input_Isexample: false,
-          }
+          },
         });
       }
       this.curQue.tableData.body.push({
@@ -460,19 +468,19 @@ export default {
     overflow: hidden;
     margin-bottom: 10px;
     > li {
-        float: left;
-        > span {
+      float: left;
+      > span {
         float: left;
         &.dleft {
-            padding-left: 4px;
-        }
-        &.dright{
-            padding-right: 4px;
+          padding-left: 4px;
         }
+        &.dright {
+          padding-right: 4px;
         }
+      }
     }
     > i {
-        float: left;
+      float: left;
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="header-separate"
     v-if="judgeAnswer == 'standardAnswer' ? (userError ? true : false) : true"
+    class="header-separate"
   >
     <table>
       <colgroup>
@@ -9,7 +9,7 @@
           v-for="(item, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
           :style="{ width: `${item.val}px` }"
-        />
+        >
       </colgroup>
 
       <thead>
@@ -30,7 +30,7 @@
 
       <tbody
         :style="{
-          'text-align': `${curQue.textAlign}`
+          'text-align': `${curQue.textAlign}`,
         }"
       >
         <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
@@ -51,18 +51,18 @@
                       ? 'correct'
                       : 'error'
                     : ''
-                  : ''
+                  : '',
               ]"
               :style="{
                 'background-color': `${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'">
@@ -72,24 +72,21 @@
                   <template v-else>
                     <el-input
                       v-model="
-                        judgeAnswer == 'standardAnswer'
+                        judgeAnswer === 'standardAnswer'
                           ? 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 }"
+                      @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>
@@ -104,26 +101,24 @@
                     <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'
-                        }`
+                        }`,
                       ]"
                     >
                       {{
                         curQue.pinyinPosition === "top" ||
-                        curQue.pinyinPosition == "left"
+                          curQue.pinyinPosition == "left"
                           ? pinyin
                           : chs
                       }}
@@ -133,26 +128,24 @@
                     <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'
-                        }`
+                        }`,
                       ]"
                     >
                       {{
                         curQue.pinyinPosition === "top" ||
-                        curQue.pinyinPosition == "left"
+                          curQue.pinyinPosition == "left"
                           ? chs
                           : pinyin
                       }}
@@ -164,7 +157,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"
                 >
@@ -172,7 +165,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
@@ -183,8 +176,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"
                     >
@@ -192,17 +184,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
@@ -211,22 +203,22 @@
                           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="sdItem.maxFontsize"
+                          :py-number="col.pyNumber && col.pyNumber[sdIndex]"
+                          :heng-leg="sdItem.hengLeg"
+                          :max-fontsize="sdItem.maxFontsize"
                         />
                         <template
                           v-if="
@@ -239,7 +231,7 @@
                             :src="sddItem.img_list[0].id"
                             class="sddItem_img_list"
                             :style="[imgStyle(sddItem)]"
-                          />
+                          >
                         </template>
                       </div>
                     </div>
@@ -254,7 +246,7 @@
                       ? col
                       : curQue.Bookanswer[i].content[j]
                   "
-                  :isAnswerMode="isAnswerMode"
+                  :is-answer-mode="isAnswerMode"
                   @enterAnswer="enterAnswer"
                 />
               </div>
@@ -276,28 +268,30 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true
+      required: true,
     },
     themeColor: {
       type: String,
-      required: true
+      required: true,
     },
     judgeAnswer: {
-      type: String
+      default: "",
+      type: String,
     },
     TaskModel: {
-      type: String
-    }
+      default: "",
+      type: String,
+    },
   },
   data() {
     return {
       isAnswerMode: false,
       userError: false,
       userAnswer: {
-        completeInput: []
+        completeInput: [],
       },
       userBookanswer: [],
-      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"]
+      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
     };
   },
   computed: {
@@ -305,24 +299,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",
         };
       }
     },
@@ -330,28 +324,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) {
@@ -362,7 +356,7 @@ export default {
       let flag = false; // 是否含有多个句子类型
       this.curQue.tableData.body.forEach((item, i) => {
         arr.push({
-          content: []
+          content: [],
         });
         item.content.forEach(items => {
           if (items.type === "mulText") {
@@ -377,7 +371,7 @@ export default {
                 items.CrossAnswer &&
                 items.CrossAnswer !== "normal")
                 ? "[JUDGE##F##JUDGE]"
-                : ""
+                : "",
           });
         });
       });
@@ -387,7 +381,7 @@ export default {
     } else {
       this.curQue.Bookanswer.forEach(item => {
         item.content.forEach(item => {
-          if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
+          if (item.userAnswerJudge === "[JUDGE##F##JUDGE]") {
             this.userError = true;
             return;
           }
@@ -400,15 +394,15 @@ export default {
   },
   methods: {
     enterAnswer(i, j, type) {
-      if (type == "input") {
+      if (type === "input") {
         this.$forceUpdate();
         if (
-          this.curQue.Bookanswer[i].content[j].answer.trim() ==
+          this.curQue.Bookanswer[i].content[j].answer.trim() ===
           this.curQue.tableData.body[i].content[j].answer
         ) {
           if (this.curQue.tableData.body[i].content[j].isCross) {
             if (
-              this.curQue.Bookanswer[i].content[j].CrossAnswer ==
+              this.curQue.Bookanswer[i].content[j].CrossAnswer ===
               this.curQue.tableData.body[i].content[j].CrossAnswer
             ) {
               this.curQue.Bookanswer[i].content[j].userAnswerJudge =
@@ -421,36 +415,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]";
       }
     },
     // 控制首尾表格显隐
@@ -531,7 +521,7 @@ export default {
             let correct = JSON.parse(JSON.stringify(items.mulText.correct));
             let complateArr = correct.completeInput.split("\n");
             complateArr.forEach((itemI, indexI) => {
-              if (itemI == "??" || itemI == "？？") {
+              if (itemI === "??" || itemI === "？？") {
                 complateArr[indexI] = "";
               }
             });
@@ -554,9 +544,9 @@ export default {
                       sItem.index = sIndex;
                       sItem.isHeng = true;
                       sItem.hengIndex = hengIndex;
-                      hengIndex++;
+                      hengIndex += 1;
                     }
-                    //补全句子
+                    // 补全句子
                     if (!this.curQue.Bookanswer) {
                       let reg = /_{2,}/g;
                       if (reg.test(sItem.chs)) {
@@ -577,13 +567,13 @@ 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))
                           );
                         } else {
-                          if (sddItem.hengLeg == "-1") {
+                          if (sddItem.hengLeg === "-1") {
                             completeImage.push(obj);
                           } else {
                             for (let i = 0; i < Number(sddItem.hengLeg); i++) {
@@ -599,7 +589,7 @@ export default {
 
                     this.mergeWordSymbol(sItem);
                     if (sItem.pinyin) {
-                      isHasPY++;
+                      isHasPY += 1;
                       this.totalHasPy = true;
                     }
                     let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
@@ -607,15 +597,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;
@@ -644,14 +631,14 @@ export default {
       if (this.curQue.img_list && this.curQue.img_list.length > 0) {
         contentWidth = 780 - this.curQue.img_size;
       }
-      if (itemLeg == 1) {
+      if (itemLeg === 1) {
         this.itemsWidth = 780;
       } else {
         this.itemsWidth = Math.floor(contentWidth / itemLeg) - 16;
       }
 
       // 把答错的挑出来
-      if (this.judgeAnswer == "standardAnswer") {
+      if (this.judgeAnswer === "standardAnswer") {
         this.userErrorList = [];
         this.userBookanswer = [];
         this.curQue.tableData.body.forEach((item, index) => {
@@ -681,15 +668,15 @@ export default {
         });
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(sItem) {
       if (this.chsFhList.indexOf(sItem.chs) > -1) {
         sItem.isShow = false;
       } else {
         sItem.isShow = true;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -749,6 +736,8 @@ export default {
           .text-#{$type} {
             ::v-deep .el-textarea__inner {
               text-align: $type;
+              cursor: text !important;
+              caret-color: #606266 !important;
             }
           }
         }

src/components/Adult/preview/VoiceMatrix.vue

@@ -69,6 +69,7 @@
                 row.type !== 'connection' && curQue.voiceMatrix.columnSelection
               "
               v-show="
+                isMobile ||
                 selectColumn === i ||
                 (selectedLine.type === 'column' && selectedLine.index === i)
               "
@@ -100,6 +101,7 @@
             <span
               v-if="curQue.voiceMatrix.rowSelection"
               v-show="
+                isMobile ||
                 selectRow === i ||
                 (selectedLine.type === 'row' && selectedLine.index === i)
               "
@@ -413,7 +415,15 @@ export default {
   },
   props: ["curQue", "themeColor", "TaskModel"],
   data() {
+    const userAgent = navigator.userAgent || window.opera;
+    // 检查是否包含移动设备的标识
+    let isMobile =
+      /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+        userAgent
+      );
+
     return {
+      isMobile, // 是否移动端
       // 组件id
       cid: Math.random().toString(36).substr(2, 10),
       isFull: false,

src/components/Adult/preview/VoiceMatrixFullscreen.vue

@@ -1,148 +1,46 @@
 <template>
   <div :class="['voicefull', bgIndex === 0 ? 'bg1' : 'bg2']">
     <div
-      class="voicefull-top"
-      @mouseover="setTopShow(true)"
-      @mouseleave="setTopShow(false)"
+      class="voicefull-bottom"
+      @mouseover="setBottomShow(true)"
+      @mouseleave="setBottomShow(false)"
     >
-      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
-        <div class="top-left">
-          <div :class="['select-bg', bgIndex === 1 ? 'select-bg-blue' : '']">
-            <div :class="['bg-green-box', bgIndex === 1 ? 'active' : '']">
-              <span
-                :class="['bg-green', bgIndex === 1 ? 'active' : '']"
-                @click="changeBg(1)"
-              />
-            </div>
-            <div :class="['bg-white-box', bgIndex === 0 ? 'active' : '']">
-              <span
-                :class="['bg-white', bgIndex === 0 ? 'active' : '']"
-                @click="changeBg(0)"
-              />
-            </div>
-          </div>
-          <div
-            :class="['set-fontSize', bgIndex === 1 ? 'set-fontSize-green' : '']"
-          >
-            <template v-if="hzSize >= 34">
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex === 1 ? 'font-jian-yellow' : ''
-                ]"
-                @click="setFontSize('-')"
-              />
-            </template>
-            <template v-else>
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex === 1
-                    ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled'
-                ]"
-              />
-            </template>
-            <span
-              :class="[
-                'font-img-black',
-                bgIndex === 1 ? 'font-img-yellow' : ''
-              ]"
-            />
-            <template v-if="hzSize <= 76">
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex === 1 ? 'font-jia-yellow' : ''
-                ]"
-                @click="setFontSize('+')"
-              />
-            </template>
-            <template v-else>
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex === 1
-                    ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled'
-                ]"
-              />
-            </template>
-          </div>
+      <div :class="['voicefull-bottom-show', isBottomShow ? '' : 'hidden']">
+        <div class="bottom-left">
+          <soundrecorddiff
+            ref="Soundrecorddiff"
+            :bg-index="bgIndex"
+            :file-name="fileName"
+            :select-data="selectData"
+            :answer-record-list="recordList"
+            @getSelectData="getSelectData"
+            @getWavblob="getWavblob"
+            @handleParentPlay="handleParentPlay"
+            @sentPause="sentPause"
+            @getRerordStatus="getRerordStatus"
+            @getMicrophoneStatus="getMicrophoneStatus"
+            @getPlayStatus="getPlayStatus"
+            @handleWav="handleWav"
+          />
           <div
-            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="changeStatus('isKeyboard')"
+            v-if="isShowCompare"
+            :class="['compare-box', bgIndex === 1 ? 'compare-box-white' : '']"
           >
-            <span
-              :class="[
-                'keyboard-icon',
-                !isKeyboard ? 'disabled' : '',
-                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : ''
-              ]"
-            />
-          </div>
-        </div>
-        <div class="top-middle">
-          <template v-if="mp3">
-            <voice-matrix-fullscreen-audio
-              ref="audioLine"
-              audio-id="voiceMatrixFullscreenAudio"
-              :is-repeat="isRepeat"
-              :bg-index="bgIndex"
-              :mp3="mp3"
+            <audio-compare
+              type="full"
+              :theme-color="themeColor"
+              :url="mp3"
+              :wavblob="wavblob"
+              :sent-pause="sentPause"
+              :is-record="isRecord"
+              :handle-change-stop-audio="handleChangeStopAudio"
+              :get-play-status="getPlayStatus"
+              :matrix-select-lrc="matrixSelectLrc"
               :get-cur-time="getCurTime"
-              :stop-audio="stopAudio"
-              :has-selected-cell="hasSelectedCell"
-              @playChange="playChange"
-              @parentPlayAudio="playAudio"
-              @handleChangeStopAudio="handleChangeStopAudio"
-            />
-          </template>
-          <div
-            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="changeLoopState"
-          >
-            <span
-              :class="[
-                'repeat-icon',
-                !isRepeat ? 'disabled' : 'auto-icon',
-                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
-              ]"
-            />
-          </div>
-          <div
-            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="changePinyin"
-          >
-            <span
-              :class="[
-                'pinyin-icon',
-                !isShowPY || !isHasPY ? 'disabled' : '',
-                isShowPY && isHasPY && bgIndex === 1 ? 'pinyin-icon-yellow' : ''
-              ]"
-            />
-          </div>
-          <div
-            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="changeEN"
-          >
-            <span
-              :class="[
-                'en-icon',
-                !isShowEN || !isHasEN ? 'disabled' : '',
-                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : ''
-              ]"
+              :cur-time="curTime"
             />
           </div>
         </div>
-        <div
-          :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-          @click="exitFullScreen"
-        >
-          <span
-            :class="['close-icon', bgIndex === 1 ? 'close-icon-white' : '']"
-          />
-        </div>
       </div>
     </div>
 
@@ -152,7 +50,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"
       >
@@ -169,14 +67,15 @@
                 row.type !== 'connection' && curQue.voiceMatrix.columnSelection
               "
               v-show="
+                isMobile ||
                 selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i)
+                (selectedLine.type === 'column' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
                 selectedLine.type === 'column' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'column')"
             />
@@ -193,14 +92,15 @@
             <span
               v-if="curQue.voiceMatrix.rowSelection"
               v-show="
+                isMobile ||
                 selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                (selectedLine.type === 'row' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : ''
+                  : '',
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -212,9 +112,9 @@
               :class="[
                 'column-wrapper',
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
-                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : ''
+                  : '',
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -225,18 +125,18 @@
                 :class="[
                   column.text.length === 0 ? 'space' : `column-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -250,7 +150,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : ''
+                    : '',
                 ]"
               />
               <!-- 分词 -->
@@ -260,21 +160,21 @@
                 :class="[
                   `sentence-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    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)"
               >
@@ -282,18 +182,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'
@@ -310,18 +208,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'
@@ -342,18 +238,18 @@
                 :class="[
                   `pinyinEnglish-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -376,18 +272,18 @@
                 :class="[
                   `textBrackets-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : ''
+                  column.isTitle ? 'title' : '',
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -417,46 +313,150 @@
     </div>
 
     <div
-      class="voicefull-bottom"
-      @mouseover="setBottomShow(true)"
-      @mouseleave="setBottomShow(false)"
+      class="voicefull-top"
+      @mouseover="setTopShow(true)"
+      @mouseleave="setTopShow(false)"
     >
-      <div :class="['voicefull-bottom-show', isBottomShow ? '' : 'hidden']">
-        <div class="bottom-left">
-          <soundrecorddiff
-            ref="Soundrecorddiff"
-            :bg-index="bgIndex"
-            :file-name="fileName"
-            :select-data="selectData"
-            :answer-record-list="recordList"
-            @getSelectData="getSelectData"
-            @getWavblob="getWavblob"
-            @handleParentPlay="handleParentPlay"
-            @sentPause="sentPause"
-            @getRerordStatus="getRerordStatus"
-            @getMicrophoneStatus="getMicrophoneStatus"
-            @getPlayStatus="getPlayStatus"
-            @handleWav="handleWav"
-          />
+      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
+        <div class="top-left">
+          <div :class="['select-bg', bgIndex === 1 ? 'select-bg-blue' : '']">
+            <div :class="['bg-green-box', bgIndex === 1 ? 'active' : '']">
+              <span
+                :class="['bg-green', bgIndex === 1 ? 'active' : '']"
+                @click="changeBg(1)"
+              />
+            </div>
+            <div :class="['bg-white-box', bgIndex === 0 ? 'active' : '']">
+              <span
+                :class="['bg-white', bgIndex === 0 ? 'active' : '']"
+                @click="changeBg(0)"
+              />
+            </div>
+          </div>
           <div
-            v-if="isShowCompare"
-            :class="['compare-box', bgIndex === 1 ? 'compare-box-white' : '']"
+            :class="['set-fontSize', bgIndex === 1 ? 'set-fontSize-green' : '']"
           >
-            <audio-compare
-              type="full"
-              :theme-color="themeColor"
-              :url="mp3"
-              :wavblob="wavblob"
-              :sent-pause="sentPause"
-              :is-record="isRecord"
-              :handle-change-stop-audio="handleChangeStopAudio"
-              :get-play-status="getPlayStatus"
-              :matrix-select-lrc="matrixSelectLrc"
+            <template v-if="hzSize >= 34">
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex === 1 ? 'font-jian-yellow' : '',
+                ]"
+                @click="setFontSize('-')"
+              />
+            </template>
+            <template v-else>
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex === 1
+                    ? 'font-jian-yellow-disabled'
+                    : 'font-jian-white-disabled',
+                ]"
+              />
+            </template>
+            <span
+              :class="[
+                'font-img-black',
+                bgIndex === 1 ? 'font-img-yellow' : '',
+              ]"
+            />
+            <template v-if="hzSize <= 76">
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex === 1 ? 'font-jia-yellow' : '',
+                ]"
+                @click="setFontSize('+')"
+              />
+            </template>
+            <template v-else>
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex === 1
+                    ? 'font-jia-yellow-disabled'
+                    : 'font-jia-white-disabled',
+                ]"
+              />
+            </template>
+          </div>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changeStatus('isKeyboard')"
+          >
+            <span
+              :class="[
+                'keyboard-icon',
+                !isKeyboard ? 'disabled' : '',
+                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : '',
+              ]"
+            />
+          </div>
+        </div>
+        <div class="top-middle">
+          <template v-if="mp3">
+            <voice-matrix-fullscreen-audio
+              ref="audioLine"
+              audio-id="voiceMatrixFullscreenAudio"
+              :is-repeat="isRepeat"
+              :bg-index="bgIndex"
+              :mp3="mp3"
               :get-cur-time="getCurTime"
-              :cur-time="curTime"
+              :stop-audio="stopAudio"
+              :has-selected-cell="hasSelectedCell"
+              @playChange="playChange"
+              @parentPlayAudio="playAudio"
+              @handleChangeStopAudio="handleChangeStopAudio"
+            />
+          </template>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changeLoopState"
+          >
+            <span
+              :class="[
+                'repeat-icon',
+                !isRepeat ? 'disabled' : 'auto-icon',
+                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : '',
+              ]"
+            />
+          </div>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changePinyin"
+          >
+            <span
+              :class="[
+                'pinyin-icon',
+                !isShowPY || !isHasPY ? 'disabled' : '',
+                isShowPY && isHasPY && bgIndex === 1
+                  ? 'pinyin-icon-yellow'
+                  : '',
+              ]"
+            />
+          </div>
+          <div
+            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+            @click="changeEN"
+          >
+            <span
+              :class="[
+                'en-icon',
+                !isShowEN || !isHasEN ? 'disabled' : '',
+                isShowEN && bgIndex === 1 && isHasEN ? 'en-icon-yellow' : '',
+              ]"
             />
           </div>
         </div>
+        <div
+          :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
+          @click="exitFullScreen"
+        >
+          <span
+            :class="['close-icon', bgIndex === 1 ? 'close-icon-white' : '']"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -473,11 +473,19 @@ export default {
     VoiceMatrixFullscreenAudio,
     Soundrecorddiff,
     AudioCompare,
-    Wordcard
+    Wordcard,
   },
   props: ["mp3", "curQue", "themeColor", "recordList"],
   data() {
+    const userAgent = navigator.userAgent || window.opera;
+    // 检查是否包含移动设备的标识
+    let isMobile =
+      /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+        userAgent
+      );
+
     return {
+      isMobile,
       hzSize: 48,
       bgIndex: 1,
       item: null,
@@ -503,12 +511,12 @@ export default {
       // 行、列选中
       selectedLine: {
         type: "",
-        index: 0
+        index: 0,
       },
       // 点击选中
       selectCell: {
         row: -1,
-        column: -1
+        column: -1,
       },
       isRepeat: false,
       // 跟读所需属性
@@ -520,7 +528,7 @@ export default {
       cellTimer: null,
       // 拼音、英文显隐判断
       isShowPY: true,
-      isShowEN: true
+      isShowEN: true,
     };
   },
   computed: {
@@ -552,7 +560,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column
+        column,
       };
     },
     // 矩阵的行、列数从 0 开始
@@ -560,9 +568,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) {
@@ -586,7 +594,7 @@ export default {
           }
         }, 50);
       }
-    }
+    },
   },
   created() {
     document.addEventListener("keyup", this.handleKeyup);
@@ -595,8 +603,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange"
-    ].forEach(event => {
+      "msfullscreenchange",
+    ].forEach((event) => {
       document.addEventListener(event, this.handleFullscreen);
     });
   },
@@ -606,8 +614,8 @@ export default {
       "fullscreenchange",
       "mozfullscreenchange",
       "webkitfullscreenchange",
-      "msfullscreenchange"
-    ].forEach(event => {
+      "msfullscreenchange",
+    ].forEach((event) => {
       document.removeEventListener(event, this.handleFullscreen);
     });
   },
@@ -650,13 +658,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;
@@ -705,7 +708,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);
         });
@@ -714,7 +717,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);
         });
@@ -737,7 +740,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();
@@ -787,7 +790,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);
         });
@@ -796,7 +799,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);
         });
@@ -822,7 +825,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;
@@ -843,7 +846,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);
@@ -972,9 +975,13 @@ export default {
 
     pauseAudio() {
       let audio = document.getElementsByTagName("audio");
-      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-        audio.forEach(item => {
-            item.pause();
+      if (
+        audio &&
+        audio.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
+        audio.forEach((item) => {
+          item.pause();
         });
       }
     },
@@ -985,8 +992,8 @@ export default {
     changeFullScreen() {
       this.pauseAudio();
       this.$emit("changeIsFull");
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -1539,6 +1546,7 @@ $dark-color-play: #fff2c6;
           > span {
             display: inline-block;
             padding: 4px 12px;
+            white-space: nowrap;
           }
         }
 
@@ -1585,6 +1593,7 @@ $dark-color-play: #fff2c6;
           column-gap: 8px;
           justify-items: center;
           justify-content: start;
+          white-space: nowrap;
 
           > span {
             padding: 0;