|
|
@@ -2,19 +2,16 @@
|
|
|
<template>
|
|
|
<div class="Big-Book-prev-Textdes InputHasRecord NPC-zhedie" v-if="curQue">
|
|
|
<template v-if="curQue.guide">
|
|
|
- <el-collapse v-model="wordShow">
|
|
|
- <el-collapse-item name="1">
|
|
|
- <template #title>
|
|
|
<div class="topTitle">
|
|
|
<div class="NPC-top-left">
|
|
|
<span class="NPC-topTitle-text">{{ curQue.guide }}</span>
|
|
|
</div>
|
|
|
<div class="NPC-top-right">
|
|
|
- <span class="NPC-top-right-text">{{
|
|
|
- wordShow.indexOf("1") != -1 ? "收起" : "展开"
|
|
|
+ <span class="NPC-top-right-text" @click="handleChangeTab">{{
|
|
|
+ wordShow ? "收起" : "展开"
|
|
|
}}</span>
|
|
|
<img
|
|
|
- v-if="wordShow.indexOf('1') != -1"
|
|
|
+ v-if="wordShow"
|
|
|
src="../../../assets/NPC/down.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
@@ -26,108 +23,108 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <div
|
|
|
- class="NPC-word-list"
|
|
|
- v-if="curQue.option && curQue.option.length > 0"
|
|
|
- >
|
|
|
- <h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
- <div v-for="(items, indexs) in curQue.option" :key="indexs">
|
|
|
- <div class="item-content">
|
|
|
- <b class="xuhao" v-if="items.number">{{ items.number }}</b>
|
|
|
- <template v-if="items.detail.wordsList.length == 0">
|
|
|
- <p
|
|
|
- :class="['content-con', items.font]"
|
|
|
- v-if="items.detail.sentence"
|
|
|
- >
|
|
|
- {{ items.detail.sentence }}
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="con-box">
|
|
|
- <div
|
|
|
- :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
|
|
|
- v-for="(itemCon, indexCon) in items.detail.resArr"
|
|
|
- :key="indexCon"
|
|
|
- v-show="itemCon.isShow"
|
|
|
- >
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- items.detail.wordsList[indexCon + 1] &&
|
|
|
- items.detail.wordsList[indexCon + 1].chs &&
|
|
|
- chsFhList.indexOf(
|
|
|
- items.detail.wordsList[indexCon + 1].chs
|
|
|
- ) > -1
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="synthesis-box">
|
|
|
- <div>
|
|
|
- <span
|
|
|
- class="pinyin"
|
|
|
- :class="[
|
|
|
- noFont.indexOf(itemCon.pinyin) > -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- >{{ itemCon.pinyin }}</span
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div
|
|
|
+ class="NPC-word-list"
|
|
|
+ v-if="curQue.option && curQue.option.length > 0"
|
|
|
+ v-show="wordShow"
|
|
|
+ >
|
|
|
+ <h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
+ <div v-for="(items, indexs) in curQue.option" :key="indexs">
|
|
|
+ <div class="item-content">
|
|
|
+ <b class="xuhao" v-if="items.number">{{ items.number }}</b>
|
|
|
+ <template v-if="items.detail.wordsList.length == 0">
|
|
|
+ <p
|
|
|
+ :class="['content-con', items.font]"
|
|
|
+ v-if="items.detail.sentence"
|
|
|
+ >
|
|
|
+ {{ items.detail.sentence }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="con-box">
|
|
|
+ <div
|
|
|
+ :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
|
|
|
+ v-for="(itemCon, indexCon) in items.detail.resArr"
|
|
|
+ :key="indexCon"
|
|
|
+ v-show="itemCon.isShow"
|
|
|
>
|
|
|
- <span class="hanzi content-con">{{
|
|
|
- itemCon.chs
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div style="text-align: left">
|
|
|
- <span
|
|
|
- class="pinyin"
|
|
|
- :class="[
|
|
|
- noFont.indexOf(
|
|
|
- items.detail.wordsList[indexCon + 1].pinyin
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ items.detail.wordsList[indexCon + 1] &&
|
|
|
+ items.detail.wordsList[indexCon + 1].chs &&
|
|
|
+ chsFhList.indexOf(
|
|
|
+ items.detail.wordsList[indexCon + 1].chs
|
|
|
) > -1
|
|
|
- ? 'noFont'
|
|
|
- : '',
|
|
|
- ]"
|
|
|
- >{{
|
|
|
- items.detail.wordsList[indexCon + 1].pinyin
|
|
|
- }}</span
|
|
|
+ "
|
|
|
>
|
|
|
- <span class="hanzi content-con">{{
|
|
|
- items.detail.wordsList[indexCon + 1].chs
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
+ <div class="synthesis-box">
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >{{ itemCon.pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{
|
|
|
+ itemCon.chs
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left">
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(
|
|
|
+ items.detail.wordsList[indexCon + 1].pinyin
|
|
|
+ ) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >{{
|
|
|
+ items.detail.wordsList[indexCon + 1].pinyin
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{
|
|
|
+ items.detail.wordsList[indexCon + 1].chs
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="pinyin"
|
|
|
+ :class="[
|
|
|
+ noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ ]"
|
|
|
+ >{{ itemCon.pinyin }}</span
|
|
|
+ >
|
|
|
+ <span class="hanzi content-con">{{ itemCon.chs }}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span
|
|
|
- class="pinyin"
|
|
|
- :class="[
|
|
|
- noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
|
|
|
- ]"
|
|
|
- >{{ itemCon.pinyin }}</span
|
|
|
- >
|
|
|
- <span class="hanzi content-con">{{ itemCon.chs }}</span>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="inputInner">
|
|
|
+ <el-input
|
|
|
+ :class="['textarea', items.record ? '' : 'textareaNoRecord']"
|
|
|
+ type="textarea"
|
|
|
+ v-model="textareaCon"
|
|
|
+ placeholder="输入"
|
|
|
+ ></el-input>
|
|
|
+ <div v-if="items.record" class="luyin-inner">
|
|
|
+ <Soundrecord
|
|
|
+ @handleWav="handleWav"
|
|
|
+ type="promax"
|
|
|
+ class="luyin-box"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="inputInner">
|
|
|
- <el-input
|
|
|
- :class="['textarea', items.record ? '' : 'textareaNoRecord']"
|
|
|
- type="textarea"
|
|
|
- v-model="textareaCon"
|
|
|
- placeholder="输入"
|
|
|
- ></el-input>
|
|
|
- <div v-if="items.record" class="luyin-inner">
|
|
|
- <Soundrecord
|
|
|
- @handleWav="handleWav"
|
|
|
- type="promax"
|
|
|
- class="luyin-box"
|
|
|
- />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
+ </el-collapse-transition>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<h2 v-if="curQue.title" style="margin-top: 0">{{ curQue.title }}</h2>
|
|
|
@@ -229,7 +226,7 @@ export default {
|
|
|
props: ["curQue"],
|
|
|
data() {
|
|
|
return {
|
|
|
- wordShow: ["1"],
|
|
|
+ wordShow: true,
|
|
|
textareaCon: "", // 输入框
|
|
|
chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
|
|
|
@@ -269,6 +266,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ handleChangeTab(){
|
|
|
+ this.wordShow = !this.wordShow
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
@@ -390,6 +390,9 @@ export default {
|
|
|
}
|
|
|
.NPC-zhedie {
|
|
|
width: 780px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
// margin-top: 16px;
|
|
|
.topTitle {
|
|
|
width: 100%;
|
|
|
@@ -397,6 +400,8 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
padding-left: 24px;
|
|
|
padding-right: 16px;
|
|
|
+ height: 48px;
|
|
|
+ background: #e35454;
|
|
|
.NPC-top-left {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
@@ -420,8 +425,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
}
|
|
|
.rotate {
|
|
|
animation-name: firstrotate;
|
natasha