|
@@ -3,11 +3,13 @@
|
|
|
<div class="word-card-top">
|
|
|
<span class="progress" v-if="wordList&&wordList.length>0">{{(activeObjIndex+1)+' / '+wordList.length}}</span>
|
|
|
<template v-else>
|
|
|
-
|
|
|
+ <ul>
|
|
|
+ <li class="active">本文释义</li>
|
|
|
+ </ul>
|
|
|
</template>
|
|
|
<div class="btn-box">
|
|
|
- <svg-icon icon-class="arrow-left-line" v-if="wordList&&wordList.length>0"></svg-icon>
|
|
|
- <svg-icon icon-class="arrow-right-line" v-if="wordList&&wordList.length>0"></svg-icon>
|
|
|
+ <svg-icon icon-class="arrow-left-line" :class="[activeObjIndex===0?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('-')"></svg-icon>
|
|
|
+ <svg-icon icon-class="arrow-right-line" :class="[activeObjIndex===wordList.length-1?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('+')"></svg-icon>
|
|
|
<svg-icon icon-class="like-line" className="icon-like" v-if="!data.collect" @click="handleCollect(data)"></svg-icon>
|
|
|
<svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(data)"></svg-icon>
|
|
|
<i class="el-icon-close" @click="closeWord"></i>
|
|
@@ -115,7 +117,7 @@ import { getLogin } from "@/api/ajax";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: { },
|
|
|
- props: ["data","wordList","activeObjIndex"],
|
|
|
+ props: ["dataObj","wordList","activeObjIndex"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
@@ -130,6 +132,8 @@ export default {
|
|
|
voicePlaySrc: require("../../../assets/voice-play-gray.png"),
|
|
|
sentKwicData: null,
|
|
|
allList: [],
|
|
|
+ phraseActiveIndex: this.activeObjIndex, //JSON.parse(JSON.stringify(this.activeObjIndex))
|
|
|
+ data: JSON.parse(JSON.stringify(this.dataObj))
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -238,6 +242,23 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ changeIndex(type){
|
|
|
+ if(type==='-'){
|
|
|
+ if(this.phraseActiveIndex>0){
|
|
|
+ this.phraseActiveIndex--
|
|
|
+
|
|
|
+ }else{
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.phraseActiveIndex<this.wordList.length-1){
|
|
|
+ this.phraseActiveIndex++
|
|
|
+ this.mageazineDetailIndex = null
|
|
|
+ }else{
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -300,6 +321,10 @@ export default {
|
|
|
cursor: pointer;
|
|
|
width: 32px;
|
|
|
height: 16px;
|
|
|
+ &.not-allow{
|
|
|
+ color: rgba(78, 89, 105, 0.3);
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
}
|
|
|
.icon-like{
|
|
|
&.active{
|
|
@@ -307,6 +332,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ ul{
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ li{
|
|
|
+ color:#929CA8;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-center{
|
|
|
padding-top: 24px;
|