文章优化不显示字母

src/views/bookShelf/components/HistoryRecordList.vue

@@ -58,32 +58,31 @@
                 v-for="(pItem, pIndex) in sentData"
                 :key="'wordsList' + pIndex"
               >
-                <template v-if="pItem.isShow">
-                  <div
-                    :class="['NNPE-words']"
-                    @click="
-                      handleChangeTime(timeData && timeData && timeData.s)
-                    "
+                <!-- <template v-if="pItem.isShow"> -->
+                <div
+                  :class="['NNPE-words']"
+                  @click="handleChangeTime(timeData && timeData && timeData.s)"
+                >
+                  <span
+                    class="NNPE-chs"
+                    :class="[
+                      timeData &&
+                      timeData &&
+                      timeData.e &&
+                      timeData.tokens &&
+                      timeData.tokens[pItem.wIndex] &&
+                      curTime >= timeData.tokens[pItem.wIndex].s &&
+                      curTime <= timeData.e
+                        ? 'wordActive'
+                        : '',
+                      pItem.noBefore ? 'marginLeft' : '',
+                      pItem.noAfter ? 'marginRight' : '',
+                      pItem.marginRight ? 'marginSingleRight' : '',
+                    ]"
+                    :style="{ fontSize: wordFontsize + 'px' }"
+                    >{{ pItem.tokens[2] }}</span
                   >
-                    <span
-                      class="NNPE-chs"
-                      :class="[
-                        timeData &&
-                        timeData &&
-                        timeData.e &&
-                        timeData.tokens &&
-                        timeData.tokens[pItem.wIndex] &&
-                        curTime >= timeData.tokens[pItem.wIndex].s &&
-                        curTime <= timeData.e
-                          ? 'wordActive'
-                          : '',
-                        pItem.tokens[9] === '' ? 'marginRight' : '',
-                        pItem.marginRight ? 'marginSingleRight' : '',
-                      ]"
-                      :style="{ fontSize: wordFontsize + 'px' }"
-                      >{{ pItem.tokens[2] }}</span
-                    >
-                    <span
+                  <!-- <span
                       class="NNPE-chs NNPE-chs-both"
                       v-if="
                         sentData[pIndex + 1] &&
@@ -107,9 +106,9 @@
                       ]"
                       :style="{ fontSize: wordFontsize + 'px' }"
                       >{{ sentData[pIndex + 1].tokens[2] }}</span
-                    >
-                  </div>
-                </template>
+                    > -->
+                </div>
+                <!-- </template> -->
               </div>
             </div>
           </div>
@@ -287,6 +286,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       audio: new window.Audio(),
       audioc: new window.Audio(), // 对比
       timeCur: null,

src/views/bookShelf/components/InnerTextSearch.vue

@@ -17,7 +17,7 @@
             color: colorObj.titleColor,
             fontSize: titleFontsize + 'px',
             lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
+            marginRight: itemR.tokens[9] === '' ? '' : '10px',
             fontWeight: '700',
             cursor: 'pointer',
           }"
@@ -26,23 +26,23 @@
             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' : '',
-              ]"
-              :style="{
-                background: itemR.color ? itemR.color : '',
-                borderColor: itemR.borderColor ? itemR.borderColor : '',
-              }"
-              >{{ itemR.tokens[2] }}</span
-            >
-            <span
+          <!-- <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' : '',
+            ]"
+            :style="{
+              background: itemR.color ? itemR.color : '',
+              borderColor: itemR.borderColor ? itemR.borderColor : '',
+            }"
+            >{{ itemR.tokens[2] }}</span
+          >
+          <!-- <span
               class="NNPE-chs NNPE-chs-both"
               v-if="
                 resArr[0].wordsList[indexR + 1] &&
@@ -70,7 +70,7 @@
               }"
               >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
             >
-          </template>
+          </template> -->
           <!-- {{itemR.tokens[2]}} -->
         </span>
       </h2>
@@ -149,26 +149,25 @@
                 :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' : '',
-                          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
-                      >
-                      <span
+                  <!-- <template v-if="pItem.isShow"> -->
+                  <div :class="['NNPE-words']">
+                    <span
+                      class="NNPE-chs"
+                      :class="[
+                        pItem.noBefore ? 'marginLeft' : '',
+                        pItem.noAfter ? '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
+                    >
+                    <!-- <span
                         class="NNPE-chs NNPE-chs-both"
                         v-if="
                           item.wordsList[pIndex + 1] &&
