文章间距问题

src/views/bookShelf/components/InnerTextSearch.vue

@@ -5,13 +5,13 @@
         <h2 :class="['NNPE-words',]">
             <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.marginRight?'marginSingleRight':''
+                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
                 <template v-if="itemR.isShow">
                     <span
                         class="NNPE-chs"
                         :class="[
-                            itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':''
+                            itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':''
                         ]"
                         :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:''}"
                         >{{ itemR.tokens[2] }}</span
@@ -22,7 +22,7 @@
                         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].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':''
+                                resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':''
                             ]"
                         :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:''}"
                         >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
@@ -72,7 +72,7 @@
                             <span
                                 class="NNPE-chs"
                                 :class="[
-                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
+                                    pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
                                 ]"
                                 :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor,background:pItem.color?pItem.color:'',borderColor:pItem.borderColor?pItem.borderColor:''}"
                                 >{{ pItem.tokens[2] }}</span
@@ -83,7 +83,7 @@
                             item.wordsList[pIndex + 1].tokens[2] &&
                             enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
                             :class="[
-                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':''
+                                    item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':''
                                 ]"
                                 :style="{fontSize:wordFontsize + 'px',color:colorObj.contentColor,background:item.wordsList[pIndex + 1].color?item.wordsList[pIndex + 1].color:'',borderColor:item.wordsList[pIndex + 1].borderColor?item.wordsList[pIndex + 1].borderColor:''}"
                             >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
