|
|
@@ -1,126 +1,16 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div v-if="sentList" :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)"></span>
|
|
|
- </div>
|
|
|
- <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
|
|
|
- <span :class="['bg-white', bgIndex == 0 ? 'active' : '']" @click="changeBg(0)"></span>
|
|
|
- </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('-')"
|
|
|
- ></span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span
|
|
|
- :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow-disabled' : 'font-jian-white-disabled']"
|
|
|
- ></span>
|
|
|
- </template>
|
|
|
- <span :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"></span>
|
|
|
- <template v-if="hzSize <= 76">
|
|
|
- <span :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']" @click="setFontSize('+')"></span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span
|
|
|
- :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow-disabled' : 'font-jia-white-disabled']"
|
|
|
- ></span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
- title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
|
|
|
- @click="changeStatus('isKeyboard')"
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- 'keyboard-icon',
|
|
|
- !isKeyboard ? 'disabled' : '',
|
|
|
- isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
|
|
|
- ]"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-middle">
|
|
|
- <template v-if="mp3">
|
|
|
- <AudioLineSentence
|
|
|
- :key="'sent' + curSentIndex"
|
|
|
- ref="audioLineSent"
|
|
|
- :mp3="mp3"
|
|
|
- :get-cur-time="getCurTime"
|
|
|
- :audio-id="'artPraAudioId' + curSentIndex"
|
|
|
- :stop-audio="stopAudio"
|
|
|
- :width="120"
|
|
|
- :hide-slider="true"
|
|
|
- :bg="bg"
|
|
|
- :ed="ed"
|
|
|
- :cur-time="curTime"
|
|
|
- :max-time="maxTime"
|
|
|
- :bg-index="bgIndex"
|
|
|
- :is-repeat="isRepeat"
|
|
|
- :is-auto="isAuto"
|
|
|
- @playChange="playChange"
|
|
|
- @rollSentence="rollSentence"
|
|
|
- />
|
|
|
- </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' : '',
|
|
|
- ]"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changePinyin">
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- 'pinyin-icon',
|
|
|
- !config.isShowPY ? 'disabled' : '',
|
|
|
- config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
|
|
|
- ]"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changeEN">
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- 'en-icon',
|
|
|
- !enwords ? 'disabled' : '',
|
|
|
- !config.isShowEN ? 'disabled' : '',
|
|
|
- config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
|
|
|
- ]"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <!-- <div
|
|
|
- :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
- title="点击收藏后可在“个人中心”-“我的收藏”查看"
|
|
|
- @click="handleColl"
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- 'coll-icon',
|
|
|
- !isCollArr[curSentIndex] ? 'disabled' : '',
|
|
|
- isCollArr[curSentIndex] && bgIndex == 1 ? 'coll-icon-yellow' : '',
|
|
|
- ]"
|
|
|
- ></span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="exitFullScreen">
|
|
|
- <span :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"></span>
|
|
|
+ <div class="voicefull-bottom" @mouseover="setTopShow(true)" @mouseleave="setTopShow(false)">
|
|
|
+ <div :class="[isTopShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
|
|
|
+ <div :class="['bottom-left', TaskModel == 'ANSWER' ? 'bottom-left-margin' : '']"></div>
|
|
|
+ <div :class="['page-count', bgIndex == 0 ? 'page-count-white' : 'page-count-green']">
|
|
|
+ {{ curSentIndex + 1 }}/{{ sentList.length }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="item" class="voicefull-content">
|
|
|
- <div class="vc-box" @mousemove="showPrevNext(true, 'isShowLeft')" @mouseleave="showPrevNext(false, 'isShowLeft')">
|
|
|
+ <div class="vc-box">
|
|
|
<div
|
|
|
:class="[
|
|
|
'vc-left vc-left-grey',
|
|
|
@@ -152,7 +42,7 @@
|
|
|
@dblclick="showWordDetail($event, pItem)"
|
|
|
@click="playWord(pItem)"
|
|
|
>
|
|
|
- <template v-if="NumberList.indexOf(pItem.chs) == -1">
|
|
|
+ <template>
|
|
|
<template v-if="!pItem.width">
|
|
|
<template v-if="pItem.isShow">
|
|
|
<template
|
|
|
@@ -172,7 +62,7 @@
|
|
|
fontSize: pySize + 'px',
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
<span
|
|
|
@@ -230,7 +120,7 @@
|
|
|
fontSize: pySize + 'px',
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
</span>
|
|
|
@@ -248,7 +138,7 @@
|
|
|
textAlign: left,
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ item[pIndex + 1].pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(item[pIndex + 1].pinyin) == -1 ? item[pIndex + 1].pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
<span
|
|
|
@@ -301,7 +191,7 @@
|
|
|
textAlign: left,
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ item[pIndex + 1].pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(item[pIndex + 1].pinyin) == -1 ? item[pIndex + 1].pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
</span>
|
|
|
@@ -322,7 +212,7 @@
|
|
|
textAlign: left,
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ item[pIndex + 2].pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(item[pIndex + 2].pinyin) == -1 ? item[pIndex + 2].pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
<span
|
|
|
@@ -375,30 +265,28 @@
|
|
|
textAlign: left,
|
|
|
height: pySize * 1.25 + 'px',
|
|
|
}"
|
|
|
- >{{ item[pIndex + 2].pinyin }}</span
|
|
|
+ >{{ NumberList.indexOf(item[pIndex + 2].pinyin) == -1 ? item[pIndex + 2].pinyin : '' }}</span
|
|
|
>
|
|
|
</template>
|
|
|
</span>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<template v-if="curQue.property.pinyin_position == 'top'">
|
|
|
- <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
|
|
|
- <span
|
|
|
- v-if="config.isShowPY"
|
|
|
- class="NNPE-pinyin"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
- pItem.className ? pItem.className : '',
|
|
|
- noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
- bgIndex == 1 ? 'font-white' : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontSize: pySize + 'px',
|
|
|
- height: pySize * 1.25 + 'px',
|
|
|
- }"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontSize: pySize + 'px',
|
|
|
+ height: pySize * 1.25 + 'px',
|
|
|
+ }"
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
<span
|
|
|
v-if="pItem.chs != '#'"
|
|
|
@@ -444,22 +332,20 @@
|
|
|
</template>
|
|
|
</span>
|
|
|
<template v-if="curQue.property.pinyin_position == 'bottom'">
|
|
|
- <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
|
|
|
- <span
|
|
|
- v-if="config.isShowPY"
|
|
|
- class="NNPE-pinyin bottom"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
- pItem.className ? pItem.className : '',
|
|
|
- bgIndex == 1 ? 'font-white' : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontSize: pySize + 'px',
|
|
|
- height: pySize * 1.25 + 'px',
|
|
|
- }"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin bottom"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontSize: pySize + 'px',
|
|
|
+ height: pySize * 1.25 + 'px',
|
|
|
+ }"
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
</template>
|
|
|
</template>
|
|
|
@@ -487,11 +373,7 @@
|
|
|
{{ enwords }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="vc-box-right"
|
|
|
- @mousemove="showPrevNext(true, 'isShowRight')"
|
|
|
- @mouseleave="showPrevNext(false, 'isShowRight')"
|
|
|
- >
|
|
|
+ <div class="vc-box-right">
|
|
|
<div
|
|
|
:class="[
|
|
|
'vc-left vc-right-grey',
|
|
|
@@ -503,48 +385,121 @@
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="voicefull-bottom" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
|
|
|
- <div :class="[isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
|
|
|
- <div :class="['bottom-left', TaskModel == 'ANSWER' ? 'bottom-left-margin' : '']">
|
|
|
- <Soundrecorddiff
|
|
|
- ref="Soundrecorddiff"
|
|
|
- :bg-index="bgIndex"
|
|
|
- :TaskModel="TaskModel"
|
|
|
- :answer-record-list="
|
|
|
- curQue.Bookanswer.practiceModel[curSentIndex] && curQue.Bookanswer.practiceModel[curSentIndex].recordList
|
|
|
- "
|
|
|
- :tm-index="curSentIndex"
|
|
|
- @handleWav="handleWav"
|
|
|
- :key="'Soundrecorddiff' + curSentIndex"
|
|
|
- @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
|
|
|
- :bg-index="bgIndex"
|
|
|
- type="full"
|
|
|
- :theme-color="themeColor"
|
|
|
- :index="curSentIndex"
|
|
|
- :sent-index="curSentIndex"
|
|
|
- :key="'mp3Compare' + curSentIndex"
|
|
|
- :url="curQue.mp3_list[0].id"
|
|
|
+ <div class="voicefull-top" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
|
|
|
+ <div :class="[isBottomShow ? '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)"></span>
|
|
|
+ </div>
|
|
|
+ <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
|
|
|
+ <span :class="['bg-white', bgIndex == 0 ? 'active' : '']" @click="changeBg(0)"></span>
|
|
|
+ </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('-')"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow-disabled' : 'font-jian-white-disabled']"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <span :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"></span>
|
|
|
+ <template v-if="hzSize <= 76">
|
|
|
+ <span :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']" @click="setFontSize('+')"></span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow-disabled' : 'font-jia-white-disabled']"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
|
|
|
+ @click="changeStatus('isKeyboard')"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'keyboard-icon',
|
|
|
+ !isKeyboard ? 'disabled' : '',
|
|
|
+ isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-middle">
|
|
|
+ <template v-if="mp3">
|
|
|
+ <AudioLineSentence
|
|
|
+ :key="'sent' + curSentIndex"
|
|
|
+ ref="audioLineSent"
|
|
|
+ :mp3="mp3"
|
|
|
+ :get-cur-time="getCurTime"
|
|
|
+ :audio-id="'artPraAudioId' + curSentIndex"
|
|
|
+ :stop-audio="stopAudio"
|
|
|
+ :width="120"
|
|
|
+ :hide-slider="true"
|
|
|
:bg="bg"
|
|
|
:ed="ed"
|
|
|
- :wavblob="wavblob"
|
|
|
- :get-cur-time="getCurCompareTime"
|
|
|
- :sent-pause="sentPause"
|
|
|
- :is-record="isRecord"
|
|
|
- :handle-change-stop-audio="handleChangeStopAudio"
|
|
|
- :get-play-status="getPlayStatus"
|
|
|
+ :cur-time="curTime"
|
|
|
+ :max-time="maxTime"
|
|
|
+ :bg-index="bgIndex"
|
|
|
+ :is-repeat="isRepeat"
|
|
|
+ :is-auto="isAuto"
|
|
|
+ @playChange="playChange"
|
|
|
+ @rollSentence="rollSentence"
|
|
|
/>
|
|
|
+ </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' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changePinyin">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'pinyin-icon',
|
|
|
+ !config.isShowPY ? 'disabled' : '',
|
|
|
+ config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="changeEN">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'en-icon',
|
|
|
+ !enwords ? 'disabled' : '',
|
|
|
+ !config.isShowEN ? 'disabled' : '',
|
|
|
+ config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
</div>
|
|
|
+ <!-- <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ title="点击收藏后可在“个人中心”-“我的收藏”查看"
|
|
|
+ @click="handleColl"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'coll-icon',
|
|
|
+ !isCollArr[curSentIndex] ? 'disabled' : '',
|
|
|
+ isCollArr[curSentIndex] && bgIndex == 1 ? 'coll-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
- <div :class="['page-count', bgIndex == 0 ? 'page-count-white' : 'page-count-green']">
|
|
|
- {{ curSentIndex + 1 }}/{{ sentList.length }}
|
|
|
+ <div :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']" @click="exitFullScreen">
|
|
|
+ <span :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -559,6 +514,7 @@
|
|
|
:mp3-url="wordPlayMp3"
|
|
|
:bg="wordbgs"
|
|
|
:ed="wordeds"
|
|
|
+ :attrib="attrib"
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -580,6 +536,18 @@
|
|
|
@changePlayStatus="changePlayStatus"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <template v-if="isNoteShow">
|
|
|
+ <div
|
|
|
+ ref="notecard"
|
|
|
+ class="NNPE-wordDetail"
|
|
|
+ :style="{
|
|
|
+ marginLeft: windowWidth > 642 ? '-321px' : '0px',
|
|
|
+ left: windowWidth > 642 ? '' : '0px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -588,8 +556,9 @@ import AudioLineSentence from './components/AudioLineSentence.vue';
|
|
|
import Soundrecorddiff from './components/Soundrecorddiff.vue';
|
|
|
import AudioCompare from './components/AudioCompare.vue';
|
|
|
import Wordcard from './components/Wordcard.vue';
|
|
|
+import Notecard from './components/Notecard.vue'; // 注释
|
|
|
import { LearnWebSI } from '@/api/app';
|
|
|
-import $ from 'jquery';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'VoiceFullScreen',
|
|
|
components: {
|
|
|
@@ -597,6 +566,7 @@ export default {
|
|
|
Soundrecorddiff,
|
|
|
AudioCompare,
|
|
|
Wordcard,
|
|
|
+ Notecard,
|
|
|
},
|
|
|
props: [
|
|
|
'sentList',
|
|
|
@@ -607,6 +577,7 @@ export default {
|
|
|
'noFont',
|
|
|
'themeColor',
|
|
|
'NNPENewWordList',
|
|
|
+ 'NNPEAnnotationList',
|
|
|
'currentTreeID',
|
|
|
'config',
|
|
|
'TaskModel',
|
|
|
@@ -632,8 +603,8 @@ export default {
|
|
|
stopAudio: false,
|
|
|
isRecord: false,
|
|
|
isShowCompare: false,
|
|
|
- isShowRight: false,
|
|
|
- isShowLeft: false,
|
|
|
+ isShowRight: true,
|
|
|
+ isShowLeft: true,
|
|
|
curSentIndex: 0,
|
|
|
oldHz: '',
|
|
|
hz: '',
|
|
|
@@ -664,6 +635,10 @@ export default {
|
|
|
enwords: '',
|
|
|
screenHeight: 0,
|
|
|
wordPlayMp3: '',
|
|
|
+ curNoteCon: null,
|
|
|
+ isNoteShow: false,
|
|
|
+ oldNoteNum: '',
|
|
|
+ windowWidth: window.innerWidth,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -727,6 +702,23 @@ export default {
|
|
|
// 深度观察监听
|
|
|
deep: true,
|
|
|
},
|
|
|
+ isNoteShow: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ if (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.cardHeight = _this.$refs.notecard.offsetHeight;
|
|
|
+ if (_this.screenHeight - _this.clientY > _this.cardHeight) {
|
|
|
+ _this.top = _this.clientY + 20;
|
|
|
+ } else {
|
|
|
+ _this.top = _this.clientY - _this.cardHeight - 30;
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {},
|
|
|
@@ -1166,47 +1158,80 @@ export default {
|
|
|
},
|
|
|
showWordDetail(e, item) {
|
|
|
let _this = this;
|
|
|
+
|
|
|
+ let noteIndex = '';
|
|
|
if (_this.TaskModel == 'ANSWER') {
|
|
|
return;
|
|
|
}
|
|
|
if (_this.chsFhList.indexOf(item.chs) > -1 || /^[a-zA-Z0-9]/.test(item.chs)) {
|
|
|
return;
|
|
|
}
|
|
|
- if (_this.oldHz != item.chs) {
|
|
|
- this.isShow = false;
|
|
|
+ if (_this.NumberList.indexOf(item.chs) > -1) {
|
|
|
+ for (let i = 0; i < _this.NumberList.length; i++) {
|
|
|
+ if (_this.NumberList[i] == item.chs) {
|
|
|
+ noteIndex = `${String(i)}`;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.showNoteDetail(e, noteIndex);
|
|
|
+ } else if (this.newWordList.indexOf(item.chs) > -1) {
|
|
|
+ if (_this.oldHz != item.chs) {
|
|
|
+ this.isShow = false;
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.hz = item.words ? item.words : item.chs;
|
|
|
+ _this.pinyin = item.pinyin;
|
|
|
+ _this.wordIndex = item.wordIndex;
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ _this.clientY = e.clientY;
|
|
|
+ let new_word = item.words ? item.words : item.chs;
|
|
|
+ _this.wordPlayMp3 = '';
|
|
|
+ _this.NNPENewWordList.forEach((itemn) => {
|
|
|
+ // items.forEach((itemn) => {
|
|
|
+ if (itemn.new_word === new_word) {
|
|
|
+ _this.wordbgs = itemn.bg;
|
|
|
+ _this.wordeds = itemn.ed;
|
|
|
+ _this.wordPlayMp3 = itemn.newWordMp3;
|
|
|
+ }
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ let left = e.clientX;
|
|
|
+ let width = 0;
|
|
|
+ if (item.chs.length == 1 || item.chs.length == 2) {
|
|
|
+ width = 304;
|
|
|
+ } else if (item.chs.length == 3 || item.chs.length == 4) {
|
|
|
+ width = 432;
|
|
|
+ } else if (item.chs.length > 3) {
|
|
|
+ width = 560;
|
|
|
+ }
|
|
|
+ // if (left - this.bodyLeft > this.contentWidth / 2) {
|
|
|
+ // _this.left = left - width + 10;
|
|
|
+ // } else {
|
|
|
+ _this.left = left - width / 2;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showNoteDetail(e, noteNum) {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.oldNoteNum !== noteNum) {
|
|
|
+ this.isNoteShow = false;
|
|
|
setTimeout(() => {
|
|
|
- _this.hz = item.words ? item.words : item.chs;
|
|
|
- _this.pinyin = item.pinyin;
|
|
|
- _this.wordIndex = item.wordIndex;
|
|
|
+ _this.noteNum = noteNum;
|
|
|
+ _this.handleNote(noteNum);
|
|
|
}, 50);
|
|
|
}
|
|
|
_this.clientY = e.clientY;
|
|
|
- let new_word = item.words ? item.words : item.chs;
|
|
|
- _this.wordPlayMp3 = '';
|
|
|
- _this.NNPENewWordList.forEach((itemn) => {
|
|
|
- // items.forEach((itemn) => {
|
|
|
- if (itemn.new_word === new_word) {
|
|
|
- _this.wordbgs = itemn.bg;
|
|
|
- _this.wordeds = itemn.ed;
|
|
|
- _this.wordPlayMp3 = itemn.newWordMp3;
|
|
|
- }
|
|
|
- // });
|
|
|
- });
|
|
|
let left = e.clientX;
|
|
|
- let width = 0;
|
|
|
- if (item.chs.length == 1 || item.chs.length == 2) {
|
|
|
- width = 304;
|
|
|
- } else if (item.chs.length == 3 || item.chs.length == 4) {
|
|
|
- width = 432;
|
|
|
- } else if (item.chs.length > 3) {
|
|
|
- width = 560;
|
|
|
+ let width = 642;
|
|
|
+ if (left - this.bodyLeft > this.contentWidth / 2) {
|
|
|
+ _this.left = left - width + 10;
|
|
|
+ } else if (left - 200 > 500) {
|
|
|
+ _this.left = 500;
|
|
|
+ } else {
|
|
|
+ _this.left = left - 200;
|
|
|
}
|
|
|
- // if (left - this.bodyLeft > this.contentWidth / 2) {
|
|
|
- // _this.left = left - width + 10;
|
|
|
- // } else {
|
|
|
- _this.left = left - width / 2;
|
|
|
- // }
|
|
|
},
|
|
|
changeWordCard(isShow) {
|
|
|
let _this = this;
|
|
|
@@ -1220,17 +1245,13 @@ export default {
|
|
|
let _this = this;
|
|
|
_this.isShow = true;
|
|
|
_this.word = null;
|
|
|
-
|
|
|
if (_this.newWordList.indexOf(val) > -1) {
|
|
|
for (let i = 0; i < this.NNPENewWordList.length; i++) {
|
|
|
let pItem = this.NNPENewWordList[i];
|
|
|
- for (let j = 0; j < pItem.length; j++) {
|
|
|
- let item = pItem[j];
|
|
|
- if (item.new_word.trim() == val.trim()) {
|
|
|
- let wordlist = val.split('');
|
|
|
- this.word = { list: wordlist, detail: item };
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (pItem.new_word.trim() == val.trim()) {
|
|
|
+ let wordlist = val.split('');
|
|
|
+ this.word = { list: wordlist, detail: pItem };
|
|
|
+ break;
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
@@ -1257,6 +1278,22 @@ export default {
|
|
|
getScreenHeight() {
|
|
|
this.screenHeight = window.innerHeight;
|
|
|
},
|
|
|
+ // 处理注释数据
|
|
|
+ handleNote(val) {
|
|
|
+ let _this = this;
|
|
|
+ _this.isNoteShow = true;
|
|
|
+ _this.oldNoteNum = val;
|
|
|
+ let noteIndex = Number(val);
|
|
|
+ if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
|
|
|
+ _this.curNoteCon = _this.NNPEAnnotationList[noteIndex] ? _this.NNPEAnnotationList[noteIndex] : null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeCard(isShow) {
|
|
|
+ let _this = this;
|
|
|
+ _this.isNoteShow = isShow;
|
|
|
+ _this.oldNoteNum = '';
|
|
|
+ _this.noteNum = '';
|
|
|
+ },
|
|
|
}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
@@ -1274,7 +1311,8 @@ export default {
|
|
|
top: 50%;
|
|
|
z-index: 9999;
|
|
|
margin-top: -196px;
|
|
|
- box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
|
|
|
+
|
|
|
+ // box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
|
|
|
}
|
|
|
|
|
|
&.bg1 {
|
|
|
@@ -1944,6 +1982,22 @@ export default {
|
|
|
position: absolute;
|
|
|
left: -1000px;
|
|
|
}
|
|
|
+
|
|
|
+.NNPE-wordDetail {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ z-index: 116;
|
|
|
+ max-width: 100%;
|
|
|
+ margin-top: -196px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ // box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
|
|
|
+
|
|
|
+ // width: 260px;
|
|
|
+ // height: 200px;
|
|
|
+ // background: #cc0;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.NPC-Big-Book-preview-green {
|
zq