@@ -199,9 +198,9 @@
                             : '',
                         }"
                         >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                      >
-                    </div>
-                  </template>
+                      > -->
+                  </div>
+                  <!-- </template> -->
                 </template>
               </div>
             </div>
@@ -463,6 +462,8 @@ export default {
             wIndex: indexs,
             isShow: this.enFhList.indexOf(items[2]) == -1,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
             color: "",
             borderColor: "",
           };

src/views/bookShelf/components/LexicalType.vue

@@ -17,7 +17,7 @@
             color: colorObj.titleColor,
             fontSize: titleFontsize + 'px',
             lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
+            marginRight: itemR.tokens[9] === '' ? '' : '10px',
             fontWeight: '700',
             cursor: 'pointer',
           }"
@@ -26,56 +26,55 @@
             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
+          <!-- <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'
+                  : '',
+              ]"
+              :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'
                       ? ''
-                      : '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"
-                >{{ itemR.tokens[2] }}</span
-              >
-              <div
-                class="word-bottom"
-                v-if="
-                  hideSelectWord &&
-                  selectWordType.indexOf(itemR.tokens[11]) > -1
-                "
-              >
-                <span :style="{ background: colorObj.titleColor }"></span>
-              </div>
-            </div>
+              }"
+              @click="itemR.showSelectWord = !itemR.showSelectWord"
+              >{{ itemR.tokens[2] }}</span
+            >
             <div
+              class="word-bottom"
+              v-if="
+                hideSelectWord && selectWordType.indexOf(itemR.tokens[11]) > -1
+              "
+            >
+              <span :style="{ background: colorObj.titleColor }"></span>
+            </div>
+          </div>
+          <!-- <div
               class="wordshasbottom"
               v-if="
                 resArr[0].wordsList[indexR + 1] &&
@@ -154,7 +153,7 @@
                 <span :style="{ background: colorObj.titleColor }"></span>
               </div>
             </div>
-          </template>
+          </template> -->
           <!-- {{itemR.tokens[2]}} -->
         </span>
       </h2>
@@ -233,65 +232,65 @@
                 :key="'wordsList' + pIndex"
               >
                 <template v-if="pItem.pno !== 0">
-                  <template v-if="pItem.isShow">
-                    <div :class="['NNPE-words']">
-                      <div class="wordshasbottom">
+                  <!-- <template v-if="pItem.isShow"> -->
+                  <div :class="['NNPE-words']">
+                    <div class="wordshasbottom">
+                      <span
+                        class="NNPE-chs"
+                        :class="[
+                          pItem.noBefore ? 'marginLeft' : '',
+                          pItem.noAfter ? '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"
+                        >{{ pItem.tokens[2] }}</span
+                      >
+                      <div
+                        class="word-bottom"
+                        v-if="
+                          hideSelectWord &&
+                          selectWordType.indexOf(pItem.tokens[11]) > -1
+                        "
+                      >
                         <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'
-                              : '',
-                          ]"
                           :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',
+                            background:
+                              colorObj.type === 'white' ||
+                              colorObj.type === 'darkGreen'
+                                ? '#2F3742'
+                                : '#C1C5CD',
                           }"
-                          @click="pItem.showSelectWord = !pItem.showSelectWord"
-                          >{{ pItem.tokens[2] }}</span
-                        >
-                        <div
-                          class="word-bottom"
-                          v-if="
-                            hideSelectWord &&
-                            selectWordType.indexOf(pItem.tokens[11]) > -1
-                          "
-                        >
-                          <span
-                            :style="{
-                              background:
-                                colorObj.type === 'white' ||
-                                colorObj.type === 'darkGreen'
-                                  ? '#2F3742'
-                                  : '#C1C5CD',
-                            }"
-                          ></span>
-                        </div>
+                        ></span>
                       </div>
-                      <div
+                    </div>
+                    <!-- <div
                         class="wordshasbottom"
                         v-if="
                           item.wordsList[pIndex + 1] &&
@@ -377,9 +376,9 @@
                             }"
                           ></span>
                         </div>
-                      </div>
-                    </div>
-                  </template>
+                      </div> -->
+                  </div>
+                  <!-- </template> -->
                 </template>
               </div>
             </div>
@@ -571,6 +570,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       paraIndex: -1, //段落索引
       sentIndex: -1, // 句子索引
       showSearch: false,
@@ -769,6 +769,8 @@ export default {
             wIndex: indexs,
             isShow: this.enFhList.indexOf(items[2]) == -1,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
             sententLenType: sententLenType,
             showSelectWord: false,
           };