@@ -357,14 +357,16 @@ export default {
                 item.wordsList.forEach((items,indexs) => {
                     // 字符串拼接相等即为匹配相同
                     let searchArr = searchItem.trim().replace(/\s+/g, " ").split(' ')
-                    if (items.tokens[4].toLowerCase() == searchArr[0]) {
+                    if (items.tokens[4].toLowerCase() == searchArr[0]||items.tokens[2].toLowerCase() == searchArr[0]) {
                         let searchStr = ''
                         let mateStr = ''
+                        let matesStr = ''
                         searchArr.forEach((itemi,indexi)=>{
                             searchStr+=itemi.trim()+' '
                             mateStr+=item.wordsList[indexs+indexi].tokens[4].toLowerCase().trim()+' '
+                            matesStr+=item.wordsList[indexs+indexi].tokens[2].toLowerCase().trim()+' '
                         })
-                        if(searchStr===mateStr){
+                        if(searchStr===mateStr||searchStr===matesStr){
                             SearchwordNumber ++
                             searchArr.forEach((itemi,indexi)=>{
                                 item.wordsList[indexs+indexi].color = this.currentcolorValue[i];
@@ -453,7 +455,7 @@ export default {
         this.currentBorderColorValue.splice(index,1)
         this.resArr.forEach((item) => {
             item.wordsList.forEach((items) => {
-                if (items.tokens[4].toLowerCase() == text) {
+                if (items.tokens[4].toLowerCase() == text||items.tokens[2].toLowerCase() == text) {
                     items.color = '';
                     items.borderColor = ''
                 }
@@ -556,11 +558,15 @@ export default {
           font-family: 'Smartisan';
           line-height: 150%;
           color: #000000;
+          padding: 0 3px;
           &.wordActive {
             color: #175DFF !important;
           }
           &.marginRight{
-            padding: 0 6px 0 0;
+            padding-right: 0;
+          }
+          &.marginLeft{
+            padding-left: 0;
           }
           &.marginSingleRight{
             padding: 0 3px 0 0;

src/views/bookShelf/components/LexicalType.vue

@@ -5,14 +5,14 @@
         <h2 :class="['NNPE-words',]">
             <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.marginRight?'marginSingleRight':''
+                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
                 <template v-if="itemR.isShow">
                     <div class="wordshasbottom">
                         <span
                             class="NNPE-chs"
                             :class="[
-                                itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':'',selectWordType.indexOf(itemR.tokens[11])>-1?!hideSelectWord||itemR.showSelectWord?'':'word-opacity':''
+                                itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':'',selectWordType.indexOf(itemR.tokens[11])>-1?!hideSelectWord||itemR.showSelectWord?'':'word-opacity':''
                             ]"
                             :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(itemR.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[itemR.sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(itemR.tokens[11])>-1?vocabularyType[itemR.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
                             @click="itemR.showSelectWord=!itemR.showSelectWord"
@@ -29,7 +29,7 @@
                         <span
                             class="NNPE-chs NNPE-chs-both"
                             :class="[
-                                    resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':'',selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?!hideSelectWord||resArr[0].wordsList[indexR + 1].showSelectWord?'':'word-opacity':''
+                                    resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':'',selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?!hideSelectWord||resArr[0].wordsList[indexR + 1].showSelectWord?'':'word-opacity':''
                                 ]"
                             @click="resArr[0].wordsList[indexR + 1].showSelectWord=!resArr[0].wordsList[indexR + 1].showSelectWord"
                             :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(resArr[0].wordsList[indexR + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[resArr[0].wordsList[indexR + 1].sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?vocabularyType[resArr[0].wordsList[indexR + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
@@ -85,7 +85,7 @@
                                 <span
                                     class="NNPE-chs"
                                     :class="[
-                                        pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':'',selectWordType.indexOf(pItem.tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
+                                        pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':'',selectWordType.indexOf(pItem.tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
                                     ]"
                                     :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(pItem.tokens[11])>-1?vocabularyType[pItem.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
                                     @click="pItem.showSelectWord=!pItem.showSelectWord"
@@ -102,7 +102,7 @@
                                 class="NNPE-chs NNPE-chs-both"
                                 
                                 :class="[
-                                        item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':'',selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
+                                        item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':'',selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
                                     ]"
                                     :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(item.wordsList[pIndex + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].color:sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?vocabularyType[item.wordsList[pIndex + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
                                     @click="item.wordsList[pIndex + 1].showSelectWord=!item.wordsList[pIndex + 1].showSelectWord"
@@ -568,11 +568,15 @@ export default {
           font-family: 'Smartisan';
           line-height: 150%;
           color: #000000;
+          padding: 0 3px;
           &.wordActive {
             color: #175DFF !important;
           }
           &.marginRight{
-            padding: 0 6px 0 0;
+            padding-right: 0;
+          }
+          &.marginLeft{
+            padding-left: 0;
           }
           &.marginSingleRight{
             padding: 0 3px 0 0;

src/views/bookShelf/components/NormalModel.vue

@@ -40,7 +40,7 @@
                         <span
                                 class="NNPE-chs"
                                 :class="[
-                                    itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
+                                    itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
                                 ]"
                                 >{{ itemR.tokens[2] }}</span
                             >
@@ -50,7 +50,7 @@
                                 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].marginRight?'marginSingleRight':''
+                                        resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':''
                                     ]"
                                 >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
                             >
@@ -129,7 +129,7 @@
                                         curTime <= item.timeList[pItem.sno].e
                                             ? 'wordActive'
                                             : '',
-                                        pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':''
+                                        pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':''
                                     ]"
                                     :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                             item.timeList &&
@@ -155,7 +155,7 @@
                                         curTime <= item.timeList[pItem.sno].e
                                             ? 'wordActive'
                                             : '',
-                                        item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
+                                        item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
                                     ]"
                                     :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                             item.timeList &&
@@ -386,11 +386,15 @@ export default {
           font-family: 'Smartisan';
           line-height: 150%;
           color: #000000;
+          padding: 0 3px;
           &.wordActive {
             color: #175DFF !important;
           }
           &.marginRight{
-            padding: 0 6px 0 0;
+            padding-right: 0;
+          }
+          &.marginLeft{
+            padding-left: 0;
           }
           &.marginSingleRight{
             padding: 0 3px 0 0;

src/views/bookShelf/components/PhraseModel.vue

@@ -5,7 +5,7 @@
         <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:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
-                    itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',
+                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':'',
                     itemR.isExplain||itemR.explainNumber?'hasExplain':''
                 ]">
                 <template v-if="itemR.isShow">
@@ -18,7 +18,7 @@
                         <span
                                 class="NNPE-chs"
                                 :class="[
-                                    itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':'',
+                                    itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':'',
                                 ]"
                                 @click="showItem(itemR)"
                                 >{{ itemR.tokens[2] }}</span
@@ -34,7 +34,7 @@
                                 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].marginRight?'marginSingleRight':'',
+                                        resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',
                                     ]"
                                 @click="showItem(resArr[0].wordsList[indexR + 1])"
                                 >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
@@ -91,7 +91,7 @@
                                     <span
                                         class="NNPE-chs"
                                         :class="[
-                                            pItem.type,pItem.tokens[9]===' '?'marginRight':'',pItem.highIndex?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
+                                            pItem.type,pItem.tokens[9]===''?'marginRight':'',pItem.highIndex?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
                                         ]"
                                         :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
                                         @click="showItem(pItem)"
@@ -108,7 +108,7 @@
                                         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':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
+                                                item.wordsList[pIndex + 1].type,item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].highIndex?'fontWeight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
                                             ]"
                                         :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
                                         @click="showItem(item.wordsList[pIndex + 1])"
@@ -547,11 +547,15 @@ export default {
           font-family: 'Smartisan';
           line-height: 150%;
           color: #000000;
+          padding: 0 3px;
           &.wordActive {
             color: #175DFF !important;
           }
           &.marginRight{
-            padding: 0 6px 0 0;
+            padding-right: 0;
+          }
+          &.marginLeft{
+            padding-left: 0;
           }
           &.marginSingleRight{
             padding: 0 3px 0 0;

src/views/bookShelf/components/PracticeModel.vue

@@ -5,13 +5,13 @@
         <h2 :class="['NNPE-words',]">
             <span v-for="(itemR,indexR) in resArr.wordsList[0]" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700'}" 
             :class="[
-                    itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':''
+                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
                     <template v-if="itemR.isShow">
                         <span
                                 class="NNPE-chs"
                                 :class="[
-                                    itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
+                                    itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':''
                                 ]"
                                 >{{ itemR.tokens[2] }}</span
                             >
@@ -21,7 +21,7 @@
                                 resArr.wordsList[0][indexR + 1].tokens[2] &&
                                 enFhList.indexOf(resArr.wordsList[0][indexR + 1].tokens[2]) > -1"
                                 :class="[
-                                        resArr.wordsList[0][indexR + 1].type,resArr.wordsList[0][indexR + 1].tokens[9]===' '?'marginRight':'',resArr.wordsList[0][indexR + 1].highIndex?'fontWeight':'',resArr.wordsList[0][indexR + 1].marginRight?'marginSingleRight':''
+                                        resArr.wordsList[0][indexR + 1].type,resArr.wordsList[0][indexR + 1].tokens[8]===''?'marginLeft':'',resArr.wordsList[0][indexR + 1].highIndex?'fontWeight':'',resArr.wordsList[0][indexR + 1].marginRight?'marginSingleRight':''
                                     ]"
                                 >{{ resArr.wordsList[0][indexR + 1].tokens[2] }}</span
                             >
@@ -100,7 +100,7 @@
                                     curTime <= resArr.timeList[index].e
                                         ? 'wordActive'
                                         : '',
-                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':''
+                                    pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':''
                                 ]"
                                 :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                         resArr.timeList[index] &&
@@ -130,7 +130,7 @@
                                     curTime <= resArr.timeList[index].e
                                         ? 'wordActive'
                                         : '',
-                                    item[pIndex + 1].tokens[9]===' '?'marginRight':'',item[pIndex + 1].marginRight?'marginSingleRight':''
+                                    item[pIndex + 1].tokens[8]===''?'marginLeft':'',item[pIndex + 1].marginRight?'marginSingleRight':''
                                 ]"
                                 :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                         resArr.timeList[index] &&
@@ -612,11 +612,15 @@ export default {
           font-family: 'Smartisan';
           line-height: 150%;
           color: #000000;
+          padding: 0 3px;
           &.wordActive {
             color: #175DFF;
           }
           &.marginRight{
-            padding: 0 6px 0 0;
+            padding-right: 0;
+          }
+          &.marginLeft{
+            padding-left: 0;
           }
           &.marginSingleRight{
             padding: 0 3px 0 0;