高亮单词和短语

src/views/bookShelf/components/NormalModel.vue

@@ -59,7 +59,6 @@
             <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
         </div>
     </div>
-    <magazine-video v-if="magazineVideoShow" @closeWord="closeWord" style="margin-top:24px"></magazine-video>
     <template v-if="resArr.length > 0">
       <div class="table-box">
         <div
@@ -68,85 +67,84 @@
           :key="'detail' + index"
         >
           <div class="wordsList-box">
-            <!-- class="nnpr-sentence-box-new" -->
             <div class="nnpe-sentence-box">
               <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex">
                 <template v-if="pItem.pno!==0">
                     <template v-if="pItem.isShow">
-                    <div
-                        :class="[
-                        'NNPE-words',
-                        isPlaying &&
-                        item.timeList &&
-                        item.timeList[pItem.sno] &&
-                        curTime >= item.timeList[pItem.sno].s &&
-                        curTime <= item.timeList[pItem.sno].e
-                            ? 'sentActive'
-                            : '',
-                        pItem.pno == paraIndex && pItem.sno == sentIndex
-                            ? 'overActive'
-                            : '',
-                        ]"
-                        @click="
-                        handleChangeTime(
+                        <div
+                            :class="[
+                            'NNPE-words',
+                            isPlaying &&
                             item.timeList &&
                             item.timeList[pItem.sno] &&
-                            item.timeList[pItem.sno].s
-                        )
-                        "
-                        @mouseover="handleMouseover(pItem)"
-                        @mouseleave="handleMouseleave"
-                    >
-                            <span
-                                class="NNPE-chs"
-                                :class="[
-                                    isPlaying &&
-                                    item.timeList &&
-                                    item.timeList[pItem.sno] &&
-                                    item.timeList[pItem.sno].tokens[pIndex]&&
-                                    curTime >=
-                                        item.timeList[pItem.sno].tokens[pIndex].s &&
-                                    curTime <= item.timeList[pItem.sno].e
-                                        ? 'wordActive'
-                                        : '',
-                                    pItem.tokens[9]===' '?'marginRight':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
+                            curTime >= item.timeList[pItem.sno].s &&
+                            curTime <= item.timeList[pItem.sno].e
+                                ? 'sentActive'
+                                : '',
+                            pItem.pno == paraIndex && pItem.sno == sentIndex
+                                ? 'overActive'
+                                : '',
+                            ]"
+                            @click="
+                            handleChangeTime(
+                                item.timeList &&
+                                item.timeList[pItem.sno] &&
+                                item.timeList[pItem.sno].s
+                            )
+                            "
+                            @mouseover="handleMouseover(pItem)"
+                            @mouseleave="handleMouseleave"
+                        >
+                                <span
+                                    class="NNPE-chs"
+                                    :class="[
+                                        isPlaying &&
                                         item.timeList &&
                                         item.timeList[pItem.sno] &&
                                         item.timeList[pItem.sno].tokens[pIndex]&&
                                         curTime >=
                                             item.timeList[pItem.sno].tokens[pIndex].s &&
