|
|
@@ -217,73 +217,166 @@
|
|
|
"
|
|
|
>{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- :style="{
|
|
|
- height:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- }"
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="pItem.matchNotesObj.con"
|
|
|
>
|
|
|
- <template>
|
|
|
- <span
|
|
|
- v-for="(wItem, wIndex) in pItem.leg"
|
|
|
- :key="'ci' + wIndex + pIndex + index"
|
|
|
- :class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[wIndex] &&
|
|
|
- curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime < item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontFamily: pItem.config.fontFamily,
|
|
|
- textDecoration: pItem.config.textDecoration,
|
|
|
- borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
- fontWeight: pItem.config.fontWeight,
|
|
|
- height:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- color:
|
|
|
+ <div
|
|
|
+ slot="content"
|
|
|
+ :style="{
|
|
|
+ color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '',
|
|
|
+ }"
|
|
|
+ v-html="pItem.matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
pItem.chstimeList &&
|
|
|
pItem.chstimeList[wIndex] &&
|
|
|
curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime < item.timeList[pItem.sentIndex].ed &&
|
|
|
- attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
- ? pItem.matchNotesObj.notesColor
|
|
|
- : pItem.config.color,
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- pItem.chs[wIndex],
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
- item,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
- pItem,
|
|
|
- )
|
|
|
- "
|
|
|
- >{{
|
|
|
- NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
- }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
- </span>
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: pItem.config.fontFamily,
|
|
|
+ textDecoration: pItem.config.textDecoration,
|
|
|
+ borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: pItem.config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ pItem.chs[wIndex],
|
|
|
+ item.timeList &&
|
|
|
+ item.timeList.length > 0 &&
|
|
|
+ item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList &&
|
|
|
+ item.timeList.length > 0 &&
|
|
|
+ item.timeList[pItem.sentIndex].ed,
|
|
|
+ pItem,
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: pItem.config.fontFamily,
|
|
|
+ textDecoration: pItem.config.textDecoration,
|
|
|
+ borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: pItem.config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ pItem.chs[wIndex],
|
|
|
+ item.timeList &&
|
|
|
+ item.timeList.length > 0 &&
|
|
|
+ item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList &&
|
|
|
+ item.timeList.length > 0 &&
|
|
|
+ item.timeList[pItem.sentIndex].ed,
|
|
|
+ pItem,
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
class="NNPE-pinyin"
|
|
|
@@ -340,64 +433,140 @@
|
|
|
: ''
|
|
|
}}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[pItem.leg - 1] &&
|
|
|
- curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
- curQue.wordTime &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
|
|
|
- textDecoration: item.wordsList[pIndex + 1].config.textDecoration,
|
|
|
- borderBottom:
|
|
|
- item.wordsList[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
- fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
|
|
|
- height:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- color:
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="item.wordsList[pIndex + 1].matchNotesObj.con"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="content"
|
|
|
+ :style="{
|
|
|
+ color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '',
|
|
|
+ }"
|
|
|
+ v-html="item.wordsList[pIndex + 1].matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :class="[
|
|
|
pItem.chstimeList &&
|
|
|
pItem.chstimeList[pItem.leg - 1] &&
|
|
|
curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
curQue.wordTime &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
- attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : item.wordsList[pIndex + 1].matchNotesObj.con &&
|
|
|
- item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
- ? item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
- : item.wordsList[pIndex + 1].config.color,
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 1].chs,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
- item,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
- item.wordsList[pIndex + 1],
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- <!-- {{
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
|
|
|
+ textDecoration: item.wordsList[pIndex + 1].config.textDecoration,
|
|
|
+ borderBottom:
|
|
|
+ item.wordsList[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : item.wordsList[pIndex + 1].matchNotesObj.con &&
|
|
|
+ item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
+ ? item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
+ : item.wordsList[pIndex + 1].config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].chs,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ item.wordsList[pIndex + 1],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- {{
|
|
|
NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
|
|
|
? item.wordsList[pIndex + 1].chs
|
|
|
: ''
|
|
|
}} -->
|
|
|
- {{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
- </span>
|
|
|
+ {{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :class="[
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
|
|
|
+ textDecoration: item.wordsList[pIndex + 1].config.textDecoration,
|
|
|
+ borderBottom:
|
|
|
+ item.wordsList[pIndex + 1].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: item.wordsList[pIndex + 1].config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : item.wordsList[pIndex + 1].matchNotesObj.con &&
|
|
|
+ item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
+ ? item.wordsList[pIndex + 1].matchNotesObj.notesColor
|
|
|
+ : item.wordsList[pIndex + 1].config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].chs,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ item.wordsList[pIndex + 1],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- {{
|
|
|
+ NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
|
|
|
+ ? item.wordsList[pIndex + 1].chs
|
|
|
+ : ''
|
|
|
+ }} -->
|
|
|
+ {{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
class="NNPE-pinyin"
|
|
|
@@ -466,64 +635,140 @@
|
|
|
: ''
|
|
|
}}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[pItem.leg - 1] &&
|
|
|
- curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
- curQue.wordTime &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
|
|
|
- textDecoration: item.wordsList[pIndex + 2].config.textDecoration,
|
|
|
- borderBottom:
|
|
|
- item.wordsList[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
- fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
|
|
|
- height:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- color:
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="item.wordsList[pIndex + 2].matchNotesObj.con"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="content"
|
|
|
+ :style="{
|
|
|
+ color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '',
|
|
|
+ }"
|
|
|
+ v-html="item.wordsList[pIndex + 2].matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :class="[
|
|
|
pItem.chstimeList &&
|
|
|
pItem.chstimeList[pItem.leg - 1] &&
|
|
|
curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
curQue.wordTime &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
- attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : item.wordsList[pIndex + 2].matchNotesObj.con &&
|
|
|
- item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
- ? item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
- : item.wordsList[pIndex + 2].config.color,
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 2].chs,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
- item,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
- item.wordsList[pIndex + 2],
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- <!-- {{
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
|
|
|
+ textDecoration: item.wordsList[pIndex + 2].config.textDecoration,
|
|
|
+ borderBottom:
|
|
|
+ item.wordsList[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : item.wordsList[pIndex + 2].matchNotesObj.con &&
|
|
|
+ item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
+ ? item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
+ : item.wordsList[pIndex + 2].config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].chs,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ item.wordsList[pIndex + 2],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- {{
|
|
|
NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
|
|
|
? item.wordsList[pIndex + 2].chs
|
|
|
: ''
|
|
|
}} -->
|
|
|
- {{ convertText(item.wordsList[pIndex + 2].chs) }}
|
|
|
- </span>
|
|
|
+ {{ convertText(item.wordsList[pIndex + 2].chs) }}
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
+ :class="[
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
|
|
|
+ textDecoration: item.wordsList[pIndex + 2].config.textDecoration,
|
|
|
+ borderBottom:
|
|
|
+ item.wordsList[pIndex + 2].config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: item.wordsList[pIndex + 2].config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : item.wordsList[pIndex + 2].matchNotesObj.con &&
|
|
|
+ item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
+ ? item.wordsList[pIndex + 2].matchNotesObj.notesColor
|
|
|
+ : item.wordsList[pIndex + 2].config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].chs,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ item.wordsList[pIndex + 2],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- {{
|
|
|
+ NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
|
|
|
+ ? item.wordsList[pIndex + 2].chs
|
|
|
+ : ''
|
|
|
+ }} -->
|
|
|
+ {{ convertText(item.wordsList[pIndex + 2].chs) }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
:class="[
|
|
|
@@ -584,72 +829,162 @@
|
|
|
"
|
|
|
>{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
-
|
|
|
- <span
|
|
|
- v-if="pItem.chs != '#'"
|
|
|
- class="NNPE-chs"
|
|
|
- :class="[pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '']"
|
|
|
- :style="{
|
|
|
- height:
|
|
|
- attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
- }"
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="pItem.matchNotesObj.con"
|
|
|
>
|
|
|
- <template>
|
|
|
- <span
|
|
|
- v-for="(wItem, wIndex) in pItem.leg"
|
|
|
- :key="'ci' + wIndex + pIndex + index"
|
|
|
- :class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[wIndex] &&
|
|
|
- curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- :style="{
|
|
|
- fontFamily: pItem.config.fontFamily,
|
|
|
- textDecoration: pItem.config.textDecoration,
|
|
|
- borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
- fontWeight: pItem.config.fontWeight,
|
|
|
- height:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- color:
|
|
|
+ <div
|
|
|
+ slot="content"
|
|
|
+ :style="{
|
|
|
+ color: attrib && attrib.text_color ? attrib.text_color : '#de4444',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '',
|
|
|
+ }"
|
|
|
+ v-html="pItem.matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ v-if="pItem.chs != '#'"
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '']"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
pItem.chstimeList &&
|
|
|
pItem.chstimeList[wIndex] &&
|
|
|
curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
- attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
- ? pItem.matchNotesObj.notesColor
|
|
|
- : pItem.config.color,
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size
|
|
|
- ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
- : '28px',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- pItem.chs[wIndex],
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
- item,
|
|
|
- item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
- pItem,
|
|
|
- )
|
|
|
- "
|
|
|
- >{{
|
|
|
- NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
- }}</span
|
|
|
- >
|
|
|
- </template>
|
|
|
- </span>
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: pItem.config.fontFamily,
|
|
|
+ textDecoration: pItem.config.textDecoration,
|
|
|
+ borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: pItem.config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ pItem.chs[wIndex],
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ pItem,
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ v-if="pItem.chs != '#'"
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '']"
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + index"
|
|
|
+ :class="[
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ fontFamily: pItem.config.fontFamily,
|
|
|
+ textDecoration: pItem.config.textDecoration,
|
|
|
+ borderBottom: pItem.config.border === 'dotted' ? '1px dotted' : '',
|
|
|
+ fontWeight: pItem.config.fontWeight,
|
|
|
+ height:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ pItem.chstimeList &&
|
|
|
+ pItem.chstimeList[wIndex] &&
|
|
|
+ curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed &&
|
|
|
+ attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ pItem.chs[wIndex],
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
|
|
|
+ item,
|
|
|
+ item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
|
|
|
+ pItem,
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ NumberList.indexOf(pItem.pinyin) == -1 ? convertText(pItem.chs[wIndex]) : ''
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
class="NNPE-pinyin"
|
|
|
@@ -1221,17 +1556,17 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- } else if (
|
|
|
- _this.NNPEAnnotationList &&
|
|
|
- _this.NNPEAnnotationList.length > 0 &&
|
|
|
- _this.annotationList.indexOf(words.chs) > -1
|
|
|
- ) {
|
|
|
- _this.NNPEAnnotationList.forEach((item, indexs) => {
|
|
|
- let textContent = item.con.replace(/<[^>]*>?/gm, '');
|
|
|
- if (textContent === words.chs.trim()) {
|
|
|
- noteIndex = `${String(indexs)}`;
|
|
|
- }
|
|
|
- });
|
|
|
+ // } else if (
|
|
|
+ // _this.NNPEAnnotationList &&
|
|
|
+ // _this.NNPEAnnotationList.length > 0 &&
|
|
|
+ // _this.annotationList.indexOf(words.chs) > -1
|
|
|
+ // ) {
|
|
|
+ // _this.NNPEAnnotationList.forEach((item, indexs) => {
|
|
|
+ // let textContent = item.con.replace(/<[^>]*>?/gm, '');
|
|
|
+ // if (textContent === words.chs.trim()) {
|
|
|
+ // noteIndex = `${String(indexs)}`;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
} else {
|
|
|
_this.handleChangeTime(time, item, ed);
|
|
|
}
|
|
|
@@ -1646,3 +1981,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.article-bubble.el-tooltip__popper.is-light {
|
|
|
+ border-color: #fff;
|
|
|
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
|
|
|
+}
|
|
|
+
|
|
|
+.article-bubble.el-tooltip__popper .popper__arrow,
|
|
|
+.article-bubble.el-tooltip__popper .popper__arrow::before {
|
|
|
+ border-bottom-color: transparent !important;
|
|
|
+}
|
|
|
+</style>
|
