对话文章

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

@@ -19,7 +19,12 @@
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p
+          :class="['notice', isHasRemark ? 'hasRemark' : '']"
+          v-if="curQue.notice"
+        >
+          {{ curQue.notice }}
+        </p>
         <div
           :class="[
             'NNPE-detail',
@@ -34,13 +39,27 @@
           :key="'detail' + index"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" />
+            <RoleChs :curRole="item.roleDetail" :type="1" />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
                 v-if="articleImg[0] && index == 0"
               />
-              <div :style="{ background: item.roleDetail.color.bg }">
+              <div
+                class="roleDetail"
+                v-if="item.roleDetail.detail.wordsList.length > 0"
+              >
+                <span class="pinyin">{{
+                  item.roleDetail.detail.wordsList | handlePinyin
+                }}</span>
+                <span class="chs">{{
+                  item.roleDetail.detail.wordsList | handleChs
+                }}</span>
+              </div>
+              <div
+                class="para-con"
+                :style="{ background: item.roleDetail.color.bg }"
+              >
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -220,6 +239,30 @@ export default {
     Soundrecord,
     Notecard,
   },
+  filters: {
+    handlePinyin(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.pinyin + " ";
+        } else {
+          str += item.pinyin;
+        }
+      });
+      return str;
+    },
+    handleChs(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.chs + " ";
+        } else {
+          str += item.chs;
+        }
+      });
+      return str;
+    },
+  },
   data() {
     return {
       resArr: [],
@@ -261,7 +304,6 @@ export default {
       left: 0,
       curNoteCon: null,
       screenHeight: 0,
-      
     };
   },
   computed: {},
@@ -557,6 +599,9 @@ export default {
       width: 100%;
       box-sizing: border-box;
       padding: 8px 24px 8px 24px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
       &.hasRemark {
         width: 553px;
         border-right: 1px rgba(0, 0, 0, 0.1) solid;
@@ -666,10 +711,29 @@ export default {
 
     .wordsList-box {
       width: 100%;
-      padding: 0px 24px 0px 40px;
+      padding: 0px 24px 0px 8px;
       clear: both;
       overflow: hidden;
-      > div {
+      .roleDetail {
+        height: 36px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+          margin-right: 4px;
+        }
+        .chs {
+          font-family: "FZJCGFKTK";
+          font-size: 16px;
+          line-height: 24px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+      > .para-con {
         float: left;
         border: 1px solid rgba(0, 0, 0, 0.1);
         box-sizing: border-box;

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -19,20 +19,39 @@
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p
+          :class="['notice', isHasRemark ? 'hasRemark' : '']"
+          v-if="curQue.notice"
+        >
+          {{ curQue.notice }}
+        </p>
         <div
           :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" />
+            <RoleChs :curRole="item.roleDetail" :type="1" />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
                 v-if="articleImg[0] && index == 0"
               />
-              <div :style="{ background: item.roleDetail.color.bg }">
+              <div
+                class="roleDetail"
+                v-if="item.roleDetail.detail.wordsList.length > 0"
+              >
+                <span class="pinyin">{{
+                  item.roleDetail.detail.wordsList | handlePinyin
+                }}</span>
+                <span class="chs">{{
+                  item.roleDetail.detail.wordsList | handleChs
+                }}</span>
+              </div>
+              <div
+                class="para-con"
+                :style="{ background: item.roleDetail.color.bg }"
+              >
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -159,7 +178,11 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
+        <Wordcard
+          :word="word"
+          :changeWordCard="changeWordCard"
+          :themeColor="themeColor"
+        />
       </div>
     </template>
     <template v-if="isNoteShow">
@@ -190,7 +213,7 @@ export default {
     "NNPENewWordList",
     "NNPEAnnotationList",
     "colorBox",
-    "themeColor"
+    "themeColor",
   ],
   components: {
     AudioLine,
@@ -200,6 +223,30 @@ export default {
     Soundrecord,
     Notecard,
   },
+  filters: {
+    handlePinyin(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.pinyin + " ";
+        } else {
+          str += item.pinyin;
+        }
+      });
+      return str;
+    },
+    handleChs(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.chs + " ";
+        } else {
+          str += item.chs;
+        }
+      });
+      return str;
+    },
+  },
   data() {
     return {
       resArr: [],
@@ -290,7 +337,6 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
-          debugger;
           setTimeout(() => {
             _this.cardHeight = _this.$refs.notecard.offsetHeight;
             if (_this.screenHeight - _this.clientY > _this.cardHeight) {
@@ -619,6 +665,9 @@ export default {
       width: 100%;
       box-sizing: border-box;
       padding: 8px 24px 8px 24px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
       &.hasRemark {
         width: 553px;
         border-right: 1px rgba(0, 0, 0, 0.1) solid;
@@ -734,10 +783,29 @@ export default {
 
     .wordsList-box {
       width: 100%;
-      padding: 0px 24px 0px 40px;
+      padding: 0px 24px 0px 8px;
       clear: both;
       overflow: hidden;
-      > div {
+      .roleDetail {
+        height: 36px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+          margin-right: 4px;
+        }
+        .chs {
+          font-family: "FZJCGFKTK";
+          font-size: 16px;
+          line-height: 24px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+      > .para-con {
         float: left;
         border: 1px solid rgba(0, 0, 0, 0.1);
         box-sizing: border-box;

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -31,7 +31,9 @@
     </div>
 
     <template v-if="resObj">
-      <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+      <p class="notice" v-if="curQue.notice">
+        {{ curQue.notice }}
+      </p>
       <div class="NPC-sentences-list">
         <div
           :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
@@ -40,21 +42,65 @@
         >
           <div
             class="NNPE-detail"
-            @click="handleChangeTime(curQue.wordTime[index].bg, index)"
+            @click="
+              handleChangeTime(
+                curQue.wordTime &&
+                  curQue.wordTime[index] &&
+                  curQue.wordTime[index].bg,
+                index
+              )
+            "
           >
             <template v-if="item.sentArr[0].sentIndex == 0">
               <RoleChs
                 :curRole="item.roleDetail"
                 :color="
-                  (curTime >= curQue.wordTime[index].bg &&
+                  (curQue.wordTime &&
+                    curQue.wordTime[index] &&
+                    curTime >= curQue.wordTime[index].bg &&
                     curTime <= curQue.wordTime[index].ed) ||
                   sentIndex == index
                     ? 'rgba(0,0,0,0.85)'
                     : 'rgba(0,0,0,0.45)'
                 "
+                :type="1"
               />
             </template>
+            <div v-else style="width: 36px; height: 36px"></div>
             <div class="sentence-box">
+              <template v-if="item.sentArr[0].sentIndex == 0">
+                <div
+                  class="roleDetail"
+                  v-if="item.roleDetail.detail.wordsList.length > 0"
+                >
+                  <span
+                    :class="[
+                      'pinyin',
+                      (curQue.wordTime &&
+                        curQue.wordTime[index] &&
+                        curTime >= curQue.wordTime[index].bg &&
+                        curTime <= curQue.wordTime[index].ed) ||
+                      sentIndex == index
+                        ? 'color85'
+                        : 'color45',
+                    ]"
+                    >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                  >
+                  <span
+                    :class="[
+                      'chs',
+                      (curQue.wordTime &&
+                        curQue.wordTime[index] &&
+                        curTime >= curQue.wordTime[index].bg &&
+                        curTime <= curQue.wordTime[index].ed) ||
+                      sentIndex == index
+                        ? 'color85'
+                        : 'color45',
+                    ]"
+                    >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                  >
+                </div>
+              </template>
               <div
                 class="sentence-box-inner"
                 :style="{ background: item.roleDetail.color.bg }"
@@ -94,17 +140,16 @@
                                 sentIndex == index ? 'wordBlank' : '',
                               ]"
                             >
-                              <template
-                                v-if="
-                                  pItem.timeList && pItem.timeList.length > 0
-                                "
-                              >
+                              <template>
                                 <span
                                   v-for="(wItem, wIndex) in pItem.leg"
                                   :key="'ci' + wIndex + pIndex + index"
                                   :class="[
+                                    pItem.timeList &&
                                     pItem.timeList[wIndex] &&
                                     curTime >= pItem.timeList[wIndex].wordBg &&
+                                    curQue.wordTime &&
+                                    curQue.wordTime[index] &&
                                     curTime <= curQue.wordTime[index].ed
                                       ? 'active'
                                       : '',
@@ -144,6 +189,8 @@
                                   pItem.timeList[pItem.leg - 1] &&
                                   curTime >=
                                     pItem.timeList[pItem.leg - 1].wordBg &&
+                                  curQue.wordTime &&
+                                  curQue.wordTime[index] &&
                                   curTime <= curQue.wordTime[index].ed
                                     ? 'active'
                                     : '',
@@ -167,22 +214,21 @@
                           </span>
                         </template>
                         <template v-else>
-                          <template
-                            v-if="
-                              curQue.pyPosition == 'top' ||
-                              NumberList.indexOf(pItem.pinyin) < 0
-                            "
-                          >
-                            <span
-                              v-if="isShowPY"
-                              class="NNPE-pinyin"
-                              :class="[
-                                pItem.padding ? 'padding' : '',
-                                pItem.className ? pItem.className : '',
-                                sentIndex == index ? 'wordBlank' : '',
-                              ]"
-                              >{{ pItem.pinyin }}</span
+                          <template v-if="curQue.pyPosition == 'top'">
+                            <template
+                              v-if="NumberList.indexOf(pItem.pinyin) < 0"
                             >
+                              <span
+                                v-if="isShowPY"
+                                class="NNPE-pinyin"
+                                :class="[
+                                  pItem.padding ? 'padding' : '',
+                                  pItem.className ? pItem.className : '',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                ]"
+                                >{{ pItem.pinyin }}</span
+                              >
+                            </template>
                           </template>
                           <span
                             v-if="pItem.chs != '#'"
@@ -192,15 +238,16 @@
                               sentIndex == index ? 'wordBlank' : '',
                             ]"
                           >
-                            <template
-                              v-if="pItem.timeList && pItem.timeList.length > 0"
-                            >
+                            <template>
                               <span
                                 v-for="(wItem, wIndex) in pItem.leg"
                                 :key="'ci' + wIndex + pIndex + index"
                                 :class="[
+                                  pItem.timeList &&
                                   pItem.timeList[wIndex] &&
                                   curTime >= pItem.timeList[wIndex].wordBg &&
+                                  curQue.wordTime &&
+                                  curQue.wordTime[index] &&
                                   curTime <= curQue.wordTime[index].ed
                                     ? 'active'
                                     : '',
@@ -210,16 +257,20 @@
                             </template>
                           </span>
                           <template v-if="curQue.pyPosition == 'bottom'">
-                            <span
-                              v-if="isShowPY"
-                              class="NNPE-pinyin"
-                              :class="[
-                                pItem.padding ? 'padding' : '',
-                                pItem.className ? pItem.className : '',
-                                sentIndex == index ? 'wordBlank' : '',
-                              ]"
-                              >{{ pItem.pinyin }}</span
+                            <template
+                              v-if="NumberList.indexOf(pItem.pinyin) < 0"
                             >
+                              <span
+                                v-if="isShowPY"
+                                class="NNPE-pinyin"
+                                :class="[
+                                  pItem.padding ? 'padding' : '',
+                                  pItem.className ? pItem.className : '',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                ]"
+                                >{{ pItem.pinyin }}</span
+                              >
+                            </template>
                           </template>
                         </template>
                       </template>
@@ -270,6 +321,30 @@ export default {
     Soundrecord,
     RoleChs,
   },
+  filters: {
+    handlePinyin(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.pinyin + " ";
+        } else {
+          str += item.pinyin;
+        }
+      });
+      return str;
+    },
+    handleChs(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.chs + " ";
+        } else {
+          str += item.chs;
+        }
+      });
+      return str;
+    },
+  },
   data() {
     return {
       resObj: null,
@@ -386,7 +461,9 @@ export default {
 
         timeArr.push(dItem.timeList);
       });
-      this.mergeWordTime(sentArrTotal, wordTimeList);
+      if (wordTimeList && wordTimeList.length > 0) {
+        this.mergeWordTime(sentArrTotal, wordTimeList);
+      }
       let timeList = [];
       timeArr.forEach((item) => {
         item.forEach((aItem) => {
@@ -537,8 +614,10 @@ export default {
         _this.currSent = _this.curQue.wordTime[index];
       }
       _this.sentIndex = index;
-      _this.curTime = time;
-      _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      if (time) {
+        _this.curTime = time;
+        _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      }
     },
     handleWav(data) {},
     // 录音时暂停音频播放
@@ -582,8 +661,9 @@ export default {
 //@import url(); 引入公共css类
 .NNPE-ArticleView {
   width: 100%;
+  padding-top: 24px;
   .NPC-sentences-list {
-    padding: 24px 0;
+    padding: 0px 0 24px 0;
   }
   .aduioLine-content {
     flex: 1;
@@ -624,6 +704,9 @@ export default {
     }
   }
   .NNPE-detail {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
     clear: both;
     overflow: hidden;
     width: 100%;
@@ -632,7 +715,7 @@ export default {
     color: rgba(0, 0, 0, 0.45);
 
     .sentence-box {
-      padding-left: 36px;
+      padding-left: 8px;
       clear: both;
       overflow: hidden;
       &-inner {
@@ -642,6 +725,31 @@ export default {
         border: 1px solid rgba(0, 0, 0, 0.1);
         float: left;
       }
+      .roleDetail {
+        height: 36px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+          margin-right: 4px;
+        }
+        .chs {
+          font-family: "FZJCGFKTK";
+          font-size: 16px;
+          line-height: 24px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        .color85 {
+          color: rgba(0, 0, 0, 0.85);
+        }
+        .color45 {
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
     }
     .NNPE-words {
       float: left;

src/components/Adult/preview/DialogueArticleViewChs/WordModelChs.vue

@@ -16,7 +16,7 @@
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div class="NPC-article-empty">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
+          <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
         </div>
         <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
@@ -26,13 +26,27 @@
           :key="'detail' + index"
         >
           <div class="article-content">
-            <RoleChs :curRole="item.roleDetail" />
+            <RoleChs :curRole="item.roleDetail" :type="1" />
             <div class="wordsList-box">
               <img
                 :src="articleImg[index]"
                 v-if="articleImg[0] && index == 0"
               />
-              <div :style="{ background: item.roleDetail.color.bg }">
+              <div
+                class="roleDetail"
+                v-if="item.roleDetail.detail.wordsList.length > 0"
+              >
+                <span class="pinyin">{{
+                  item.roleDetail.detail.wordsList | handlePinyin
+                }}</span>
+                <span class="chs">{{
+                  item.roleDetail.detail.wordsList | handleChs
+                }}</span>
+              </div>
+              <div
+                class="para-con"
+                :style="{ background: item.roleDetail.color.bg }"
+              >
                 <div
                   class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
@@ -161,7 +175,11 @@
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
-        <Wordcard :word="word" :changeWordCard="changeWordCard" :themeColor="themeColor" />
+        <Wordcard
+          :word="word"
+          :changeWordCard="changeWordCard"
+          :themeColor="themeColor"
+        />
       </div>
     </template>
     <template v-if="isNoteShow">
@@ -195,6 +213,30 @@ export default {
     Soundrecord,
     Notecard,
   },
+  filters: {
+    handlePinyin(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.pinyin + " ";
+        } else {
+          str += item.pinyin;
+        }
+      });
+      return str;
+    },
+    handleChs(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.chs + " ";
+        } else {
+          str += item.chs;
+        }
+      });
+      return str;
+    },
+  },
   data() {
     return {
       resArr: [],
@@ -623,6 +665,9 @@ export default {
       width: 100%;
       box-sizing: border-box;
       padding: 8px 24px 8px 24px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
       &.paraLast {
         padding-bottom: 24px;
       }
@@ -728,10 +773,29 @@ export default {
 
     .wordsList-box {
       width: 100%;
-      padding: 0px 24px 0px 40px;
+      padding: 0px 24px 0px 8px;
       clear: both;
       overflow: hidden;
-      > div {
+      .roleDetail {
+        height: 36px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+          margin-right: 4px;
+        }
+        .chs {
+          font-family: "FZJCGFKTK";
+          font-size: 16px;
+          line-height: 24px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+      > .para-con {
         float: left;
         border: 1px solid rgba(0, 0, 0, 0.1);
         box-sizing: border-box;

src/components/Adult/preview/DialogueArticleViewChs/index.vue

@@ -227,8 +227,13 @@ export default {
     line-height: 150%;
     margin-bottom: 16px;
     color: #000000;
-    padding: 0 24px;
-    margin-bottom: 8px;
+    padding: 0 24px 8px;
+    margin: 0;
+    &.hasRemark {
+      width: 553px;
+      box-sizing: border-box;
+      border-right: 1px rgba(0, 0, 0, 0.1) solid;
+    }
   }
   .ArticleView-header {
     .el-switch {