|
|
@@ -10,7 +10,7 @@
|
|
|
]">
|
|
|
<template v-if="itemR.isShow">
|
|
|
<template v-if="itemR.isExplain">
|
|
|
- <span class="explain-sub">
|
|
|
+ <span class="explain-sub" @click="showItem(itemR)">
|
|
|
<img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
|
|
|
</span>
|
|
|
</template>
|
|
|
@@ -20,10 +20,11 @@
|
|
|
:class="[
|
|
|
itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':''
|
|
|
]"
|
|
|
+ @click="showItem(itemR)"
|
|
|
>{{ itemR.tokens[2] }}</span
|
|
|
>
|
|
|
<template v-if="itemR.explainNumber">
|
|
|
- <span class="explain-sub">
|
|
|
+ <span class="explain-sub" @click="showItem(itemR)">
|
|
|
<img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
|
|
|
</span>
|
|
|
</template>
|
|
|
@@ -35,6 +36,7 @@
|
|
|
:class="[
|
|
|
resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
|
|
|
]"
|
|
|
+ @click="showItem(resArr[0].wordsList[indexR + 1])"
|
|
|
>{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
|
|
|
>
|
|
|
</template>
|
|
|
@@ -76,7 +78,7 @@
|
|
|
<div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :class="[pItem.isExplain||pItem.explainNumber?'hasExplain':'']">
|
|
|
<template v-if="pItem.isShow">
|
|
|
<template v-if="pItem.isExplain">
|
|
|
- <span class="explain-sub">
|
|
|
+ <span class="explain-sub" @click="showItem(pItem)">
|
|
|
<img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
|
|
|
</span>
|
|
|
</template>
|
|
|
@@ -92,11 +94,11 @@
|
|
|
pItem.type,pItem.tokens[9]===' '?'marginRight':'',pItem.highIndex?'fontWeight':''
|
|
|
]"
|
|
|
:style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
-
|
|
|
+ @click="showItem(pItem)"
|
|
|
>{{ pItem.tokens[2] }}</span
|
|
|
>
|
|
|
<template v-if="pItem.explainNumber">
|
|
|
- <span class="explain-sub">
|
|
|
+ <span class="explain-sub" @click="showItem(pItem)">
|
|
|
<img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
|
|
|
</span>
|
|
|
</template>
|
|
|
@@ -108,7 +110,8 @@
|
|
|
:class="[
|
|
|
item.wordsList[pIndex + 1].type,item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].highIndex?'fontWeight':''
|
|
|
]"
|
|
|
- :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+ @click="showItem(item.wordsList[pIndex + 1])"
|
|
|
>{{ item.wordsList[pIndex + 1].tokens[2] }}</span
|
|
|
>
|
|
|
</div>
|
|
|
@@ -121,18 +124,36 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
- <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
|
|
|
+ <div class="explain-box" v-if="showExplainFlag&&showObj">
|
|
|
+ <div class="explain-box-top">
|
|
|
+ <p>注释</p>
|
|
|
+ <i class="el-icon-close" @click="closeExplain"></i>
|
|
|
+ </div>
|
|
|
+ <h3>{{showObj.exp_title}}</h3>
|
|
|
+ <span>{{showObj.exp_content}}</span>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showPhraseFlag"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="580px"
|
|
|
+ :modal="false"
|
|
|
+ class="login-dialog phrase-box"
|
|
|
+ v-if="showPhraseFlag&&showObj">
|
|
|
+ <phrase-card :data="showObj" @closeWord="closeExplain"></phrase-card>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import AudioLine from "@/components/common/AudioLine.vue"
|
|
|
+import PhraseCard from "./PhraseCard.vue"
|
|
|
export default {
|
|
|
name: "ArticleView",
|
|
|
props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
|
|
|
components: {
|
|
|
AudioLine,
|
|
|
+ PhraseCard
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -184,6 +205,10 @@ export default {
|
|
|
wordLit:[],
|
|
|
annotationList: [],
|
|
|
phraseList: [],
|
|
|
+ showObj:null,
|
|
|
+ showWordFlag: false,
|
|
|
+ showPhraseFlag: false,
|
|
|
+ showExplainFlag: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -284,6 +309,39 @@ export default {
|
|
|
});
|
|
|
this.resArr = resArr;
|
|
|
},
|
|
|
+ showItem(item){
|
|
|
+ if(!item.isShow){
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if(item.type==='explain'){
|
|
|
+ this.annotationList.forEach(itemi=>{
|
|
|
+ if(item.word_id===itemi.id){
|
|
|
+ this.showObj = itemi
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.showExplainFlag = true
|
|
|
+ }else if(item.type==='phrase'){
|
|
|
+ this.phraseList.forEach(itemi=>{
|
|
|
+ if(item.word_id===itemi.id){
|
|
|
+ this.showObj = itemi
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.showPhraseFlag = true
|
|
|
+ }else if(item.type==='newWord'){
|
|
|
+ this.showWordFlag = true
|
|
|
+ }else{
|
|
|
+ this.showSearchWordFlag = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(item)
|
|
|
+ },
|
|
|
+ closeExplain(){
|
|
|
+ this.showExplainFlag = false
|
|
|
+ this.showPhraseFlag = false
|
|
|
+ this.showWordFlag = false
|
|
|
+ this.showSearchWordFlag = false
|
|
|
+ this.showObj = null
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {},
|
|
|
@@ -470,187 +528,60 @@ export default {
|
|
|
width: 430px;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.words-notes {
|
|
|
- position: fixed;
|
|
|
- width: 475px;
|
|
|
- z-index: 2;
|
|
|
- .close-btn {
|
|
|
- position: absolute;
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
- // background: url("../../../../assets/newImage/common/icon-close-write.png")
|
|
|
- // center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- top: -40px;
|
|
|
- right: 0px;
|
|
|
- border-radius: 40px;
|
|
|
- }
|
|
|
- .words-top {
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 8px 24px;
|
|
|
- > div {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- margin: 8px 0;
|
|
|
- &.hasCn{
|
|
|
- font-family: 'Smartisan';
|
|
|
- }
|
|
|
- }
|
|
|
- b {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- margin: 8px 16px;
|
|
|
- max-width: 70%;
|
|
|
- word-break: break-word;
|
|
|
- }
|
|
|
- .shiyi {
|
|
|
- margin-left: 16px;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .words-bottom {
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 16px 24px 24px 40px;
|
|
|
- max-height: 350px;
|
|
|
- overflow: auto;
|
|
|
- h3 {
|
|
|
- text-align: right;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- font-weight: normal;
|
|
|
- color: rgba($color: #000000, $alpha: 0.2);
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- b {
|
|
|
- font-size: 24px;
|
|
|
- line-height: 28px;
|
|
|
- margin: 8px 0 16px 0;
|
|
|
- color: #000000;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- a {
|
|
|
- margin: 0 0 0 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .voice-box {
|
|
|
- display: flex;
|
|
|
- :first-child {
|
|
|
- a {
|
|
|
- margin-right: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .shiyi {
|
|
|
- padding: 11px 0 2px 0;
|
|
|
- max-height: 116px;
|
|
|
- overflow: hidden;
|
|
|
- > div {
|
|
|
+.explain-box{
|
|
|
+ width: 451px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -225px;
|
|
|
+ margin-top: -90px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFF;
|
|
|
+ box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 16px;
|
|
|
+ &-top{
|
|
|
display: flex;
|
|
|
- margin: 5px 0;
|
|
|
- }
|
|
|
- b {
|
|
|
- font-weight: normal;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- margin: 0 4px 0 0;
|
|
|
- // width: ;
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 150%;
|
|
|
- color: #000000;
|
|
|
- width: 350px;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .hasCn{
|
|
|
- font-family: 'Smartisan';
|
|
|
- }
|
|
|
- }
|
|
|
- .text-right {
|
|
|
- text-align: right;
|
|
|
- a {
|
|
|
- // background: url("../../../../assets/adult/detail.png") center right
|
|
|
- // no-repeat;
|
|
|
- background-size: 24px;
|
|
|
- padding-right: 26px;
|
|
|
- color: #000000;
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .el-icon-close{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .play {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- cursor: pointer;
|
|
|
- display: inline-block;
|
|
|
- margin: 12px 0;
|
|
|
- &.playBtn {
|
|
|
- // background: url("../../../../assets/NNPE/icon-voice.png")
|
|
|
- // no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
+ h3{
|
|
|
+ color:#2F3742;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 28px;
|
|
|
+ margin: 8px 0 0 0;
|
|
|
}
|
|
|
- &.voice-playing {
|
|
|
- // background: url("../../../../assets/NNPE/icon-voice-play-blue.png")
|
|
|
- // no-repeat left top;
|
|
|
- background-size: 100% 100%;
|
|
|
+ >span{
|
|
|
+ display: block;
|
|
|
+ margin: 8px 0 0 0;
|
|
|
+ color:#667180;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
-.words-annotation {
|
|
|
- position: fixed;
|
|
|
- z-index: 2;
|
|
|
- background: #394D95;
|
|
|
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
- border-radius: 8px;
|
|
|
- width: 345px;
|
|
|
- padding: 16px;
|
|
|
- .close-btn {
|
|
|
- position: absolute;
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
- // background: url("../../../../assets/NNPE/icon-close-blue.png")
|
|
|
- // center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- top: -32px;
|
|
|
- right: -32px;
|
|
|
- border-radius: 40px;
|
|
|
- }
|
|
|
- b {
|
|
|
- display: block;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 19px;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 8px;
|
|
|
- word-break: break-word;
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 19px;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+.phrase-box{
|
|
|
+ // border-radius: 8px;
|
|
|
+ // border: 1px solid #EBEBEB;
|
|
|
+ // background: #FFF;
|
|
|
+ // box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
|
|
|
+ // width: 580px;
|
|
|
+ // height: 200px;
|
|
|
+ // position: fixed;
|
|
|
+ // left: 50%;
|
|
|
+ // margin-left: -290px;
|
|
|
+ // top: 200px;
|
|
|
+ // z-index: 1;
|
|
|
}
|
|
|
</style>
|
natasha