|
@@ -31,18 +31,32 @@
|
|
|
curTime < curQue.wordTime[index].ed &&
|
|
|
stopAudio
|
|
|
? 'active'
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
- @click="handleChangeTime(curQue.wordTime[index].bg,curQue.wordTime[index].ed)"
|
|
|
+ @click="
|
|
|
+ handleChangeTime(
|
|
|
+ curQue.wordTime[index].bg,
|
|
|
+ curQue.wordTime[index].ed
|
|
|
+ )
|
|
|
+ "
|
|
|
></a>
|
|
|
- <b v-if="items.number">{{ items.number }}</b>
|
|
|
+ <b
|
|
|
+ v-if="items.number"
|
|
|
+ :style="{ fontSize: baseSizePhone - 2 + 'px' }"
|
|
|
+ >{{ items.number }}</b
|
|
|
+ >
|
|
|
<div class="content-box">
|
|
|
<template v-if="items.detail.wordsList.length == 0">
|
|
|
<p
|
|
|
:class="[
|
|
|
'content-con',
|
|
|
- items.font?items.font:/^[\u4e00-\u9fa5]/.test(items.detail.sentence) ? '' : 'hasPy',
|
|
|
+ items.font
|
|
|
+ ? items.font
|
|
|
+ : /^[\u4e00-\u9fa5]/.test(items.detail.sentence)
|
|
|
+ ? ''
|
|
|
+ : 'hasPy'
|
|
|
]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
v-if="items.detail.sentence"
|
|
|
>
|
|
|
{{ items.detail.sentence }}
|
|
@@ -59,10 +73,10 @@
|
|
|
<template
|
|
|
v-if="
|
|
|
items.detail.wordsList[indexCon + 1] &&
|
|
|
- items.detail.wordsList[indexCon + 1].chs &&
|
|
|
- chsFhList.indexOf(
|
|
|
- items.detail.wordsList[indexCon + 1].chs
|
|
|
- ) > -1
|
|
|
+ items.detail.wordsList[indexCon + 1].chs &&
|
|
|
+ chsFhList.indexOf(
|
|
|
+ items.detail.wordsList[indexCon + 1].chs
|
|
|
+ ) > -1
|
|
|
"
|
|
|
>
|
|
|
<div class="synthesis-box">
|
|
@@ -70,12 +84,18 @@
|
|
|
<span
|
|
|
class="pinyin"
|
|
|
:class="[
|
|
|
- noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
|
|
|
]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 'px' }"
|
|
|
v-if="itemCon.pinyin"
|
|
|
>{{ itemCon.pinyin }}</span
|
|
|
>
|
|
|
- <span class="hanzi content-con" :class="[itemCon.fontFamily]">{{ itemCon.chs }}</span>
|
|
|
+ <span
|
|
|
+ class="hanzi content-con"
|
|
|
+ :class="[itemCon.fontFamily]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
+ >{{ itemCon.chs }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
<div style="text-align: left">
|
|
|
<span
|
|
@@ -85,14 +105,20 @@
|
|
|
items.detail.wordsList[indexCon + 1].pinyin
|
|
|
) > -1
|
|
|
? 'noFont'
|
|
|
- : '',
|
|
|
+ : ''
|
|
|
]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 'px' }"
|
|
|
v-if="items.detail.wordsList[indexCon + 1].pinyin"
|
|
|
>{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
|
|
|
>
|
|
|
- <span class="hanzi content-con" :class="[items.detail.wordsList[indexCon + 1].fontFamily]">{{
|
|
|
- items.detail.wordsList[indexCon + 1].chs
|
|
|
- }}</span>
|
|
|
+ <span
|
|
|
+ class="hanzi content-con"
|
|
|
+ :class="[
|
|
|
+ items.detail.wordsList[indexCon + 1].fontFamily
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
+ >{{ items.detail.wordsList[indexCon + 1].chs }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -100,37 +126,56 @@
|
|
|
<span
|
|
|
class="pinyin"
|
|
|
:class="[
|
|
|
- noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
|
|
|
]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 'px' }"
|
|
|
v-if="itemCon.pinyin"
|
|
|
>{{ itemCon.pinyin }}</span
|
|
|
>
|
|
|
- <span class="hanzi content-con" :class="[itemCon.fontFamily]">{{ itemCon.chs }}</span>
|
|
|
+ <span
|
|
|
+ class="hanzi content-con"
|
|
|
+ :class="[itemCon.fontFamily]"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
+ >{{ itemCon.chs }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <b class="content-en" v-if="items.en">{{ items.en }}</b>
|
|
|
+ <b
|
|
|
+ class="content-en"
|
|
|
+ v-if="items.en"
|
|
|
+ :style="{ fontSize: baseSizePhone + 2 + 'px' }"
|
|
|
+ >{{ items.en }}</b
|
|
|
+ >
|
|
|
</div>
|
|
|
- <Soundrecord @handleWav="handleWav" type="normal" class="luyin-box" :answerRecordList="curQue.Bookanswer[index].recordList" :tmIndex="index" :TaskModel="TaskModel" />
|
|
|
+ <Soundrecord
|
|
|
+ @handleWav="handleWav"
|
|
|
+ type="normal"
|
|
|
+ class="luyin-box"
|
|
|
+ :answerRecordList="curQue.Bookanswer[index].recordList"
|
|
|
+ :tmIndex="index"
|
|
|
+ :TaskModel="TaskModel"
|
|
|
+ :baseSizePhone="baseSizePhone"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AudioLine from "../preview/AudioLine.vue";
|
|
|
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
+import AudioLine from "../phonePreview/AudioLine.vue";
|
|
|
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
|
|
|
export default {
|
|
|
components: { AudioLine, Soundrecord },
|
|
|
- props: ["curQue", "themeColor", "TaskModel"],
|
|
|
+ props: ["curQue", "themeColor", "TaskModel", "baseSizePhone"],
|
|
|
data() {
|
|
|
return {
|
|
|
curTime: 0,
|
|
|
chsFhList: [",", "。", "“", ":", "》", "?", "!", ";"],
|
|
|
noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
|
|
|
stopAudio: false,
|
|
|
- ed:null,
|
|
|
+ ed: null
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
@@ -143,14 +188,14 @@ export default {
|
|
|
this.dataType = [];
|
|
|
if (!this.curQue.Bookanswer) {
|
|
|
let curCorrect = [];
|
|
|
- this.curQue.option.forEach((item) => {
|
|
|
+ this.curQue.option.forEach(item => {
|
|
|
curCorrect.push({
|
|
|
- recordList: []
|
|
|
+ recordList: []
|
|
|
});
|
|
|
});
|
|
|
this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
}
|
|
|
- this.curQue.fn_list.forEach((item) => {
|
|
|
+ this.curQue.fn_list.forEach(item => {
|
|
|
if (item.isFn) {
|
|
|
_this.dataType.push(item.type);
|
|
|
}
|
|
@@ -163,7 +208,7 @@ export default {
|
|
|
let obj = {
|
|
|
pinyin: sItem.pinyin,
|
|
|
chs: sItem.chs,
|
|
|
- isShow: sItem.isShow,
|
|
|
+ isShow: sItem.isShow
|
|
|
};
|
|
|
paraArr.push(obj);
|
|
|
});
|
|
@@ -185,22 +230,22 @@ export default {
|
|
|
this.curTime = curTime * 1000;
|
|
|
},
|
|
|
handleWav(list, tmIndex) {
|
|
|
- tmIndex = tmIndex ? tmIndex : 0;
|
|
|
- this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
|
|
|
+ tmIndex = tmIndex ? tmIndex : 0;
|
|
|
+ this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
|
|
|
},
|
|
|
//点击播放某个句子
|
|
|
- handleChangeTime(time,edTime) {
|
|
|
+ handleChangeTime(time, edTime) {
|
|
|
let _this = this;
|
|
|
_this.curTime = time;
|
|
|
- _this.stopAudio = true
|
|
|
+ _this.stopAudio = true;
|
|
|
_this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
- _this.ed = edTime
|
|
|
+ _this.ed = edTime;
|
|
|
},
|
|
|
handleListenRead(playFlag) {
|
|
|
this.stopAudio = playFlag;
|
|
|
},
|
|
|
- emptyEd(){
|
|
|
- this.ed = null;
|
|
|
+ emptyEd() {
|
|
|
+ this.ed = null;
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
@@ -215,33 +260,33 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
.SentenceListenRead {
|
|
|
- background: #f7f7f7;
|
|
|
+ // background: #f7f7f7;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
// margin-top: 16px;
|
|
|
.aduioLine-box {
|
|
|
- background: #f7f7f7;
|
|
|
+ // background: #f7f7f7;
|
|
|
}
|
|
|
.item-box {
|
|
|
- padding: 16px 24px;
|
|
|
+ padding: 10px;
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
.item {
|
|
|
- padding: 8px 12px;
|
|
|
+ padding: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- background: #ffffff;
|
|
|
+ // background: #ffffff;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
- margin: 8px 0;
|
|
|
+ margin: 5px 0;
|
|
|
b {
|
|
|
background: #de4444;
|
|
|
text-align: center;
|
|
@@ -273,10 +318,10 @@ export default {
|
|
|
color: #000000;
|
|
|
font-family: "FZJCGFKTK";
|
|
|
margin: 0;
|
|
|
- &.en{
|
|
|
+ &.en {
|
|
|
font-family: "robot";
|
|
|
}
|
|
|
- &.py{
|
|
|
+ &.py {
|
|
|
font-family: "GB-PINYINOK-B";
|
|
|
}
|
|
|
&.hasPy {
|
|
@@ -322,8 +367,8 @@ export default {
|
|
|
.luyin-box {
|
|
|
// border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 8px;
|
|
|
- width: 128px;
|
|
|
- padding: 0 12px;
|
|
|
+ min-width: 98px;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -366,5 +411,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|