fix: 语音矩阵编辑预览字体大小不正确

src/components/Adult/preview/VoiceMatrix.vue

@@ -17,7 +17,7 @@
           class="audio-simple-image"
           :src="playing ? voicePlaySrc : voicePauseSrc"
           @click="playAudio"
-        >
+        />
         <span
           :class="[
             'Repeat-16',
@@ -57,8 +57,8 @@
             :class="[
               'matrix-top',
               curQue.voiceMatrix.columnSelection &&
-                (selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i))
+              (selectColumn === i ||
+                (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -70,7 +70,7 @@
               "
               v-show="
                 selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i)
+                (selectedLine.type === 'column' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-row-${themeColor}`,
@@ -90,8 +90,8 @@
             :class="[
               'column-wrapper',
               curQue.voiceMatrix.rowSelection &&
-                (selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i))
+              (selectRow === i ||
+                (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -101,7 +101,7 @@
               v-if="curQue.voiceMatrix.rowSelection"
               v-show="
                 selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i)
+                (selectedLine.type === 'row' && selectedLine.index === i)
               "
               :class="[
                 `matrix-checkbox-column-${themeColor}`,
@@ -119,17 +119,17 @@
               :class="[
                 'column-wrapper',
                 (curQue.voiceMatrix.rowSelection && selectRow === i) ||
-                  (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
-                  (curQue.voiceMatrix.columnSelection &&
-                    selectedLine.type === 'column' &&
-                    selectedLine.index === j) ||
-                  (curQue.voiceMatrix.rowSelection &&
-                    selectedLine.type === 'row' &&
-                    selectedLine.index === i)
+                (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
+                (curQue.voiceMatrix.columnSelection &&
+                  selectedLine.type === 'column' &&
+                  selectedLine.index === j) ||
+                (curQue.voiceMatrix.rowSelection &&
+                  selectedLine.type === 'row' &&
+                  selectedLine.index === i)
                   ? 'read'
                   : '',
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
-                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : '',
               ]"
@@ -142,15 +142,15 @@
                 :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' : '',
@@ -177,15 +177,15 @@
                 :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' : '',
@@ -243,15 +243,15 @@
                 :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' : '',
@@ -274,15 +274,15 @@
                 :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' : '',
@@ -319,8 +319,8 @@
             :key="`end-${i}`"
             :class="[
               curQue.voiceMatrix.rowSelection &&
-                (selectRow === i ||
-                  (selectedLine.type === 'row' && selectedLine.index === i))
+              (selectRow === i ||
+                (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -335,8 +335,8 @@
             :class="[
               'matrix-bottom',
               curQue.voiceMatrix.columnSelection &&
-                (selectColumn === i ||
-                  (selectedLine.type === 'column' && selectedLine.index === i))
+              (selectColumn === i ||
+                (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : '',
             ]"
@@ -519,7 +519,7 @@ export default {
     },
   },
   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();
@@ -637,7 +637,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);
         });
@@ -646,7 +646,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);
         });
@@ -669,7 +669,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();
@@ -724,7 +724,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);
         });
@@ -733,7 +733,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);
         });
@@ -773,9 +773,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();
         });
       }
     },
@@ -824,7 +828,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);
@@ -927,6 +931,7 @@ $select-color-brown-active: #a37557;
   // 语音矩阵
   &-container {
     overflow: auto;
+    font-size: 16px;
     height: calc(100% - 80px);
     background-color: #f5f5f5;
     border-left: 1px solid $border-color;