|
|
@@ -13,205 +13,207 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-inner" :style="{ background: themeList[sentenceTheme].contentBg }">
|
|
|
- <template v-for="(itemC, indexC) in data[sentenceActive].wordsResultList">
|
|
|
- <div
|
|
|
- :key="indexC"
|
|
|
- :class="[
|
|
|
- 'content-item',
|
|
|
- (activeWordIndex === null &&
|
|
|
- currentTime * 1000 <= data[sentenceActive].ed &&
|
|
|
- currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
|
|
|
- activeWordIndex === indexC
|
|
|
- ? 'active'
|
|
|
- : '',
|
|
|
- indexC === 0 ? 'text-left' : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- color:
|
|
|
+ <template v-if="data[sentenceActive] && data[sentenceActive].wordsResultList">
|
|
|
+ <template v-for="(itemC, indexC) in data[sentenceActive].wordsResultList">
|
|
|
+ <div
|
|
|
+ :key="indexC"
|
|
|
+ :class="[
|
|
|
+ 'content-item',
|
|
|
(activeWordIndex === null &&
|
|
|
currentTime * 1000 <= data[sentenceActive].ed &&
|
|
|
currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
|
|
|
activeWordIndex === indexC
|
|
|
- ? themeList[sentenceTheme].sentenceActiveColor
|
|
|
- : themeList[sentenceTheme].sentenceColor,
|
|
|
- fontSize: fontSize + 'px',
|
|
|
- lineHeight: fontSize + 8 + 'px',
|
|
|
- }"
|
|
|
- @click="palyWord(indexC)"
|
|
|
- >
|
|
|
- <!-- {{ itemC.wordsName || itemC.onebest }} -->
|
|
|
- <template v-if="itemC.isShow">
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- data[sentenceActive].wordsResultList[indexC + 1] &&
|
|
|
- data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
|
|
|
- chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
|
|
|
- "
|
|
|
- >
|
|
|
- <span class="NNPE-words-box">
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
- :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? itemC.pinyin_up
|
|
|
- : itemC.pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span class="NNPE-chs">
|
|
|
- <template>
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- fontFamily: itemC.fontFamily,
|
|
|
- }"
|
|
|
- >{{ itemC.wordsName }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
- :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? itemC.pinyin_up
|
|
|
- : itemC.pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
- <span class="NNPE-words-box">
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- style="text-align: left"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
|
|
|
- : data[sentenceActive].wordsResultList[indexC + 1].pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :style="{
|
|
|
- fontFamily: data[sentenceActive].wordsResultList[indexC + 1].fontFamily,
|
|
|
- }"
|
|
|
- >{{ data[sentenceActive].wordsResultList[indexC + 1].wordsName }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- style="text-align: left"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
|
|
|
- : data[sentenceActive].wordsResultList[indexC + 1].pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
- <span
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
+ indexC === 0 ? 'text-left' : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ (activeWordIndex === null &&
|
|
|
+ currentTime * 1000 <= data[sentenceActive].ed &&
|
|
|
+ currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
|
|
|
+ activeWordIndex === indexC
|
|
|
+ ? themeList[sentenceTheme].sentenceActiveColor
|
|
|
+ : themeList[sentenceTheme].sentenceColor,
|
|
|
+ fontSize: fontSize + 'px',
|
|
|
+ lineHeight: fontSize + 8 + 'px',
|
|
|
+ }"
|
|
|
+ @click="palyWord(indexC)"
|
|
|
+ >
|
|
|
+ <!-- {{ itemC.wordsName || itemC.onebest }} -->
|
|
|
+ <template v-if="itemC.isShow">
|
|
|
+ <template
|
|
|
v-if="
|
|
|
- data[sentenceActive].wordsResultList[indexC + 2] &&
|
|
|
- data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
|
|
|
- chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
|
|
|
+ data[sentenceActive].wordsResultList[indexC + 1] &&
|
|
|
+ data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
|
|
|
+ chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
|
|
|
"
|
|
|
- class="NNPE-words-box"
|
|
|
>
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- style="text-align: left"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
|
|
|
- : data[sentenceActive].wordsResultList[indexC + 2].pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :style="{
|
|
|
- fontFamily: data[sentenceActive].wordsResultList[indexC + 2].fontFamily,
|
|
|
- }"
|
|
|
- >{{ data[sentenceActive].wordsResultList[indexC + 2].wordsName }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- style="text-align: left"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
|
|
|
- : data[sentenceActive].wordsResultList[indexC + 2].pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span class="NNPE-words-box">
|
|
|
- <span
|
|
|
- v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
- class="NNPE-pinyin"
|
|
|
- :class="[
|
|
|
- itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
|
|
|
- noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? itemC.pinyin_up
|
|
|
- : itemC.pinyin
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span class="NNPE-chs">
|
|
|
- <template>
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- fontFamily: itemC.fontFamily,
|
|
|
- }"
|
|
|
- >{{ itemC.wordsName }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
+ :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? itemC.pinyin_up
|
|
|
+ : itemC.pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span class="NNPE-chs">
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ fontFamily: itemC.fontFamily,
|
|
|
+ }"
|
|
|
+ >{{ itemC.wordsName }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
+ :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? itemC.pinyin_up
|
|
|
+ : itemC.pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ style="text-align: left"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
|
|
|
+ : data[sentenceActive].wordsResultList[indexC + 1].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :style="{
|
|
|
+ fontFamily: data[sentenceActive].wordsResultList[indexC + 1].fontFamily,
|
|
|
+ }"
|
|
|
+ >{{ data[sentenceActive].wordsResultList[indexC + 1].wordsName }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ style="text-align: left"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
|
|
|
+ : data[sentenceActive].wordsResultList[indexC + 1].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
</span>
|
|
|
<span
|
|
|
- v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
- class="NNPE-pinyin"
|
|
|
- :class="[
|
|
|
- itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
|
|
|
- noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
- >{{
|
|
|
- property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
- ? itemC.pinyin_up
|
|
|
- : itemC.pinyin
|
|
|
- }}</span
|
|
|
+ v-if="
|
|
|
+ data[sentenceActive].wordsResultList[indexC + 2] &&
|
|
|
+ data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
|
|
|
+ chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
|
|
|
+ "
|
|
|
+ class="NNPE-words-box"
|
|
|
>
|
|
|
- </span>
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ style="text-align: left"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
|
|
|
+ : data[sentenceActive].wordsResultList[indexC + 2].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :style="{
|
|
|
+ fontFamily: data[sentenceActive].wordsResultList[indexC + 2].fontFamily,
|
|
|
+ }"
|
|
|
+ >{{ data[sentenceActive].wordsResultList[indexC + 2].wordsName }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
|
|
|
+ : data[sentenceActive].wordsResultList[indexC + 2].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
|
|
|
+ noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? itemC.pinyin_up
|
|
|
+ : itemC.pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span class="NNPE-chs">
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ fontFamily: itemC.fontFamily,
|
|
|
+ }"
|
|
|
+ >{{ itemC.wordsName }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
|
|
|
+ noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: fontSize - 6 + 'px' }"
|
|
|
+ >{{
|
|
|
+ property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
|
|
|
+ ? itemC.pinyin_up
|
|
|
+ : itemC.pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
|
|
|
+ {{ multilingualTextList[sentenceActive] }}
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
|
|
|
- {{ multilingualTextList[sentenceActive] }}
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="sentence-bottom">
|
|
|
<div class="fontsize-box" :style="{ background: themeList[sentenceTheme].bottomBg }">
|