NormalModelChs

src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue

@@ -23,25 +23,69 @@
               @click="handleChangeTime(item.timeList[pItem.sentIndex])"
             >
               <template v-if="!pItem.width">
-                <span
-                  class="NNPE-pinyin"
-                  :class="[
-                    pItem.padding ? 'padding' : '',
-                    pItem.className ? pItem.className : '',
-                  ]"
-                  >{{ pItem.pinyin }}</span
-                >
-                <span
-                  class="NNPE-chs"
-                  :class="[
-                    curTime >= item.timeList[pItem.sentIndex] &&
-                    curTime <= item.timeList[pItem.sentIndex + 1]
-                      ? 'active'
-                      : '',
-                    pItem.padding ? 'padding' : '',
-                  ]"
-                  >{{ pItem.chs }}</span
-                >
+                <template v-if="pItem.isShow">
+                  <template
+                    v-if="
+                      item.wordsList[pIndex + 1].chs &&
+                      chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                    "
+                  >
+                    <span class="NNPE-words-box">
+                      <span
+                        class="NNPE-pinyin"
+                        :class="[pItem.className ? pItem.className : '']"
+                        >{{ pItem.pinyin }}</span
+                      >
+                      <span
+                        class="NNPE-chs"
+                        :class="[
+                          curTime >= item.timeList[pItem.sentIndex] &&
+                          curTime <= item.timeList[pItem.sentIndex + 1]
+                            ? 'active'
+                            : '',
+                        ]"
+                        >{{ pItem.chs }}</span
+                      >
+                    </span>
+                    <span class="NNPE-words-box">
+                      <span class="NNPE-pinyin" style="text-align: left">{{
+                        item.wordsList[pIndex + 1].pinyin
+                      }}</span>
+                      <span
+                        class="NNPE-chs"
+                        style="text-align: left"
+                        :class="[
+                          curTime >= item.timeList[pItem.sentIndex] &&
+                          curTime <= item.timeList[pItem.sentIndex + 1]
+                            ? 'active'
+                            : '',
+                        ]"
+                        >{{ item.wordsList[pIndex + 1].chs }}</span
+                      >
+                    </span>
+                  </template>
+                  <template v-else>
+                    <span
+                      class="NNPE-pinyin"
+                      :class="[
+                        pItem.padding ? 'padding' : '',
+                        pItem.className ? pItem.className : '',
+                      ]"
+                      >{{ pItem.pinyin }}</span
+                    >
+                    <span
+                      class="NNPE-chs"
+                      :class="[
+                        curTime >= item.timeList[pItem.sentIndex] &&
+                        curTime <= item.timeList[pItem.sentIndex + 1]
+                          ? 'active'
+                          : '',
+                        pItem.padding ? 'padding' : '',
+                      ]"
+                      >{{ pItem.chs }}</span
+                    >
+                  </template>
+                </template>
               </template>
               <template v-else>
                 <span
@@ -111,15 +155,17 @@ export default {
         ];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
-            this.judgePad(sItem, wItem, wIndex);
+            //this.judgePad(sItem, wItem, wIndex);
+            this.mergeWordSymbol(sItem, wItem, wIndex);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
               wordIndex: wIndex, //单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
-              padding: wItem.padding,
+              padding: true, //wItem.padding,
               className: wItem.className,
+              isShow: wItem.isShow,
               isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
             };
             paraArr.push(obj);
@@ -144,6 +190,7 @@ export default {
         resArr.push(paraObj);
       });
       this.resArr = resArr;
+      console.log(this.resArr);
 
       // 循环文章图片
       if (curQue.img_list) {
@@ -152,6 +199,28 @@ export default {
         });
       }
     },
+    //词和标点合一起
+    mergeWordSymbol(sItem, wItem, curIndex) {
+      let leg = sItem.length;
+      if (curIndex < leg - 1) {
+        let nextIndex = curIndex + 1;
+        let chs = sItem[nextIndex].chs;
+        let pinyin = sItem[nextIndex].pinyin;
+        // if (this.chsFhList.indexOf(chs) > -1) {
+        //   wItem.chs = "<a>" + wItem.chs + "</a><a>" + chs + "</a>";
+        //   wItem.pinyin = "<a>" + wItem.pinyin + "</a><a>" + pinyin + "</a>";
+        // }
+        if (this.chsFhList.indexOf(wItem.chs) > -1) {
+          wItem.isShow = false;
+        } else {
+          wItem.isShow = true;
+        }
+      }
+
+      // if (this.enFhList.indexOf(wItem.pinyin) > -1) {
+      //   wItem.className = "textLeft";
+      // }
+    },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
@@ -234,6 +303,35 @@ export default {
     .NNPE-words {
       float: left;
       padding: 0 0px 8px 0px;
+      &-box {
+        float: left;
+        > span {
+          display: block;
+          &.NNPE-pinyin {
+            font-family: "GB-PINYINOK-B";
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 150%;
+            color: #000000;
+            height: 21px;
+            &.textLeft {
+              text-align: left;
+            }
+          }
+          &.NNPE-chs {
+            font-family: "FZJCGFKTK";
+            font-size: 24px;
+            line-height: 150%;
+            color: #000000;
+            &.active {
+              background: rgba(60, 200, 99, 0.2);
+            }
+          }
+          &.padding {
+            padding-right: 6px;
+          }
+        }
+      }
       &.textLeft {
         text-align: left;
       }