|
|
@@ -4,8 +4,14 @@
|
|
|
<SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
|
|
|
|
|
|
<div v-if="data" class="main">
|
|
|
- <div class="NPC-zhedie">
|
|
|
- <div class="topTitle" :style="{ backgroundColor: bookInfo.theme_color }">
|
|
|
+ <div class="NPC-zhedie" :style="{ width: width }">
|
|
|
+ <div
|
|
|
+ class="topTitle"
|
|
|
+ :style="{
|
|
|
+ backgroundColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
<div class="NPC-top-left">
|
|
|
<span class="NPC-topTitle-text" v-html="data.title_con"></span>
|
|
|
<span class="NPC-topTitle-text" v-if="showLang">
|
|
|
@@ -33,6 +39,7 @@
|
|
|
:ed="ed"
|
|
|
type="audioLine"
|
|
|
@handleListenRead="handleListenRead"
|
|
|
+ :attrib="data.unified_attrib"
|
|
|
/>
|
|
|
</div>
|
|
|
<ul
|
|
|
@@ -58,16 +65,60 @@
|
|
|
]"
|
|
|
>
|
|
|
<template v-if="sItem.bg || sItem.ed">
|
|
|
- <a
|
|
|
+ <!-- <a
|
|
|
:class="['play-btn', curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '']"
|
|
|
@click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
- ></a>
|
|
|
+ ></a> -->
|
|
|
+ <SvgIcon
|
|
|
+ v-if="curTime >= sItem.bg && curTime < sItem.ed && stopAudioS"
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
+ icon-class="animated"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ @click="handleChangeTime(sItem.bg, sItem.ed)"
|
|
|
+ icon-class="play-btn"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
</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)"
|
|
|
- ></span>
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ v-if="playClass && mp3_index === sItem.sIndex"
|
|
|
+ icon-class="animated"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+ <SvgIcon
|
|
|
+ v-else
|
|
|
+ icon-class="play-btn"
|
|
|
+ :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>
|
|
|
|
|
|
@@ -76,7 +127,16 @@
|
|
|
</template>
|
|
|
<div class="tabNum-box">
|
|
|
<template v-if="sItem.mIndex == 0">
|
|
|
- <b class="tabNum" :style="{ backgroundColor: bookInfo.theme_color }">{{ index + 1 }}</b>
|
|
|
+ <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>
|
|
|
@@ -230,6 +290,7 @@
|
|
|
class="luyin-box-wordphrase"
|
|
|
:style="{ marginLeft: '8px' }"
|
|
|
@handleWav="handleWav"
|
|
|
+ :attrib="data.unified_attrib"
|
|
|
/>
|
|
|
</span>
|
|
|
<span v-if="isEnable(data.property.is_has_infor)">
|
|
|
@@ -285,7 +346,8 @@
|
|
|
class="left left-preview"
|
|
|
:class="[item.file_list[0] ? '' : 'left-big']"
|
|
|
:style="{
|
|
|
- borderColor: '#f44444',
|
|
|
+ borderColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
|
|
|
padding:
|
|
|
item.new_word && (item.header_con || item.label)
|
|
|
? ''
|
|
|
@@ -296,7 +358,15 @@
|
|
|
>
|
|
|
<div class="header-info-preview">
|
|
|
<h5 :style="{ textAlign: 'left' }">{{ item.header_con }}</h5>
|
|
|
- <label :style="{ background: '#f44444' }">{{ item.label }}</label>
|
|
|
+ <label
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ item.label }}</label
|
|
|
+ >
|
|
|
</div>
|
|
|
<div v-if="item.file_list[0]" class="item-image">
|
|
|
<el-image
|
|
|
@@ -324,13 +394,22 @@
|
|
|
v-else
|
|
|
class="right right-preview left-preview right-preview-rota"
|
|
|
:style="{
|
|
|
- borderColor: '#f44444',
|
|
|
+ borderColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
|
|
|
paddingTop: item.collocation || item.liju_list || item.definition_list ? '' : '50px',
|
|
|
}"
|
|
|
>
|
|
|
<div class="header-info-preview">
|
|
|
<h5 :style="{ textAlign: 'left' }">{{ item.header_con }}</h5>
|
|
|
- <label :style="{ background: '#f44444' }">{{ item.label }}</label>
|
|
|
+ <label
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >{{ item.label }}</label
|
|
|
+ >
|
|
|
</div>
|
|
|
<div
|
|
|
:style="{
|
|
|
@@ -341,24 +420,50 @@
|
|
|
}"
|
|
|
>
|
|
|
<div v-if="item.hz_info.length > 0" style="width: max-content">
|
|
|
- <AudioPlay v-if="item.mp3_list" :style="{ background: '#f44444' }" :file-id="item.mp3_list" />
|
|
|
+ <AudioPlay
|
|
|
+ v-if="item.mp3_list"
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ :file-id="item.mp3_list"
|
|
|
+ />
|
|
|
<p
|
|
|
v-if="item.pinyin && item.pinyin.split(' ').length === 1"
|
|
|
- :style="{ color: '#f44444' }"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
class="pinyin-box"
|
|
|
>
|
|
|
{{ item.pinyin }}
|
|
|
</p>
|
|
|
<div class="hz-box">
|
|
|
<div v-for="(itemh, indexh) in item.hz_info" :key="indexh" class="hz-item">
|
|
|
- <p v-if="item.pinyin && item.pinyin.split(' ').length > 1" :style="{ color: '#f44444' }">
|
|
|
+ <p
|
|
|
+ v-if="item.pinyin && item.pinyin.split(' ').length > 1"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
{{ item.pinyin.split(' ')[indexh] ? item.pinyin.split(' ')[indexh] : '' }}
|
|
|
</p>
|
|
|
<Strockplay
|
|
|
class-name="adult-strockplay"
|
|
|
:Book_text="itemh.con"
|
|
|
:play-storkes="true"
|
|
|
- :stroke-play-color="'#f44444'"
|
|
|
+ :stroke-play-color="
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '#f44444'
|
|
|
+ "
|
|
|
:stroke-color="'#000000'"
|
|
|
:paly-width="'18px'"
|
|
|
:BoxbgType="'0'"
|
|
|
@@ -366,7 +471,12 @@
|
|
|
:target-div="'writeTops-item-' + indexh + '-' + itemh.con + '-' + index + '-' + indexs"
|
|
|
:class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
|
|
|
class="writeTop-item"
|
|
|
- :style="{ borderColor: '#f44444' }"
|
|
|
+ :style="{
|
|
|
+ borderColor:
|
|
|
+ data.unified_attrib && data.unified_attrib.topic_color
|
|
|
+ ? data.unified_attrib.topic_color
|
|
|
+ : '#f44444',
|
|
|
+ }"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -500,6 +610,7 @@ export default {
|
|
|
rowWidth: 0,
|
|
|
multilingualTextList: {}, // 多语言对应的切割后的翻译
|
|
|
titleTrans: {},
|
|
|
+ width: 0,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -728,6 +839,13 @@ export default {
|
|
|
item.isFlipped = !item.isFlipped;
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.width =
|
|
|
+ document.querySelector('.preview-main').offsetWidth -
|
|
|
+ 73 -
|
|
|
+ (this.data.property.sn_display_mode === 'true' ? 15 : 0) +
|
|
|
+ 'px';
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -738,7 +856,7 @@ export default {
|
|
|
@include preview-base;
|
|
|
|
|
|
.NPC-zhedie {
|
|
|
- width: 1000px;
|
|
|
+ // width: 1000px;
|
|
|
|
|
|
// width: 780px;
|
|
|
// margin-bottom: 24px;
|
|
|
@@ -855,12 +973,13 @@ export default {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-top: 4px;
|
|
|
- background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
+
|
|
|
+ // background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
|
|
|
+ // background-size: 100% 100%;
|
|
|
|
|
|
&.active {
|
|
|
- background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
+ // background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
|
|
|
+ // background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1583,6 +1702,7 @@ export default {
|
|
|
|
|
|
.el-slider {
|
|
|
position: relative;
|
|
|
+ flex: 1;
|
|
|
|
|
|
// top: -3px;
|
|
|
}
|
natasha
