|
|
@@ -0,0 +1,1665 @@
|
|
|
+<template>
|
|
|
+ <div :class="['voicefull', bgIndex === 0 ? 'bg1' : 'bg2']">
|
|
|
+ <div
|
|
|
+ class="voicefull-top"
|
|
|
+ @mouseover="setTopShow(true)"
|
|
|
+ @mouseleave="setTopShow(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="['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="voiceMatrixAudio"
|
|
|
+ :bg-index="bgIndex"
|
|
|
+ :mp3="mp3"
|
|
|
+ :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="setStatus"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'repeat-icon',
|
|
|
+ !isRepeat && !isAuto ? 'disabled' : '',
|
|
|
+ isRepeat && !isAuto ? 'auto-icon' : '',
|
|
|
+ !isRepeat && bgIndex === 1 ? 'repeat-icon-yellow' : '',
|
|
|
+ isRepeat && !isAuto && bgIndex === 1 ? 'auto-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 class="voicefull-content">
|
|
|
+ <div
|
|
|
+ v-if="curQue.voiceMatrix.matrix.length > 0"
|
|
|
+ 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(1.5em, 1fr)`,
|
|
|
+ 'font-size': `${hzSize}px`,
|
|
|
+ }"
|
|
|
+ @mouseleave="clearSelectCell"
|
|
|
+ >
|
|
|
+ <!-- 顶部单元格 -->
|
|
|
+ <div class="matrix-top" @mouseenter="clearSelectCell" />
|
|
|
+ <template v-for="(row, i) in curQue.voiceMatrix.matrix[0]">
|
|
|
+ <div
|
|
|
+ :key="`top-${i}`"
|
|
|
+ :class="['matrix-top']"
|
|
|
+ @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ row.type !== 'connection' && curQue.voiceMatrix.columnSelection
|
|
|
+ "
|
|
|
+ v-show="
|
|
|
+ selectColumn === i ||
|
|
|
+ (selectedLine.type === 'column' && selectedLine.index === i)
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ `matrix-checkbox-row-${themeColor}`,
|
|
|
+ selectedLine.type === 'column' && selectedLine.index === i
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @click="selectRowOrColumn(i, 'column')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="matrix-top" @mouseenter="clearSelectCell" />
|
|
|
+ <!-- 主矩阵 -->
|
|
|
+ <template v-for="(row, i) in curQue.voiceMatrix.matrix">
|
|
|
+ <div
|
|
|
+ :key="`start-${i}`"
|
|
|
+ :class="['column-wrapper']"
|
|
|
+ @mouseenter="checkboxMouseenter(selectRow === i, 'row')"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="curQue.voiceMatrix.rowSelection"
|
|
|
+ v-show="
|
|
|
+ selectRow === i ||
|
|
|
+ (selectedLine.type === 'row' && selectedLine.index === i)
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ `matrix-checkbox-column-${themeColor}`,
|
|
|
+ selectedLine.type === 'row' && selectedLine.index === i
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @click="selectRowOrColumn(i, 'row')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 单元格 -->
|
|
|
+ <template v-for="(column, j) in row">
|
|
|
+ <div
|
|
|
+ :key="`wrapper-${i}-${j}`"
|
|
|
+ :class="[
|
|
|
+ 'column-wrapper',
|
|
|
+ (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
|
|
|
+ (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
|
|
|
+ ? `highlight-${themeColor}`
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @mouseenter="matrixCellMouseenter(i, j, column.type)"
|
|
|
+ >
|
|
|
+ <!-- 文本 -->
|
|
|
+ <div
|
|
|
+ v-if="column.type === 'text'"
|
|
|
+ :key="`column-${i}-${j}`"
|
|
|
+ :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)
|
|
|
+ ? 'selected'
|
|
|
+ : '',
|
|
|
+ playing &&
|
|
|
+ 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="matrixCellClick(i, j)"
|
|
|
+ >
|
|
|
+ <span>{{ column.text }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 连接线 -->
|
|
|
+ <div
|
|
|
+ v-else-if="column.type === 'connection'"
|
|
|
+ :key="`column-${i}-${j}`"
|
|
|
+ :class="[
|
|
|
+ 'connection',
|
|
|
+ i === 0 && curQue.voiceMatrix.firstLineHighlight
|
|
|
+ ? `highlight-bc-${themeColor}`
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ <!-- 分词 -->
|
|
|
+ <div
|
|
|
+ v-else-if="column.type === 'SentenceSegwordChs'"
|
|
|
+ :key="`column-${i}-${j}`"
|
|
|
+ :class="[
|
|
|
+ `sentence-${themeColor}`,
|
|
|
+ (selectCell.row === i && selectCell.column === j) ||
|
|
|
+ (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)
|
|
|
+ ? 'playing'
|
|
|
+ : '',
|
|
|
+ column.isTitle ? 'title' : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ 'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`,
|
|
|
+ }"
|
|
|
+ @click="matrixCellClick(i, j)"
|
|
|
+ >
|
|
|
+ <template v-for="(word, w) in column.sentence_data.wordsList">
|
|
|
+ <span
|
|
|
+ v-if="column.sentence_data.pyPosition === 'top'"
|
|
|
+ :key="`pinyin-${w}`"
|
|
|
+ class="pinyin"
|
|
|
+ >
|
|
|
+ {{ word.pinyin }}
|
|
|
+ </span>
|
|
|
+ <span v-else :key="`chs-${w}`" class="chs">
|
|
|
+ {{ word.chs }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-for="(word, w) in column.sentence_data.wordsList">
|
|
|
+ <span
|
|
|
+ v-if="column.sentence_data.pyPosition === 'top'"
|
|
|
+ :key="`chs-${w}`"
|
|
|
+ class="chs"
|
|
|
+ >
|
|
|
+ {{ word.chs }}
|
|
|
+ </span>
|
|
|
+ <span v-else :key="`pinyin-${w}`" class="pinyin">
|
|
|
+ {{ word.pinyin }}
|
|
|
+ </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'
|
|
|
+ : '',
|
|
|
+ playing &&
|
|
|
+ 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="matrixCellClick(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
|
|
|
+ v-else-if="column.type === 'textBrackets'"
|
|
|
+ :key="`column-${i}-${j}`"
|
|
|
+ :class="[
|
|
|
+ `textBrackets-${themeColor}`,
|
|
|
+ (selectCell.row === i && selectCell.column === j) ||
|
|
|
+ (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)
|
|
|
+ ? 'playing'
|
|
|
+ : '',
|
|
|
+ column.isTitle ? 'title' : '',
|
|
|
+ ]"
|
|
|
+ @click="matrixCellClick(i, j)"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <span class="brackets-text">{{
|
|
|
+ column.text_brackets.brackets_outer
|
|
|
+ }}</span>
|
|
|
+ <span class="brackets"> [ </span>
|
|
|
+ <span class="brackets-text">{{
|
|
|
+ column.text_brackets.brackets_inner
|
|
|
+ }}</span>
|
|
|
+ <span class="brackets"> ]</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div :key="`end-${i}`" @mouseenter="clearSelectCell" />
|
|
|
+ </template>
|
|
|
+ <!-- 底部格子 -->
|
|
|
+ <div class="matrix-bottom" @mouseenter="clearSelectCell" />
|
|
|
+ <template v-for="(row, i) in curQue.voiceMatrix.matrix[0]">
|
|
|
+ <div :key="`bottom-${i}`" @mouseenter="clearSelectCell" />
|
|
|
+ </template>
|
|
|
+ <div class="matrix-bottom" @mouseenter="clearSelectCell" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="voicefull-bottom"
|
|
|
+ @mouseover="setBottomShow(true)"
|
|
|
+ @mouseleave="setBottomShow(false)"
|
|
|
+ >
|
|
|
+ <div :class="['voicefull-bottom-show', isBottomShow ? '' : 'hidden']">
|
|
|
+ <div class="bottom-left">
|
|
|
+ <soundrecorddiff
|
|
|
+ ref="Soundrecorddiff"
|
|
|
+ :bg-index="bgIndex"
|
|
|
+ :file-name="fileName"
|
|
|
+ :select-data="selectData"
|
|
|
+ @getSelectData="getSelectData"
|
|
|
+ @getWavblob="getWavblob"
|
|
|
+ @handleParentPlay="handleParentPlay"
|
|
|
+ @sentPause="sentPause"
|
|
|
+ @getRerordStatus="getRerordStatus"
|
|
|
+ @getMicrophoneStatus="getMicrophoneStatus"
|
|
|
+ @getPlayStatus="getPlayStatus"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ v-if="isShowCompare"
|
|
|
+ :class="['compare-box', bgIndex === 1 ? 'compare-box-white' : '']"
|
|
|
+ >
|
|
|
+ <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"
|
|
|
+ :cur-time="curTime"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VoiceMatrixFullscreenAudio from "./VoiceMatrixFullscreenAudio.vue";
|
|
|
+import Soundrecorddiff from "./Soundrecorddiff.vue";
|
|
|
+import AudioCompare from "./AudioCompareMatrix.vue";
|
|
|
+import Wordcard from "./components/Wordcard.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VoiceMatrixFullscreenAudio,
|
|
|
+ Soundrecorddiff,
|
|
|
+ AudioCompare,
|
|
|
+ Wordcard,
|
|
|
+ },
|
|
|
+ props: ["mp3", "curQue", "themeColor"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hzSize: 48,
|
|
|
+ bgIndex: 1,
|
|
|
+ item: null,
|
|
|
+ curTime: 0,
|
|
|
+ stopAudio: false,
|
|
|
+ isShowCompare: false,
|
|
|
+ clientY: 0,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ isShow: false,
|
|
|
+ curWordTime: 0,
|
|
|
+ playing: false,
|
|
|
+ isAuto: false,
|
|
|
+ autoCount: 0,
|
|
|
+ key: "isRepeat",
|
|
|
+ isKeyboard: true,
|
|
|
+ isTopShow: false,
|
|
|
+ isBottomShow: false,
|
|
|
+ isRecording: false,
|
|
|
+ recordPlaying: false,
|
|
|
+ fileName: "",
|
|
|
+ // 底色行、列
|
|
|
+ selectRow: -1,
|
|
|
+ selectColumn: -1,
|
|
|
+ // 行、列选中
|
|
|
+ selectedLine: {
|
|
|
+ type: "",
|
|
|
+ index: 0,
|
|
|
+ },
|
|
|
+ // 点击选中
|
|
|
+ selectCell: {
|
|
|
+ row: -1,
|
|
|
+ column: -1,
|
|
|
+ },
|
|
|
+ isRepeat: false,
|
|
|
+ // 跟读所需属性
|
|
|
+ wavblob: null,
|
|
|
+ isRecord: false,
|
|
|
+ matrixSelectLrc: null,
|
|
|
+ unWatch: null,
|
|
|
+ lrcArray: [],
|
|
|
+ cellTimer: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ hasSelectedCell() {
|
|
|
+ let { type, index } = this.selectedLine;
|
|
|
+ let { row, column } = this.selectCell;
|
|
|
+ return (type.length > 0 && index >= 0) || (row >= 0 && column >= 0);
|
|
|
+ },
|
|
|
+ selectData() {
|
|
|
+ let { type, index } = this.selectedLine;
|
|
|
+ let { row, column } = this.selectCell;
|
|
|
+ return {
|
|
|
+ type: type.length > 0 && index >= 0 ? type : "cell",
|
|
|
+ index,
|
|
|
+ row,
|
|
|
+ column,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 矩阵的行、列数从 0 开始
|
|
|
+ matrix() {
|
|
|
+ const matrixArr = this.curQue.voiceMatrix.matrix;
|
|
|
+ return {
|
|
|
+ rows: matrixArr.length - 1,
|
|
|
+ columns: matrixArr.length > 0 ? matrixArr[0].length - 1 : -1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isRecording(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.isBottomShow = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ recordPlaying(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.isBottomShow = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isShow(val) {
|
|
|
+ if (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.cardHeight = this.$refs.wordcard.offsetHeight;
|
|
|
+ if (this.screenHeight - this.clientY > this.cardHeight) {
|
|
|
+ this.top = this.clientY + 20;
|
|
|
+ } else {
|
|
|
+ this.top = this.clientY - this.cardHeight - 30;
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.addEventListener("keyup", this.handleKeyup);
|
|
|
+
|
|
|
+ [
|
|
|
+ "fullscreenchange",
|
|
|
+ "mozfullscreenchange",
|
|
|
+ "webkitfullscreenchange",
|
|
|
+ "msfullscreenchange",
|
|
|
+ ].forEach(event => {
|
|
|
+ document.addEventListener(event, this.handleFullscreen);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.removeEventListener("keyup", this.handleKeyup);
|
|
|
+ [
|
|
|
+ "fullscreenchange",
|
|
|
+ "mozfullscreenchange",
|
|
|
+ "webkitfullscreenchange",
|
|
|
+ "msfullscreenchange",
|
|
|
+ ].forEach(event => {
|
|
|
+ document.removeEventListener(event, this.handleFullscreen);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // #region
|
|
|
+ /** 语音矩阵方法开始 **/
|
|
|
+ // 鼠标移入移出
|
|
|
+ matrixCellMouseenter(i, j, type) {
|
|
|
+ if (type === "connection") {
|
|
|
+ this.selectRow = -1;
|
|
|
+ this.selectColumn = -1;
|
|
|
+ } else {
|
|
|
+ this.selectRow = i;
|
|
|
+ this.selectColumn = j;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ clearSelectCell() {
|
|
|
+ this.selectRow = -1;
|
|
|
+ this.selectColumn = -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 单击单元格
|
|
|
+ matrixCellClick(row, column) {
|
|
|
+ if (this.playing) this.handleParentPlay();
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ this.lrcArray = [];
|
|
|
+ if (row === this.selectCell.row && column === this.selectCell.column) {
|
|
|
+ this.selectCell = { row: -1, column: -1 };
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedLine = { type: "", index: -1 };
|
|
|
+ this.selectCell = { row, column };
|
|
|
+ this.handleChangeTime(
|
|
|
+ this.curQue.voiceMatrix.matrix[row][column].lrc_data
|
|
|
+ );
|
|
|
+ // 设置录音文件名
|
|
|
+ this.setRecordingFileName(row, column);
|
|
|
+ },
|
|
|
+
|
|
|
+ setRecordingFileName(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;
|
|
|
+ if (type === "textBrackets") {
|
|
|
+ this.fileName = `${text_brackets.brackets_outer}[${text_brackets.brackets_inner}]`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ checkboxMouseenter(isSelected, type) {
|
|
|
+ if (!isSelected) return this.clearSelectCell();
|
|
|
+ if (type === "row") this.selectColumn = -1;
|
|
|
+ if (type === "column") this.selectRow = -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选中行、列
|
|
|
+ selectRowOrColumn(index, type) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.lrcArray = [];
|
|
|
+ this.selectCell = { row: -1, column: -1 };
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ if (
|
|
|
+ this.selectedLine.type === type &&
|
|
|
+ this.selectedLine.index === index
|
|
|
+ ) {
|
|
|
+ this.selectedLine = { type: "", index: -1 };
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedLine = { type, index };
|
|
|
+ let number = index;
|
|
|
+ if (type === "column") {
|
|
|
+ this.curQue.voiceMatrix.matrix[index].forEach(({ type }, i) => {
|
|
|
+ if (i >= index) return;
|
|
|
+ if (type === "connection") number -= 1;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.fileName = `第 ${number + 1} ${type === "row" ? "行" : "列"}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ playAudio() {
|
|
|
+ if (!this.hasSelectedCell) return;
|
|
|
+ if (this.playing) return this.handleParentPlay();
|
|
|
+ if (this.lrcArray.length > 0) return this.$refs.audioLine.PlayAudio();
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+
|
|
|
+ this.lrcArray = [];
|
|
|
+ let { type, index } = this.selectedLine;
|
|
|
+ if (type.length > 0 && index >= 0 && type === "row") {
|
|
|
+ this.curQue.voiceMatrix.matrix[index].forEach(item => {
|
|
|
+ let data = this.getLrcData(item);
|
|
|
+ if (data) this.lrcArray.push(data);
|
|
|
+ });
|
|
|
+ if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type.length > 0 && index >= 0 && type === "column") {
|
|
|
+ this.curQue.voiceMatrix.matrix.forEach(item => {
|
|
|
+ let data = this.getLrcData(item[index]);
|
|
|
+ if (data) this.lrcArray.push(data);
|
|
|
+ });
|
|
|
+ if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let { row, column } = this.selectCell;
|
|
|
+ if (row >= 0 && column >= 0) {
|
|
|
+ this.handleChangeTime(
|
|
|
+ this.curQue.voiceMatrix.matrix[row][column].lrc_data
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ lrcPlay({ begin_time, end_time }, index) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
|
|
|
+ this.$refs.audioLine.PlayAudio();
|
|
|
+ if (end_time === -1) return;
|
|
|
+ let end = end_time / 1000 - 0.01;
|
|
|
+ this.unWatch = this.$watch("curTime", val => {
|
|
|
+ if (val >= end) {
|
|
|
+ if (!this.hasSelectedCell) return this.unWatch();
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(end);
|
|
|
+ this.unWatch();
|
|
|
+ let i = index + 1;
|
|
|
+ if (i < this.lrcArray.length) {
|
|
|
+ return this.lrcPlay(this.lrcArray[i], i);
|
|
|
+ }
|
|
|
+ // 多次循环
|
|
|
+ if (this.isRepeat) {
|
|
|
+ return this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ }
|
|
|
+ // 单次循环
|
|
|
+ if (this.isAuto && this.autoCount === 1) {
|
|
|
+ this.autoCount = 0;
|
|
|
+ this.lrcArray = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.isAuto && this.autoCount === 0) {
|
|
|
+ this.autoCount += 1;
|
|
|
+ return this.lrcPlay(this.lrcArray[0], 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.lrcArray = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 暂停音频播放
|
|
|
+ handleParentPlay() {
|
|
|
+ this.stopAudio = true;
|
|
|
+ },
|
|
|
+ // 音频播放时改变布尔值
|
|
|
+ handleChangeStopAudio() {
|
|
|
+ this.stopAudio = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime;
|
|
|
+ },
|
|
|
+
|
|
|
+ getWavblob(wavblob) {
|
|
|
+ this.wavblob = wavblob;
|
|
|
+ },
|
|
|
+
|
|
|
+ getSelectData({ type, index, row, column }) {
|
|
|
+ if (type === "") return;
|
|
|
+ let arr = [];
|
|
|
+ if (type.length > 0 && index >= 0 && type === "row") {
|
|
|
+ this.curQue.voiceMatrix.matrix[index].forEach(item => {
|
|
|
+ let data = this.getLrcData(item);
|
|
|
+ if (data) arr.push(data);
|
|
|
+ });
|
|
|
+ this.matrixSelectLrc = arr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type.length > 0 && index >= 0 && type === "column") {
|
|
|
+ this.curQue.voiceMatrix.matrix.forEach(item => {
|
|
|
+ let data = this.getLrcData(item[index]);
|
|
|
+ if (data) arr.push(data);
|
|
|
+ });
|
|
|
+ this.matrixSelectLrc = arr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === "cell" && row >= 0 && column >= 0) {
|
|
|
+ let lrcData = this.curQue.voiceMatrix.matrix[row][column].lrc_data;
|
|
|
+ if (lrcData.end_time === -1) lrcData.end_time = this.mp3Duration;
|
|
|
+ this.matrixSelectLrc = [lrcData];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getLrcData({ type, text, lrc_data }) {
|
|
|
+ if (
|
|
|
+ type === "SentenceSegwordChs" ||
|
|
|
+ type === "PinyinEnglish" ||
|
|
|
+ type === "textBrackets" ||
|
|
|
+ (type === "text" && text.length > 0)
|
|
|
+ ) {
|
|
|
+ if (lrc_data.end_time === -1) {
|
|
|
+ return {
|
|
|
+ begin_time: lrc_data.begin_time,
|
|
|
+ end_time: this.mp3Duration,
|
|
|
+ text: lrc_data.text,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return lrc_data;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+
|
|
|
+ sentPause(isRecord) {
|
|
|
+ this.isRecord = isRecord;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleChangeTime({ begin_time, end_time }) {
|
|
|
+ if (this.unWatch) this.unWatch();
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(begin_time / 1000);
|
|
|
+ this.$refs.audioLine.PlayAudio();
|
|
|
+ // 监听是否已到结束时间，为了选中效果 - 0.01
|
|
|
+ if (end_time === -1) return;
|
|
|
+ let end = end_time / 1000 - 0.01;
|
|
|
+ this.unWatch = this.$watch("curTime", val => {
|
|
|
+ if (val >= end) {
|
|
|
+ this.handleParentPlay();
|
|
|
+ this.$refs.audioLine.onTimeupdateTime(end);
|
|
|
+ this.unWatch();
|
|
|
+ this.unWatch = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 语音矩阵方法结束 **/
|
|
|
+ // #endregion
|
|
|
+
|
|
|
+ /* 全局事件处理 */
|
|
|
+ handleKeyup({ key }) {
|
|
|
+ if (!this.isKeyboard) return;
|
|
|
+ if (key === "Enter") {
|
|
|
+ this.$refs.Soundrecorddiff.microphone();
|
|
|
+ }
|
|
|
+ if (key === " ") {
|
|
|
+ this.hasSelectedCell
|
|
|
+ ? this.playAudio()
|
|
|
+ : this.$refs.audioLine.PlayAudio();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.hasSelectedCell) return;
|
|
|
+ if (key === "ArrowUp") {
|
|
|
+ let { type, index, row, column } = this.selectData;
|
|
|
+ if (type === "cell" && row > 0) {
|
|
|
+ return this.matrixCellClick(row - 1, column);
|
|
|
+ }
|
|
|
+ if ((type === "column" || type === "row") && index > 0) {
|
|
|
+ return this.selectRowOrColumn(index - 1, type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (key === "ArrowDown") {
|
|
|
+ let { type, index, row, column } = this.selectData;
|
|
|
+ let { rows } = this.matrix;
|
|
|
+ if (type === "cell" && row < rows) {
|
|
|
+ return this.matrixCellClick(row + 1, column);
|
|
|
+ }
|
|
|
+ if ((type === "column" || type === "row") && index < rows) {
|
|
|
+ return this.selectRowOrColumn(index + 1, type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (key === "ArrowLeft") {
|
|
|
+ let { type, row, column } = this.selectData;
|
|
|
+ if (type !== "cell") return;
|
|
|
+ if (column > 0) {
|
|
|
+ return this.matrixCellClick(row, column - 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (key === "ArrowRight") {
|
|
|
+ let { columns } = this.matrix;
|
|
|
+ let { type, row, column } = this.selectData;
|
|
|
+ if (type !== "cell") return;
|
|
|
+ if (column < columns) {
|
|
|
+ return this.matrixCellClick(row, column + 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleFullscreen() {
|
|
|
+ let isFullscreen = Boolean(
|
|
|
+ document.fullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen ||
|
|
|
+ document.webkitFullScreen ||
|
|
|
+ document.msFullScreen
|
|
|
+ );
|
|
|
+ if (!isFullscreen) this.changeFullScreen();
|
|
|
+ },
|
|
|
+
|
|
|
+ setTopShow(bool) {
|
|
|
+ this.isTopShow = bool;
|
|
|
+ },
|
|
|
+ setBottomShow(bool) {
|
|
|
+ if (!this.recordPlaying && !this.isRecording) {
|
|
|
+ this.isBottomShow = bool;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPlayStatus(bool) {
|
|
|
+ this.recordPlaying = bool;
|
|
|
+ },
|
|
|
+ setFontSize(type) {
|
|
|
+ if (this.hzSize >= 34 || this.hzSize <= 76) {
|
|
|
+ type === "+" ? (this.hzSize += 4) : (this.hzSize -= 4);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playChange(bool) {
|
|
|
+ this.playing = bool;
|
|
|
+ },
|
|
|
+ changeStatus(key) {
|
|
|
+ this[key] = !this[key];
|
|
|
+ },
|
|
|
+ setStatus() {
|
|
|
+ if (this.key === "isRepeat") {
|
|
|
+ if (this.isRepeat) {
|
|
|
+ this.isRepeat = false;
|
|
|
+ this.isAuto = true;
|
|
|
+ this.autoCount = 0;
|
|
|
+ this.key = "isAuto";
|
|
|
+ } else {
|
|
|
+ this.isRepeat = true;
|
|
|
+ this.key = "isRepeat";
|
|
|
+ }
|
|
|
+ } else if (this.key === "isAuto") {
|
|
|
+ if (this.isAuto) {
|
|
|
+ this.isRepeat = false;
|
|
|
+ this.isAuto = false;
|
|
|
+ this.key = "isRepeat";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getRerordStatus(bool) {
|
|
|
+ this.isShowCompare = bool;
|
|
|
+ },
|
|
|
+ getMicrophoneStatus(bool) {
|
|
|
+ this.isRecording = bool;
|
|
|
+ },
|
|
|
+
|
|
|
+ getCurCompareTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ getCurWordTime(curTime) {
|
|
|
+ this.curWordTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ changeBg(bgIndex) {
|
|
|
+ this.bgIndex = bgIndex;
|
|
|
+ },
|
|
|
+ pauseAudio() {
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach(item => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ this.pauseAudio();
|
|
|
+ this.$emit("exitFullscreen");
|
|
|
+ },
|
|
|
+ changeFullScreen() {
|
|
|
+ this.pauseAudio();
|
|
|
+ this.$emit("changeIsFull");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$select-color: #de4444;
|
|
|
+$border-color: #e6e6e6;
|
|
|
+
|
|
|
+$select-color-green: #24b99e;
|
|
|
+$select-color-green-bc: rgba(36, 185, 158, 0.25);
|
|
|
+$select-color-green-hover: #3dd4b8;
|
|
|
+$select-color-green-active: #1fa189;
|
|
|
+
|
|
|
+$select-color-brown: #bd8865;
|
|
|
+$select-color-brown-bc: rgba(189, 136, 101, 0.25);
|
|
|
+$select-color-brown-hover: #d6a687;
|
|
|
+$select-color-brown-active: #a37557;
|
|
|
+
|
|
|
+$dark-color: #ffc600;
|
|
|
+$dark-color-play: #fff2c6;
|
|
|
+
|
|
|
+.voicefull {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &.bg1 {
|
|
|
+ background: #fff;
|
|
|
+ color: #062211;
|
|
|
+
|
|
|
+ .playing {
|
|
|
+ background: url("../../../assets/NPC/pink-pencil.png") no-repeat left top /
|
|
|
+ 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 黑暗模式 强制替换颜色
|
|
|
+ &.bg2 {
|
|
|
+ background: linear-gradient(180deg, #274533 0%, #385f45 100%);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .column-wrapper {
|
|
|
+ &:hover {
|
|
|
+ color: $dark-color !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ color: $dark-color !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .playing {
|
|
|
+ color: $dark-color-play;
|
|
|
+ text-shadow: 0 0 0.1em, 0 0 0.3em;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.highlight-,
|
|
|
+ &.highlight-red,
|
|
|
+ &.highlight-brown,
|
|
|
+ &.highlight-green {
|
|
|
+ color: $dark-color !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-column-,
|
|
|
+ .matrix-checkbox-column-red,
|
|
|
+ .matrix-checkbox-column-brown,
|
|
|
+ .matrix-checkbox-column-green {
|
|
|
+ &.active {
|
|
|
+ border-color: $dark-color !important;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $dark-color !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-top {
|
|
|
+ .matrix-checkbox-row-,
|
|
|
+ .matrix-checkbox-row-green,
|
|
|
+ .matrix-checkbox-row-brown,
|
|
|
+ .matrix-checkbox-row-red {
|
|
|
+ &.active {
|
|
|
+ border-color: $dark-color !important;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $dark-color !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 40px;
|
|
|
+
|
|
|
+ .voicefull-top-hidden {
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ visibility: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .voicefull-top-show {
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ visibility: visible;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .top-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .select-bg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 96px;
|
|
|
+ height: 56px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 32px;
|
|
|
+
|
|
|
+ &.select-bg-blue {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ > div {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &.bg-white-box {
|
|
|
+ background: 0 0;
|
|
|
+ margin-right: 4px;
|
|
|
+ &.active {
|
|
|
+ background: #de4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bg-green-box {
|
|
|
+ background: #fff;
|
|
|
+ &.active {
|
|
|
+ background: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 100%;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ &.bg-white {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ &.bg-green {
|
|
|
+ background: linear-gradient(180deg, #274533 0%, #385f45 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-fontSize {
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 56px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 4px;
|
|
|
+ &.font-jian {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/jian-black.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/jian-white.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-white-disabled {
|
|
|
+ background: url("../../../assets/NPC/jian-white-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow-disabled {
|
|
|
+ background: url("../../../assets/NPC/jian-yellow-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.font-img {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/fontSize-black.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/fontSize-white.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.font-jia {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/jia-black.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/jia-white.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-white-disabled {
|
|
|
+ background: url("../../../assets/NPC/jia-white-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow-disabled {
|
|
|
+ background: url("../../../assets/NPC/jia-yellow-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-middle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .audio-box {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .op-btn {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 32px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ &.close-btn {
|
|
|
+ background: #274533;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ &.close-icon {
|
|
|
+ background: url("../../../assets/icon/cross-24-normal-black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &-white {
|
|
|
+ background: url("../../../assets/icon/cross-24-normal-white.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.auto-icon {
|
|
|
+ background: url("../../../assets/icon/Auto-24-next-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/Auto-24-next-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .keyboard-icon {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ // 语音矩阵
|
|
|
+
|
|
|
+ .matrix {
|
|
|
+ display: inline-grid;
|
|
|
+ gap: 20px 48px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ word-break: break-word;
|
|
|
+
|
|
|
+ %matrix-checkbox {
|
|
|
+ position: relative;
|
|
|
+ top: calc(50% - 5px);
|
|
|
+ display: block;
|
|
|
+ width: 0.5em;
|
|
|
+ height: 0.5em;
|
|
|
+ border: 1.5px solid #b0b0b0;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 0 auto;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: $select-color;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ box-sizing: content-box;
|
|
|
+ content: "";
|
|
|
+ border: 1px solid $select-color;
|
|
|
+ border-left: 0;
|
|
|
+ border-top: 0;
|
|
|
+ width: 0.1em;
|
|
|
+ height: 0.25em;
|
|
|
+ top: 18%;
|
|
|
+ left: 37%;
|
|
|
+ position: absolute;
|
|
|
+ transform: rotate(45deg) scaleY(1);
|
|
|
+ transition: transform 0.15s ease-in 0.05s;
|
|
|
+ transform-origin: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-row-,
|
|
|
+ .matrix-checkbox-row-red {
|
|
|
+ @extend %matrix-checkbox;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-row-green {
|
|
|
+ @extend %matrix-checkbox;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: $select-color-green-active;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $select-color-green-active;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-row-brown {
|
|
|
+ @extend %matrix-checkbox;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: $select-color-brown-active;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $select-color-brown-active;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ %matrix-checkbox-column,
|
|
|
+ .matrix-checkbox-column-,
|
|
|
+ .matrix-checkbox-column-red {
|
|
|
+ @extend %matrix-checkbox;
|
|
|
+
|
|
|
+ top: calc(50% - 7px);
|
|
|
+ right: -48px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-column-green {
|
|
|
+ @extend %matrix-checkbox-column;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: $select-color-green-active;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $select-color-green-active;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-checkbox-column-brown {
|
|
|
+ @extend %matrix-checkbox-column;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: $select-color-brown-active;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $select-color-brown-active;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .read {
|
|
|
+ background-color: #eaeaea;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-,
|
|
|
+ .highlight-red {
|
|
|
+ color: $select-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-green {
|
|
|
+ color: $select-color-green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-brown {
|
|
|
+ color: $select-color-brown;
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-wrapper {
|
|
|
+ padding: 4px;
|
|
|
+
|
|
|
+ %column {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 32px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #8c8c8c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color;
|
|
|
+ border-color: $select-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.title {
|
|
|
+ background-color: transparent;
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4px 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ %column-red,
|
|
|
+ .column-,
|
|
|
+ .column-red {
|
|
|
+ @extend %column;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ font-family: "GB-PINYINOK-B", "FZJCGFKTK";
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ display: inline-block;
|
|
|
+ content: "";
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-green {
|
|
|
+ @extend %column-red;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-green;
|
|
|
+ border-color: $select-color-green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .column-brown {
|
|
|
+ @extend %column-red;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-brown;
|
|
|
+ border-color: $select-color-brown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ %sentence,
|
|
|
+ .sentence-,
|
|
|
+ .sentence-red {
|
|
|
+ @extend %column;
|
|
|
+
|
|
|
+ display: inline-grid;
|
|
|
+ padding: 4px 12px;
|
|
|
+ column-gap: 8px;
|
|
|
+ justify-items: center;
|
|
|
+ justify-content: start;
|
|
|
+
|
|
|
+ > span {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ opacity: 0.45;
|
|
|
+ font-size: 0.75em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sentence-green {
|
|
|
+ @extend %sentence;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-green;
|
|
|
+ border-color: $select-color-green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sentence-brown {
|
|
|
+ @extend %sentence;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-brown;
|
|
|
+ border-color: $select-color-brown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .connection {
|
|
|
+ position: relative;
|
|
|
+ top: calc(50% - 1px);
|
|
|
+ height: 2px;
|
|
|
+ width: 16px;
|
|
|
+ margin: 0 -4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #252525;
|
|
|
+
|
|
|
+ &.highlight-bc-,
|
|
|
+ &.highlight-bc-red {
|
|
|
+ background-color: $select-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.highlight-bc-green {
|
|
|
+ background-color: $select-color-green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.highlight-bc-brown {
|
|
|
+ background-color: $select-color-brown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 拼音 + 文字
|
|
|
+ %pinyinEnglish,
|
|
|
+ .pinyinEnglish-,
|
|
|
+ .pinyinEnglish-red {
|
|
|
+ @extend %column;
|
|
|
+
|
|
|
+ .inside-wrapper {
|
|
|
+ padding: 4px 12px;
|
|
|
+
|
|
|
+ .pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-size: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .english {
|
|
|
+ font-family: "robot";
|
|
|
+ opacity: 0.45;
|
|
|
+ font-size: 0.75em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pinyinEnglish-green {
|
|
|
+ @extend %pinyinEnglish;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-green;
|
|
|
+ border-color: $select-color-green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pinyinEnglish-brown {
|
|
|
+ @extend %pinyinEnglish;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-brown;
|
|
|
+ border-color: $select-color-brown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ %textBrackets,
|
|
|
+ .textBrackets-,
|
|
|
+ .textBrackets-red {
|
|
|
+ @extend %column;
|
|
|
+
|
|
|
+ .brackets-text {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ }
|
|
|
+
|
|
|
+ .brackets {
|
|
|
+ font-size: 1em;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textBrackets-green {
|
|
|
+ @extend %textBrackets;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-green;
|
|
|
+ border-color: $select-color-green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textBrackets-brown {
|
|
|
+ @extend %textBrackets;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ color: $select-color-brown;
|
|
|
+ border-color: $select-color-brown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-bottom {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 40px;
|
|
|
+
|
|
|
+ .voicefull-bottom-show {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ visibility: visible;
|
|
|
+
|
|
|
+ &.hidden {
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .compare-box {
|
|
|
+ height: 56px;
|
|
|
+ padding: 16px 16px;
|
|
|
+
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0 40px 40px 0;
|
|
|
+ border-left: 0px solid rgba(0, 0, 0, 0.1);
|
|
|
+ &-white {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .bg1 {
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-Green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .bg1 {
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