src/views/bookShelf/components/NormalModel.vue

@@ -42,7 +42,7 @@
             color: colorObj.titleColor,
             fontSize: titleFontsize + 'px',
             lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
+            marginRight: itemR.tokens[9] === '' ? '' : '10px',
             fontWeight: '700',
             cursor: 'pointer',
           }"
@@ -58,18 +58,19 @@
             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.tokens[2] }}</span
-            >
-            <span
+          <!-- <template v-if="itemR.isShow"> -->
+          <span
+            class="NNPE-chs"
+            :class="[
+              itemR.type,
+              itemR.tokens[9] === '' ? 'marginRight' : '',
+              itemR.tokens[8] === '' ? 'marginLeft' : '',
+              itemR.highIndex ? 'fontWeight' : '',
+              itemR.marginRight ? 'marginSingleRight' : '',
+            ]"
+            >{{ itemR.tokens[2] }}</span
+          >
+          <!-- <span
               class="NNPE-chs NNPE-chs-both"
               v-if="
                 resArr[0].wordsList[indexR + 1] &&
@@ -87,8 +88,8 @@
                   : '',
               ]"
               >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
-            >
-          </template>
+            > -->
+          <!-- </template> -->
           <!-- {{itemR.tokens[2]}} -->
         </span>
       </h2>
@@ -266,7 +267,8 @@
                           curTime <= item.timeList[pItem.sno].e
                             ? 'wordActive'
                             : '',
-                          pItem.tokens[9] === '' ? 'marginRight' : '',
+                          pItem.noBefore ? 'marginLeft' : '',
+                          pItem.noAfter ? 'marginRight' : '',
                           pItem.marginRight ? 'marginSingleRight' : '',
                         ]"
                         :style="{
@@ -450,6 +452,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       paraIndex: -1, //段落索引
       sentIndex: -1, // 句子索引
       isFull: false,
@@ -518,6 +521,8 @@ export default {
             wIndex: indexs,
             isShow: this.enFhList.indexOf(items[2]) == -1,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
           };
           resArr[item.pno].wordsList.push(obj);
         });

src/views/bookShelf/components/PhraseModel.vue

@@ -12,7 +12,7 @@
             color: colorObj.titleColor,
             fontSize: titleFontsize + 'px',
             lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
+            marginRight: itemR.tokens[9] === '' ? '' : '10px',
             fontWeight: '700',
             cursor: 'pointer',
           }"
@@ -22,8 +22,31 @@
             itemR.isExplain || itemR.explainNumber ? 'hasExplain' : '',
           ]"
         >
-          <template v-if="itemR.isShow">
-            <template v-if="itemR.isExplain">
+          <!-- <template v-if="itemR.isShow"> -->
+          <template v-if="itemR.isExplain">
+            <span class="explain-sub" @click="showItem(itemR)">
+              <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.marginRight ? 'marginSingleRight' : '',
+              ]"
+              @click="showItem(itemR)"
+              >{{ itemR.tokens[2] }}</span
+            >
+            <template v-if="itemR.explainNumber">
               <span class="explain-sub" @click="showItem(itemR)">
                 <img
                   :src="
@@ -34,30 +57,7 @@
                 />
               </span>
             </template>
-            <template v-else>
-              <span
-                class="NNPE-chs"
-                :class="[
-                  itemR.type,
-                  itemR.tokens[9] === '' ? 'marginRight' : '',
-                  itemR.highIndex ? 'fontWeight' : '',
-                  itemR.marginRight ? 'marginSingleRight' : '',
-                ]"
-                @click="showItem(itemR)"
-                >{{ itemR.tokens[2] }}</span
-              >
-              <template v-if="itemR.explainNumber">
-                <span class="explain-sub" @click="showItem(itemR)">
-                  <img
-                    :src="
-                      require('../../../assets/explainBg-' +
-                        itemR.explainNumber +
-                        '.png')
-                    "
-                  />
-                </span>
-              </template>
-              <span
+            <!-- <span
                 class="NNPE-chs NNPE-chs-both"
                 v-if="
                   resArr[0].wordsList[indexR + 1] &&
@@ -77,9 +77,9 @@
                 ]"
                 @click="showItem(resArr[0].wordsList[indexR + 1])"
                 >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
-              >
-            </template>
+              > -->
           </template>
+          <!-- </template> -->
           <!-- {{itemR.tokens[2]}} -->
         </span>
       </h2>
