|
|
@@ -37,242 +37,501 @@
|
|
|
></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <template v-if="resArr.length > 0">
|
|
|
- <div class="NPC-sentences-list">
|
|
|
- <div
|
|
|
- :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
|
|
|
- v-for="(item, index) in resArr"
|
|
|
- :key="'detail' + index"
|
|
|
- >
|
|
|
- <div class="wordsList-box">
|
|
|
- <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
|
|
|
- <div>
|
|
|
- <div
|
|
|
- class="NNPE-words"
|
|
|
- v-for="(pItem, pIndex) in item.wordsList"
|
|
|
- :key="'wordsList' + pIndex"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.wordIndex == 0
|
|
|
- ? 'textLeft'
|
|
|
- : 'textCenter',
|
|
|
- pItem.chs == '“' ? 'textRight' : '',
|
|
|
- ]"
|
|
|
- @click="showWordDetail($event, pItem.chs)"
|
|
|
- >
|
|
|
- <template v-if="!pItem.width">
|
|
|
- <template v-if="pItem.isShow">
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- item.wordsList[pIndex + 1] &&
|
|
|
- item.wordsList[pIndex + 1].chs &&
|
|
|
- (chsFhList.indexOf(item.wordsList[pIndex + 1].chs) >
|
|
|
- -1 ||
|
|
|
- NumberList.indexOf(item.wordsList[pIndex + 1].chs) >
|
|
|
- -1)
|
|
|
- "
|
|
|
- >
|
|
|
- <span class="NNPE-words-box">
|
|
|
+ <template v-if="!config.isHasEN||(config.isHasEN&&!config.isShowEN)">
|
|
|
+ <template v-if="resArr.length > 0">
|
|
|
+ <div class="NPC-sentences-list">
|
|
|
+ <div
|
|
|
+ :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
|
|
|
+ v-for="(item, index) in resArr"
|
|
|
+ :key="'detail' + index"
|
|
|
+ >
|
|
|
+ <div class="wordsList-box">
|
|
|
+ <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="NNPE-words"
|
|
|
+ v-for="(pItem, pIndex) in item.wordsList"
|
|
|
+ :key="'wordsList' + pIndex"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.wordIndex == 0
|
|
|
+ ? 'textLeft'
|
|
|
+ : 'textCenter',
|
|
|
+ pItem.chs == '“' ? 'textRight' : '',
|
|
|
+ ]"
|
|
|
+ @click="showWordDetail($event, pItem.chs)"
|
|
|
+ >
|
|
|
+ <template v-if="!pItem.width">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 1] &&
|
|
|
+ item.wordsList[pIndex + 1].chs &&
|
|
|
+ (chsFhList.indexOf(item.wordsList[pIndex + 1].chs) >
|
|
|
+ -1 ||
|
|
|
+ NumberList.indexOf(item.wordsList[pIndex + 1].chs) >
|
|
|
+ -1)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <span
|
|
|
+ v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'NNPE-chs',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs)"
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1
|
|
|
+ ? pItem.chs
|
|
|
+ : "" }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <span
|
|
|
+ v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
+ -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].pinyin
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="NNPE-chs" style="text-align: left" @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].chs
|
|
|
+ )
|
|
|
+ ">{{
|
|
|
+ NumberList.indexOf(
|
|
|
+ item.wordsList[pIndex + 1].pinyin
|
|
|
+ ) == -1
|
|
|
+ ? item.wordsList[pIndex + 1].chs
|
|
|
+ : ""
|
|
|
+ }}</span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
+ -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].pinyin
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
+ class="NNPE-words-box"
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 2] &&
|
|
|
+ item.wordsList[pIndex + 2].chs &&
|
|
|
+ (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) >
|
|
|
+ -1 ||
|
|
|
+ NumberList.indexOf(
|
|
|
+ item.wordsList[pIndex + 2].chs
|
|
|
+ ) > -1)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
+ -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].pinyin
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ item.wordsList[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="NNPE-chs" style="text-align: left" @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].chs
|
|
|
+ )
|
|
|
+ ">{{
|
|
|
+ NumberList.indexOf(
|
|
|
+ item.wordsList[pIndex + 2].pinyin
|
|
|
+ ) == -1
|
|
|
+ ? item.wordsList[pIndex + 2].chs
|
|
|
+ : ""
|
|
|
+ }}</span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
+ "
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
|
|
|
+ -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].pinyin
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ item.wordsList[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
pItem.className ? pItem.className : '',
|
|
|
noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
>
|
|
|
<span
|
|
|
- :class="[
|
|
|
- 'NNPE-chs',
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.chs)"
|
|
|
- >{{ NumberList.indexOf(pItem.pinyin) == -1
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs)"
|
|
|
+ >{{ NumberList.indexOf(pItem.pinyin) == -1
|
|
|
? pItem.chs
|
|
|
: "" }}</span
|
|
|
>
|
|
|
<span
|
|
|
- v-if="
|
|
|
- curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
- "
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
+ v-if="curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
pItem.className ? pItem.className : '',
|
|
|
noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
>
|
|
|
- </span>
|
|
|
- <span class="NNPE-words-box">
|
|
|
- <span
|
|
|
- v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
- -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- style="text-align: left"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 1].pinyin
|
|
|
- )
|
|
|
- "
|
|
|
- >{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
- >
|
|
|
- <span class="NNPE-chs" style="text-align: left" @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 1].chs
|
|
|
- )
|
|
|
- ">{{
|
|
|
- NumberList.indexOf(
|
|
|
- item.wordsList[pIndex + 1].pinyin
|
|
|
- ) == -1
|
|
|
- ? item.wordsList[pIndex + 1].chs
|
|
|
- : ""
|
|
|
- }}</span>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
- "
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
- -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- style="text-align: left"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 1].pinyin
|
|
|
- )
|
|
|
- "
|
|
|
- >{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
-
|
|
|
- <span
|
|
|
- class="NNPE-words-box"
|
|
|
- v-if="
|
|
|
- item.wordsList[pIndex + 2] &&
|
|
|
- item.wordsList[pIndex + 2].chs &&
|
|
|
- (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) >
|
|
|
- -1 ||
|
|
|
- NumberList.indexOf(
|
|
|
- item.wordsList[pIndex + 2].chs
|
|
|
- ) > -1)
|
|
|
- "
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(item.wordsList[pIndex + 1].pinyin) >
|
|
|
- -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- style="text-align: left"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 2].pinyin
|
|
|
- )
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ height: pItem.height + 'px',
|
|
|
+ width: pItem.width + 'px',
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="resObj">
|
|
|
+ <!-- -->
|
|
|
+ <div class="NPC-sentences-list">
|
|
|
+ <div
|
|
|
+ :class="['NNPE-detail-box']"
|
|
|
+ v-for="(item, index) in resObj.sentList"
|
|
|
+ :key="'detail' + index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="['NNPE-details']"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="item.enwords && config.isShowEN && curQue.enPosition && curQue.enPosition == 'top'"
|
|
|
+ :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
|
|
|
+ >
|
|
|
+ {{ item.enwords }}
|
|
|
+ </div>
|
|
|
+ <div style="clear: both; overflow: hidden"></div>
|
|
|
+ <div
|
|
|
+ class="NNPE-words"
|
|
|
+ v-for="(pItem, pIndex) in item.sentArr"
|
|
|
+ :key="'wordsList' + pIndex"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.wordIndex == 0
|
|
|
+ ? 'textLeft'
|
|
|
+ : 'textCenter',
|
|
|
+ pItem.chs == '“' ? 'textRight' : '',
|
|
|
+ ]"
|
|
|
+ @click="showWordDetail($event, pItem.chs)"
|
|
|
+ >
|
|
|
+ <template v-if="!pItem.width">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ item.sentArr[pIndex + 1] &&
|
|
|
+ item.sentArr[pIndex + 1].chs &&
|
|
|
+ (chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1||
|
|
|
+ NumberList.indexOf(item.sentArr[pIndex + 1].chs) >
|
|
|
+ -1)
|
|
|
"
|
|
|
- >{{ item.wordsList[pIndex + 2].pinyin }}</span
|
|
|
>
|
|
|
- <span class="NNPE-chs" style="text-align: left" @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 2].chs
|
|
|
- )
|
|
|
- ">{{
|
|
|
- NumberList.indexOf(
|
|
|
- item.wordsList[pIndex + 2].pinyin
|
|
|
- ) == -1
|
|
|
- ? item.wordsList[pIndex + 2].chs
|
|
|
- : ""
|
|
|
- }}</span>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin
|
|
|
- "
|
|
|
- :class="[
|
|
|
- 'NNPE-pinyin',
|
|
|
- noFont.indexOf(item.wordsList[pIndex + 2].pinyin) >
|
|
|
- -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- style="text-align: left"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 2].pinyin
|
|
|
- )
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
+
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs)"
|
|
|
+ >{{ pItem.chs[wIndex] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
|
|
|
+ >{{ item.sentArr[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span class="NNPE-chs" style="text-align: left">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 1].chs)"
|
|
|
+ >
|
|
|
+ {{ item.sentArr[pIndex + 1].chs }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(item.sentArr[pIndex + 1].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
|
|
|
+ >{{ item.sentArr[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="NNPE-words-box"
|
|
|
+ v-if="
|
|
|
+ item.sentArr[pIndex + 2] &&
|
|
|
+ item.sentArr[pIndex + 2].chs &&
|
|
|
+ chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
|
|
|
"
|
|
|
- >{{ item.wordsList[pIndex + 2].pinyin }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
+ >
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 2].pinyin)"
|
|
|
+ >{{ item.sentArr[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span class="NNPE-chs" style="text-align: left">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 2].chs)"
|
|
|
+ >
|
|
|
+ {{ item.sentArr[pIndex + 2].chs }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(item.sentArr[pIndex + 2].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ style="text-align: left"
|
|
|
+ @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
|
|
|
+ >{{ item.sentArr[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding && config.isShowPY
|
|
|
+ ? 'padding'
|
|
|
+ : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
+
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs)"
|
|
|
+ >{{ pItem.chs[wIndex] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ sentIndex == index ? 'wordBlank' : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <span
|
|
|
- v-if="curQue.pyPosition == 'top' && config.isShowPY && item.dhaspinyin"
|
|
|
- class="NNPE-pinyin"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
- pItem.className ? pItem.className : '',
|
|
|
- noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
- newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.chs)"
|
|
|
- >{{ NumberList.indexOf(pItem.pinyin) == -1
|
|
|
- ? pItem.chs
|
|
|
- : "" }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="curQue.pyPosition == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
- class="NNPE-pinyin"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
- pItem.className ? pItem.className : '',
|
|
|
- noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- @click.stop="viewNotes($event, pItem.pinyin)"
|
|
|
- >{{ pItem.pinyin }}</span
|
|
|
- >
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ height: pItem.height + 'px',
|
|
|
+ width: pItem.width + 'px',
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
</template>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- height: pItem.height + 'px',
|
|
|
- width: pItem.width + 'px',
|
|
|
- }"
|
|
|
- ></span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div style="clear: both; overflow: hidden"></div>
|
|
|
+ <div
|
|
|
+ v-if="item.enwords && config.isShowEN && (!curQue.enPosition || curQue.enPosition && curQue.enPosition == 'bottom')"
|
|
|
+ :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
|
|
|
+ >
|
|
|
+ {{ item.enwords }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
<template v-if="isShow">
|
|
|
<div
|
|
|
@@ -330,6 +589,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
resArr: [],
|
|
|
+ resObj: null,
|
|
|
curTime: 0, //单位s
|
|
|
chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；", "#"],
|
|
|
enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
|
|
|
@@ -374,6 +634,7 @@ export default {
|
|
|
oldNoteNum: "",
|
|
|
clientY: 0,
|
|
|
clickType: "",
|
|
|
+ sentIndex: -1,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -510,6 +771,63 @@ export default {
|
|
|
this.articleImg[item.imgNumber] = item.id;
|
|
|
});
|
|
|
}
|
|
|
+ let resArrs = [],
|
|
|
+ sentArrTotal = [],
|
|
|
+ timeArr = [];
|
|
|
+ let wordTimeList = curQue.wordTime;
|
|
|
+ curQue.detail.forEach((dItem, dIndex) => {
|
|
|
+ dItem.wordsList.forEach((sItem, sIndex) => {
|
|
|
+ let sentArr = [];
|
|
|
+
|
|
|
+ sItem.forEach((wItem, wIndex) => {
|
|
|
+ let startIndex =
|
|
|
+ wIndex == 0
|
|
|
+ ? 0
|
|
|
+ : sentArr[wIndex - 1].startIndex +
|
|
|
+ sentArr[wIndex - 1].chs.length;
|
|
|
+ let endIndex =
|
|
|
+ wIndex == 0
|
|
|
+ ? wItem.chs.length
|
|
|
+ : sentArr[wIndex - 1].endIndex + wItem.chs.length;
|
|
|
+ // this.judgePad(sItem, wItem, wIndex);
|
|
|
+ this.mergeWordSymbols(wItem);
|
|
|
+ let obj = {
|
|
|
+ paraIndex: dIndex, //段落索引
|
|
|
+ sentIndex: sIndex, //在段落中句子索引
|
|
|
+ wordIndex: wIndex, //单词的索引
|
|
|
+ pinyin: wItem.pinyin,
|
|
|
+ chs: wItem.chs,
|
|
|
+ padding: true,
|
|
|
+ className: wItem.className,
|
|
|
+ isShow: wItem.isShow,
|
|
|
+ startIndex: startIndex,
|
|
|
+ endIndex: endIndex,
|
|
|
+ leg: wItem.chs.length,
|
|
|
+ timeList: [],
|
|
|
+ };
|
|
|
+ sentArr.push(obj);
|
|
|
+ });
|
|
|
+ let objs = {
|
|
|
+ sentArr: sentArr,
|
|
|
+ enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex],
|
|
|
+ };
|
|
|
+ sentArrTotal.push(sentArr);
|
|
|
+ resArrs.push(objs);
|
|
|
+ });
|
|
|
+ timeArr.push(dItem.timeList);
|
|
|
+ });
|
|
|
+ if (wordTimeList && wordTimeList.length > 0) {
|
|
|
+ this.mergeWordTime(sentArrTotal, wordTimeList);
|
|
|
+ }
|
|
|
+ let timeList = [];
|
|
|
+ timeArr.forEach((item) => {
|
|
|
+ item.forEach((aItem) => {
|
|
|
+ if (timeList.indexOf(aItem) < 0) {
|
|
|
+ timeList.push(aItem);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.resObj = { sentList: resArrs, timeList: timeList };
|
|
|
},
|
|
|
//词和标点合一起
|
|
|
mergeWordSymbol(sItem, wItem, curIndex) {
|
|
|
@@ -534,6 +852,24 @@ export default {
|
|
|
// wItem.className = "textLeft";
|
|
|
// }
|
|
|
},
|
|
|
+ mergeWordSymbols(wItem) {
|
|
|
+ if (this.chsFhList.indexOf(wItem.chs) > -1 ||
|
|
|
+ this.NumberList.indexOf(wItem.chs) > -1) {
|
|
|
+ wItem.isShow = false;
|
|
|
+ } else {
|
|
|
+ wItem.isShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mergeWordTime(resArr, wordTimeList) {
|
|
|
+ resArr.forEach((item, index) => {
|
|
|
+ let wordsResultList = wordTimeList[index].wordsResultList;
|
|
|
+ item.forEach((wItem) => {
|
|
|
+ let startIndex = wItem.startIndex;
|
|
|
+ let endIndex = wItem.endIndex;
|
|
|
+ wItem.timeList = wordsResultList.slice(startIndex, endIndex);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
//判断是否有padding
|
|
|
judgePad(sItem, wItem, curIndex) {
|
|
|
let leg = sItem.length;
|
|
|
@@ -792,7 +1128,7 @@ export default {
|
|
|
&.noFont {
|
|
|
font-family: initial;
|
|
|
}
|
|
|
- height: 21px;
|
|
|
+ height: 22px;
|
|
|
&.textLeft {
|
|
|
text-align: left;
|
|
|
}
|
|
|
@@ -828,7 +1164,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
|
|
|
|
|
- height: 21px;
|
|
|
+ height: 22px;
|
|
|
&.noFont {
|
|
|
font-family: initial;
|
|
|
}
|
|
|
@@ -891,5 +1227,117 @@ export default {
|
|
|
// height: 200px;
|
|
|
// background: #cc0;
|
|
|
}
|
|
|
+ .NNPE-detail-box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 24px 8px;
|
|
|
+ &.active {
|
|
|
+ background: rgba(222, 68, 68, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+.NNPE-details {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .NNPE-words {
|
|
|
+ float: left;
|
|
|
+ &-box {
|
|
|
+ float: left;
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ &.NNPE-pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ height: 20px;
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.NNPE-chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.active {
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // &.padding {
|
|
|
+ // padding-right: 6px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.textCenter {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &.textRight {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ &.NNPE-pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ height: 20px;
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.NNPE-chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.active {
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.padding {
|
|
|
+ padding: 0 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .enwords {
|
|
|
+ font-family: "robot";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ padding-left: 3px;
|
|
|
+ word-break: break-word;
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
natasha