标题

src/views/bookShelf/components/NormalModel.vue

@@ -24,7 +24,7 @@
                         ? 'overActive'
                         : '',
                 ]">
-            <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
                     isPlaying &&
                     resArr[0].timeList &&
@@ -36,7 +36,27 @@
                         : '',
                     itemR.tokens[9]===' '?'marginRight':''
                 ]">
-                {{itemR.tokens[2]}}</span>
+                    <template v-if="itemR.isShow">
+                        <span
+                                class="NNPE-chs"
+                                :class="[
+                                    itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':''
+                                ]"
+                                >{{ itemR.tokens[2] }}</span
+                            >
+                            <span
+                                class="NNPE-chs NNPE-chs-both"
+                                v-if="resArr[0].wordsList[indexR + 1] &&
+                                resArr[0].wordsList[indexR + 1].tokens[2] &&
+                                enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
+                                :class="[
+                                        resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
+                                    ]"
+                                >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
+                            >
+                    </template>
+                <!-- {{itemR.tokens[2]}} -->
+                </span>
         </h2>
     </template>
     <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
@@ -299,6 +319,8 @@ export default {
       margin: 24px 0;
   }
   h2{
+    display: flex;
+    flex-flow: wrap;
     &.sentActive {
         background: rgba(24, 144, 255, 0.1);
     }

src/views/bookShelf/components/PhraseModel.vue

@@ -3,11 +3,44 @@
   <div class="NNPE-ArticleView" v-if="articleInfo">
     <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
-                    itemR.tokens[9]===' '?'marginRight':''
+                    itemR.tokens[9]===' '?'marginRight':'',
+                    itemR.isExplain||itemR.explainNumber?'hasExplain':''
                 ]">
-                {{itemR.tokens[2]}}</span>
+                <template v-if="itemR.isShow">
+                    <template v-if="itemR.isExplain">
+                        <span class="explain-sub">
+                            <img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
+                        </span>
+                    </template>
+                    <template v-else>
+                        <span
+                                class="NNPE-chs"
+                                :class="[
+                                    itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':''
+                                ]"
+                                >{{ itemR.tokens[2] }}</span
+                            >
+                            <template v-if="itemR.explainNumber">
+                                <span class="explain-sub">
+                                    <img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
+                                </span>
+                            </template>
+                            <span
+                                class="NNPE-chs NNPE-chs-both"
+                                v-if="resArr[0].wordsList[indexR + 1] &&
+                                resArr[0].wordsList[indexR + 1].tokens[2] &&
+                                enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
+                                :class="[
+                                        resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
+                                    ]"
+                                >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
+                            >
+                    </template>
+                </template>
+                <!-- {{itemR.tokens[2]}} -->
+            </span>
         </h2>
     </template>
     <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
@@ -277,6 +310,8 @@ export default {
       margin: 24px 0;
   }
   h2{
+    display: flex;
+    flex-flow: wrap;
     &.sentActive {
         background: rgba(24, 144, 255, 0.1);
     }
@@ -286,6 +321,22 @@ export default {
     .wordActive {
         color: #175DFF !important;
     }
+    .hasExplain{
+        min-width: 3px;
+        position: relative;
+    }
+    .explain-sub{
+        position: absolute;
+        bottom: -25px;
+        right: -10px;
+        z-index: 1;
+        font-size: 0;
+        cursor: pointer;
+        img{
+            width: 14px;
+            height: 12px;
+        }
+    }
   }
   .table-box {
     // background: #f7f7f7;