@@ -162,47 +162,48 @@
                     pItem.isExplain || pItem.explainNumber ? 'hasExplain' : '',
                   ]"
                 >
-                  <template v-if="pItem.isShow">
-                    <template v-if="pItem.isExplain">
-                      <span class="explain-sub" @click="showItem(pItem)">
-                        <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' : '',
-                            pItem.marginRigh ? 'marginSingleRight' : '',
-                          ]"
-                          :style="{
-                            fontSize: wordFontsize + 'px',
-                            color: colorObj.contentColor,
-                          }"
-                          @click="showItem(pItem)"
-                          >{{ pItem.tokens[2] }}</span
-                        >
-                        <template v-if="pItem.explainNumber">
-                          <span class="explain-sub" @click="showItem(pItem)">
-                            <img
-                              :src="
-                                require('../../../assets/explainBg-' +
-                                  pItem.explainNumber +
-                                  '.png')
-                              "
-                            />
-                          </span>
-                        </template>
-                        <span
+                  <!-- <template v-if="pItem.isShow"> -->
+                  <template v-if="pItem.isExplain">
+                    <span class="explain-sub" @click="showItem(pItem)">
+                      <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.noBefore ? 'marginLeft' : '',
+                          pItem.noAfter ? 'marginRight' : '',
+                          pItem.highIndex ? 'fontWeight' : '',
+                          pItem.marginRigh ? 'marginSingleRight' : '',
+                        ]"
+                        :style="{
+                          fontSize: wordFontsize + 'px',
+                          color: colorObj.contentColor,
+                        }"
+                        @click="showItem(pItem)"
+                        >{{ pItem.tokens[2] }}</span
+                      >
+                      <template v-if="pItem.explainNumber">
+                        <span class="explain-sub" @click="showItem(pItem)">
+                          <img
+                            :src="
+                              require('../../../assets/explainBg-' +
+                                pItem.explainNumber +
+                                '.png')
+                            "
+                          />
+                        </span>
+                      </template>
+                      <!-- <span
                           class="NNPE-chs NNPE-chs-both"
                           v-if="
                             item.wordsList[pIndex + 1] &&
@@ -229,10 +230,10 @@
                           }"
                           @click="showItem(item.wordsList[pIndex + 1])"
                           >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                        >
-                      </div>
-                    </template>
+                        > -->
+                    </div>
                   </template>
+                  <!-- </template> -->
                 </div>
               </div>
             </template>
@@ -373,6 +374,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       allWordList: [], // 生词短语注释总列表
       tokensArr: [],
       sentenceList: [],
@@ -489,6 +491,8 @@ export default {
           let obj = {
             tokens: items,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
           };
           this.allWordList.forEach((itema, indexa) => {
             itema.bind_sent_data.bind_sents.forEach((itemb, indexb) => {

src/views/bookShelf/components/PracticeModel.vue

@@ -19,7 +19,7 @@
             color: colorObj.titleColor,
             fontSize: titleFontsize + 'px',
             lineHeight: titleFontsize + 8 + 'px',
-            marginRight: '10px',
+            marginRight: itemR.tokens[9] === '' ? '' : '10px',
             fontWeight: '700',
           }"
           :class="[
@@ -27,18 +27,18 @@
             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.tokens[2] }}</span
-            >
-            <span
+          <!-- <template v-if="itemR.isShow"> -->
+          <span
+            class="NNPE-chs"
+            :class="[
+              itemR.type,
+              itemR.tokens[9] === '' ? 'marginRight' : '',
+              itemR.highIndex ? 'fontWeight' : '',
+              itemR.marginRight ? 'marginSingleRight' : '',
+            ]"
+            >{{ itemR.tokens[2] }}</span
+          >
+          <!-- <span
               class="NNPE-chs NNPE-chs-both"
               v-if="
                 resArr.wordsList[0][indexR + 1] &&
@@ -57,7 +57,7 @@
               ]"
               >{{ resArr.wordsList[0][indexR + 1].tokens[2] }}</span
             >
-          </template>
+          </template> -->
           <!-- {{itemR.tokens[2]}} -->
         </span>
       </h2>
@@ -173,124 +173,76 @@
           <div class="wordsList-box">
             <div class="nnpe-sentence-box">
               <div v-for="(pItem, pIndex) in item" :key="'wordsList' + pIndex">
