|
|
@@ -1,99 +1,99 @@
|
|
|
<template>
|
|
|
<div class="NPC-zhedie">
|
|
|
- <div class="topTitle">
|
|
|
- <div class="NPC-top-left">
|
|
|
- <span class="NPC-topTitle-text">{{ curQue.title }}</span>
|
|
|
- <span
|
|
|
- :class="['NPC-play-all', playClass]"
|
|
|
- @click.stop="playNewwords"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <div class="NPC-top-right">
|
|
|
- <span class="NPC-top-right-text" @click="handleChangeTab">{{
|
|
|
- wordShow ? "收起" : "展开"
|
|
|
- }}</span>
|
|
|
- <img
|
|
|
- v-if="wordShow"
|
|
|
- src="../../../assets/NPC/down.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img v-else src="../../../assets/NPC/up.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-collapse-transition>
|
|
|
+ <div class="topTitle">
|
|
|
+ <div class="NPC-top-left">
|
|
|
+ <span class="NPC-topTitle-text">{{ curQue.title }}</span>
|
|
|
+ <span
|
|
|
+ :class="['NPC-play-all', playClass]"
|
|
|
+ @click.stop="playNewwords"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div class="NPC-top-right">
|
|
|
+ <span class="NPC-top-right-text" @click="handleChangeTab">{{
|
|
|
+ wordShow ? "收起" : "展开"
|
|
|
+ }}</span>
|
|
|
+ <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
|
|
|
+ <img v-else src="../../../assets/NPC/up.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div
|
|
|
+ class="NPC-word-list"
|
|
|
+ v-if="curQue.option && curQue.option.length > 0"
|
|
|
+ v-show="wordShow"
|
|
|
+ >
|
|
|
+ <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
|
|
|
+ <li
|
|
|
+ class="NPC-word-tr"
|
|
|
+ v-for="(item, index) in curQue.option"
|
|
|
+ :key="'curQue.option' + index"
|
|
|
+ >
|
|
|
<div
|
|
|
- class="NPC-word-list"
|
|
|
- v-if="curQue.option && curQue.option.length > 0"
|
|
|
- v-show="wordShow"
|
|
|
+ :class="[
|
|
|
+ 'NPC-word-row',
|
|
|
+ mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ v-for="(sItem, sIndex) in item"
|
|
|
+ :key="'curQue.option.child' + sIndex"
|
|
|
>
|
|
|
- <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
|
|
|
- <li
|
|
|
- class="NPC-word-tr"
|
|
|
- v-for="(item, index) in curQue.option"
|
|
|
- :key="'curQue.option' + index"
|
|
|
- >
|
|
|
- <div
|
|
|
- :class="['NPC-word-row',mp3_index == sItem.sIndex?'active':'']"
|
|
|
- v-for="(sItem, sIndex) in item"
|
|
|
- :key="'curQue.option.child' + sIndex"
|
|
|
- >
|
|
|
- <template
|
|
|
- v-if="
|
|
|
- sItem.mp3_list &&
|
|
|
- sItem.mp3_list.length > 0 &&
|
|
|
- sItem.mp3_list[0].id
|
|
|
- "
|
|
|
- >
|
|
|
- <span
|
|
|
- :class="[
|
|
|
- themeColor == 'green'
|
|
|
- ? 'NPC-play-btn-green'
|
|
|
- : themeColor == 'red'
|
|
|
- ? 'NPC-play-btn-red'
|
|
|
- : 'NPC-play-btn-brown',
|
|
|
- mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
- ]"
|
|
|
- @click="palyAudio(sItem.sIndex)"
|
|
|
- ></span>
|
|
|
- <audio
|
|
|
- :id="'word' + indexs + indexss + sItem.sIndex"
|
|
|
- :src="sItem.mp3_list[0].id"
|
|
|
- ></audio>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span style="width: 16px; height: 16px"></span>
|
|
|
- </template>
|
|
|
- <span class="tabNum"
|
|
|
- ><template v-if="sItem.mIndex == 0"
|
|
|
- >{{ index + 1 }}.</template
|
|
|
- ></span
|
|
|
- >
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ sItem.mp3_list &&
|
|
|
+ sItem.mp3_list.length > 0 &&
|
|
|
+ sItem.mp3_list[0].id
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ themeColor == 'green'
|
|
|
+ ? 'NPC-play-btn-green'
|
|
|
+ : themeColor == 'red'
|
|
|
+ ? 'NPC-play-btn-red'
|
|
|
+ : 'NPC-play-btn-brown',
|
|
|
+ mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
+ ]"
|
|
|
+ @click="palyAudio(sItem.sIndex)"
|
|
|
+ ></span>
|
|
|
+ <audio
|
|
|
+ :id="'word' + indexs + indexss + sItem.sIndex"
|
|
|
+ :src="sItem.mp3_list[0].id"
|
|
|
+ ></audio>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span style="width: 16px; height: 16px"></span>
|
|
|
+ </template>
|
|
|
+ <b class="tabNum"
|
|
|
+ ><template v-if="sItem.mIndex == 0">{{
|
|
|
+ index + 1
|
|
|
+ }}</template></b
|
|
|
+ >
|
|
|
|
|
|
- <span class="NPC-word-tab-common NPC-word-tab-pinyin">
|
|
|
- {{ sItem.pinyin }}
|
|
|
- </span>
|
|
|
- <span class="NPC-word-tab-common NPC-word-tab-word">
|
|
|
- {{ sItem.new_word }}
|
|
|
- </span>
|
|
|
- <span class="NPC-word-tab-common NPC-word-tab-cixing">
|
|
|
- {{ sItem.cixing }}
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="NPC-word-tab-common NPC-word-tab-def"
|
|
|
- v-html="sItem.def_str"
|
|
|
- ></span>
|
|
|
- <span>
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/detail-icon.png"
|
|
|
- class="detail-icon"
|
|
|
- @click="showDetail(sItem)"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <span class="NPC-word-tab-common NPC-word-tab-pinyin">
|
|
|
+ {{ sItem.pinyin }}
|
|
|
+ </span>
|
|
|
+ <span class="NPC-word-tab-common NPC-word-tab-word">
|
|
|
+ {{ sItem.new_word }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-cixing"
|
|
|
+ v-html="sItem.cixing"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="NPC-word-tab-common NPC-word-tab-def"
|
|
|
+ v-html="sItem.def_str"
|
|
|
+ ></span>
|
|
|
+ <span>
|
|
|
+ <img
|
|
|
+ src="../../../assets/NPC/detail-icon.png"
|
|
|
+ class="detail-icon"
|
|
|
+ @click="showDetail(sItem)"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </el-collapse-transition>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
<div v-if="detailShow">
|
|
|
<WordPhraseDetail
|
|
|
v-if="isSuccess"
|
|
|
@@ -321,9 +321,9 @@ export default {
|
|
|
this.mp3List = mp3List;
|
|
|
}
|
|
|
},
|
|
|
- handleChangeTab(){
|
|
|
- this.wordShow = !this.wordShow
|
|
|
- }
|
|
|
+ handleChangeTab() {
|
|
|
+ this.wordShow = !this.wordShow;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
@@ -363,21 +363,30 @@ export default {
|
|
|
.NPC-zhedie {
|
|
|
width: 780px;
|
|
|
margin-bottom: 16px;
|
|
|
-
|
|
|
+ .NPC-word-list {
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
.NPC-word-table {
|
|
|
width: 100%;
|
|
|
> .NPC-word-tr {
|
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
|
- padding: 4px 0px 4px 0px;
|
|
|
+
|
|
|
margin-bottom: 8px;
|
|
|
+
|
|
|
.NPC-word-row {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
- padding: 4px 16px 4px 16px;
|
|
|
- &.active{
|
|
|
- background:rgba(222, 68, 68, 0.15);
|
|
|
+ padding: 8px 13px 8px 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(
|
|
|
+ 0deg,
|
|
|
+ rgba(0, 0, 0, 0.08),
|
|
|
+ rgba(0, 0, 0, 0.08)
|
|
|
+ ),
|
|
|
+ #ffffff;
|
|
|
}
|
|
|
> span {
|
|
|
font-size: 16px;
|
|
|
@@ -386,9 +395,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tabNum {
|
|
|
- width: 28px;
|
|
|
- text-align: right;
|
|
|
- margin-left: 4px;
|
|
|
+ background: #de4444;
|
|
|
+ text-align: center;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: "robot";
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 4px;
|
|
|
+ margin-left: 8px;
|
|
|
}
|
|
|
.NPC-word-tab-common {
|
|
|
padding-left: 8px;
|
|
|
@@ -409,7 +426,7 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.NPC-word-tab-def {
|
|
|
- width: 296px;
|
|
|
+ flex: 1;
|
|
|
font-family: "robot";
|
|
|
word-break: break-word;
|
|
|
box-sizing: border-box;
|
|
|
@@ -592,6 +609,9 @@ export default {
|
|
|
.topTitle {
|
|
|
background: #24b99e !important;
|
|
|
}
|
|
|
+ .tabNum {
|
|
|
+ background: #24b99e;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.NPC-Big-Book-preview-brown {
|
|
|
@@ -599,6 +619,9 @@ export default {
|
|
|
.topTitle {
|
|
|
background: #bd8865 !important;
|
|
|
}
|
|
|
+ .tabNum {
|
|
|
+ background: #bd8865;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
guanchunjie