-                                        curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
-                                >{{ pItem.tokens[2] }}</span
-                            >
-                            <span
-                            class="NNPE-chs NNPE-chs-both"
-                            v-if="item.wordsList[pIndex + 1] &&
-                            item.wordsList[pIndex + 1].tokens[2] &&
-                            enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
-                            :class="[
-                                    isPlaying &&
-                                    item.timeList &&
-                                    item.timeList[pItem.sno] &&
-                                    item.timeList[pItem.sno].tokens[pIndex]&&
-                                    curTime >=
-                                        item.timeList[pItem.sno].tokens[pIndex].s &&
-                                    curTime <= item.timeList[pItem.sno].e
-                                        ? 'wordActive'
-                                        : '',
-                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
+                                        curTime <= item.timeList[pItem.sno].e
+                                            ? 'wordActive'
+                                            : '',
+                                        pItem.tokens[9]===' '?'marginRight':''
+                                    ]"
+                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
+                                            item.timeList &&
+                                            item.timeList[pItem.sno] &&
+                                            item.timeList[pItem.sno].tokens[pIndex]&&
+                                            curTime >=
+                                                item.timeList[pItem.sno].tokens[pIndex].s &&
+                                            curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
+                                    >{{ pItem.tokens[2] }}</span
+                                >
+                                <span
+                                class="NNPE-chs NNPE-chs-both"
+                                v-if="item.wordsList[pIndex + 1] &&
+                                item.wordsList[pIndex + 1].tokens[2] &&
+                                enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
+                                :class="[
+                                        isPlaying &&
                                         item.timeList &&
                                         item.timeList[pItem.sno] &&
                                         item.timeList[pItem.sno].tokens[pIndex]&&
                                         curTime >=
                                             item.timeList[pItem.sno].tokens[pIndex].s &&
-                                        curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
-                            >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                        >
-                    </div>
+                                        curTime <= item.timeList[pItem.sno].e
+                                            ? 'wordActive'
+                                            : '',
+                                        item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':''
+                                    ]"
+                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
+                                            item.timeList &&
+                                            item.timeList[pItem.sno] &&
+                                            item.timeList[pItem.sno].tokens[pIndex]&&
+                                            curTime >=
+                                                item.timeList[pItem.sno].tokens[pIndex].s &&
+                                            curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
+                                >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
+                            >
+                        </div>
                     </template>
                 </template>
               </div>