-                <template v-if="pItem.isShow">
-                  <div
+                <!-- <template v-if="pItem.isShow"> -->
+                <div
+                  :class="[
+                    'NNPE-words',
+                    isPlaying &&
+                    resArr.timeList[index] &&
+                    resArr.timeList[index] &&
+                    curTime >= resArr.timeList[index].s &&
+                    curTime <= resArr.timeList[index].e
+                      ? 'sentActive'
+                      : '',
+                    pItem.pno == paraIndex && pItem.sno == sentIndex
+                      ? 'overActive'
+                      : '',
+                  ]"
+                  @click="
+                    handleChangeTime(
+                      resArr.timeList[index] &&
+                        resArr.timeList[index] &&
+                        resArr.timeList[index].s
+                    )
+                  "
+                  @mouseover="handleMouseover(pItem)"
+                  @mouseleave="handleMouseleave"
+                >
+                  <span
+                    class="NNPE-chs"
                     :class="[
-                      'NNPE-words',
                       isPlaying &&
                       resArr.timeList[index] &&
                       resArr.timeList[index] &&
-                      curTime >= resArr.timeList[index].s &&
+                      resArr.timeList[index].e &&
+                      resArr.timeList[index].tokens &&
+                      resArr.timeList[index].tokens[pItem.wIndex] &&
+                      curTime >=
+                        resArr.timeList[index].tokens[pItem.wIndex].s &&
                       curTime <= resArr.timeList[index].e
-                        ? 'sentActive'
-                        : '',
-                      pItem.pno == paraIndex && pItem.sno == sentIndex
-                        ? 'overActive'
+                        ? 'wordActive'
                         : '',
+                      pItem.noBefore ? 'marginLeft' : '',
+                      pItem.noAfter ? 'marginRight' : '',
                     ]"
-                    @click="
-                      handleChangeTime(
-                        resArr.timeList[index] &&
-                          resArr.timeList[index] &&
-                          resArr.timeList[index].s
-                      )
-                    "
-                    @mouseover="handleMouseover(pItem)"
-                    @mouseleave="handleMouseleave"
-                  >
-                    <span
-                      class="NNPE-chs"
-                      :class="[
-                        isPlaying &&
-                        resArr.timeList[index] &&
-                        resArr.timeList[index] &&
-                        resArr.timeList[index].e &&
-                        resArr.timeList[index].tokens &&
-                        resArr.timeList[index].tokens[pItem.wIndex] &&
-                        curTime >=
-                          resArr.timeList[index].tokens[pItem.wIndex].s &&
-                        curTime <= resArr.timeList[index].e
-                          ? 'wordActive'
-                          : '',
-                        pItem.tokens[9] === '' ? 'marginRight' : '',
-                        pItem.marginRight ? 'marginSingleRight' : '',
-                      ]"
-                      :style="{
-                        fontSize: wordFontsize + 'px',
-                        color:
-                          isPlaying &&
-                          resArr.timeList[index] &&
-                          resArr.timeList[index] &&
-                          resArr.timeList[index].tokens[pItem.wIndex] &&
-                          curTime >=
-                            resArr.timeList[index].tokens[pItem.wIndex].s &&
-                          curTime <=
-                            resArr.timeList[index].tokens[pItem.wIndex].e
-                            ? colorObj.statisticValue
-                            : resArr.timeList[index] &&
-                              resArr.timeList[index] &&
-                              curTime >= resArr.timeList[index].s &&
-                              curTime <= resArr.timeList[index].e
-                            ? colorObj.contentColor
-                            : colorObj.type === 'white'
-                            ? '#D0D3D9'
-                            : colorObj.type === 'darkGreen'
-                            ? '#7A8983'
-                            : colorObj.type === 'darkBlue'
-                            ? '#737781'
-                            : '#6B7C74',
-                      }"
-                      >{{ pItem.tokens[2] }}</span
-                    >
-                    <span
-                      class="NNPE-chs NNPE-chs-both"
-                      v-if="
-                        item[pIndex + 1] &&
-                        item[pIndex + 1].tokens[2] &&
-                        enFhList.indexOf(item[pIndex + 1].tokens[2]) > -1
-                      "
-                      :class="[
+                    :style="{
+                      fontSize: wordFontsize + 'px',
+                      color:
                         isPlaying &&
                         resArr.timeList[index] &&
                         resArr.timeList[index] &&
                         resArr.timeList[index].tokens[pItem.wIndex] &&
                         curTime >=
                           resArr.timeList[index].tokens[pItem.wIndex].s &&
