语音矩阵

src/components/Adult/Preview.vue

@@ -660,6 +660,7 @@
                           :theme-color="themeColor"
                           :task-model="TaskModel"
                           :judge-answer="itemJ"
+                          :baseSizePhone="baseSizePhone"
                         />
                       </template>
                       <template v-if="itemss.type === 'select_drag'">

src/components/Adult/phonePreview/AudioLine.vue

@@ -397,13 +397,14 @@ export default {
       border-radius: 8px 8px 0 0;
     }
     .play {
-      margin-right: 12px;
-      margin-left: 8px;
-      width: 16px;
-      min-width: 16px;
-      height: 16px;
+      margin-right: 10px;
+      margin-left: 6px;
+      width: 20px;
+      min-width: 20px;
+      height: 20px;
       cursor: pointer;
       display: block;
+      padding: 2px;
     }
 
     span {

src/components/Adult/phonePreview/Soundrecord.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="NNPE-Book-record">
+  <div class="NNPE-Book-record-phone">
     <template v-if="(type && type == 'normal') || (type && type == 'mini')">
       <div
         :class="[
@@ -470,7 +470,7 @@ export default {
 
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
-.NNPE-Book-record {
+.NNPE-Book-record-phone {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -479,22 +479,23 @@ export default {
   // border: 1px solid rgba(0, 0, 0, 0.1);
   // border-radius: 8px;
   .playBack {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
+    padding: 2px;
     margin-left: 8px;
     background: url("../../../assets/newImage/common/luyin-play.png") center
       no-repeat;
-    background-size: 100%;
+    background-size: 16px;
     cursor: pointer;
     &.normal {
       background: url("../../../assets/newImage/common/luyin-play-active.png")
         center no-repeat;
-      background-size: 100%;
+      background-size: 16px;
     }
     &.active {
       background: url("../../../assets/newImage/common/luyin-play-stop.png")
         center no-repeat;
-      background-size: 100%;
+      background-size: 16px;
     }
   }
   .line {
@@ -505,27 +506,28 @@ export default {
     margin-left: 8px;
   }
   .record {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
+    padding: 2px;
     background: url("../../../assets/newImage/common/luyin.png") center
       no-repeat;
-    background-size: 100%;
+    background-size: 16px;
     cursor: pointer;
     &.active {
       background: url("../../../assets/newImage/common/luyin-active.png") center
         no-repeat;
-      background-size: 100%;
+      background-size: 16px;
     }
     &.active:hover {
       background: url("../../../assets/newImage/common/luyin-stop.png") center
         no-repeat;
-      background-size: 100%;
+      background-size: 16px;
     }
     &.notAllow {
       cursor: not-allowed;
       background: url("../../../assets/newImage/common/luyin-notAllow.png")
         center no-repeat;
-      background-size: 100%;
+      background-size: 16px;
     }
   }
   .record-time {
@@ -548,18 +550,19 @@ export default {
     margin-left: 8px;
   }
   .record-delete {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
+    padding: 2px;
     margin-left: 8px;
     background: url("../../../assets/newImage/common/luyin-delete.png") center
       no-repeat;
-    background-size: 100%;
+    background-size: 16px;
     display: block;
     &.record-delete-has {
       &:hover {
         background: url("../../../assets/newImage/common/luyin-delete-active.png")
           center no-repeat;
-        background-size: 100%;
+        background-size: 16px;
       }
     }
     &.notAllow {
@@ -569,17 +572,17 @@ export default {
 }
 </style>
 <style lang="scss">
-.NNPE-Book-record {
+.NNPE-Book-record-phone {
   .el-select {
     flex: 1;
     height: 24px;
+    display: none;
     &.proSelect {
       width: 78px;
     }
     .el-input__inner {
-      height: 24px;
-      line-height: 22px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
+      height: 0;
+      line-height: 0;
       box-sizing: border-box;
       border-radius: 4px;
       padding: 0px 11px;

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"
         />
@@ -40,12 +40,15 @@
       />
     </div>
     <!-- 语音矩阵 -->
-    <div class="voice-matrix-container">
+    <div
+      class="voice-matrix-container"
+      :style="{ fontSize: baseSizePhone + 'px' }"
+    >
       <div
         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"
       >
@@ -60,7 +63,7 @@
               (selectColumn === i ||
                 (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : '',
+                : ''
             ]"
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
@@ -70,13 +73,13 @@
               "
               v-show="
                 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')"
             />
@@ -93,7 +96,7 @@
               (selectRow === i ||
                 (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : '',
+                : ''
             ]"
             @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
           >
@@ -101,13 +104,13 @@
               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}`,
                 selectedLine.type === 'row' && selectedLine.index === i
                   ? 'active'
-                  : '',
+                  : ''
               ]"
               @click="selectRowOrColumn(i, 'row')"
             />
@@ -131,7 +134,7 @@
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
                 (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
-                  : '',
+                  : ''
               ]"
               @mouseenter="matrixCellMouseenter(i, j, column.type)"
             >
@@ -153,7 +156,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -167,7 +170,7 @@
                   'connection',
                   i === 0 && curQue.voiceMatrix.firstLineHighlight
                     ? `highlight-bc-${themeColor}`
-                    : '',
+                    : ''
                 ]"
               />
               <!-- 分词 -->
@@ -188,10 +191,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)"
               >
@@ -199,11 +202,13 @@
                   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'
@@ -219,11 +224,13 @@
                   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'
@@ -254,7 +261,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -285,7 +292,7 @@
                     column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
-                  column.isTitle ? 'title' : '',
+                  column.isTitle ? 'title' : ''
                 ]"
                 @click="matrixCellClick(i, j)"
               >
@@ -294,7 +301,7 @@
                     :class="[
                       getBracketsOuterTypeClass(
                         column.text_brackets.brackets_outer_type
-                      ),
+                      )
                     ]"
                   >
                     {{ column.text_brackets.brackets_outer }}
@@ -304,7 +311,7 @@
                     :class="[
                       column.text_brackets.brackets_inner_type === 'pinyin'
                         ? 'pinyin'
-                        : 'english',
+                        : 'english'
                     ]"
                   >
                     {{ column.text_brackets.brackets_inner }}
@@ -322,7 +329,7 @@
               (selectRow === i ||
                 (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
-                : '',
+                : ''
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -338,7 +345,7 @@
               (selectColumn === i ||
                 (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
-                : '',
+                : ''
             ]"
             @mouseenter="clearSelectCell"
           />
@@ -377,7 +384,7 @@
         @playing="playChange"
       />
       <span ref="fullscreen" class="fullscreen" @click="fullScreen">
-        <span>全屏模式</span>
+        <span>黑板模式</span>
         <el-image :src="fullscreenSrc" />
       </span>
     </div>
@@ -409,13 +416,15 @@ export default {
     AudioLine,
     Soundrecord,
     AudioCompare,
-    VoiceFullscreen,
+    VoiceFullscreen
   },
-  props: ["curQue", "themeColor", "TaskModel"],
+  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,
@@ -429,19 +438,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: {
@@ -475,7 +484,7 @@ export default {
         type: type.length > 0 && index >= 0 ? type : "cell",
         index,
         row,
-        column,
+        column
       };
     },
 
@@ -494,12 +503,8 @@ export default {
       return require(`../../../assets/NPC/icon-voice-play-${themeColor}.png`);
     },
     fullscreenSrc() {
-      const themeColor = this.themeColor;
-      if (themeColor.length === 0 || themeColor === "red") {
-        return require("../../../assets/NPC/full-screen-red.png");
-      }
-      return require(`../../../assets/NPC/full-screen-${themeColor}.png`);
-    },
+      return require("../../../assets/NPC/full-screen-red.png");
+    }
   },
   watch: {
     hasSelectedCell() {
@@ -515,11 +520,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();
@@ -528,7 +533,7 @@ export default {
     });
     if (!this.curQue.Bookanswer) {
       let bookanswer = {
-        recordList: [],
+        recordList: []
       };
       this.$set(this.curQue, "Bookanswer", bookanswer);
     }
@@ -541,7 +546,7 @@ export default {
         window.getComputedStyle(this.$refs.fullscreen).width.replace("px", "")
       ) < 80
     ) {
-      this.$refs.fullscreen.children[0].hidden = true;
+      // this.$refs.fullscreen.children[0].hidden = true;
     }
   },
   beforeDestroy() {},
@@ -581,8 +586,13 @@ 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;
@@ -637,7 +647,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);
         });
@@ -646,7 +656,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);
         });
@@ -669,7 +679,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 +734,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 +743,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);
         });
@@ -759,7 +769,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;
@@ -778,7 +788,7 @@ export default {
         audio.length > 0 &&
         window.location.href.indexOf("GCLS-Learn") == -1
       ) {
-        audio.forEach((item) => {
+        audio.forEach(item => {
           item.pause();
         });
       }
@@ -828,7 +838,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);
@@ -843,8 +853,8 @@ export default {
     },
     handleWav(list, tmIndex = 0) {
       this.$set(this.curQue.Bookanswer, "recordList", list);
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -865,7 +875,7 @@ $select-color-brown-active: #a37557;
 .voice-matrix {
   height: 100%;
   width: 100%;
-  padding-bottom: 24px;
+  // padding-bottom: 24px;
   color: #262626;
 
   &-audio {
@@ -1059,7 +1069,7 @@ $select-color-brown-active: #a37557;
         %column {
           width: 100%;
           height: 100%;
-          min-height: 32px;
+          min-height: 24px;
           background-color: #fff;
           border: 1px solid $border-color;
           border-radius: 8px;
@@ -1089,7 +1099,7 @@ $select-color-brown-active: #a37557;
             display: inline-block;
             white-space: nowrap;
             padding: 4px 12px;
-            line-height: 24px;
+            line-height: 1.4;
           }
         }
 
@@ -1336,7 +1346,6 @@ $select-color-brown-active: #a37557;
 
     .fullscreen {
       cursor: pointer;
-
       .el-image {
         width: 16px;
         height: 16px;
@@ -1370,7 +1379,7 @@ $select-color-brown-active: #a37557;
 
   .luyin-box {
     .el-select .el-input {
-      width: 136px;
+      width: 126px;
     }
   }
 }