@@ -174,7 +172,6 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；", "("],
       enFhList: [
         ",",
         ".",
@@ -214,16 +211,9 @@ export default {
         "‘ll",
         "”",
       ],
-      lastEnFhlist: [',','.',';',':','?','!'],
-      firstEnFhlist: ["'","‘","“",'"',"("],
-      noPaddingList: ['(', '"'],
       articleImg: {}, // 文章图片
       paraIndex: -1, //段落索引
       sentIndex: -1, // 句子索引
-      articleAuthor:'初二版 · 第 815 期 · 2023-05-15 · OUR WORLD · BY TEENS', // 作者信息
-      magazineVideoShow: false,
-      paraNumber: 1,
-      
     };
   },
   computed: {
@@ -242,80 +232,7 @@ export default {
       this.curTime = curTime * 1000;
     },
     handleData() {
-      let _this = this;
-      _this.paraNumber = 1
       let resArr = [];
-    //   let leg = this.curQue.detail.length;
-    //   let curQue = JSON.parse(JSON.stringify(this.curQue));
-    //   curQue.detail.forEach((dItem, dIndex) => {
-    //     let paraArr = [];
-    //     if (dItem.paragraphAttr&&dItem.paragraphAttr.paragraphIndentation&&!dItem.isTitle) {
-    //       paraArr = [
-    //         {
-    //           width: 9,
-    //           height: 20,
-    //         },
-    //         {
-    //           width: 9,
-    //           height: 20,
-    //         },
-    //       ];
-    //     }
-    //     dItem.segList.forEach((sItem, sIndex) => {
-    //       sItem.forEach((wItem, wIndex) => {
-    //           let styles = ''
-    //           if(dItem.wordStyle&&dItem.wordStyle[sIndex]&&dItem.wordStyle[sIndex][wIndex]){
-    //               for(let k in dItem.wordStyle[sIndex][wIndex]){
-    //                 if(dItem.wordStyle[sIndex][wIndex][k]&&k!='styleList'&&k!='paddingList'){
-    //                     styles += dItem.wordStyle[sIndex][wIndex][k]+' '
-    //                 }else if(k =='styleList'||k=='paddingList'){
-    //                     dItem.wordStyle[sIndex][wIndex][k].forEach(itemK=>{
-    //                         styles += itemK + ' '
-    //                     })
-    //                 }
-    //             }  
-    //           }
-    //         let obj = {
-    //           paraIndex: dIndex, //段落索引
-    //           sentIndex: sIndex, //在段落中句子索引
-    //           wordIndex: wIndex, //单词的索引
-    //           en: wItem,
-    //           padding: true,
-    //           isShow: this.mergeWordSymbol(wItem),
-    //           className: styles,
-    //         };
-    //         //this.judgePad(sItem, obj, wIndex);
-    //         paraArr.push(obj);
-    //       });
-    //     });
-
-    //     let curSentencesLeg = dItem.sentences.length;
-    //     let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
-    //     let endLeg = startLeg + curSentencesLeg;
-    //     dItem.endLeg = endLeg;
-    //     let timeList = curQue.wordTime.slice(startLeg, endLeg);
-
-    //     if(dItem.isTitle||(dItem.isLittleTitle&&dItem.paragraphAttr.paragraphLittleNumber&&dItem.paragraphAttr.paragraphLittleNumber==false)||(dItem.isLittleTitle&&!dItem.paragraphAttr.paragraphLittleNumber) || (dItem.paragraphAttr&&!dItem.paragraphAttr.paragraphNumber)){
-    //         dItem.paraNumber = ''
-    //     }else{
-    //         dItem.paraNumber = _this.paraNumber
-    //         _this.paraNumber ++
-    //     }
-    //     let paraObj = {
-    //       wordsList: paraArr,
-    //       timeList: timeList,
-    //       isTitle: dItem.isTitle,
-    //       paraNumber: dItem.paraNumber
-    //     };
-    //     resArr.push(paraObj);
-    //   });
-    //   this.resArr = resArr;
-    //   // 循环文章图片
-    //   if (curQue.img_list) {
-    //     curQue.img_list.forEach((item) => {
-    //       _this.articleImg[item.imgNumber] = item.id;
-    //     });
-    //   }
       let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
       let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
       for(let i=0;i<leg+1;i++){
@@ -356,14 +273,6 @@ export default {
       this.paraIndex = -1;
       this.sentIndex = -1;
     },
-    // 讲解视频
-    handleVideo(){
-        this.magazineVideoShow = true
-    },
-    // 关闭视频
-    closeWord(){
-        this.magazineVideoShow = false
-    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -388,12 +297,6 @@ export default {
   width: 100%;
   .nnpe-article-author{
       margin: 24px 0;
-      &.nnpe-article-author-left{
-          text-align: left;
-      }
-      &.nnpe-article-author-right{
-          text-align: right;
-      }
   }
   h2{
     &.sentActive {
@@ -414,38 +317,12 @@ export default {
         padding-bottom: 40px;
       }
     }
-    .index {
-      width: 48px;
-      box-sizing: border-box;
-      padding: 8px;
-      text-align: right;
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      b {
-        font-weight: 400;
-        color: #000000;
-        line-height: 1.5;
-      }
-    }
     .wordsList-box {
       flex: 1;
       padding: 6px 0 12px 0;
-      &.wordsList-box-indent{
-          padding-left: 42px;
-      }
       .nnpe-sentence-box {
         display: flex;
         flex-flow: wrap;
-        &.nnpe-sentence-box-right{
-            justify-content: flex-end;
-        }
-        .nnpe-paragraph-con{
-            line-height: 24px;
-            padding: 0 3px;
-        }
-        .nnpr-sentence-box-new{
-            clear: both;
-            overflow: hidden;
-        }
       }
       > img {
         max-width: 50%;
@@ -459,31 +336,6 @@ export default {
     clear: both;
     overflow: hidden;
     display: flex;
-    &.NNPE-detail-title {
-      .wordsList-box {
-        > div {
-          display: flex;
-          justify-content: center;
-        }
-      }
-    }
-    &.NNPE-detail-title-left {
-      .wordsList-box {
-        .nnpe-sentence-box {
-          justify-content: flex-start;
-        }
-      }
-    }
-    &.NNPE-detail-title-right {
-      .wordsList-box {
-        .nnpe-sentence-box {
-          justify-content: flex-end;
-        }
-      }
-    }
-    &.NNPE-detail-littleTitle{
-        margin-bottom: -18px;
-    }
     .NNPE-words {
       float: left;
       padding: 0;
@@ -529,20 +381,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .explain-video{
-        background: #FFB224;
-        border-color: #FFB224;
-        color: #FFFFFF;
-        width: 136px;
-        height: 48px;
-        padding: 0;
-        font-weight: 500;
-        font-size: 16px;
-        border-radius: 30px;
-        .svg-icon{
-            margin-right: 8px;
-        }
-    }
 }
 .aduioLine-box{
     width: 516px;
@@ -564,187 +402,4 @@ 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 {
-        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;
-      }
-    }
-  }
-  .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%;
-    }
-    &.voice-playing {
-    //   background: url("../../../../assets/NNPE/icon-voice-play-blue.png")
-    //     no-repeat left top;
-      background-size: 100% 100%;
-    }
-  }
-}
-.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;
-  }
-}
 </style>

src/views/bookShelf/components/PhraseModel.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="articleInfo">
-    <template v-if="resArr[0]&&resArr[0].wordsList[0].pno===0">
+    <template v-if="resArr[0]&&resArr[0].wordsList">
         <h2>
             <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'8px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
@@ -38,41 +38,52 @@
           :key="'detail' + index"
         >
           <div class="wordsList-box">
-            <!-- class="nnpr-sentence-box-new" -->
-            <div class="nnpe-sentence-box">
-              <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex">
-                <template v-if="pItem.pno!==0">
-                    <template v-if="pItem.isShow">
-                    <div
-                        :class="[
-                        'NNPE-words',
-                        ]"
-                    >
-                            <span
-                                class="NNPE-chs"
-                                :class="[
-                                    
-                                    pItem.tokens[9]===' '?'marginRight':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
-                                >{{ pItem.tokens[2] }}</span
-                            >
-                            <span
-                            class="NNPE-chs NNPE-chs-both"
-                            v-if="item.wordsList[pIndex + 1] &&
-                            item.wordsList[pIndex + 1].tokens[2] &&
-                            enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
-                            :class="[
-                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
-                            >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                        >
+            <template v-if="index!==0">
+                <div class="nnpe-sentence-box">
+                    <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">
+                                    <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
+                                </span>
+                            </template>
+                            <template v-else>
+                                <div
+                                    :class="[
+                                    'NNPE-words',
+                                    ]"
+                                >
+                                    <span
+                                        class="NNPE-chs"
+                                        :class="[
+                                            pItem.type,pItem.tokens[9]===' '?'marginRight':'',pItem.highIndex?'fontWeight':''
+                                        ]"
+                                        :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
+
+                                        >{{ pItem.tokens[2] }}</span
+                                    >
+                                    <template v-if="pItem.explainNumber">
+                                        <span class="explain-sub">
+                                            <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
+                                        </span>
+                                    </template>
+                                    <span
+                                        class="NNPE-chs NNPE-chs-both"
+                                        v-if="item.wordsList[pIndex + 1] &&
+                                        item.wordsList[pIndex + 1].tokens[2] &&
+                                        enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
+                                        :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}"
+                                        >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
+                                    >
+                                </div>
+                            </template>
+                        </template>
                     </div>
