|
|
@@ -139,63 +139,146 @@
|
|
|
@click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
|
|
|
>{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- 'NNPE-chs',
|
|
|
- newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
- pItem.words ? 'active' : '',
|
|
|
- ]"
|
|
|
- :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',
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
- color:
|
|
|
- newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
- ? attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : pItem.config.color
|
|
|
- : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
- ? pItem.matchNotesObj.notesColor
|
|
|
- : pItem.config.color,
|
|
|
- }"
|
|
|
- ><span
|
|
|
- v-for="(wItem, wIndex) in pItem.leg"
|
|
|
- :key="'ci' + wIndex + pIndex + index"
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="pItem.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="pItem.matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
:class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[wIndex] &&
|
|
|
- curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime < item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
+ 'NNPE-chs',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ pItem.words ? 'active' : '',
|
|
|
]"
|
|
|
: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',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
color:
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
+ ? attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.config.color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ }"
|
|
|
+ ><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
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ 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,
|
|
|
+ }"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
+ >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
+ ><img
|
|
|
+ v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
+ :src="pItem.img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'NNPE-chs',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ pItem.words ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ :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',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size
|
|
|
+ ? attrib.font_size.replace('pt', '') * 1.4 + 'pt'
|
|
|
+ : '28px',
|
|
|
+ color:
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
+ ? attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.config.color
|
|
|
: pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
? pItem.matchNotesObj.notesColor
|
|
|
: pItem.config.color,
|
|
|
}"
|
|
|
- @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
- >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
- ><img
|
|
|
- v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
- :src="pItem.img[0].file_url"
|
|
|
- :style="{
|
|
|
- height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- }"
|
|
|
- /></span>
|
|
|
+ ><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="{
|
|
|
+ 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,
|
|
|
+ }"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
+ >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
+ ><img
|
|
|
+ v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
+ :src="pItem.img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
:class="[
|
|
|
@@ -238,47 +321,116 @@
|
|
|
: ''
|
|
|
}}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :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,
|
|
|
- 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,
|
|
|
- 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',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 1].words
|
|
|
- ? item.wordsList[pIndex + 1].words
|
|
|
- : item.wordsList[pIndex + 1].chs,
|
|
|
- '',
|
|
|
- item.wordsList[pIndex + 1],
|
|
|
- )
|
|
|
- "
|
|
|
- >{{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
- <img
|
|
|
- v-if="
|
|
|
- item.wordsList[pIndex + 1].img &&
|
|
|
- item.wordsList[pIndex + 1].img.length > 0 &&
|
|
|
- item.wordsList[pIndex + 1].imgPosition === 'after'
|
|
|
+ <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"
|
|
|
+ :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,
|
|
|
+ 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,
|
|
|
+ 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',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].words
|
|
|
+ ? item.wordsList[pIndex + 1].words
|
|
|
+ : item.wordsList[pIndex + 1].chs,
|
|
|
+ '',
|
|
|
+ item.wordsList[pIndex + 1],
|
|
|
+ )
|
|
|
"
|
|
|
- :src="item.wordsList[pIndex + 1].img[0].file_url"
|
|
|
+ >{{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 1].img &&
|
|
|
+ item.wordsList[pIndex + 1].img.length > 0 &&
|
|
|
+ item.wordsList[pIndex + 1].imgPosition === 'after'
|
|
|
+ "
|
|
|
+ :src="item.wordsList[pIndex + 1].img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
:style="{
|
|
|
- height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ 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,
|
|
|
+ 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,
|
|
|
+ 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',
|
|
|
}"
|
|
|
- /></span>
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 1].words
|
|
|
+ ? item.wordsList[pIndex + 1].words
|
|
|
+ : item.wordsList[pIndex + 1].chs,
|
|
|
+ '',
|
|
|
+ item.wordsList[pIndex + 1],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ convertText(item.wordsList[pIndex + 1].chs) }}
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 1].img &&
|
|
|
+ item.wordsList[pIndex + 1].img.length > 0 &&
|
|
|
+ item.wordsList[pIndex + 1].imgPosition === 'after'
|
|
|
+ "
|
|
|
+ :src="item.wordsList[pIndex + 1].img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
:class="[
|
|
|
@@ -336,47 +488,116 @@
|
|
|
: ''
|
|
|
}}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- style="text-align: left"
|
|
|
- :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,
|
|
|
- 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,
|
|
|
- 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',
|
|
|
- }"
|
|
|
- @click.stop="
|
|
|
- viewNotes(
|
|
|
- $event,
|
|
|
- item.wordsList[pIndex + 2].words
|
|
|
- ? item.wordsList[pIndex + 2].words
|
|
|
- : item.wordsList[pIndex + 2].chs,
|
|
|
- '',
|
|
|
- item.wordsList[pIndex + 2],
|
|
|
- )
|
|
|
- "
|
|
|
- >{{ convertText(item.wordsList[pIndex + 2].chs)
|
|
|
- }}<img
|
|
|
- v-if="
|
|
|
- item.wordsList[pIndex + 2].img &&
|
|
|
- item.wordsList[pIndex + 2].img.length > 0 &&
|
|
|
- item.wordsList[pIndex + 2].imgPosition === 'after'
|
|
|
+ <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"
|
|
|
+ :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,
|
|
|
+ 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,
|
|
|
+ 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',
|
|
|
+ }"
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].words
|
|
|
+ ? item.wordsList[pIndex + 2].words
|
|
|
+ : item.wordsList[pIndex + 2].chs,
|
|
|
+ '',
|
|
|
+ item.wordsList[pIndex + 2],
|
|
|
+ )
|
|
|
"
|
|
|
- :src="item.wordsList[pIndex + 2].img[0].file_url"
|
|
|
+ >{{ convertText(item.wordsList[pIndex + 2].chs)
|
|
|
+ }}<img
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 2].img &&
|
|
|
+ item.wordsList[pIndex + 2].img.length > 0 &&
|
|
|
+ item.wordsList[pIndex + 2].imgPosition === 'after'
|
|
|
+ "
|
|
|
+ :src="item.wordsList[pIndex + 2].img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ style="text-align: left"
|
|
|
:style="{
|
|
|
- height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ 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,
|
|
|
+ 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,
|
|
|
+ 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',
|
|
|
}"
|
|
|
- /></span>
|
|
|
+ @click.stop="
|
|
|
+ viewNotes(
|
|
|
+ $event,
|
|
|
+ item.wordsList[pIndex + 2].words
|
|
|
+ ? item.wordsList[pIndex + 2].words
|
|
|
+ : item.wordsList[pIndex + 2].chs,
|
|
|
+ '',
|
|
|
+ item.wordsList[pIndex + 2],
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >{{ convertText(item.wordsList[pIndex + 2].chs)
|
|
|
+ }}<img
|
|
|
+ v-if="
|
|
|
+ item.wordsList[pIndex + 2].img &&
|
|
|
+ item.wordsList[pIndex + 2].img.length > 0 &&
|
|
|
+ item.wordsList[pIndex + 2].imgPosition === 'after'
|
|
|
+ "
|
|
|
+ :src="item.wordsList[pIndex + 2].img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ /></span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
:class="[
|
|
|
@@ -421,66 +642,144 @@
|
|
|
@click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
|
|
|
>{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
|
|
|
>
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- :class="[
|
|
|
- pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
- newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
- pItem.words ? 'active' : '',
|
|
|
- ]"
|
|
|
- :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',
|
|
|
- fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- lineHeight:
|
|
|
- attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
- color:
|
|
|
- newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
- ? attrib
|
|
|
- ? attrib.topic_color
|
|
|
- : pItem.config.color
|
|
|
- : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
- ? pItem.matchNotesObj.notesColor
|
|
|
- : pItem.config.color,
|
|
|
- }"
|
|
|
- ><span
|
|
|
- v-for="(wItem, wIndex) in pItem.leg"
|
|
|
- :key="'ci' + wIndex + pIndex + index"
|
|
|
+ <el-tooltip
|
|
|
+ popper-class="article-bubble"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom-start"
|
|
|
+ v-if="pItem.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="pItem.matchNotesObj.con"
|
|
|
+ ></div>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
:class="[
|
|
|
- pItem.chstimeList &&
|
|
|
- pItem.chstimeList[wIndex] &&
|
|
|
- curTime >= pItem.chstimeList[wIndex].wordBg &&
|
|
|
- curTime < item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
+ pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ pItem.words ? 'active' : '',
|
|
|
]"
|
|
|
: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',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
color:
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
+ ? attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.config.color
|
|
|
+ : pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
+ ? pItem.matchNotesObj.notesColor
|
|
|
+ : pItem.config.color,
|
|
|
+ }"
|
|
|
+ ><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
|
|
|
+ curTime < item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{
|
|
|
+ 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,
|
|
|
+ }"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
+ >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
+ :src="pItem.img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
|
|
|
+ pItem.words ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ :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',
|
|
|
+ fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ lineHeight:
|
|
|
+ attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
|
|
|
+ color:
|
|
|
+ newWordList.indexOf(pItem.chs) > -1 || pItem.words
|
|
|
+ ? attrib
|
|
|
+ ? attrib.topic_color
|
|
|
+ : pItem.config.color
|
|
|
: pItem.matchNotesObj.con && pItem.matchNotesObj.notesColor
|
|
|
? pItem.matchNotesObj.notesColor
|
|
|
: pItem.config.color,
|
|
|
}"
|
|
|
- @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
- >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
- :src="pItem.img[0].file_url"
|
|
|
- :style="{
|
|
|
- height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
- }"
|
|
|
- />
|
|
|
- </span>
|
|
|
+ ><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="{
|
|
|
+ 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,
|
|
|
+ }"
|
|
|
+ @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
|
|
|
+ >{{ convertText(pItem.chs[wIndex]) }}</span
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="pItem.img && pItem.img.length > 0 && pItem.imgPosition === 'after'"
|
|
|
+ :src="pItem.img[0].file_url"
|
|
|
+ :style="{
|
|
|
+ height: attrib && attrib.font_size ? attrib.font_size : '20px',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<span
|
|
|
v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
|
|
|
class="NNPE-pinyin"
|
|
|
@@ -1665,18 +1964,18 @@ 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)}`;
|
|
|
- this.showNoteDetail(e, noteIndex);
|
|
|
- }
|
|
|
- });
|
|
|
+ // } 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)}`;
|
|
|
+ // this.showNoteDetail(e, noteIndex);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
} else if (this.newWordList.indexOf(noteNum) > -1) {
|
|
|
if (_this.oldHz !== noteNum) {
|
|
|
this.isShow = false;
|
|
|
@@ -2278,3 +2577,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>
|