-                        curTime <= resArr.timeList[index].e
-                          ? 'wordActive'
-                          : '',
-                        item[pIndex + 1].tokens[8] === '' ? 'marginLeft' : '',
-                        item[pIndex + 1].marginRight ? 'marginSingleRight' : '',
-                      ]"
-                      :style="{
-                        fontSize: wordFontsize + 'px',
-                        color:
-                          isPlaying &&
-                          resArr.timeList[index] &&
-                          resArr.timeList[index] &&
-                          resArr.timeList[index].tokens[pItem.wIndex] &&
-                          curTime >=
-                            resArr.timeList[index].tokens[pItem.wIndex].s &&
-                          curTime <=
-                            resArr.timeList[index].tokens[pItem.wIndex].e
-                            ? colorObj.statisticValue
-                            : resArr.timeList[index] &&
-                              resArr.timeList[index] &&
-                              curTime >= resArr.timeList[index].s &&
-                              curTime <= resArr.timeList[index].e
-                            ? colorObj.contentColor
-                            : colorObj.type === 'white'
-                            ? '#D0D3D9'
-                            : colorObj.type === 'darkGreen'
-                            ? '#7A8983'
-                            : colorObj.type === 'darkBlue'
-                            ? '#737781'
-                            : '#6B7C74',
-                      }"
-                      >{{ item[pIndex + 1].tokens[2] }}</span
-                    >
-                  </div>
-                </template>
+                        curTime <= resArr.timeList[index].tokens[pItem.wIndex].e
+                          ? colorObj.statisticValue
+                          : resArr.timeList[index] &&
+                            resArr.timeList[index] &&
+                            curTime >= resArr.timeList[index].s &&
+                            curTime <= resArr.timeList[index].e
+                          ? colorObj.contentColor
+                          : colorObj.type === 'white'
+                          ? '#D0D3D9'
+                          : colorObj.type === 'darkGreen'
+                          ? '#7A8983'
+                          : colorObj.type === 'darkBlue'
+                          ? '#737781'
+                          : '#6B7C74',
+                    }"
+                    >{{ pItem.tokens[2] }}</span
+                  >
+                </div>
+                <!-- </template> -->
               </div>
             </div>
           </div>
@@ -588,6 +540,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       paraIndex: -1, //段落索引
       sentIndex: -1, // 句子索引
       repeatAfter: false,
@@ -771,6 +724,8 @@ export default {
             wIndex: indexs,
             isShow: this.enFhList.indexOf(items[2]) == -1,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
           };
           wordlist.push(obj);
         });

src/views/bookShelf/components/PrintModel.vue

@@ -90,43 +90,44 @@
                             : '',
                         ]"
                       >
-                        <template v-if="pItem.isShow">
-                          <template v-if="pItem.tokens[2] === '#@@#'">
+                        <!-- <template v-if="pItem.isShow"> -->
+                        <template v-if="pItem.tokens[2] === '#@@#'">
+                          <span
+                            class="NNPE-chs"
+                            :style="{
+                              width: printForm.fontSize + 'px',
+                              height:
+                                printForm.fontSize * printForm.lineHeight +
+                                'px',
+                              display: 'block',
+                              fontFamily: printForm.fontFamily,
+                            }"
+                          ></span>
+                        </template>
+                        <template v-else>
+                          <div :class="['NNPE-words']">
                             <span
                               class="NNPE-chs"
+                              :class="[
+                                pItem.noBefore ? 'marginLeft' : '',
+                                pItem.noAfter ? 'marginRight' : '',
+                                (pItem.highIndex &&
+                                  printForm.bold.indexOf(pItem.types) > -1) ||
+                                (printForm.bold.indexOf('sentence') > -1 &&
+                                  longSentIds.indexOf(pItem.sent_id) > -1)
+                                  ? 'fontWeight'
+                                  : '',
+                                pItem.marginRigh ? 'marginSingleRight' : '',
+                              ]"
                               :style="{
-                                width: printForm.fontSize + 'px',
-                                height:
-                                  printForm.fontSize * printForm.lineHeight +
-                                  'px',
-                                display: 'block',
+                                fontSize: printForm.fontSize + 'px',
+                                color: printForm.color,
+                                lineHeight: printForm.lineHeight,
                                 fontFamily: printForm.fontFamily,
                               }"