-                    </template>
-                </template>
-              </div>
-            </div>
+                </div>
+            </template>
           </div>
         </div>
       </div>
@@ -94,7 +105,6 @@ export default {
     return {
       resArr: [],
       curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；", "("],
       enFhList: [
         ",",
         ".",
@@ -134,14 +144,13 @@ export default {
         "‘ll",
         "”",
       ],
-      lastEnFhlist: [',','.',';',':','?','!'],
-      firstEnFhlist: ["'","‘","“",'"',"("],
-      noPaddingList: ['(', '"'],
       articleImg: {}, // 文章图片
-      paraIndex: -1, //段落索引
-      sentIndex: -1, // 句子索引
-      paraNumber: 1,
-      
+      allWordList: [], // 生词短语注释总列表
+      tokensArr: [],
+      sentenceList: [],
+      wordLit:[],
+      annotationList: [],
+      phraseList: [],
     };
   },
   computed: {
@@ -160,119 +169,87 @@ export default {
       this.curTime = curTime * 1000;
     },
     handleData() {
-      let _this = this;
-      _this.paraNumber = 1
-      let resArr = [];
-    //   let leg = this.curQue.detail.length;
-    //   let curQue = JSON.parse(JSON.stringify(this.curQue));
-    //   curQue.detail.forEach((dItem, dIndex) => {
-    //     let paraArr = [];
-    //     if (dItem.paragraphAttr&&dItem.paragraphAttr.paragraphIndentation&&!dItem.isTitle) {
-    //       paraArr = [
-    //         {
-    //           width: 9,
-    //           height: 20,
-    //         },
-    //         {
-    //           width: 9,
-    //           height: 20,
-    //         },
-    //       ];
-    //     }
-    //     dItem.segList.forEach((sItem, sIndex) => {
-    //       sItem.forEach((wItem, wIndex) => {
-    //           let styles = ''
-    //           if(dItem.wordStyle&&dItem.wordStyle[sIndex]&&dItem.wordStyle[sIndex][wIndex]){
-    //               for(let k in dItem.wordStyle[sIndex][wIndex]){
-    //                 if(dItem.wordStyle[sIndex][wIndex][k]&&k!='styleList'&&k!='paddingList'){
-    //                     styles += dItem.wordStyle[sIndex][wIndex][k]+' '
-    //                 }else if(k =='styleList'||k=='paddingList'){
-    //                     dItem.wordStyle[sIndex][wIndex][k].forEach(itemK=>{
-    //                         styles += itemK + ' '
-    //                     })
-    //                 }
-    //             }  
-    //           }
-    //         let obj = {
-    //           paraIndex: dIndex, //段落索引
-    //           sentIndex: sIndex, //在段落中句子索引
-    //           wordIndex: wIndex, //单词的索引
-    //           en: wItem,
-    //           padding: true,
-    //           isShow: this.mergeWordSymbol(wItem),
-    //           className: styles,
-    //         };
-    //         //this.judgePad(sItem, obj, wIndex);
-    //         paraArr.push(obj);
-    //       });
-    //     });
-
-    //     let curSentencesLeg = dItem.sentences.length;
-    //     let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
-    //     let endLeg = startLeg + curSentencesLeg;
-    //     dItem.endLeg = endLeg;
-    //     let timeList = curQue.wordTime.slice(startLeg, endLeg);
-
-    //     if(dItem.isTitle||(dItem.isLittleTitle&&dItem.paragraphAttr.paragraphLittleNumber&&dItem.paragraphAttr.paragraphLittleNumber==false)||(dItem.isLittleTitle&&!dItem.paragraphAttr.paragraphLittleNumber) || (dItem.paragraphAttr&&!dItem.paragraphAttr.paragraphNumber)){
-    //         dItem.paraNumber = ''
-    //     }else{
-    //         dItem.paraNumber = _this.paraNumber
-    //         _this.paraNumber ++
-    //     }
-    //     let paraObj = {
-    //       wordsList: paraArr,
-    //       timeList: timeList,
-    //       isTitle: dItem.isTitle,
-    //       paraNumber: dItem.paraNumber
-    //     };
-    //     resArr.push(paraObj);
-    //   });
-    //   this.resArr = resArr;
-    //   // 循环文章图片
-    //   if (curQue.img_list) {
-    //     curQue.img_list.forEach((item) => {
-    //       _this.articleImg[item.imgNumber] = item.id;
-    //     });
-    //   }
-      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
-      let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
-      for(let i=0;i<leg+1;i++){
-        let obj = {
-            wordsList: [],
-            timeList: [],
-        }
-        resArr.push(obj)
-      }
-      articleInfo.art_corpus_data.sentList.forEach((item,index) => {
-        item.tokens.forEach((items,indexs)=>{
-            let obj = {
-                sent_id:item.id,
-                sno: item.sno-1,
-                pno: item.pno,
-                text: item.text,
-                tokens: items,
-                isShow: this.enFhList.indexOf(items[2])==-1
+        let explainNumber = 1
+        let resArr = [];
+        let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
+        this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
+        this.wordLit = articleInfo.art_voc_data?articleInfo.art_voc_data:[]
+        this.annotationList = articleInfo.art_phrase_data?articleInfo.art_explain_data:[]
+        this.phraseList = articleInfo.art_explain_data?articleInfo.art_phrase_data:[]
+        this.wordLit.forEach(item=>{
+            item.type='newWord'
+            item.exp_title = item.word_name
+            let paraStr = ''
+            if(item.word_explain&&item.word_explain.word_para_list){
+                item.word_explain.word_para_list.forEach(items=>{
+                    paraStr += items.para
+                })
             }
-            resArr[item.pno].wordsList.push(obj)
+            item.exp_content = paraStr
         })
-        resArr[item.pno].timeList.push(articleInfo.art_sound_srt_data.sents[index])
-      });
-      this.resArr = resArr;
-    },
-    handleChangeTime(time) {
-      if (time>=0) {
-        this.curTime = time;
-        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      }
-    },
-    //经过每个词，高亮句子
-    handleMouseover(pItem) {
-      this.paraIndex = pItem.pno;
-      this.sentIndex = pItem.sno;
-    },
-    handleMouseleave() {
-      this.paraIndex = -1;
-      this.sentIndex = -1;
+        this.phraseList.forEach(item=>{
+            item.type='phrase'
+        })
+        this.annotationList.forEach(item=>{
+            item.type='explain'
+        })
+        this.allWordList = this.wordLit.concat(this.phraseList).concat(this.annotationList)
+        let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
+        this.sentenceList.forEach((item,index) => {
+            let flag = ''
+            item.StyleTokens = []
+            item.tokens.forEach((items,indexs)=>{
+                let obj = {
+                    tokens: items
+                }
+                this.allWordList.forEach((itema,indexa)=>{
+                    itema.bind_sent_data.bind_sents.forEach((itemb,indexb)=>{
+                        if(itemb.sent_id===item.id){
+                            itemb.sel_token_idxes.forEach(itemi=>{
+                                if(indexs===itemi){
+                                    obj.highIndex = true
+                                    obj.type = itema.type
+                                    obj.word_id = itema.id // 生词注释短语的id
+                                    if(itema.type==='explain'){
+                                        obj.explainNumber = explainNumber
+                                        explainNumber ++
+                                    }
+                                }
+                            })
+                            if(itemb.sel_token_idxes.length===0&&itema.type==='explain'&&indexs===item.tokens.length-1){
+                                flag = itema.id
+                            }
+                        }
+                    })
+                })
+                item.StyleTokens.push(obj)
+                if(flag){
+                    item.StyleTokens.push({
+                        tokens: [
+                            0, 8, "Students", "", "", "", "", "", "", " ", 0, "", "", ""
+                        ],
+                        type: 'explain',
+                        word_id: flag,
+                        isExplain: true,
+                        explainNumber: explainNumber
+                    })
+                    explainNumber ++
+                }
+            })
+        });
+        for(let i=0;i<leg+1;i++){
+            let obj = {
+                wordsList: []
+            }
+            resArr.push(obj)
+        }
+        this.sentenceList.forEach((item,index) => {
+            item.StyleTokens.forEach((items,indexs)=>{
+                items.isShow = this.enFhList.indexOf(items.tokens[2])==-1
+                resArr[item.pno].wordsList.push(items)
+            })
+          });
+          this.resArr = resArr;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -298,12 +275,6 @@ export default {
   width: 100%;
   .nnpe-article-author{
       margin: 24px 0;
-      &.nnpe-article-author-left{
-          text-align: left;
-      }
-      &.nnpe-article-author-right{
-          text-align: right;
-      }
   }
   h2{
     &.sentActive {
@@ -324,37 +295,29 @@ export default {
         padding-bottom: 40px;
       }
     }
-    .index {
-      width: 48px;
-      box-sizing: border-box;
-      padding: 8px;
-      text-align: right;
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      b {
-        font-weight: 400;
-        color: #000000;
-        line-height: 1.5;
-      }
-    }
     .wordsList-box {
       flex: 1;
       padding: 6px 0 12px 0;
-      &.wordsList-box-indent{
-          padding-left: 42px;
-      }
       .nnpe-sentence-box {
         display: flex;
         flex-flow: wrap;
-        &.nnpe-sentence-box-right{
-            justify-content: flex-end;
-        }
-        .nnpe-paragraph-con{
-            line-height: 24px;
-            padding: 0 3px;
-        }
-        .nnpr-sentence-box-new{
-            clear: both;
-            overflow: hidden;
+        .word-box{
+            position: relative;
+            &.hasExplain{
+                min-width: 3px;
+            }
+            .explain-sub{
+                position: absolute;
+                bottom: -5px;
+                right: -10px;
+                z-index: 1;
+                font-size: 0;
+                cursor: pointer;
+                img{
+                    width: 14px;
+                    height: 12px;
+                }
+            }
         }
       }
       > img {
@@ -369,31 +332,6 @@ export default {
     clear: both;
     overflow: hidden;
     display: flex;
-    &.NNPE-detail-title {
-      .wordsList-box {
-        > div {
-          display: flex;
-          justify-content: center;
-        }
-      }
-    }
-    &.NNPE-detail-title-left {
-      .wordsList-box {
-        .nnpe-sentence-box {
-          justify-content: flex-start;
-        }
-      }
-    }
-    &.NNPE-detail-title-right {
-      .wordsList-box {
-        .nnpe-sentence-box {
-          justify-content: flex-end;
-        }
-      }
-    }
-    &.NNPE-detail-littleTitle{
-        margin-bottom: -18px;
-    }
     .NNPE-words {
       float: left;
       padding: 0;
@@ -406,12 +344,6 @@ export default {
       &.overActive {
         background: rgba(0, 0, 0, 0.06);
       }
-      &.textLeft {
-        text-align: left;
-      }
-      &.textCenter {
-        text-align: center;
-      }
       > span {
         float: left;
         cursor: pointer;
@@ -426,6 +358,19 @@ export default {
           &.marginRight{
             padding: 0 6px 0 0;
           }
+          &.fontWeight{
+            font-weight: bold;
+          }
+          &.newWord{
+            color: #3459D2 !important;
+          }
+          &.phrase{
+            color: #FF802B !important;
+          }
+          &.explain{
+            // color: #23C847 !important;
+            font-weight: 400;
+          }
         }
         &.padding {
           padding: 0 3px;

src/views/bookShelf/components/TreeList.vue

@@ -3,7 +3,7 @@
     <li v-for="(item,index) in data" :key="index">
         <p class="parent-node"><span class="number">{{index+1}}</span><b class="title">{{item.chn_name}}</b></p>
         <ul v-if="item.arts&&item.arts.length>0">
-            <li :class="[isBuy||index===0?'children-buy':'children-no','children']" v-for="(items,indexs) in item.arts" :key="indexs" @click="handleLink(items,isBuy||index===0,index)">
+            <li :class="[isBuy||index===0?'children-buy':'children-no','children']" v-for="(items,indexs) in item.arts" :key="indexs" @click="handleLink(items,isBuy||index<6,index)">
                 <p class="children-node"><span class="number">{{indexs+1}}</span><b class="title">{{items.art_title}}</b><i class="el-icon-lock" v-if="!(isBuy||index===0)"></i></p>
             </li>
         </ul>