文章

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

@@ -321,7 +321,6 @@ export default {
 
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
 
       &-box {
         float: left;
@@ -341,7 +340,7 @@ export default {
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
             font-size: 20px;
-            line-height: 50px;
+            line-height: 28px;
             color: #000000;
             &.active {
               background: rgba(222, 68, 68, 0.15);
@@ -380,7 +379,7 @@ export default {
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
           font-size: 20px;
-          line-height: 50px;
+          line-height: 28px;
           color: #000000;
           &.active {
             background: rgba(222, 68, 68, 0.15);

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

@@ -91,6 +91,7 @@
     </template>
     <template v-if="isShow">
       <div
+        ref="wordcard"
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
@@ -120,12 +121,15 @@ export default {
       newWords: ["鱼", "辩礼义"],
       oldHz: "",
       hz: "",
+      clientY: 0,
       top: 0,
       left: 0,
       articleImg: {}, // 文章图片
       newWordList: [],
       word: null,
       isShow: false,
+      screenHeight: 0,
+      cardHeight: 0,
     };
   },
   computed: {},
@@ -134,7 +138,24 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
-          _this.handleNewWords(val, _this.top, _this.left);
+          _this.handleNewWords(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 0);
         }
       },
       // 深度观察监听
@@ -270,7 +291,7 @@ export default {
           _this.hz = word;
         }, 50);
       }
-      _this.top = e.clientY + 20;
+      _this.clientY = e.clientY;
       let left = e.clientX;
       let width = 0;
       if (word.length == 1 || word.length == 2) {
@@ -281,7 +302,7 @@ export default {
         width = 560;
       }
       if (left - this.bodyLeft > this.contentWidth / 2) {
-        _this.left = left - width;
+        _this.left = left - width + 10;
       } else {
         _this.left = left;
       }
@@ -295,20 +316,22 @@ export default {
       this.hz = "";
     },
     // 处理分词数据
-    handleNewWords(val, top, left) {
-      debugger;
+    handleNewWords(val) {
       this.isShow = true;
       this.word = null;
       for (let i = 0; i < this.NNPENewWordList.length; i++) {
         let item = this.NNPENewWordList[i];
         if (item.new_word.trim() == val.trim()) {
           let wordlist = val.split("");
-          this.word = { list: wordlist, detail: item, top: top, left: left };
+          this.word = { list: wordlist, detail: item };
           break;
         }
       }
       this.oldHz = val;
     },
+    getScreenHeight() {
+      this.screenHeight = window.innerHeight;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -323,6 +346,10 @@ export default {
     if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
       this.handleNewword();
     }
+    $(window).resize(() => {
+      this.getScreenHeight();
+    });
+    this.getScreenHeight();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -346,7 +373,6 @@ export default {
     color: rgba(0, 0, 0, 0.65);
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -355,7 +381,7 @@ export default {
             font-family: "GB-PINYINOK-B";
             font-weight: normal;
             font-size: 14px;
-            line-height: 150%;
+            line-height: 22px;
 
             height: 21px;
             &.textLeft {
@@ -364,8 +390,8 @@ export default {
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
-            font-size: 24px;
-            line-height: 150%;
+            font-size: 20px;
+            line-height: 28px;
 
             &.active {
               color: #de4444;
@@ -388,7 +414,7 @@ export default {
           font-family: "GB-PINYINOK-B";
           font-weight: normal;
           font-size: 14px;
-          line-height: 150%;
+          line-height: 22px;
 
           height: 21px;
           &.textLeft {
@@ -397,8 +423,8 @@ export default {
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
-          font-size: 24px;
-          line-height: 150%;
+          font-size: 20px;
+          line-height: 28px;
 
           &.active {
             color: #de4444;

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

@@ -1,22 +1,36 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      v-if="curQue.mp3_list[0].url"
-      class="aduioLine-box"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-      :stopAudio="stopAudio"
-      @handleChangeStopAudio="handleChangeStopAudio"
-    />
+    <div
+      class="aduioLine-box aduioLine-practice"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
+      <AudioLine
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        ref="audioLine"
+        :stopAudio="stopAudio"
+        :width="706"
+        @handleChangeStopAudio="handleChangeStopAudio"
+      />
+      <div class="aduioLine-right">
+        <span class="loop-icon disabled"></span>
+        <span class="pinyin-icon"></span>
+      </div>
+    </div>
     <template v-if="resObj">
       <!--  -->
       <div class="NPC-sentences-list">
-        <div v-for="(item, index) in resObj.sentList" :key="'detail' + index">
+        <div
+          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
+          v-for="(item, index) in resObj.sentList"
+          :key="'detail' + index"
+        >
           <div
-            class="NNPE-detail"
-            @click="handleChangeTime(curQue.wordTime[index].bg)"
+            :class="['NNPE-detail']"
+            @click="handleChangeTime(curQue.wordTime[index].bg, index)"
           >
             <div
               class="NNPE-words"
@@ -35,12 +49,18 @@
                     <span class="NNPE-words-box">
                       <span
                         class="NNPE-pinyin"
-                        :class="[pItem.className ? pItem.className : '']"
+                        :class="[
+                          pItem.className ? pItem.className : '',
+                          sentIndex == index ? 'wordBlank' : '',
+                        ]"
                         >{{ pItem.pinyin }}</span
                       >
                       <span
                         class="NNPE-chs"
-                        :class="[pItem.padding ? 'padding' : '']"
+                        :class="[
+                          pItem.padding ? 'padding' : '',
+                          sentIndex == index ? 'wordBlank' : '',
+                        ]"
                       >
                         <template
                           v-if="pItem.timeList && pItem.timeList.length > 0"
@@ -54,6 +74,7 @@
                               curTime <= curQue.wordTime[index].ed
                                 ? 'active'
                                 : '',
+                              sentIndex == index ? 'wordBlank' : '',
                             ]"
                             >{{ pItem.chs[wIndex] }}</span
                           >
@@ -61,9 +82,14 @@
                       </span>
                     </span>
                     <span class="NNPE-words-box">
-                      <span class="NNPE-pinyin" style="text-align: left">{{
-                        item[pIndex + 1].pinyin
-                      }}</span>
+                      <span
+                        :class="[
+                          'NNPE-pinyin',
+                          sentIndex == index ? 'wordBlank' : '',
+                        ]"
+                        style="text-align: left"
+                        >{{ item[pIndex + 1].pinyin }}</span
+                      >
                       <span class="NNPE-chs" style="text-align: left">
                         <span
                           :class="[
@@ -72,6 +98,7 @@
                             curTime <= curQue.wordTime[index].ed
                               ? 'active'
                               : '',
+                            sentIndex == index ? 'wordBlank' : '',
                           ]"
                         >
                           {{ item[pIndex + 1].chs }}</span
@@ -85,12 +112,16 @@
                       :class="[
                         pItem.padding ? 'padding' : '',
                         pItem.className ? pItem.className : '',
+                        sentIndex == index ? 'wordBlank' : '',
                       ]"
                       >{{ pItem.pinyin }}</span
                     >
                     <span
                       class="NNPE-chs"
-                      :class="[pItem.padding ? 'padding' : '']"
+                      :class="[
+                        pItem.padding ? 'padding' : '',
+                        sentIndex == index ? 'wordBlank' : '',
+                      ]"
                     >
                       <template
                         v-if="pItem.timeList && pItem.timeList.length > 0"
@@ -104,6 +135,7 @@
                             curTime <= curQue.wordTime[index].ed
                               ? 'active'
                               : '',
+                            sentIndex == index ? 'wordBlank' : '',
                           ]"
                           >{{ pItem.chs[wIndex] }}</span
                         >
@@ -124,14 +156,15 @@
           </div>
           <div
             v-show="
-              curTime >= curQue.wordTime[index].bg &&
-              curTime <= curQue.wordTime[index].ed
+              (curTime >= curQue.wordTime[index].bg &&
+                curTime <= curQue.wordTime[index].ed) ||
+              sentIndex == index
             "
             class="Soundrecord-content"
           >
             <Soundrecord
               @handleWav="handleWav"
-              type="pro"
+              type="promax"
               class="luyin-box"
               @handleParentPlay="handleParentPlay"
             />
@@ -160,6 +193,7 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       stopAudio: false,
+      sentIndex: 0,
     };
   },
   computed: {},
@@ -168,6 +202,17 @@ export default {
   methods: {
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
+      this.getSentIndex(this.curTime);
+    },
+    getSentIndex(curTime) {
+      for (let i = 0; i < this.curQue.wordTime.length; i++) {
+        let bg = this.curQue.wordTime[i].bg;
+        let ed = this.curQue.wordTime[i].ed;
+        if (curTime >= bg && curTime <= ed) {
+          this.sentIndex = i;
+          break;
+        }
+      }
     },
     handleData() {
       let resArr = [],
@@ -345,7 +390,8 @@ export default {
       return total;
     },
     //点击播放某个句子
-    handleChangeTime(time) {
+    handleChangeTime(time, index) {
+      this.sentIndex = index;
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time / 1000);
     },
@@ -382,24 +428,45 @@ export default {
 .NNPE-ArticleView {
   width: 100%;
   .NPC-sentences-list {
-    padding: 24px;
+    padding: 16px 0;
   }
   .Soundrecord-content {
   }
-  .NNPE-detail {
-    clear: both;
-    overflow: hidden;
+  .NNPE-detail-box {
     width: 100%;
-    background: #ffffff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
-    border-radius: 8px;
     margin-bottom: 8px;
     box-sizing: border-box;
-    padding: 8px 16px 0px;
+    padding: 8px 24px 8px;
+    &.active {
+      background: rgba(222, 68, 68, 0.15);
+    }
+  }
+  .aduioLine-practice {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .aduioLine-right {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 72px;
+      height: 38px;
+      box-sizing: border-box;
+      padding: 0 12px;
+      > span {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+  .NNPE-detail {
+    clear: both;
+    overflow: hidden;
+
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -409,19 +476,25 @@ export default {
             font-weight: normal;
             font-size: 14px;
             line-height: 20px;
-            color: #000000;
+            color: rgba(0, 0, 0, 0.45);
             height: 20px;
             &.textLeft {
               text-align: left;
             }
+            &.wordBlank {
+              color: rgba(0, 0, 0, 0.85);
+            }
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
             font-size: 20px;
-            line-height: 150%;
-            color: #000000;
+            line-height: 28px;
+            color: rgba(0, 0, 0, 0.45);
             .active {
-              color: #32a5d8;
+              color: #de4444;
+            }
+            &.wordBlank {
+              color: rgba(0, 0, 0, 0.85);
             }
           }
           // &.padding {
@@ -442,19 +515,25 @@ export default {
           font-weight: normal;
           font-size: 14px;
           line-height: 20px;
-          color: #000000;
+          color: rgba(0, 0, 0, 0.45);
           height: 20px;
           &.textLeft {
             text-align: left;
           }
+          &.wordBlank {
+            color: rgba(0, 0, 0, 0.85);
+          }
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
           font-size: 20px;
-          line-height: 150%;
-          color: #000000;
+          line-height: 28px;
+          color: rgba(0, 0, 0, 0.45);
           .active {
-            color: #32a5d8;
+            color: #de4444;
+          }
+          &.wordBlank {
+            color: rgba(0, 0, 0, 0.85);
           }
         }
         &.padding {
@@ -463,13 +542,18 @@ export default {
       }
     }
   }
+  .Soundrecord-content {
+    margin-top: 8px;
+  }
   .luyin-box {
-    width: 178px;
-    margin: 8px 0 8px 0px;
-    padding: 0 8px;
+    width: 280px;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
     border-radius: 8px;
-    background: #ffffff;
+    height: auto;
   }
 }
 </style>

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

@@ -110,6 +110,7 @@
     </template>
     <template v-if="isShow">
       <div
+        ref="wordcard"
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
@@ -142,6 +143,7 @@ export default {
       oldHz: "",
       pinyin: "",
       word: null,
+      clientY: 0,
       top: 0,
       left: 0,
       contentWidth: 732,
@@ -149,6 +151,8 @@ export default {
       paraIndex: -1,
       sentIndex: -1,
       wordIndex: -1,
+      screenHeight: 0,
+      cardHeight: 0,
     };
   },
   computed: {},
@@ -163,6 +167,23 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    isShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 0);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -275,7 +296,7 @@ export default {
     },
     showWordDetail(e, item) {
       let _this = this;
-      if (_this.oldHz != word) {
+      if (_this.oldHz != item.chs) {
         this.isShow = false;
         setTimeout(() => {
           _this.hz = item.chs;
@@ -285,32 +306,34 @@ export default {
           _this.wordIndex = item.wordIndex;
         }, 50);
       }
-      _this.top = e.clientY + 20;
+      _this.clientY = e.clientY;
       let left = e.clientX;
       let width = 0;
-      if (word.length == 1 || word.length == 2) {
+      if (item.chs.length == 1 || item.chs.length == 2) {
         width = 304;
-      } else if (word.length == 3 || word.length == 4) {
+      } else if (item.chs.length == 3 || item.chs.length == 4) {
         width = 432;
-      } else if (word.length > 3) {
+      } else if (item.chs.length > 3) {
         width = 560;
       }
       if (left - this.bodyLeft > this.contentWidth / 2) {
-        _this.left = left - width;
+        _this.left = left - width + 30;
       } else {
-        _this.left = left;
+        _this.left = left - 30;
       }
     },
-    hideWordDetail() {
-      this.isShow = false;
-    },
+
     changeWordCard(isShow) {
-      this.isShow = isShow;
-      this.oldHz = "";
-      this.hz = "";
+      let _this = this;
+      _this.isShow = isShow;
+      _this.oldHz = "";
+      _this.hz = "";
+      _this.paraIndex = -1;
+      _this.sentIndex = -1;
+      _this.wordIndex = -1;
     },
     // 处理分词数据
-    handleNewWords(val, top, left) {
+    handleNewWords(val) {
       this.isShow = true;
       this.word = null;
       let wordlist = val.split("");
@@ -320,17 +343,13 @@ export default {
         new_word: val,
         pinyin: this.pinyin,
       };
-      this.word = { list: wordlist, detail: option, top: top, left: left };
-      //   for (let i = 0; i < this.NNPENewWordList.length; i++) {
-      //     let item = this.NNPENewWordList[i];
-      //     if (item.new_word.trim() == val.trim()) {
-      //       let wordlist = val.split("");
-      //       this.word = { list: wordlist, detail: item, top: top, left: left };
-      //       break;
-      //     }
-      //   }
+      this.word = { list: wordlist, detail: option };
+
       this.oldHz = val;
     },
+    getScreenHeight() {
+      this.screenHeight = window.innerHeight;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -339,6 +358,10 @@ export default {
     if (this.curQue) {
       this.handleData();
     }
+    $(window).resize(() => {
+      this.getScreenHeight();
+    });
+    this.getScreenHeight();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -364,7 +387,6 @@ export default {
     color: rgba(0, 0, 0, 0.85);
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -373,7 +395,7 @@ export default {
             font-family: "GB-PINYINOK-B";
             font-weight: normal;
             font-size: 14px;
-            line-height: 150%;
+            line-height: 22px;
             height: 21px;
             &.textLeft {
               text-align: left;
@@ -381,8 +403,8 @@ export default {
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
-            font-size: 24px;
-            line-height: 150%;
+            font-size: 20px;
+            line-height: 28px;
             &.active {
               background: rgba(60, 200, 99, 0.2);
             }
@@ -407,7 +429,7 @@ export default {
           font-family: "GB-PINYINOK-B";
           font-weight: normal;
           font-size: 14px;
-          line-height: 150%;
+          line-height: 22px;
           height: 21px;
           &.textLeft {
             text-align: left;
@@ -415,8 +437,8 @@ export default {
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
-          font-size: 24px;
-          line-height: 150%;
+          font-size: 20px;
+          line-height: 28px;
           &.active {
             background: rgba(60, 200, 99, 0.2);
           }

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

@@ -1,96 +1,128 @@
 <!--  -->
 <template>
   <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-    />
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
+      <AudioLine
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        ref="audioLine"
+      />
+    </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
+        <div class="NPC-article-empty">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
         <div
           :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
-          <div class="wordsList-box">
-            <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
-            <div>
-              <div
-                class="NNPE-words"
-                v-for="(pItem, pIndex) in item.wordsList"
-                :key="'wordsList' + pIndex"
-                :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-                @click="showWordDetail($event, pItem.chs)"
-              >
-                <template v-if="!pItem.width">
-                  <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">
+          <div class="article-content">
+            <RoleChs :curRole="item.roleDetail" />
+            <div class="wordsList-box">
+              <img
+                :src="articleImg[index]"
+                v-if="articleImg[0] && index == 0"
+              />
+              <div :style="{ background: item.roleDetail.color.bg }">
+                <div
+                  class="NNPE-words"
+                  v-for="(pItem, pIndex) in item.wordsList"
+                  :key="'wordsList' + pIndex"
+                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  @click="showWordDetail($event, pItem.chs)"
+                >
+                  <template v-if="!pItem.width">
+                    <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="[
+                              newWordList.indexOf(pItem.chs) > -1
+                                ? 'newActive'
+                                : '',
+                            ]"
+                            >{{ 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">{{
+                            item.wordsList[pIndex + 1].chs
+                          }}</span>
+                        </span>
+                      </template>
+                      <template v-else>
                         <span
                           class="NNPE-pinyin"
-                          :class="[pItem.className ? pItem.className : '']"
+                          :class="[
+                            pItem.padding ? 'padding' : '',
+                            pItem.className ? pItem.className : '',
+                          ]"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
+                          class="NNPE-chs"
                           :class="[
-                            'NNPE-chs',
-                            newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
+                            newWordList.indexOf(pItem.chs) > -1
+                              ? 'newActive'
+                              : '',
+                            pItem.padding ? 'padding' : '',
                           ]"
                           >{{ 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">{{
-                          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="[
-                          pItem.padding ? 'padding' : '',
-                          newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
-                        ]"
-                        >{{ pItem.chs }}</span
-                      >
+                      </template>
                     </template>
                   </template>
-                </template>
-                <template v-else>
-                  <span
-                    :style="{
-                      height: pItem.height + 'px',
-                      width: pItem.width + 'px',
-                    }"
-                  ></span>
-                </template>
+                  <template v-else>
+                    <span
+                      :style="{
+                        height: pItem.height + 'px',
+                        width: pItem.width + 'px',
+                      }"
+                    ></span>
+                  </template>
+                </div>
               </div>
+              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
-            <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
           </div>
+          <div class="remarkBox remark-top">
+            <RemarkChs :remarkDetail="item.remarkDetail" />
+          </div>
+        </div>
+        <div class="NPC-article-empty NPC-article-empty-bottom">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
+        <div class="dia-article-record">
+          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
         </div>
       </div>
     </template>
     <template v-if="isShow">
       <div
+        ref="wordCard"
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
@@ -104,12 +136,18 @@
 import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
+import RoleChs from "./RoleChs.vue";
+import RemarkChs from "./RemarkChs.vue";
+import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "PhraseModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox"],
   components: {
     AudioLine,
     Wordcard,
+    RoleChs,
+    RemarkChs,
+    Soundrecord,
   },
   data() {
     return {
@@ -126,6 +164,8 @@ export default {
       newWordList: [],
       word: null,
       isShow: false,
+      screenHeight: 0,
+      cardHeight: 0,
     };
   },
   computed: {},
@@ -140,9 +180,27 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    isShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
+    handleWav() {},
     getCurTime(curTime) {
       this.curTime = curTime;
     },
@@ -151,20 +209,9 @@ export default {
       let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       curQue.detail.forEach((dItem, dIndex) => {
-        let paraArr = [
-          {
-            pinyin: "",
-            chs: "",
-            width: 20,
-            height: 20,
-          },
-          {
-            width: 20,
-            height: 20,
-            pinyin: "",
-            chs: "",
-          },
-        ];
+        let roleDetail = this.getRole(dItem);
+        let remarkDetail = dItem.remark;
+        let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
@@ -186,6 +233,8 @@ export default {
 
         let paraObj = {
           wordsList: paraArr,
+          roleDetail: roleDetail,
+          remarkDetail: remarkDetail,
         };
         resArr.push(paraObj);
       });
@@ -221,6 +270,22 @@ export default {
       //   wItem.className = "textLeft";
       // }
     },
+    //获取角色
+    getRole(dItem) {
+      let roleIndex = dItem.roleIndex;
+      let resObj = null;
+      let roleList = JSON.parse(JSON.stringify(this.curQue.roleList));
+      for (let i = 0; i < roleList.length; i++) {
+        let item = roleList[i];
+        if (item.id == roleIndex) {
+          resObj = item;
+          resObj.color = this.colorBox[i];
+          break;
+        }
+      }
+
+      return resObj;
+    },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
@@ -281,7 +346,7 @@ export default {
         width = 560;
       }
       if (left - this.bodyLeft > this.contentWidth / 2) {
-        _this.left = left - width;
+        _this.left = left - width + 10;
       } else {
         _this.left = left;
       }
@@ -296,7 +361,6 @@ export default {
     },
     // 处理分词数据
     handleNewWords(val, top, left) {
-      debugger;
       this.isShow = true;
       this.word = null;
       for (let i = 0; i < this.NNPENewWordList.length; i++) {
@@ -309,6 +373,9 @@ export default {
       }
       this.oldHz = val;
     },
+    getScreenHeight() {
+      this.screenHeight = window.innerHeight;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -323,6 +390,10 @@ export default {
     if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
       this.handleNewword();
     }
+    $(window).resize(() => {
+      this.getScreenHeight();
+    });
+    this.getScreenHeight();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -338,14 +409,59 @@ export default {
 .NNPE-ArticleView {
   width: 100%;
   .NPC-sentences-list {
-    padding: 24px 0;
+    .NPC-article-empty {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      > div {
+        height: 24px;
+        &.empty-left {
+          width: 553px;
+          box-sizing: border-box;
+          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+        }
+        &.empty-right {
+          flex: 1;
+        }
+      }
+      &-bottom {
+        > div {
+          height: 40px;
+        }
+      }
+    }
+    .dia-article-record {
+      width: 100%;
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      .luyin-box {
+        justify-content: start;
+        padding: 8px 12px;
+        height: 40px;
+        width: 280px;
+        justify-content: flex-start;
+      }
+    }
   }
   .NNPE-detail {
     clear: both;
     overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    &.active {
+      background: rgba(0, 0, 0, 0.06);
+    }
+    .article-content {
+      width: 553px;
+      box-sizing: border-box;
+      border-right: 1px rgba(0, 0, 0, 0.1) solid;
+      padding: 8px 0px 8px 23px;
+      &.paraLast {
+        padding-bottom: 24px;
+      }
+    }
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -354,7 +470,7 @@ export default {
             font-family: "GB-PINYINOK-B";
             font-weight: normal;
             font-size: 14px;
-            line-height: 150%;
+            line-height: 22px;
             color: #000000;
             height: 21px;
             &.textLeft {
@@ -363,11 +479,17 @@ export default {
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
-            font-size: 24px;
-            line-height: 150%;
+            font-size: 20px;
+            line-height: 28px;
             color: #000000;
             &.active {
-              color: #e35454;
+              background: rgba(60, 200, 99, 0.2);
+            }
+            &.wordActive {
+              color: #de4444;
+            }
+            &.newActive {
+              color: #de4444;
             }
           }
           &.padding {
@@ -387,7 +509,7 @@ export default {
           font-family: "GB-PINYINOK-B";
           font-weight: normal;
           font-size: 14px;
-          line-height: 150%;
+          line-height: 22px;
           color: #000000;
           height: 21px;
           &.textLeft {
@@ -396,11 +518,17 @@ export default {
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
-          font-size: 24px;
-          line-height: 150%;
+          font-size: 20px;
+          line-height: 28px;
           color: #000000;
           &.active {
-            color: #e35454;
+            background: rgba(60, 200, 99, 0.2);
+          }
+          &.wordActive {
+            color: #de4444;
+          }
+          &.newActive {
+            color: #de4444;
           }
         }
         &.padding {
@@ -428,12 +556,18 @@ export default {
         line-height: 1.5;
       }
     }
+
     .wordsList-box {
       width: 100%;
-      padding: 6px 24px 12px 24px;
+      padding: 0px 24px 0px 40px;
+      clear: both;
+      overflow: hidden;
       > div {
-        overflow: hidden;
-        clear: both;
+        float: left;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        padding: 8px 12px 8px 12px;
+        border-radius: 8px;
       }
       > img {
         width: 100%;
@@ -441,11 +575,20 @@ export default {
       }
     }
   }
+  .remarkBox {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.remark72 {
+      padding-top: 72px;
+    }
+    &.remark-top {
+      padding-top: 44px;
+    }
+  }
   .NNPE-wordDetail {
     position: fixed;
-    //   width: 260px;
-    //   height: 200px;
-    //   background: #cc0;
   }
 }
 </style>

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

@@ -1,110 +1,133 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-    />
+  <div class="NNPE-ArticleView" ref="ArticleView" v-if="curQue">
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
+      <AudioLine
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        ref="audioLine"
+      />
+    </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
+        <div class="NPC-article-empty">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
         <div
           :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
-          <div class="wordsList-box">
-            <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
-            <div>
-              <div
-                class="NNPE-words"
-                v-for="(pItem, pIndex) in item.wordsList"
-                :key="'wordsList' + pIndex"
-                :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-                @click="showWordDetail($event, pItem.chs, pItem.pinyin)"
-              >
-                <template v-if="!pItem.width">
-                  <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">
+          <div class="article-content">
+            <RoleChs :curRole="item.roleDetail" />
+            <div class="wordsList-box">
+              <img
+                :src="articleImg[index]"
+                v-if="articleImg[0] && index == 0"
+              />
+              <div :style="{ background: item.roleDetail.color.bg }">
+                <div
+                  class="NNPE-words"
+                  v-for="(pItem, pIndex) in item.wordsList"
+                  :key="'wordsList' + pIndex"
+                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  @click="showWordDetail($event, pItem)"
+                >
+                  <template v-if="!pItem.width">
+                    <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="[
+                              'NNPE-chs',
+                              paraIndex == pItem.paraIndex &&
+                              sentIndex == pItem.sentIndex &&
+                              wordIndex == pItem.wordIndex
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ 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">{{
+                            item.wordsList[pIndex + 1].chs
+                          }}</span>
+                        </span>
+                      </template>
+                      <template v-else>
                         <span
                           class="NNPE-pinyin"
-                          :class="[pItem.className ? pItem.className : '']"
-                          >{{ pItem.pinyin }}</span
-                        >
-                        <span
-                          class="NNPE-chs"
                           :class="[
-                            curTime >= item.timeList[pItem.sentIndex].bg &&
-                            curTime <= item.timeList[pItem.sentIndex].ed
-                              ? 'active'
-                              : '',
+                            pItem.padding ? 'padding' : '',
+                            pItem.className ? pItem.className : '',
                           ]"
-                          >{{ pItem.chs }}</span
+                          >{{ pItem.pinyin }}</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].bg &&
-                            curTime <= item.timeList[pItem.sentIndex].ed
-                              ? 'active'
+                            pItem.padding ? 'padding' : '',
+                            paraIndex == pItem.paraIndex &&
+                            sentIndex == pItem.sentIndex &&
+                            wordIndex == pItem.wordIndex
+                              ? 'wordActive'
                               : '',
                           ]"
-                          >{{ item.wordsList[pIndex + 1].chs }}</span
+                          >{{ pItem.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].bg &&
-                          curTime <= item.timeList[pItem.sentIndex].ed
-                            ? 'active'
-                            : '',
-                          pItem.padding ? 'padding' : '',
-                        ]"
-                        >{{ pItem.chs }}</span
-                      >
+                      </template>
                     </template>
                   </template>
-                </template>
-                <template v-else>
-                  <span
-                    :style="{
-                      height: pItem.height + 'px',
-                      width: pItem.width + 'px',
-                    }"
-                  ></span>
-                </template>
+                  <template v-else>
+                    <span
+                      :style="{
+                        height: pItem.height + 'px',
+                        width: pItem.width + 'px',
+                      }"
+                    ></span>
+                  </template>
+                </div>
               </div>
+              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
-            <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+          </div>
+          <div class="remarkBox remark-top">
+            <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
+        <div class="NPC-article-empty NPC-article-empty-bottom">
+          <div class="empty-left"></div>
+          <div class="empty-right"></div>
+        </div>
+        <div class="dia-article-record">
+          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+        </div>
       </div>
     </template>
     <template v-if="isShow">
       <div
+        ref="wordcard"
         class="NNPE-wordDetail"
         :style="{ top: top + 'px', left: left + 'px' }"
       >
@@ -118,12 +141,18 @@
 import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
+import RoleChs from "./RoleChs.vue";
+import RemarkChs from "./RemarkChs.vue";
+import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "WordModelChs",
-  props: ["curQue", "bodyLeft", "NNPENewWordList"],
+  props: ["curQue", "bodyLeft", "NNPENewWordList", "colorBox"],
   components: {
     AudioLine,
     Wordcard,
+    RoleChs,
+    RemarkChs,
+    Soundrecord,
   },
   data() {
     return {
@@ -137,10 +166,16 @@ export default {
       oldHz: "",
       pinyin: "",
       word: null,
+      clientY: 0,
       top: 0,
       left: 0,
       contentWidth: 732,
       articleImg: {}, // 文章图片
+      paraIndex: -1,
+      sentIndex: -1,
+      wordIndex: -1,
+      screenHeight: 0,
+      cardHeight: 0,
     };
   },
   computed: {},
@@ -149,7 +184,24 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
-          _this.handleNewWords(val, _this.top, _this.left);
+          _this.handleNewWords(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
         }
       },
       // 深度观察监听
@@ -158,6 +210,7 @@ export default {
   },
   //方法集合
   methods: {
+    handleWav() {},
     getCurTime(curTime) {
       console.log(curTime);
       this.curTime = curTime * 1000;
@@ -167,20 +220,9 @@ export default {
       let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       curQue.detail.forEach((dItem, dIndex) => {
-        let paraArr = [
-          {
-            pinyin: "",
-            chs: "",
-            width: 20,
-            height: 20,
-          },
-          {
-            width: 20,
-            height: 20,
-            pinyin: "",
-            chs: "",
-          },
-        ];
+        let roleDetail = this.getRole(dItem);
+        let remarkDetail = dItem.remark;
+        let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
@@ -208,6 +250,8 @@ export default {
         let paraObj = {
           wordsList: paraArr,
           timeList: timeList,
+          roleDetail: roleDetail,
+          remarkDetail: remarkDetail,
         };
         resArr.push(paraObj);
       });
@@ -232,6 +276,22 @@ export default {
         }
       }
     },
+    //获取角色
+    getRole(dItem) {
+      let roleIndex = dItem.roleIndex;
+      let resObj = null;
+      let roleList = JSON.parse(JSON.stringify(this.curQue.roleList));
+      for (let i = 0; i < roleList.length; i++) {
+        let item = roleList[i];
+        if (item.id == roleIndex) {
+          resObj = item;
+          resObj.color = this.colorBox[i];
+          break;
+        }
+      }
+
+      return resObj;
+    },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
@@ -265,51 +325,58 @@ export default {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time / 1000);
     },
-    showWordDetail(e, word, pinyin) {
+    showWordDetail(e, item) {
       let _this = this;
-      if (_this.oldHz != word) {
+      if (_this.oldHz != item.chs) {
         this.isShow = false;
         setTimeout(() => {
-          _this.hz = word;
-          _this.pinyin = pinyin;
+          _this.hz = item.chs;
+          _this.pinyin = item.pinyin;
+          _this.paraIndex = item.paraIndex;
+          _this.sentIndex = item.sentIndex;
+          _this.wordIndex = item.wordIndex;
         }, 50);
       }
-      _this.top = e.clientY + 20;
+      _this.clientY = e.clientY;
+
       let left = e.clientX;
       let width = 0;
-      if (word.length == 1 || word.length == 2) {
+      if (item.chs.length == 1 || item.chs.length == 2) {
         width = 304;
-      } else if (word.length == 3 || word.length == 4) {
+      } else if (item.chs.length == 3 || item.chs.length == 4) {
         width = 432;
-      } else if (word.length > 3) {
+      } else if (item.chs.length > 3) {
         width = 560;
       }
       if (left - this.bodyLeft > this.contentWidth / 2) {
-        _this.left = left - width;
+        _this.left = left - width + 10;
       } else {
         _this.left = left;
       }
     },
-    hideWordDetail() {
-      this.isShow = false;
-    },
     changeWordCard(isShow) {
-      this.isShow = isShow;
-      this.oldHz = "";
-      this.hz = "";
+      let _this = this;
+      _this.isShow = isShow;
+      _this.oldHz = "";
+      _this.hz = "";
+      _this.paraIndex = -1;
+      _this.sentIndex = -1;
+      _this.wordIndex = -1;
     },
     // 处理分词数据
-    handleNewWords(val, top, left) {
-      this.isShow = true;
-      this.word = null;
+    handleNewWords(val) {
+      let _this = this;
+      _this.isShow = true;
+
+      _this.word = null;
       let wordlist = val.split("");
       let option = {
         definition_list: [],
         mp3_list: [],
         new_word: val,
-        pinyin: this.pinyin,
+        pinyin: _this.pinyin,
       };
-      this.word = { list: wordlist, detail: option, top: top, left: left };
+      _this.word = { list: wordlist, detail: option };
       //   for (let i = 0; i < this.NNPENewWordList.length; i++) {
       //     let item = this.NNPENewWordList[i];
       //     if (item.new_word.trim() == val.trim()) {
@@ -318,7 +385,10 @@ export default {
       //       break;
       //     }
       //   }
-      this.oldHz = val;
+      _this.oldHz = val;
+    },
+    getScreenHeight() {
+      this.screenHeight = window.innerHeight;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -328,6 +398,11 @@ export default {
     if (this.curQue) {
       this.handleData();
     }
+
+    $(window).resize(() => {
+      this.getScreenHeight();
+    });
+    this.getScreenHeight();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -343,16 +418,62 @@ export default {
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .NNPE-ArticleView {
+  position: relative;
   width: 100%;
   .NPC-sentences-list {
-    padding: 24px 0;
+    .NPC-article-empty {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      > div {
+        height: 24px;
+        &.empty-left {
+          width: 553px;
+          box-sizing: border-box;
+          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+        }
+        &.empty-right {
+          flex: 1;
+        }
+      }
+      &-bottom {
+        > div {
+          height: 40px;
+        }
+      }
+    }
+    .dia-article-record {
+      width: 100%;
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      .luyin-box {
+        justify-content: start;
+        padding: 8px 12px;
+        height: 40px;
+        width: 280px;
+        justify-content: flex-start;
+      }
+    }
   }
   .NNPE-detail {
     clear: both;
     overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    &.active {
+      background: rgba(0, 0, 0, 0.06);
+    }
+    .article-content {
+      width: 553px;
+      box-sizing: border-box;
+      border-right: 1px rgba(0, 0, 0, 0.1) solid;
+      padding: 8px 0px 8px 23px;
+      &.paraLast {
+        padding-bottom: 24px;
+      }
+    }
     .NNPE-words {
       float: left;
-      padding: 0 0px 8px 0px;
       &-box {
         float: left;
         > span {
@@ -361,7 +482,7 @@ export default {
             font-family: "GB-PINYINOK-B";
             font-weight: normal;
             font-size: 14px;
-            line-height: 150%;
+            line-height: 22px;
             color: #000000;
             height: 21px;
             &.textLeft {
@@ -370,12 +491,15 @@ export default {
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
-            font-size: 24px;
-            line-height: 150%;
+            font-size: 20px;
+            line-height: 28px;
             color: #000000;
             &.active {
               background: rgba(60, 200, 99, 0.2);
             }
+            &.wordActive {
+              color: #de4444;
+            }
           }
           &.padding {
             padding: 0 3px;
@@ -394,7 +518,7 @@ export default {
           font-family: "GB-PINYINOK-B";
           font-weight: normal;
           font-size: 14px;
-          line-height: 150%;
+          line-height: 22px;
           color: #000000;
           height: 21px;
           &.textLeft {
@@ -403,12 +527,15 @@ export default {
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
-          font-size: 24px;
-          line-height: 150%;
+          font-size: 20px;
+          line-height: 28px;
           color: #000000;
           &.active {
             background: rgba(60, 200, 99, 0.2);
           }
+          &.wordActive {
+            color: #de4444;
+          }
         }
         &.padding {
           padding: 0 3px;
@@ -435,12 +562,18 @@ export default {
         line-height: 1.5;
       }
     }
+
     .wordsList-box {
       width: 100%;
-      padding: 6px 24px 12px 24px;
+      padding: 0px 24px 0px 40px;
+      clear: both;
+      overflow: hidden;
       > div {
-        overflow: hidden;
-        clear: both;
+        float: left;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        padding: 8px 12px 8px 12px;
+        border-radius: 8px;
       }
       > img {
         width: 100%;
@@ -448,6 +581,18 @@ export default {
       }
     }
   }
+  .remarkBox {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.remark72 {
+      padding-top: 72px;
+    }
+    &.remark-top {
+      padding-top: 44px;
+    }
+  }
 }
 .NNPE-wordDetail {
   position: fixed;

src/components/Adult/preview/WordPhrase.vue

@@ -81,6 +81,7 @@
                 <img
                   src="../../../assets/NPC/detail-icon.png"
                   class="detail-icon"
+                  @click="showDetail(item)"
                 />
               </td>
             </tr>
@@ -104,6 +105,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import WordPhraseDetail from "./components/WordPhraseDetail.vue";
+import { getContent } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -158,8 +160,79 @@ export default {
     showDetail(item, index) {
       this.data = null;
       this.data = item;
+      console.log(this.data);
       this.detailShow = true;
       this.detailIndex = index;
+      this.getWordLiju(item.new_word);
+    },
+    // 获取生词的例句
+    getWordLiju(val) {
+      this.data.list1 = [];
+      this.data.list2 = [];
+      this.data.list3 = [];
+      this.data.list1 = [
+        {
+          word: "国",
+          sentence: "我是一个中国人，我爱我的国家", // 例句,
+          begin_position: 12,
+          end_position: 13,
+          source_scope: 1,
+          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
+        },
+        {
+          word: "国",
+          sentence: "我是一个中国人，我爱我的国家", // 例句,
+          begin_position: 5,
+          end_position: 6,
+          source_scope: 1,
+          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
+        },
+      ];
+      this.data.list2 = [
+        {
+          word: "国",
+          sentence: "我是一个中国人，我爱我的国家", // 例句,
+          begin_position: 12,
+          end_position: 13,
+          source_scope: 1,
+          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
+        },
+        {
+          word: "国",
+          sentence: "我是一个中国人，我爱我的国家", // 例句,
+          begin_position: 5,
+          end_position: 6,
+          source_scope: 1,
+          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
+        },
+      ];
+      // let Mname =
+      //   "book-courseware_manager-GetCoursewareWordExampleSentenceList";
+      // // 获取本课的 本教材的 本套的 的例句
+      // getContent(Mname, {
+      //   courseware_id: this.currentTreeID, // 课件id
+      //   word: val, //生词
+      //   search_scope: 2, //检索范围0 本课件  1本教材 2本套
+      //   is_contain_word_variants: false,
+      // }).then((res) => {
+      //   this.data.list3 = res.sentence_list;
+      //   getContent(Mname, {
+      //     courseware_id: this.currentTreeID, // 课件id
+      //     word: val, //生词
+      //     search_scope: 1, //检索范围0 本课件  1本教材 2本套
+      //     is_contain_word_variants: false,
+      //   }).then((res) => {
+      //     this.data.list2 = res.sentence_list;
+      //     getContent(Mname, {
+      //       courseware_id: this.currentTreeID, // 课件id
+      //       word: val, //生词
+      //       search_scope: 0, //检索范围0 本课件  1本教材 2本套
+      //       is_contain_word_variants: false,
+      //     }).then((res) => {
+      //       this.data.list1 = res.sentence_list;
+      //     });
+      //   });
+      // });
     },
     // 关闭单词详情
     closeWordShow(val) {
@@ -170,12 +243,14 @@ export default {
       this.detailIndex = val;
       this.data = null;
       this.data = this.curQue.option[this.detailIndex];
+      this.getWordLiju(this.data.new_word);
     },
     // 下一个单词详情
     nextDetail(val) {
       this.detailIndex = val;
       this.data = null;
       this.data = this.curQue.option[this.detailIndex];
+      this.getWordLiju(this.data.new_word);
     },
     changeDetailIndex(val) {
       if (val == "last") {

src/components/Adult/preview/components/Audio.vue

@@ -0,0 +1,170 @@
+<!--  -->
+<template>
+  <div @click="handlePlayVoice" v-if="mp3">
+    <img class="playImg" :src="voiceSrc" />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["pinyin", "mp3", "fontSize"],
+  data() {
+    return {
+      audio: new Audio(),
+      voiceSrc: "",
+      voicePauseSrc: require("../../../../assets/newImage/common/icon-voice-red.png"),
+      voicePlaySrc: require("../../../../assets/newImage/common/icon-voice-play-red.png"),
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    handlePlayVoice() {
+      let _this = this;
+      if (!_this.mp3) {
+        return;
+      }
+      if (!this.audio.paused) {
+        this.audio.pause();
+      } else {
+        _this.audio.pause();
+        _this.audio.load();
+        _this.audio.src = _this.mp3;
+        _this.audio.loop = false;
+        _this.audio.play();
+      }
+    },
+    stopAudio() {
+      if (this.audio) {
+        this.audio.pause();
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    var that = this;
+    window.stopAudioAudio = function () {
+      if (that.audio) {
+        that.audio.pause();
+      }
+    };
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.voiceSrc = _this.voicePauseSrc;
+    _this.audio.addEventListener("play", function () {
+      console.log("播放");
+      _this.voiceSrc = _this.voicePlaySrc;
+    });
+    _this.audio.addEventListener("pause", function () {
+      _this.voiceSrc = _this.voicePauseSrc;
+    });
+    _this.audio.addEventListener("ended", function () {
+      console.log("停止");
+      _this.voiceSrc = _this.voicePauseSrc;
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.playImg {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: block;
+}
+.content-voice {
+  display: inline-block;
+  padding: 12px 36px;
+  background: #ffffff;
+  border-radius: 36px;
+  height: 72px;
+  margin: 0 auto 24px auto;
+  font-size: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  &-20 {
+    span {
+      color: #404040;
+      font-size: 40px;
+      line-height: 48px;
+      float: left;
+      margin-right: 24px;
+      font-family: GB-PINYINOK-B;
+      &.noMp3 {
+        margin-right: 0px;
+      }
+    }
+    img {
+      height: 48px;
+      float: left;
+      padding-top: 0px;
+    }
+  }
+  span {
+    color: #404040;
+    font-size: 40px;
+    line-height: 48px;
+    float: left;
+    margin-right: 24px;
+    font-family: GB-PINYINOK-B;
+    &.noMp3 {
+      margin-right: 0px;
+    }
+  }
+  img {
+    height: 48px;
+    float: left;
+    padding-top: 0px;
+  }
+}
+.questionMiddle {
+  .content-voice {
+    padding: 8px 24px;
+    border-radius: 24px;
+    height: 48px;
+    margin: 0 auto 16px auto;
+    span {
+      font-size: 26px;
+      line-height: 30px;
+      margin-right: 16px;
+      &.noMp3 {
+        margin-right: 0px;
+      }
+    }
+    img {
+      height: 32px;
+    }
+  }
+}
+.questionSmall {
+  .content-voice {
+    padding: 6px 18px;
+    border-radius: 18px;
+    height: 36px;
+    margin: 0 auto 12px auto;
+    span {
+      font-size: 20px;
+      line-height: 24px;
+      margin-right: 12px;
+      &.noMp3 {
+        margin-right: 0px;
+      }
+    }
+    img {
+      height: 24px;
+    }
+  }
+}
+</style>

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -37,26 +37,131 @@
           </div>
         </div>
         <div class="wordDetail">
-          <p class="word">{{ data.new_word }}</p>
-          <div class="yinpin">
-            <span> / {{ data.pinyin }} /</span>
-            <img
-              @click="palyAudio('deafult')"
-              src="../../../../assets/adult/wordAudio.png"
-              alt=""
+          <div class="Strockplay">
+            <Strockplayredline
+              :Book_text="data.new_word"
+              :playStorkes="true"
+              :targetDiv="'bwcHanziIntp' + detailIndex"
+              :wordNum="data.new_word.length"
             />
-            <audio
-              v-if="data.mp3_list && data.mp3_list.length > 0"
-              id="deafult"
-              :src="data.mp3_list[0].url"
-            ></audio>
           </div>
-          <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i">
-            {{ fy }}
-          </p>
+          <div class="wordInfor">
+            <div class="yinpin">
+              <span class="pinyintext"> {{ data.pinyin }}</span>
+              <template
+                v-if="data.mp3_list && data.mp3_list[0] && data.mp3_list[0].id"
+              >
+                <Audio :mp3="data.mp3_list[0].id" />
+              </template>
+            </div>
+            <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i">
+              {{ fy }}
+            </p>
+          </div>
+        </div>
+        <div class="zhedie">
+          <div v-if="data.list1.length > 0">
+            <el-collapse v-model="wordShow">
+              <el-collapse-item name="1">
+                <template #title>
+                  <div class="topTitle">
+                    <span>本课例句</span>
+                    <span
+                      >{{ wordShow.indexOf("1") != -1 ? "收起" : "展开" }}
+                      <img
+                        v-if="wordShow.indexOf('1') != -1"
+                        src="../../../../assets/newImage/common/show-black.png"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="../../../../assets/newImage/common/hide-black.png"
+                        alt=""
+                      />
+                    </span>
+                  </div>
+                </template>
+                <div class="liju">
+                  <div v-for="(item, i) in data.list1" :key="i">
+                    <p v-html="item.res"></p>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+          <div v-if="data.list2.length > 0">
+            <el-collapse v-model="wordShow">
+              <el-collapse-item name="2">
+                <template #title>
+                  <div class="topTitle">
+                    <span>本书例句</span>
+                    <span
+                      >{{ wordShow.indexOf("2") != -1 ? "收起" : "展开" }}
+                      <img
+                        v-if="wordShow.indexOf('1') != -1"
+                        src="../../../../assets/newImage/common/show-black.png"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="../../../../assets/newImage/common/hide-black.png"
+                        alt=""
+                      />
+                    </span>
+                  </div>
+                </template>
+                <div class="liju">
+                  <div v-for="(item, i) in data.list2" :key="i">
+                    <div>{{ i + 1 }}.</div>
+                    <div>
+                      <p v-html="item.res"></p>
+                      <p class="p2">
+                        来源：{{ item.source_courseware_name_path }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+          <div v-if="data.list3.length > 0">
+            <el-collapse v-model="wordShow">
+              <el-collapse-item name="3">
+                <template #title>
+                  <div class="topTitle">
+                    <span>本套教材例句</span>
+                    <span
+                      >{{ wordShow.indexOf("3") != -1 ? "收起" : "展开" }}
+                      <img
+                        v-if="wordShow.indexOf('1') != -1"
+                        src="../../../../assets/newImage/common/show-black.png"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="../../../../assets/newImage/common/hide-black.png"
+                        alt=""
+                      />
+                    </span>
+                  </div>
+                </template>
+                <div class="liju">
+                  <div v-for="(item, i) in data.list3" :key="i">
+                    <div>{{ data.list3.length + i + 1 }}.</div>
+                    <div>
+                      <p>{{ item.sentence }}</p>
+                      <p class="p2">
+                        来源：{{ item.source_courseware_name_path }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
         </div>
       </div>
-      <div class="bottom" v-if="data&&data.endata">
+      <div class="bottom" v-if="data && data.endata">
         <div class="from">
           来自网易有道<img
             @click="closeWordShow"
@@ -72,7 +177,7 @@
               <span>英 </span>
               <span> / {{ data.endata["uk-phonetic"] }} /</span>
               <img
-                @click="palyAudio('Y')"
+                @click="playAudio('Y')"
                 src="../../../../assets/adult/wordAudio.png"
                 alt=""
               />
@@ -82,7 +187,7 @@
               <span>美 </span>
               <span> / {{ data.endata["us-phonetic"] }} /</span>
               <img
-                @click="palyAudio('M')"
+                @click="playAudio('M')"
                 src="../../../../assets/adult/wordAudio.png"
                 alt=""
               />
@@ -104,11 +209,14 @@
 </template>
 
 <script>
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》from ‘《组件路径》';
+import Strockplayredline from "./Strockplayredline.vue";
+import Audio from "./Audio.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {
+    Strockplayredline,
+    Audio,
+  },
   props: [
     "data",
     "curQue",
@@ -121,7 +229,9 @@ export default {
     //这里存放数据
     return {
       height: "",
-      margintop:''
+      margintop: "",
+      wordShow: "",
+      list1: [],
     };
   },
   //计算属性 类似于data概念
@@ -130,6 +240,7 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    playAudio() {},
     // 关闭单词详情
     closeWordShow() {
       this.closeWord(false);
@@ -149,19 +260,42 @@ export default {
         return;
       }
       this.changeDetailIndex("next");
+      this.getWordLiju();
+    },
+    handleExample(list) {
+      list.map((item, index) => {
+        let b = item.begin_position;
+        let e = item.end_position;
+        let sent = item.sentence;
+        let part1 = sent.substring(0, b);
+        let part2 = sent.substring(b, e);
+        let part3 = sent.substring(e);
+        let res =
+          part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
+        item.res = res;
+        return item;
+      });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    if (this.curQue) {
+      if (this.data.list1 && this.data.list1.length > 0) {
+        this.handleExample(this.data.list1);
+      }
+      if (this.data.list2 && this.data.list2.length > 0) {
+        this.handleExample(this.data.list2);
+      }
+    }
     let Fathernode = document.getElementsByClassName(
       "NNPE-Big-Book-preview"
     )[0];
     if (Fathernode) {
-    //   this.height = Fathernode.clientHeight + "px";
+      //   this.height = Fathernode.clientHeight + "px";
       this.height = window.innerHeight + "px";
-      this.margintop = '-'+window.innerHeight/2 + "px";
+      this.margintop = "-" + window.innerHeight / 2 + "px";
     }
   },
   //生命周期-创建之前
@@ -191,22 +325,21 @@ export default {
   background: rgba(0, 0, 0, 0.33);
   overflow-y: scroll;
   .module-inner {
-      position: fixed;
-      top: 0%;
-      left: 50%;
-      margin-left: -394px;
+    position: fixed;
+    top: 0%;
+    left: 50%;
+    margin-left: -394px;
     > div {
       width: 788px;
       margin-left: 36px;
       background: #ffffff;
-      box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
+      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
       border-radius: 8px;
-      padding-top: 16px;
+      padding: 16px 32px 40px 32px;
       .operation {
         height: 24px;
         div {
           float: right;
-          margin-right: 16px;
           > :nth-child(1) {
             margin-right: 24px;
           }
@@ -227,12 +360,36 @@ export default {
     }
   }
   .top {
-    margin-top: 33px;
+    padding-top: 16px;
     .wordDetail {
-      width: 538px;
-      margin-left: 40px;
-      padding-bottom: 23px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      margin-bottom: 16px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      .Strockplay {
+        box-sizing: border-box;
+        border: 2px solid #ff5757;
+        border-radius: 8px;
+        overflow: hidden;
+        margin-right: 37px;
+      }
+      .wordInfor {
+        .yinpin {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin-bottom: 16px;
+          .pinyintext {
+            font-size: 20px;
+            line-height: 30px;
+            color: #2c2c2c;
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+          }
+        }
+      }
+
       p {
         margin: 0;
       }
@@ -242,29 +399,80 @@ export default {
         line-height: 28px;
         color: #000000;
       }
-      .yinpin {
+
+      .jieshu {
+        margin-top: 16px;
         font-size: 16px;
-        line-height: 150%;
+        line-height: 19px;
         color: #000000;
-        margin-top: 16px;
+      }
+    }
+    .zhedie {
+      width: 100%;
+      margin: 0 auto;
+      > div {
+        margin-bottom: 16px;
+      }
+      .topTitle {
+        width: 100%;
         display: flex;
-        > div {
-          height: 24px;
+        justify-content: space-between;
+        padding: 0 12px;
+        > :nth-child(1) {
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 150%;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        > :nth-child(2) {
           display: flex;
           align-items: center;
+          font-weight: normal;
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        img {
+          width: 16px;
+          height: 16px;
+          margin-left: 4px;
+        }
+        .rotate {
+          animation-name: firstrotate;
+          animation-direction: 2s;
+          animation-fill-mode: both;
+          animation-timing-function: linear;
         }
       }
-      img {
-        margin-left: 10px;
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-      }
-      .jieshu {
-        margin-top: 16px;
-        font-size: 16px;
-        line-height: 150%;
-        color: #000000;
+      .liju {
+        padding-bottom: 16px;
+        margin-right: 24px;
+        > div {
+          margin-top: 16px;
+          margin-left: 8px;
+          display: flex;
+
+          > :nth-child(1) {
+            width: 28px;
+            text-align: right;
+            margin-right: 6px;
+            line-height: 24px;
+            font-family: "FZJCGFKTK";
+          }
+          p {
+            margin: 0;
+            line-height: 24px;
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.85);
+            font-family: "FZJCGFKTK";
+          }
+          .p2 {
+            font-size: 12px;
+            line-height: 20px;
+            color: rgba(0, 0, 0, 0.85);
+            opacity: 0.3;
+          }
+        }
       }
     }
   }
@@ -340,4 +548,18 @@ export default {
     }
   }
 }
+</style>
+<style lang="scss">
+.adult-book-NPC {
+  .zhedie {
+    .el-collapse-item__header {
+      height: 40px;
+      background: #fff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      border-radius: 8px 8px 0px 0px;
+    }
+  }
+}
 </style>

src/components/Adult/preview/components/Wordcard.vue

@@ -1,6 +1,12 @@
 <!--  -->
 <template>
-  <div class="wordCard" v-if="word">
+  <div
+    :class="[
+      'wordCard',
+      word && word.detail.new_word.length > 4 ? 'wordCard560' : '',
+    ]"
+    v-if="word"
+  >
     <div class="closeBox">
       <i class="el-icon-close" @click="changeWordCard(false)"></i>
     </div>
@@ -16,7 +22,7 @@
     </div>
     <div
       class="bwc-Strockplay"
-      :style="{ width: word.detail.new_word.length * 126 + 6 + 'px' }"
+      :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
       v-if="word.detail.new_word.length < 5"
     >
       <div
@@ -188,6 +194,9 @@ export default {
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .wordCard {
+  &.wordCard560 {
+    width: 560px;
+  }
   .practiceBox {
     position: fixed;
     left: 0;
@@ -247,8 +256,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 128px;
-    height: 128px;
+    min-width: 130px;
+    height: 130px;
     margin: 0 auto;
     margin-bottom: 16px;
     border: 2px solid #de4444;

src/components/Adult/preview/components/Wordintp.vue

@@ -11,7 +11,7 @@
     </div>
     <div
       class="bwc-Strockplay"
-      :style="{ width: word.detail.new_word.length * 126 + 8 + 'px' }"
+      :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
       v-if="word.detail.new_word.length < 5"
     >
       <div

src/styles/index.scss

@@ -248,7 +248,36 @@ input:-ms-input-placeholder {
     }
 }
 
-.adult-book-preview-sty {}
+.adult-book-preview-sty {
+  &.preview-red{
+    .loop-icon{
+      background: url("../assets/red/loop-icon.png") no-repeat left top;
+      background-size: 100% 100%;
+      &.disabled{
+        background: url("../assets/grey/loop-icon.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+    .pinyin-icon{
+      background: url("../assets/red/pinyin-icon.png") no-repeat left top;
+      background-size: 100% 100%;
+      &.disabled{
+        background: url("../assets/grey/pinyin-icon.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  &.preview-black{
+    .audio-loop{
+      background: url("../assets/red/loop-icon.png") no-repeat left top;
+      background-size: 100% 100%;
+      &.disabled{
+        background: url("../assets/grey/loop-icon.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
 
 //新实用汉语
 .adult-book-NPC {}

src/views/adultInput.vue

@@ -763,7 +763,6 @@ export default {
       let _this = this;
       let question_data = null;
       if (_this.question_list) {
-        debugger;
         const question2 = JSON.parse(JSON.stringify(_this.question_list));
         question_data = await _this.getFileUrl_preview(question2);
         _this.previewVisible = true;

vue.config.js

@@ -3,7 +3,7 @@ const path = require('path')
 const defaultSettings = require('./src/settings.js')
 
 function resolve(dir) {
-    return path.join(__dirname, dir)
+  return path.join(__dirname, dir)
 }
 
 const name = defaultSettings.title || '发展汉语' // page title
@@ -19,103 +19,119 @@ const webpack = require('webpack')
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-    /**
-     * You will need to set publicPath if you plan to deploy your site under a sub path,
-     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-     * then publicPath should be set to "/bar/".
-     * In most cases please use '/' !!!
-     * Detail: https://cli.vuejs.org/config/#publicpath
-     */
-    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
-    outputDir: 'dist',
-    assetsDir: 'static',
-    lintOnSave: false,
-    productionSourceMap: false,
-    devServer: {
-        port: port,
-        open: true,
-        overlay: {
-            warnings: false,
-            errors: true
-        },
-        proxy: {
-            // change xxx-api/login => mock/login
-            // detail: https://cli.vuejs.org/config/#devserver-proxy
-            [process.env.VUE_APP_BASE_API]: {
-                target: `http://gcls.helxsoft.cn/`,
-                changeOrigin: true,
-                pathRewrite: {
-                    ['^' + process.env.VUE_APP_BASE_API]: ''
-                }
-            },
-        },
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    port: port,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      // change xxx-api/login => mock/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://gcls.helxsoft.cn/`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      },
+    },
 
-        after: require('./mock/mock-server.js')
+    after: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
     },
-    chainWebpack(config) {
-        // it can improve the speed of the first screen, it is recommended to turn on preload
-        config.plugin('preload').tap(() => [{
-            rel: 'preload',
-            // to ignore runtime.js
-            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-            include: 'initial'
-        }])
+    plugins: [
+      new webpack.ProvidePlugin({
+        jQuery: 'jquery',
+        $: 'jquery'
+      })
+    ]
+  },
+  chainWebpack(config) {
+    // it can improve the speed of the first screen, it is recommended to turn on preload
+    config.plugin('preload').tap(() => [{
+      rel: 'preload',
+      // to ignore runtime.js
+      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+      include: 'initial'
+    }])
 
-        // when there are many pages, it will cause too many meaningless requests
-        config.plugins.delete('prefetch')
+    // when there are many pages, it will cause too many meaningless requests
+    config.plugins.delete('prefetch')
 
-        // set svg-sprite-loader
-        config.module
-            .rule('svg')
-            .exclude.add(resolve('src/icons'))
-            .end()
-        config.module
-            .rule('icons')
-            .test(/\.svg$/)
-            .include.add(resolve('src/icons'))
-            .end()
-            .use('svg-sprite-loader')
-            .loader('svg-sprite-loader')
-            .options({
-                symbolId: 'icon-[name]'
-            })
-            .end()
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
 
-        config.when(process.env.NODE_ENV !== 'development', config => {
-            config
-                .plugin('ScriptExtHtmlWebpackPlugin')
-                .after('html')
-                .use('script-ext-html-webpack-plugin', [{
-                    // `runtime` must same as runtimeChunk name. default is `runtime`
-                    inline: /runtime\..*\.js$/
-                }])
-                .end()
-            config.optimization.splitChunks({
-                    chunks: 'all',
-                    cacheGroups: {
-                        libs: {
-                            name: 'chunk-libs',
-                            test: /[\\/]node_modules[\\/]/,
-                            priority: 10,
-                            chunks: 'initial' // only package third parties that are initially dependent
-                        },
-                        elementUI: {
-                            name: 'chunk-elementUI', // split elementUI into a single package
-                            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                        },
-                        commons: {
-                            name: 'chunk-commons',
-                            test: resolve('src/components'), // can customize your rules
-                            minChunks: 3, //  minimum common number
-                            priority: 5,
-                            reuseExistingChunk: true
-                        }
-                    }
-                })
-                // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-            config.optimization.runtimeChunk('single')
-        })
-    }
+    config.when(process.env.NODE_ENV !== 'development', config => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [{
+          // `runtime` must same as runtimeChunk name. default is `runtime`
+          inline: /runtime\..*\.js$/
+        }])
+        .end()
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          libs: {
+            name: 'chunk-libs',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: 'initial' // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: 'chunk-elementUI', // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+          },
+          commons: {
+            name: 'chunk-commons',
+            test: resolve('src/components'), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true
+          }
+        }
+      })
+      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+      config.optimization.runtimeChunk('single')
+    })
+  }
 }