|
|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
<div class="sentence-box" :style="{ background: themeList[sentenceTheme].bg }">
|
|
|
<div class="sentence-top">
|
|
|
- <a class="play-btn" :style="{ background: themeList[sentenceTheme].playBtnBg }" @click="handlePlay">
|
|
|
+ <a class="play-btn" :style="{ background: themeList[sentenceTheme].playBtnBg }" @click="handlePlay" v-if="mp3Url">
|
|
|
<svg-icon v-if="isPlay" icon-class="pause" size="24" />
|
|
|
<svg-icon v-else icon-class="play" size="24" />
|
|
|
</a>
|
|
|
+ <a v-else></a>
|
|
|
<div class="sentence-right" :style="{ color: themeList[sentenceTheme].rightBtnColor }">
|
|
|
<a class="btn" @click="handlePage('-')"><svg-icon icon-class="arrow-left-s-line" size="24" /></a>
|
|
|
- <span>{{ sentenceActive + 1 + '/' + data.length }}</span>
|
|
|
+ <span>{{ sentenceActive + 1 + '/' + (data.length ? data.length : textList.length) }}</span>
|
|
|
<a class="btn" @click="handlePage('+')"><svg-icon icon-class="arrow-right-s-line" size="24" /></a>
|
|
|
<i class="el-icon-close" @click="closeWord"></i>
|
|
|
</div>
|
|
|
@@ -210,10 +211,21 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
|
|
|
- {{ multilingualTextList[sentenceActive] }}
|
|
|
- </div>
|
|
|
</template>
|
|
|
+ <template v-else-if="textList && textList[sentenceActive] && textList[sentenceActive].text">
|
|
|
+ <span
|
|
|
+ :class="['content-item']"
|
|
|
+ :style="{
|
|
|
+ color: themeList[sentenceTheme].sentenceColor,
|
|
|
+ fontSize: fontSize + 'px',
|
|
|
+ lineHeight: fontSize + 8 + 'px',
|
|
|
+ }"
|
|
|
+ >{{ textList[sentenceActive].text }}</span
|
|
|
+ >
|
|
|
+ </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 }">
|
|
|
@@ -283,7 +295,17 @@
|
|
|
export default {
|
|
|
// import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
- props: ['fontSize', 'sentenceTheme', 'data', 'activeIndex', 'mp3Url', 'multilingualTextList', 'property', 'attrib'],
|
|
|
+ props: [
|
|
|
+ 'fontSize',
|
|
|
+ 'sentenceTheme',
|
|
|
+ 'data',
|
|
|
+ 'activeIndex',
|
|
|
+ 'mp3Url',
|
|
|
+ 'multilingualTextList',
|
|
|
+ 'property',
|
|
|
+ 'attrib',
|
|
|
+ 'textList',
|
|
|
+ ],
|
|
|
data() {
|
|
|
// 这里存放数据
|
|
|
return {
|