|
|
@@ -96,7 +96,7 @@
|
|
|
v-for="(item, index) in data.option_list"
|
|
|
:key="'curQue.option' + index"
|
|
|
class="NPC-word-tr"
|
|
|
- :style="{ width: rowWidth + 'px' }"
|
|
|
+ :style="{ width: isMobile ? '100%' : rowWidth + 'px' }"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(sItem, sIndex) in item"
|
|
|
@@ -107,43 +107,313 @@
|
|
|
curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '',
|
|
|
]"
|
|
|
>
|
|
|
- <template v-if="sItem.bg || sItem.ed">
|
|
|
- <!-- <a
|
|
|
+ <template v-if="isMobile">
|
|
|
+ <div class="content-box">
|
|
|
+ <div style="display: flex; flex-flow: wrap; gap: 10px; align-items: center; width: 100%">
|
|
|
+ <template v-if="sItem.bg || sItem.ed">
|
|
|
+ <!-- <a
|
|
|
:class="['play-btn', curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '']"
|
|
|
@click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
></a> -->
|
|
|
- <SvgIcon
|
|
|
- v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
|
|
|
- icon-class="animated"
|
|
|
- size="24"
|
|
|
- :style="{
|
|
|
- color:
|
|
|
- data.unified_attrib && data.unified_attrib.topic_color
|
|
|
- ? data.unified_attrib.topic_color
|
|
|
- : '',
|
|
|
- }"
|
|
|
- @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
- />
|
|
|
- <SvgIcon
|
|
|
- v-else
|
|
|
- icon-class="play-btn"
|
|
|
- size="24"
|
|
|
- :style="{
|
|
|
- color:
|
|
|
- data.unified_attrib && data.unified_attrib.topic_color
|
|
|
- ? data.unified_attrib.topic_color
|
|
|
- : '',
|
|
|
- }"
|
|
|
- @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
- />
|
|
|
+ <SvgIcon
|
|
|
+ v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
|
|
|
+ icon-class="animated"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ icon-class="play-btn"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="sItem.mp3_list">
|
|
|
+ <span
|
|
|
+ :class="['play-btn', playClass && mp3_index === sItem.sIndex ? 'active' : '']"
|
|
|
+ @click="palyAudio(sItem.mp3_list_url, sItem.sIndex)"
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ v-if="playClass && mp3_index === sItem.sIndex"
|
|
|
+ icon-class="animated"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ icon-class="play-btn"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list_url"></audio>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <span style="flex-shrink: 0; width: 24px; height: 24px"></span>
|
|
|
+ </template>
|
|
|
+ <div class="tabNum-box">
|
|
|
+ <template v-if="sItem.mIndex == 0">
|
|
|
+ <b
|
|
|
+ class="tabNum"
|
|
|
+ :style="{
|
|
|
+ backgroundColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ index + 1 }}</b
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
|
|
|
+ </div>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ data.property.pinyin_position &&
|
|
|
+ (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="NPC-word-tab-box">
|
|
|
+ <span
|
|
|
+ v-if="data.property.pinyin_position == 'top'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
+ v-html="sItem.new_word"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="data.property.pinyin_position == 'bottom'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][0]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span>
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
+ :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
+ v-html="sItem.cixing"
|
|
|
+ ></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][1]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ lineHeight:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.new_word"
|
|
|
+ ></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][0]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="data.property.pinyin_position == 'back'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ lineHeight:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
+ :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
+ v-html="sItem.cixing"
|
|
|
+ ></p>
|
|
|
+
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][1]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span>
|
|
|
+ <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][2]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][2] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <div v-if="sItem.collocation">
|
|
|
+ <span class="collocation"><span>搭配：</span><b v-html="sItem.collocation"></b></span>
|
|
|
+ <span v-if="showLang" class="">
|
|
|
+ {{
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][3]
|
|
|
+ ? multilingualTextList[getLang()][index][3]
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-if="sItem.liju_list">
|
|
|
+ <span class="collocation"
|
|
|
+ ><span>例句：</span>
|
|
|
+ <div>
|
|
|
+ <b v-html="sItem.liju_list"></b>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ <span v-if="showLang" class="">
|
|
|
+ {{
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][4]
|
|
|
+ ? multilingualTextList[getLang()][index][4]
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <span>
|
|
|
+ <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
|
|
|
+ <SoundRecord
|
|
|
+ :tm-index="index"
|
|
|
+ :tms-index="sIndex"
|
|
|
+ :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
|
|
|
+ :answer-record-list="[]"
|
|
|
+ type="mini"
|
|
|
+ class="luyin-box-wordphrase"
|
|
|
+ :style="{ marginLeft: '8px' }"
|
|
|
+ :attrib="data.unified_attrib"
|
|
|
+ @handleWav="handleWav"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span v-if="isEnable(data.property.is_has_infor)">
|
|
|
+ <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- <template v-else-if="sItem.mp3_list">
|
|
|
- <span
|
|
|
- :class="['play-btn', playClass && mp3_index === sItem.sIndex ? 'active' : '']"
|
|
|
- @click="palyAudio(sItem.mp3_list_url, sItem.sIndex)"
|
|
|
- >
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="sItem.bg || sItem.ed">
|
|
|
+ <!-- <a
|
|
|
+ :class="['play-btn', curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '']"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
+ ></a> -->
|
|
|
<SvgIcon
|
|
|
- v-if="playClass && mp3_index === sItem.sIndex"
|
|
|
+ v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
|
|
|
icon-class="animated"
|
|
|
size="24"
|
|
|
:style="{
|
|
|
@@ -152,6 +422,7 @@
|
|
|
? data.unified_attrib.topic_color
|
|
|
: '',
|
|
|
}"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
/>
|
|
|
<SvgIcon
|
|
|
v-else
|
|
|
@@ -163,268 +434,302 @@
|
|
|
? data.unified_attrib.topic_color
|
|
|
: '',
|
|
|
}"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
/>
|
|
|
- </span>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="sItem.mp3_list">
|
|
|
+ <span
|
|
|
+ :class="['play-btn', playClass && mp3_index === sItem.sIndex ? 'active' : '']"
|
|
|
+ @click="palyAudio(sItem.mp3_list_url, sItem.sIndex)"
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ v-if="playClass && mp3_index === sItem.sIndex"
|
|
|
+ icon-class="animated"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ icon-class="play-btn"
|
|
|
+ size="24"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
|
|
|
- <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list_url"></audio>
|
|
|
- </template>
|
|
|
+ <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list_url"></audio>
|
|
|
+ </template>
|
|
|
|
|
|
- <template v-else>
|
|
|
- <span style="flex-shrink: 0; width: 24px; height: 24px"></span>
|
|
|
- </template>
|
|
|
- <div class="tabNum-box">
|
|
|
- <template v-if="sItem.mIndex == 0">
|
|
|
- <b
|
|
|
- class="tabNum"
|
|
|
- :style="{
|
|
|
- backgroundColor:
|
|
|
- data.unified_attrib && data.unified_attrib.topic_color
|
|
|
- ? data.unified_attrib.topic_color
|
|
|
- : '',
|
|
|
- marginTop:
|
|
|
- data.unified_attrib && data.unified_attrib.font_size
|
|
|
- ? (((data.unified_attrib.font_size.replace('pt', '') * 1.5) / 3) * 4 - 16) / 2 + 'px'
|
|
|
- : '',
|
|
|
- }"
|
|
|
- >{{ index + 1 }}</b
|
|
|
- >
|
|
|
+ <template v-else>
|
|
|
+ <span style="flex-shrink: 0; width: 24px; height: 24px"></span>
|
|
|
</template>
|
|
|
- <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
|
|
|
- </div>
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- data.property.pinyin_position &&
|
|
|
- (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="NPC-word-tab-box">
|
|
|
+ <div class="tabNum-box">
|
|
|
+ <template v-if="sItem.mIndex == 0">
|
|
|
+ <b
|
|
|
+ class="tabNum"
|
|
|
+ :style="{
|
|
|
+ backgroundColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ marginTop:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? (((data.unified_attrib.font_size.replace('pt', '') * 1.5) / 3) * 4 - 16) / 2 + 'px'
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ index + 1 }}</b
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
|
|
|
+ </div>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ data.property.pinyin_position &&
|
|
|
+ (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="NPC-word-tab-box">
|
|
|
+ <span
|
|
|
+ v-if="data.property.pinyin_position == 'top'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ width: data.col_width[0].value + 'px',
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ width: data.col_width[0].value + 'px',
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
+ v-html="sItem.new_word"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="data.property.pinyin_position == 'bottom'"
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
+ :style="{
|
|
|
+ width: data.col_width[0].value + 'px',
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
+ ? data.unified_attrib.pinyin_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.pinyin"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][0]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ :style="{ width: data.col_width[0].value + 'px' }"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span :style="{ width: data.col_width[2].value + 'px' }">
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
+ :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
+ v-html="sItem.cixing"
|
|
|
+ ></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][1]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span :style="{ width: data.col_width[3].value + 'px' }">
|
|
|
+ <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][2]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][2] }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
<span
|
|
|
- v-if="data.property.pinyin_position == 'top'"
|
|
|
+ v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
|
|
|
class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
:style="{
|
|
|
- width: data.col_width[0].value + 'px',
|
|
|
+ width: data.col_width[1].value + 'px',
|
|
|
fontSize:
|
|
|
data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
? data.unified_attrib.pinyin_size
|
|
|
: '',
|
|
|
+ lineHeight:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
+ : '',
|
|
|
}"
|
|
|
v-html="sItem.pinyin"
|
|
|
>
|
|
|
</span>
|
|
|
-
|
|
|
<span
|
|
|
:style="{
|
|
|
width: data.col_width[0].value + 'px',
|
|
|
- fontSize:
|
|
|
- data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
|
|
|
}"
|
|
|
- class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
- v-html="sItem.new_word"
|
|
|
>
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
+ :style="{
|
|
|
+ fontSize:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ v-html="sItem.new_word"
|
|
|
+ ></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][0]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ :style="{ width: data.col_width[0].value + 'px' }"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ </span>
|
|
|
</span>
|
|
|
<span
|
|
|
- v-if="data.property.pinyin_position == 'bottom'"
|
|
|
+ v-if="data.property.pinyin_position == 'back'"
|
|
|
class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
:style="{
|
|
|
- width: data.col_width[0].value + 'px',
|
|
|
+ width: data.col_width[1].value + 'px',
|
|
|
fontSize:
|
|
|
data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
? data.unified_attrib.pinyin_size
|
|
|
: '',
|
|
|
+ lineHeight:
|
|
|
+ data.unified_attrib && data.unified_attrib.font_size
|
|
|
+ ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
+ : '',
|
|
|
}"
|
|
|
v-html="sItem.pinyin"
|
|
|
>
|
|
|
</span>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][0]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- :style="{ width: data.col_width[0].value + 'px' }"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ <span :style="{ width: data.col_width[2].value + 'px' }">
|
|
|
+ <p
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
+ :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
+ v-html="sItem.cixing"
|
|
|
+ ></p>
|
|
|
+
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][1]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- </div>
|
|
|
- <span :style="{ width: data.col_width[2].value + 'px' }">
|
|
|
- <p
|
|
|
- class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
- :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
- v-html="sItem.cixing"
|
|
|
- ></p>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][1]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ <span :style="{ width: data.col_width[3].value + 'px' }">
|
|
|
+ <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ showLang &&
|
|
|
+ multilingualTextList[getLang()] &&
|
|
|
+ multilingualTextList[getLang()][index] &&
|
|
|
+ multilingualTextList[getLang()][index][2]
|
|
|
+ "
|
|
|
+ class="NPC-word-tab-common"
|
|
|
+ >
|
|
|
+ {{ multilingualTextList[getLang()][index][2] }}
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- </span>
|
|
|
- <span :style="{ width: data.col_width[3].value + 'px' }">
|
|
|
- <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][2]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][2] }}
|
|
|
+ </template>
|
|
|
+ <div class="right-box">
|
|
|
+ <span>
|
|
|
+ <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
|
|
|
+ <SoundRecord
|
|
|
+ :tm-index="index"
|
|
|
+ :tms-index="sIndex"
|
|
|
+ :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
|
|
|
+ :answer-record-list="[]"
|
|
|
+ type="mini"
|
|
|
+ class="luyin-box-wordphrase"
|
|
|
+ :style="{ marginLeft: '8px' }"
|
|
|
+ :attrib="data.unified_attrib"
|
|
|
+ @handleWav="handleWav"
|
|
|
+ />
|
|
|
</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span
|
|
|
- v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
|
|
|
- class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
- :style="{
|
|
|
- width: data.col_width[1].value + 'px',
|
|
|
- fontSize:
|
|
|
- data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
- ? data.unified_attrib.pinyin_size
|
|
|
- : '',
|
|
|
- lineHeight:
|
|
|
- data.unified_attrib && data.unified_attrib.font_size
|
|
|
- ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
- : '',
|
|
|
- }"
|
|
|
- v-html="sItem.pinyin"
|
|
|
- >
|
|
|
- </span>
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- width: data.col_width[0].value + 'px',
|
|
|
- }"
|
|
|
- >
|
|
|
- <p
|
|
|
- class="NPC-word-tab-common NPC-word-tab-word"
|
|
|
- :style="{
|
|
|
- fontSize:
|
|
|
- data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
|
|
|
- }"
|
|
|
- v-html="sItem.new_word"
|
|
|
- ></p>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][0]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- :style="{ width: data.col_width[0].value + 'px' }"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][0] }}
|
|
|
+ <span v-if="isEnable(data.property.is_has_infor)">
|
|
|
+ <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
|
|
|
</span>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- v-if="data.property.pinyin_position == 'back'"
|
|
|
- class="NPC-word-tab-common NPC-word-tab-pinyin"
|
|
|
- :style="{
|
|
|
- width: data.col_width[1].value + 'px',
|
|
|
- fontSize:
|
|
|
- data.unified_attrib && data.unified_attrib.pinyin_size
|
|
|
- ? data.unified_attrib.pinyin_size
|
|
|
- : '',
|
|
|
- lineHeight:
|
|
|
- data.unified_attrib && data.unified_attrib.font_size
|
|
|
- ? data.unified_attrib.font_size.replace('pt', '') * 1.5 + 'pt'
|
|
|
- : '',
|
|
|
- }"
|
|
|
- v-html="sItem.pinyin"
|
|
|
- >
|
|
|
- </span>
|
|
|
- <span :style="{ width: data.col_width[2].value + 'px' }">
|
|
|
- <p
|
|
|
- class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
- :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
|
|
|
- v-html="sItem.cixing"
|
|
|
- ></p>
|
|
|
+ </div>
|
|
|
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
+ <div v-if="sItem.collocation" :style="{ width: data.col_width[4].value + 'px' }">
|
|
|
+ <span class="collocation"><span>搭配：</span><b v-html="sItem.collocation"></b></span>
|
|
|
+ <span v-if="showLang" class="">
|
|
|
+ {{
|
|
|
multilingualTextList[getLang()] &&
|
|
|
multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][1]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][1] }}
|
|
|
+ multilingualTextList[getLang()][index][3]
|
|
|
+ ? multilingualTextList[getLang()][index][3]
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
</span>
|
|
|
- </span>
|
|
|
- <span :style="{ width: data.col_width[3].value + 'px' }">
|
|
|
- <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- showLang &&
|
|
|
+ </div>
|
|
|
+ <div v-if="sItem.liju_list" :style="{ width: data.col_width[5].value + 'px' }">
|
|
|
+ <span class="collocation"
|
|
|
+ ><span>例句：</span>
|
|
|
+ <div>
|
|
|
+ <b v-html="sItem.liju_list"></b>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ <span v-if="showLang" class="">
|
|
|
+ {{
|
|
|
multilingualTextList[getLang()] &&
|
|
|
multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][2]
|
|
|
- "
|
|
|
- class="NPC-word-tab-common"
|
|
|
- >
|
|
|
- {{ multilingualTextList[getLang()][index][2] }}
|
|
|
+ multilingualTextList[getLang()][index][4]
|
|
|
+ ? multilingualTextList[getLang()][index][4]
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
</span>
|
|
|
- </span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- <div class="right-box">
|
|
|
- <span>
|
|
|
- <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
|
|
|
- <SoundRecord
|
|
|
- :tm-index="index"
|
|
|
- :tms-index="sIndex"
|
|
|
- :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
|
|
|
- :answer-record-list="[]"
|
|
|
- type="mini"
|
|
|
- class="luyin-box-wordphrase"
|
|
|
- :style="{ marginLeft: '8px' }"
|
|
|
- :attrib="data.unified_attrib"
|
|
|
- @handleWav="handleWav"
|
|
|
- />
|
|
|
- </span>
|
|
|
- <span v-if="isEnable(data.property.is_has_infor)">
|
|
|
- <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="sItem.collocation" :style="{ width: data.col_width[4].value + 'px' }">
|
|
|
- <span class="collocation"><span>搭配：</span><b v-html="sItem.collocation"></b></span>
|
|
|
- <span v-if="showLang" class="">
|
|
|
- {{
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][3]
|
|
|
- ? multilingualTextList[getLang()][index][3]
|
|
|
- : ''
|
|
|
- }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div v-if="sItem.liju_list" :style="{ width: data.col_width[5].value + 'px' }">
|
|
|
- <span class="collocation"
|
|
|
- ><span>例句：</span>
|
|
|
- <div>
|
|
|
- <b v-html="sItem.liju_list"></b>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span v-if="showLang" class="">
|
|
|
- {{
|
|
|
- multilingualTextList[getLang()] &&
|
|
|
- multilingualTextList[getLang()][index] &&
|
|
|
- multilingualTextList[getLang()][index][4]
|
|
|
- ? multilingualTextList[getLang()][index][4]
|
|
|
- : ''
|
|
|
- }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -481,7 +786,7 @@
|
|
|
<div v-if="item.file_list[0]" class="item-image">
|
|
|
<el-image
|
|
|
:style="{
|
|
|
- width: '209px',
|
|
|
+ width: '100%',
|
|
|
height:
|
|
|
item.new_word && (item.header_con || item.label)
|
|
|
? '138px'
|
|
|
@@ -697,13 +1002,20 @@
|
|
|
:ed="dataWord && dataWord.ed ? dataWord.ed : null"
|
|
|
type="newWordDetail"
|
|
|
:attrib="data.unified_attrib"
|
|
|
+ :isMobile="isMobile"
|
|
|
/>
|
|
|
</div>
|
|
|
<audio ref="newwordAudio"></audio>
|
|
|
</div>
|
|
|
</main>
|
|
|
<el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog" top="0">
|
|
|
- <i class="el-icon-arrow-left" :class="[showIndex === 0 ? 'disabled' : '']" @click="changeShowIndex('-')"></i>
|
|
|
+ <i
|
|
|
+ class="el-icon-arrow-left"
|
|
|
+ :class="[showIndex === 0 ? 'disabled' : '']"
|
|
|
+ @click="changeShowIndex('-')"
|
|
|
+ v-if="!isMobile"
|
|
|
+ ></i>
|
|
|
+
|
|
|
<writeTableZoom
|
|
|
ref="writeTableZoom"
|
|
|
:edit-cardflag="false"
|
|
|
@@ -714,14 +1026,41 @@
|
|
|
:filt-cardflag="false"
|
|
|
:attrib="data.unified_attrib"
|
|
|
:url="data.audio_data.url"
|
|
|
+ :isMobile="isMobile"
|
|
|
/>
|
|
|
- <p style="width: 100%; font-size: 20px; color: #fff; text-align: center">
|
|
|
- {{ showIndex + 1 }} / {{ data.new_word_list.length }}
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-arrow-left"
|
|
|
+ :class="[showIndex === 0 ? 'disabled' : '', isMobile ? 'el-icon-arrow-left-phone' : '']"
|
|
|
+ @click="changeShowIndex('-')"
|
|
|
+ v-if="isMobile"
|
|
|
+ ></i>
|
|
|
+ {{ showIndex + 1 }} / {{ data.new_word_list.length
|
|
|
+ }}<i
|
|
|
+ class="el-icon-arrow-right"
|
|
|
+ :class="[
|
|
|
+ showIndex === data.new_word_list.length - 1 ? 'disabled' : '',
|
|
|
+ isMobile ? 'el-icon-arrow-right-phone' : '',
|
|
|
+ ]"
|
|
|
+ @click="changeShowIndex('+')"
|
|
|
+ v-if="isMobile"
|
|
|
+ ></i>
|
|
|
</p>
|
|
|
<i
|
|
|
class="el-icon-arrow-right"
|
|
|
:class="[showIndex === data.new_word_list.length - 1 ? 'disabled' : '']"
|
|
|
@click="changeShowIndex('+')"
|
|
|
+ v-if="!isMobile"
|
|
|
></i>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -1806,6 +2145,13 @@ export default {
|
|
|
left: auto;
|
|
|
}
|
|
|
|
|
|
+ .el-icon-arrow-left-phone,
|
|
|
+ .el-icon-arrow-right-phone {
|
|
|
+ position: initial;
|
|
|
+ margin-top: 0;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
:deep .el-dialog__headerbtn {
|
|
|
position: fixed;
|
|
|
top: 20px;
|
|
|
@@ -1818,6 +2164,14 @@ export default {
|
|
|
color: #f2f3f5;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.content-box {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .NPC-word-tab-common {
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
