|
|
@@ -34,36 +34,41 @@
|
|
|
:key="'detail' + index"
|
|
|
>
|
|
|
<div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
|
|
|
- <RoleChs :curRole="item.roleDetail" />
|
|
|
+ <RoleChs :curRole="item.roleDetail" :type="1" />
|
|
|
<div class="wordsList-box">
|
|
|
- <img
|
|
|
- :src="articleImg[index]"
|
|
|
- v-if="articleImg[0] && index == 0"
|
|
|
- />
|
|
|
- <div :style="{ background: item.roleDetail.color.bg }">
|
|
|
+ <div
|
|
|
+ class="roleDetail"
|
|
|
+ v-if="item.roleDetail.detail.wordsList.length > 0"
|
|
|
+ >
|
|
|
+ <span class="pinyin">{{
|
|
|
+ item.roleDetail.detail.wordsList | handlePinyin
|
|
|
+ }}</span>
|
|
|
+ <span class="chs">{{
|
|
|
+ item.roleDetail.detail.wordsList | handleChs
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="para-con"
|
|
|
+ :style="{ background: item.roleDetail.color.bg }"
|
|
|
+ >
|
|
|
<div
|
|
|
class="NNPE-words"
|
|
|
v-for="(pItem, pIndex) in item.wordsList"
|
|
|
:key="'wordsList' + pIndex"
|
|
|
:class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
|
|
|
- @click="
|
|
|
- handleChangeTime(
|
|
|
- item.timeList.length > 0 &&
|
|
|
- item.timeList[pItem.sentIndex].bg
|
|
|
- )
|
|
|
- "
|
|
|
>
|
|
|
<template v-if="!pItem.width">
|
|
|
<template v-if="pItem.isShow">
|
|
|
<template
|
|
|
v-if="
|
|
|
+ item.wordsList[pIndex + 1] &&
|
|
|
item.wordsList[pIndex + 1].chs &&
|
|
|
chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
|
|
|
"
|
|
|
>
|
|
|
<span class="NNPE-words-box">
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'top'"
|
|
|
+ v-if="pyPosition == 'top'"
|
|
|
class="NNPE-pinyin"
|
|
|
:class="[pItem.className ? pItem.className : '']"
|
|
|
>{{ pItem.pinyin }}</span
|
|
|
@@ -83,7 +88,7 @@
|
|
|
>{{ pItem.chs }}</span
|
|
|
>
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'bottom'"
|
|
|
+ v-if="pyPosition == 'bottom'"
|
|
|
class="NNPE-pinyin"
|
|
|
:class="[pItem.className ? pItem.className : '']"
|
|
|
>{{ pItem.pinyin }}</span
|
|
|
@@ -91,7 +96,7 @@
|
|
|
</span>
|
|
|
<span class="NNPE-words-box">
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'top'"
|
|
|
+ v-if="pyPosition == 'top'"
|
|
|
class="NNPE-pinyin"
|
|
|
style="text-align: left"
|
|
|
>{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
@@ -112,7 +117,7 @@
|
|
|
>{{ item.wordsList[pIndex + 1].chs }}</span
|
|
|
>
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'bottom'"
|
|
|
+ v-if="pyPosition == 'bottom'"
|
|
|
class="NNPE-pinyin"
|
|
|
style="text-align: left"
|
|
|
>{{ item.wordsList[pIndex + 1].pinyin }}</span
|
|
|
@@ -121,7 +126,7 @@
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<span
|
|
|
- v-if="curQue.pyPosition == 'top'"
|
|
|
+ v-if="pyPosition == 'top'"
|
|
|
class="NNPE-pinyin"
|
|
|
:class="[
|
|
|
pItem.padding ? 'padding' : '',
|
|
|
@@ -129,23 +134,29 @@
|
|
|
]"
|
|
|
>{{ pItem.pinyin }}</span
|
|
|
>
|
|
|
+ <template v-if="!pItem.isHeng">
|
|
|
+ <span
|
|
|
+ v-if="pItem.chs != '#'"
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ item.timeList.length > 0 &&
|
|
|
+ curTime >=
|
|
|
+ item.timeList[pItem.sentIndex].wordsResultList[
|
|
|
+ pItem.wordIndex
|
|
|
+ ].wordBg &&
|
|
|
+ curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ pItem.padding ? 'padding' : '',
|
|
|
+ ]"
|
|
|
+ >{{ pItem.chs }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <input v-model="pItem.answer" class="answer-input" />
|
|
|
+ </template>
|
|
|
<span
|
|
|
- class="NNPE-chs"
|
|
|
- :class="[
|
|
|
- item.timeList.length > 0 &&
|
|
|
- curTime >=
|
|
|
- item.timeList[pItem.sentIndex].wordsResultList[
|
|
|
- pItem.wordIndex
|
|
|
- ].wordBg &&
|
|
|
- curTime <= item.timeList[pItem.sentIndex].ed
|
|
|
- ? 'wordActive'
|
|
|
- : '',
|
|
|
- pItem.padding ? 'padding' : '',
|
|
|
- ]"
|
|
|
- >{{ pItem.chs }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="curQue.pyPosition == 'bottom'"
|
|
|
+ v-if="pyPosition == 'bottom'"
|
|
|
class="NNPE-pinyin"
|
|
|
:class="[
|
|
|
pItem.padding ? 'padding' : '',
|
|
|
@@ -169,7 +180,14 @@
|
|
|
{{ item.enwords }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
|
|
|
+ <div class="clearFix"></div>
|
|
|
+ <div class="input-record" v-if="item.isRecord">
|
|
|
+ <Soundrecord
|
|
|
+ @handleWav="handleWav"
|
|
|
+ type="mini"
|
|
|
+ class="mini-box"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="remarkBox remark-top" v-if="item.remarkDetail">
|
|
|
@@ -180,9 +198,9 @@
|
|
|
<div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
|
|
|
<div class="empty-right"></div>
|
|
|
</div>
|
|
|
- <div class="dia-article-record">
|
|
|
+ <!-- <div class="dia-article-record">
|
|
|
<Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -196,13 +214,37 @@ import RemarkChs from "./RemarkChs.vue";
|
|
|
import Soundrecord from "../Soundrecord.vue";
|
|
|
export default {
|
|
|
name: "DialogueNormalModelChs",
|
|
|
- props: ["curQue", "colorBox"],
|
|
|
+ props: ["curQue", "pyPosition", "colorBox"],
|
|
|
components: {
|
|
|
AudioLine,
|
|
|
RoleChs,
|
|
|
RemarkChs,
|
|
|
Soundrecord,
|
|
|
},
|
|
|
+ filters: {
|
|
|
+ handlePinyin(wordsList) {
|
|
|
+ let str = "";
|
|
|
+ wordsList.forEach((item, index) => {
|
|
|
+ if (index < wordsList.length - 1) {
|
|
|
+ str += item.pinyin + " ";
|
|
|
+ } else {
|
|
|
+ str += item.pinyin;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ handleChs(wordsList) {
|
|
|
+ let str = "";
|
|
|
+ wordsList.forEach((item, index) => {
|
|
|
+ if (index < wordsList.length - 1) {
|
|
|
+ str += item.chs + " ";
|
|
|
+ } else {
|
|
|
+ str += item.chs;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
resArr: [],
|
|
|
@@ -232,6 +274,7 @@ export default {
|
|
|
let leg = this.curQue.detail.length;
|
|
|
let curQue = JSON.parse(JSON.stringify(this.curQue));
|
|
|
curQue.detail.forEach((dItem, dIndex) => {
|
|
|
+ let isRecord = 0;
|
|
|
let roleDetail = this.getRole(dItem);
|
|
|
let remarkDetail = dItem.remark;
|
|
|
if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
|
|
|
@@ -240,8 +283,7 @@ export default {
|
|
|
let paraArr = [];
|
|
|
dItem.wordsList.forEach((sItem, sIndex) => {
|
|
|
sItem.forEach((wItem, wIndex) => {
|
|
|
- //this.judgePad(sItem, wItem, wIndex);
|
|
|
- this.mergeWordSymbol(sItem, wItem, wIndex);
|
|
|
+ this.mergeWordSymbol(wItem);
|
|
|
let obj = {
|
|
|
paraIndex: dIndex, //段落索引
|
|
|
sentIndex: sIndex, //在段落中句子索引
|
|
|
@@ -256,6 +298,9 @@ export default {
|
|
|
isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
|
|
|
};
|
|
|
paraArr.push(obj);
|
|
|
+ if (obj.isHeng) {
|
|
|
+ isRecord = isRecord + 1;
|
|
|
+ }
|
|
|
});
|
|
|
});
|
|
|
let curSentencesLeg = dItem.sentences.length;
|
|
|
@@ -276,6 +321,7 @@ export default {
|
|
|
timeList: timeList,
|
|
|
roleDetail: roleDetail,
|
|
|
remarkDetail: remarkDetail,
|
|
|
+ isRecord: isRecord > 0 ? true : false,
|
|
|
};
|
|
|
resArr.push(paraObj);
|
|
|
});
|
|
|
@@ -291,14 +337,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//词和标点合一起
|
|
|
- mergeWordSymbol(sItem, wItem, curIndex) {
|
|
|
- let leg = sItem.length;
|
|
|
- if (curIndex < leg - 1) {
|
|
|
- if (this.chsFhList.indexOf(wItem.chs) > -1) {
|
|
|
- wItem.isShow = false;
|
|
|
- } else {
|
|
|
- wItem.isShow = true;
|
|
|
- }
|
|
|
+ mergeWordSymbol(wItem) {
|
|
|
+ if (this.chsFhList.indexOf(wItem.chs) > -1) {
|
|
|
+ wItem.isShow = false;
|
|
|
+ } else {
|
|
|
+ wItem.isShow = true;
|
|
|
}
|
|
|
},
|
|
|
//获取角色
|
|
|
@@ -355,7 +398,7 @@ export default {
|
|
|
created() {},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
- console.log(this.curQue);
|
|
|
+
|
|
|
if (this.curQue) {
|
|
|
this.handleData();
|
|
|
}
|
|
|
@@ -373,7 +416,10 @@ export default {
|
|
|
//@import url(); 引入公共css类
|
|
|
.NNPE-ArticleView {
|
|
|
width: 100%;
|
|
|
-
|
|
|
+ .clearFix {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
.NPC-sentences-list {
|
|
|
.NPC-article-empty {
|
|
|
display: flex;
|
|
|
@@ -426,6 +472,9 @@ export default {
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
padding: 8px 24px 8px 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
&.hasRemark {
|
|
|
width: 553px;
|
|
|
border-right: 1px rgba(0, 0, 0, 0.1) solid;
|
|
|
@@ -504,6 +553,21 @@ export default {
|
|
|
padding: 0 3px;
|
|
|
}
|
|
|
}
|
|
|
+ .answer-input {
|
|
|
+ height: 28px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0;
|
|
|
+ border-bottom: 1px #000 solid;
|
|
|
+ background: 0 0;
|
|
|
+ width: 100px;
|
|
|
+ outline: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
}
|
|
|
.enwords {
|
|
|
font-family: "robot";
|
|
|
@@ -535,10 +599,30 @@ export default {
|
|
|
|
|
|
.wordsList-box {
|
|
|
width: 100%;
|
|
|
- padding: 0px 24px 0px 40px;
|
|
|
+ padding: 0px 24px 0px 8px;
|
|
|
clear: both;
|
|
|
overflow: hidden;
|
|
|
- > div {
|
|
|
+ .roleDetail {
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ margin-right: 4px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .para-con {
|
|
|
float: left;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
box-sizing: border-box;
|
|
|
@@ -549,6 +633,15 @@ export default {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
}
|
|
|
+ .input-record {
|
|
|
+ margin-top: 8px;
|
|
|
+ .mini-box {
|
|
|
+ width: 64px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.remarkBox {
|
guanchunjie
