语音矩阵增加 拼音 + 英文

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -124,11 +124,18 @@
                   v-model="column.text"
                   size="small"
                 />
+
                 <span v-else-if="column.type === 'connection'">-</span>
+
                 <sentence-segword-chs
                   v-else-if="column.type === 'SentenceSegwordChs'"
                   :cur-que="column.sentence_data"
                 />
+
+                <template v-else-if="column.type === 'PinyinEnglish'">
+                  <span class="pinyin-english-label">拼音</span><el-input v-model="column.pinyin_english_data.pinyin" size="small" />
+                  <span class="pinyin-english-label">英文</span><el-input v-model="column.pinyin_english_data.english" size="small" />
+                </template>
               </div>
             </div>
           </div>
@@ -171,6 +178,10 @@ export default {
         {
           type: "SentenceSegwordChs",
           name: "句子分词"
+        },
+        {
+          type: 'PinyinEnglish',
+          name: '拼音 + 英文'
         }
       ],
       matchTypeList: [
@@ -244,6 +255,10 @@ export default {
               segList: [], // 分词结果
               seg_words: "",
               wordsList: []
+            },
+            pinyin_english_data: {
+              pinyin: '',
+              english: ''
             }
           };
         }
@@ -429,6 +444,11 @@ export default {
 
             &-content {
               padding-top: 12px;
+
+              .pinyin-english-label {
+                font-size: 14px;
+                margin: 0 12px;
+              }
             }
 
             + .column {

src/components/Adult/preview/VoiceMatrix.vue

@@ -32,7 +32,7 @@
         v-if="curQue.voiceMatrix.matrix.length > 0"
         class="matrix"
         :style="{
-          'grid-template': `40px repeat(${curQue.voiceMatrix.matrix.length}, auto) 1fr / 40px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) 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"
       >
@@ -207,6 +207,37 @@
                   </span>
                 </template>
               </div>
+              <!-- 拼音 + 英文 -->
+              <div
+                v-else-if="column.type === 'PinyinEnglish'"
+                :key="`column-${i}-${j}`"
+                :class="[
+                  `pinyinEnglish-${themeColor}`,
+                  (selectCell.row === i && selectCell.column === j) ||
+                    (selectedLine.type === 'column' &&
+                      selectedLine.index === j) ||
+                    (selectedLine.type === 'row' && selectedLine.index === i)
+                    ? 'selected'
+                    : '',
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                    (curTime < column.lrc_data.end_time / 1000 ||
+                      column.lrc_data.end_time === -1)
+                    ? 'playing'
+                    : '',
+                  column.isTitle ? 'title' : ''
+                ]"
+                @click="cellClickTimeout(i, j)"
+                @dblclick="matrixCelDblClick(i, j)"
+              >
+                <div class="inside-wrapper">
+                  <div class="pinyin">
+                    {{ column.pinyin_english_data.pinyin }}
+                  </div>
+                  <div class="english">
+                    {{ column.pinyin_english_data.english }}
+                  </div>
+                </div>
+              </div>
             </div>
           </template>
 
@@ -252,7 +283,7 @@
 </template>
 
 <script>
-import Bus from './components/Bus.js';
+import Bus from "./components/Bus.js";
 import AudioLine from "./AudioLine.vue";
 import Soundrecord from "./Soundrecord.vue";
 
@@ -320,7 +351,7 @@ export default {
     }
   },
   created() {
-    Bus.$on('audioPause', () => {
+    Bus.$on("audioPause", () => {
       this.handleParentPlay();
     });
   },
@@ -343,7 +374,9 @@ export default {
 
     cellClickTimeout(row, column) {
       clearTimeout(this.cellTimer);
-      this.cellTimer = setTimeout(() => { this.matrixCellClick(row, column); }, 200);
+      this.cellTimer = setTimeout(() => {
+        this.matrixCellClick(row, column);
+      }, 200);
     },
 
     matrixCellClick(row, column) {
@@ -403,10 +436,10 @@ export default {
       }
       this.selectedLine = { type, index };
       let number = index;
-      if (type === 'column') {
+      if (type === "column") {
         this.curQue.voiceMatrix.matrix[index].forEach(({ type }, i) => {
           if (i >= index) return;
-          if (type === 'connection') number -= 1;
+          if (type === "connection") number -= 1;
         });
       }
       this.fileName = `第 ${number + 1} ${type === "row" ? "行" : "列"}`;
@@ -480,7 +513,7 @@ export default {
     playChange(playing) {
       this.playing = playing;
       // 子组件通信，同时只能播放一个音频
-      if (playing) Bus.$emit('audioPause');
+      if (playing) Bus.$emit("audioPause");
     },
 
     // 暂停音频播放
@@ -603,11 +636,6 @@ $select-color-brown-active: #a37557;
       width: 100%;
       height: 100%;
 
-      .matrix-top,
-      .matrix-bottom {
-        min-height: 40px;
-      }
-
       %matrix-checkbox {
         position: relative;
         top: calc(50% - 5px);
@@ -808,6 +836,10 @@ $select-color-brown-active: #a37557;
           justify-items: center;
           justify-content: start;
 
+          > span {
+            padding: 0;
+          }
+
           .pinyin {
             font-family: "GB-PINYINOK-B";
             font-size: 14px;
@@ -869,6 +901,55 @@ $select-color-brown-active: #a37557;
             background-color: $select-color-brown;
           }
         }
+        // 拼音 + 文字
+        %pinyinEnglish,
+        .pinyinEnglish-,
+        .pinyinEnglish-red {
+          @extend %column;
+
+          .inside-wrapper {
+            padding: 4px 12px;
+
+            .pinyin {
+              font-family: "GB-PINYINOK-B";
+              font-size: 16px;
+              line-height: 24px;
+            }
+
+            .english {
+              font-family: "robot";
+              opacity: 0.45;
+              font-size: 12px;
+              line-height: 20px;
+            }
+          }
+        }
+
+        .pinyinEnglish-green {
+          @extend %pinyinEnglish;
+
+          &.selected {
+            color: $select-color-green;
+            border-color: $select-color-green;
+          }
+
+          &.playing {
+            background-color: $select-color-green-hover;
+          }
+        }
+
+        .pinyinEnglish-brown {
+          @extend %pinyinEnglish;
+
+          &.selected {
+            color: $select-color-brown;
+            border-color: $select-color-brown;
+          }
+
+          &.playing {
+            background-color: $select-color-brown-hover;
+          }
+        }
       }
     }