-                            ></span>
-                          </template>
-                          <template v-else>
-                            <div :class="['NNPE-words']">
-                              <span
-                                class="NNPE-chs"
-                                :class="[
-                                  pItem.tokens[9] === '' ? 'marginRight' : '',
-                                  (pItem.highIndex &&
-                                    printForm.bold.indexOf(pItem.types) > -1) ||
-                                  (printForm.bold.indexOf('sentence') > -1 &&
-                                    longSentIds.indexOf(pItem.sent_id) > -1)
-                                    ? 'fontWeight'
-                                    : '',
-                                  pItem.marginRigh ? 'marginSingleRight' : '',
-                                ]"
-                                :style="{
-                                  fontSize: printForm.fontSize + 'px',
-                                  color: printForm.color,
-                                  lineHeight: printForm.lineHeight,
-                                  fontFamily: printForm.fontFamily,
-                                }"
-                                >{{ pItem.tokens[2] }}</span
-                              >
-                              <span
+                              >{{ pItem.tokens[2] }}</span
+                            >
+                            <!-- <span
                                 class="NNPE-chs NNPE-chs-both"
                                 v-if="
                                   item.wordsList[pIndex + 1] &&
@@ -162,10 +163,10 @@
                                 >{{
                                   item.wordsList[pIndex + 1].tokens[2]
                                 }}</span
-                              >
-                            </div>
-                          </template>
+                              > -->
+                          </div>
                         </template>
+                        <!-- </template> -->
                       </div>
                     </div>
                   </template>
@@ -662,43 +663,43 @@
                           : '',
                       ]"
                     >
-                      <template v-if="pItem.isShow">
-                        <template v-if="pItem.tokens[2] === '#@@#'">
+                      <!-- <template v-if="pItem.isShow"> -->
+                      <template v-if="pItem.tokens[2] === '#@@#'">
+                        <span
+                          class="NNPE-chs"
+                          :style="{
+                            width: printForm.fontSize + 'px',
+                            height:
+                              printForm.fontSize * printForm.lineHeight + 'px',
+                            display: 'block',
+                            fontFamily: printForm.fontFamily,
+                          }"
+                        ></span>
+                      </template>
+                      <template v-else>
+                        <div :class="['NNPE-words']">
                           <span
                             class="NNPE-chs"
+                            :class="[
+                              pItem.noBefore ? 'marginLeft' : '',
+                              pItem.noAfter ? 'marginRight' : '',
+                              (pItem.highIndex &&
+                                printForm.bold.indexOf(pItem.types) > -1) ||
+                              (printForm.bold.indexOf('sentence') > -1 &&
+                                longSentIds.indexOf(pItem.sent_id) > -1)
+                                ? 'fontWeight'
+                                : '',
+                              pItem.marginRigh ? 'marginSingleRight' : '',
+                            ]"
                             :style="{
-                              width: printForm.fontSize + 'px',
-                              height:
-                                printForm.fontSize * printForm.lineHeight +
-                                'px',
-                              display: 'block',
+                              fontSize: printForm.fontSize + 'px',
+                              color: printForm.color,
+                              lineHeight: printForm.lineHeight,
                               fontFamily: printForm.fontFamily,
                             }"
-                          ></span>
-                        </template>
-                        <template v-else>
-                          <div :class="['NNPE-words']">
-                            <span
-                              class="NNPE-chs"
-                              :class="[
-                                pItem.tokens[9] === '' ? 'marginRight' : '',
-                                (pItem.highIndex &&
-                                  printForm.bold.indexOf(pItem.types) > -1) ||
-                                (printForm.bold.indexOf('sentence') > -1 &&
-                                  longSentIds.indexOf(pItem.sent_id) > -1)
-                                  ? 'fontWeight'
-                                  : '',
-                                pItem.marginRigh ? 'marginSingleRight' : '',
-                              ]"
-                              :style="{
-                                fontSize: printForm.fontSize + 'px',
-                                color: printForm.color,
-                                lineHeight: printForm.lineHeight,
-                                fontFamily: printForm.fontFamily,
-                              }"
-                              >{{ pItem.tokens[2] }}</span
-                            >
-                            <span
+                            >{{ pItem.tokens[2] }}</span
+                          >
+                          <!-- <span
                               class="NNPE-chs NNPE-chs-both"
                               v-if="
                                 item.wordsList[pIndex + 1] &&
@@ -732,10 +733,10 @@
                                 fontFamily: printForm.fontFamily,
                               }"
                               >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                            >
-                          </div>
-                        </template>
+                            > -->
+                        </div>
                       </template>
+                      <!-- </template> -->
                     </div>
                   </div>
                 </template>
@@ -996,6 +997,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       sentenceList: [],
       longSentIds: [], // 长句id
       allWordList: [], // 生词短语注释总列表
