|
@@ -27,28 +27,35 @@
|
|
|
<div class="words-right">
|
|
|
<template v-for="(item, index) in option_list">
|
|
|
<div v-if="index === active_index" :key="index" class="strock-box">
|
|
|
- <div v-if="item.audio_file_id || item.pinyin" class="pinyin-box">
|
|
|
- <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
|
|
|
- <span class="pinyin">{{ item.pinyin }}</span>
|
|
|
- </div>
|
|
|
<div v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0" class="strock-left">
|
|
|
- <template v-for="(items, indexs) in item.hz_strokes_list">
|
|
|
+ <div v-for="(items, indexs) in item.hz_strokes_list" :key="indexs">
|
|
|
+ <span class="pinyin">{{
|
|
|
+ item.pinyin_list && item.pinyin_list[indexs] ? item.pinyin_list[indexs] : ''
|
|
|
+ }}</span>
|
|
|
<Strockplayredline
|
|
|
v-if="items"
|
|
|
- :key="indexs"
|
|
|
:play-storkes="true"
|
|
|
:book-text="items.hz"
|
|
|
:target-div="'pre' + items.hz + indexs + active_index"
|
|
|
:book-strokes="items.strokes"
|
|
|
:class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
|
|
|
/>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.audio_file_id" class="pinyin-box">
|
|
|
+ <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-divider />
|
|
|
<div v-if="option_list[active_index]" class="content-box">
|
|
|
- <span v-if="option_list[active_index].definition_preview.length > 0" class="tips">释义:</span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ option_list[active_index].definition_preview.length > 0 && option_list[active_index].definition_preview[0]
|
|
|
+ "
|
|
|
+ class="tips"
|
|
|
+ >释义:</span
|
|
|
+ >
|
|
|
<p v-for="(itemd, indexd) in option_list[active_index].definition_preview" :key="indexd" class="definition">
|
|
|
{{ itemd }}
|
|
|
</p>
|
|
@@ -56,7 +63,13 @@
|
|
|
<p v-if="option_list[active_index].collocation" class="definition">
|
|
|
{{ option_list[active_index].collocation }}
|
|
|
</p>
|
|
|
- <span v-if="option_list[active_index].example_sentence.length > 0" class="tips">例句:</span>
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ option_list[active_index].example_sentence.length > 0 && option_list[active_index].example_sentence[0]
|
|
|
+ "
|
|
|
+ class="tips"
|
|
|
+ >例句:</span
|
|
|
+ >
|
|
|
<template v-for="(iteme, indexe) in option_list[active_index].example_sentence">
|
|
|
<p v-if="iteme.trim()" :key="indexe + iteme.trim()" class="example-sentence">
|
|
|
<span>{{ computeOptionMethods[data.option_number_show_mode](indexe) }} </span>
|
|
@@ -118,6 +131,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
+ console.log(this.data);
|
|
|
// this.handleData();
|
|
|
},
|
|
|
mounted() {},
|
|
@@ -137,6 +151,7 @@ export default {
|
|
|
audio_file_id: '',
|
|
|
};
|
|
|
item.definition_preview = item.definition.split('\n');
|
|
|
+ item.pinyin_list = item.pinyin.split(' ');
|
|
|
if (!this.isJudgingRightWrong) {
|
|
|
this.answer.answer_list.push(obj);
|
|
|
}
|
|
@@ -189,10 +204,12 @@ export default {
|
|
|
}
|
|
|
|
|
|
.pinyin {
|
|
|
+ display: block;
|
|
|
font-family: 'League';
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
- color: #fff;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.strock-chinese {
|
|
@@ -213,6 +230,7 @@ export default {
|
|
|
|
|
|
.strock-left {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.pinyin-box {
|
|
@@ -220,8 +238,9 @@ export default {
|
|
|
gap: 4px;
|
|
|
align-items: center;
|
|
|
width: max-content;
|
|
|
+ height: 36px;
|
|
|
padding: 4px 8px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-left: 16px;
|
|
|
background: rgba(47, 111, 236, 100%);
|
|
|
border-radius: 40px;
|
|
|
|