@@ -1204,6 +1206,8 @@ export default {
           let obj = {
             tokens: items,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
           };
           this.allWordList.forEach((itema, indexa) => {
             itema.bind_sent_data.bind_sents.forEach((itemb, indexb) => {
@@ -1498,6 +1502,8 @@ export default {
                   let obj = {
                     tokens: items,
                     marginRight: indexs === item.tokens.length - 1,
+                    noBefore: indexs !== 0 && !items[8],
+                    noAfter: !items[9],
                   };
                   allWordList.forEach((itema, indexa) => {
                     itema.bind_sent_data.bind_sents.forEach((itemb, indexb) => {

src/views/bookShelf/components/Voicefullscreen.vue

@@ -143,34 +143,35 @@
             @dblclick="showWordDetail($event, pItem)"
             @click="playWord(pItem, pIndex)"
           >
-            <template v-if="pItem.isShow">
-              <div :class="['NNPE-words']">
-                <span
-                  class="NNPE-chs"
-                  :class="[
-                    resArr.timeList[curSentIndex] &&
-                    resArr.timeList[curSentIndex] &&
-                    resArr.timeList[curSentIndex].e &&
-                    resArr.timeList[curSentIndex].tokens &&
-                    resArr.timeList[curSentIndex].tokens[pItem.wIndex] &&
-                    curTime >=
-                      resArr.timeList[curSentIndex].tokens[pItem.wIndex].s &&
-                    curTime <= resArr.timeList[curSentIndex].e
-                      ? 'wordActive'
-                      : '',
-                    pItem.tokens[9] === '' ? 'marginRight' : '',
-                    pItem.marginRight ? 'marginSingleRight' : '',
-                    bgIndex == 1 ? 'word-green' : '',
-                    bgIndex == 1 && wordIndex == pItem.wIndex
-                      ? 'wordActive-blue'
-                      : bgIndex == 0 && wordIndex == pItem.wIndex
-                      ? 'wordActive'
-                      : '',
-                  ]"
-                  :style="{ fontSize: hzSize + 'px' }"
-                  >{{ pItem.tokens[2] }}</span
-                >
-                <span
+            <!-- <template v-if="pItem.isShow"> -->
+            <div :class="['NNPE-words']">
+              <span
+                class="NNPE-chs"
+                :class="[
+                  resArr.timeList[curSentIndex] &&
+                  resArr.timeList[curSentIndex] &&
+                  resArr.timeList[curSentIndex].e &&
+                  resArr.timeList[curSentIndex].tokens &&
+                  resArr.timeList[curSentIndex].tokens[pItem.wIndex] &&
+                  curTime >=
+                    resArr.timeList[curSentIndex].tokens[pItem.wIndex].s &&
+                  curTime <= resArr.timeList[curSentIndex].e
+                    ? 'wordActive'
+                    : '',
+                  pItem.noBefore ? 'marginLeft' : '',
+                  pItem.noAfter ? 'marginRight' : '',
+                  pItem.marginRight ? 'marginSingleRight' : '',
+                  bgIndex == 1 ? 'word-green' : '',
+                  bgIndex == 1 && wordIndex == pItem.wIndex
+                    ? 'wordActive-blue'
+                    : bgIndex == 0 && wordIndex == pItem.wIndex
+                    ? 'wordActive'
+                    : '',
+                ]"
+                :style="{ fontSize: hzSize + 'px' }"
+                >{{ pItem.tokens[2] }}</span
+              >
+              <!-- <span
                   class="NNPE-chs NNPE-chs-both"
                   v-if="
                     item[pIndex + 1] &&
@@ -195,9 +196,9 @@
                   ]"
                   :style="{ fontSize: hzSize + 'px' }"
                   >{{ item[pIndex + 1].tokens[2] }}</span
-                >
-              </div>
-            </template>
+                > -->
+            </div>
+            <!-- </template> -->
           </div>
         </div>
         <div style="clear: both; overflow: hidden"></div>
@@ -398,6 +399,7 @@ export default {
         "‘ll",
         "”",
       ],
+      firstEnFhlist: ["'", "‘", "“", '"', "("],
       setFontSizeFlag: false,
       showObj: null,
       wordLit: [],
@@ -940,6 +942,8 @@ export default {
             wIndex: indexs,
             isShow: this.enFhList.indexOf(items[2]) == -1,
             marginRight: indexs === item.tokens.length - 1,
+            noBefore: indexs !== 0 && !items[8],
+            noAfter: !items[9],
             type: type,
             word_id: word_id,
           };