Preview

src/components/Adult/Preview.vue

@@ -1,16 +1,16 @@
 <!--  -->
 <template>
-  <div class="NNPE-Big-Book-preview adult-book-preview-sty preview-red">
-    <div class="NNPE-title">
+  <div class="NNPE-Big-Book-preview adult-book-preview-sty preview-red" v-if="cur">
+    <div class="NNPE-title" v-if="cur.detailList&&cur.detailList.length>0&&cur.detailList[0].sentence">
         <!-- 页眉 -->
-        <!-- <div class="NNPE-title-left">
+        <div class="NNPE-title-left">
             <div class="NNPE-title-item" v-for="(item,index) in cur.detailList" :key="index">
                 <template v-if="item.wordsList.length==0">
-                    <p :class="['content-con']" v-if="item.sentence">{{item.sentence}}</p>
+                    <p :class="['content-con',/^[\u4e00-\u9fa5]/.test(item.sentence)?'hasCn':'']" v-if="item.sentence">{{item.sentence}}</p>
                 </template>
                 <template v-else>
                     <div class="con-box">
-                        <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in curQue.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
+                        <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in item.resArr" :key="indexCon" v-show="itemCon.isShow">
                             <template v-if="item.wordsList[indexCon + 1] && item.wordsList[indexCon + 1].chs && chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1">
                                 <div class="synthesis-box">
                                     <div>
@@ -33,14 +33,13 @@
                 </template>
             </div>
             
-        </div> -->
-      <h1>{{fatherName}}</h1>
+        </div>
       <div class="NNPE-operate">
         <a class="btn-prev" @click="handleNNPEprev" />
         <a class="btn-next" @click="handleNNPEnext" />
       </div>
     </div>
-    <div class="classTopic-box">
+    <div class="classTopic-box" v-if="cur.classTopic&&cur.classTopic.length>0&&cur.classTopic[0].con">
         <span v-for="(item,index) in cur.classTopic" :key="index" :class="item.font">
             {{item.con}}
         </span>
@@ -316,6 +315,7 @@ export default {
         const _this = this;
         if (val) {
           _this.initContextData();
+          _this.handleTitleData();
         }
       },
       // 深度观察监听
@@ -329,7 +329,7 @@ export default {
     const _this = this;
     if (_this.context) {
       _this.initContextData();
-    //   _this.handleTitleData();
+      _this.handleTitleData();
     }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
@@ -344,17 +344,19 @@ export default {
     // 处理数据
     handleTitleData(){
         let _this = this
-        let curQue = JSON.parse(JSON.stringify(this.cur.detailList));
-        let paraArr = []
-        curQue.wordsList.forEach((sItem, sIndex) => {
-            let obj = {
-                pinyin: sItem.pinyin,
-                chs: sItem.chs,
-                isShow: true,
-            };
-            paraArr.push(obj);
+        let curQue = JSON.parse(JSON.stringify(this.cur));
+        curQue.detailList.forEach((dItem, dIndex) => {
+            let paraArr = []
+            dItem.wordsList.forEach((sItem, sIndex) => {
+                let obj = {
+                    pinyin: sItem.pinyin,
+                    chs: sItem.chs,
+                    isShow: true,
+                };
+                paraArr.push(obj);
+            })
+            this.$set(_this.cur.detailList[dIndex],'resArr',paraArr)
         })
-        this.$set(_this.curQue.detail,'resArr',paraArr)
     },
     initContextData() {
       const _this = this;
@@ -586,9 +588,13 @@ export default {
   margin: 0 auto;
   position: relative;
   .NNPE-title {
-    background: #4f92f6;
-    padding: 20px 24px;
+    background: #E35454;
+    border-radius: 0px 0px 16px 16px;
+    padding: 7px 24px;
     position: relative;
+    height: 64px;
+    display: flex;
+    align-items: center;
     h1 {
       color: #ffffff;
       font-weight: bold;
@@ -596,24 +602,69 @@ export default {
       line-height: 150%;
       margin: 0;
     }
+    .NNPE-title-left{
+        display: flex;
+        color: #FFFFFF;
+        font-size: 20px;
+        line-height: 28px;
+        align-items: flex-end;
+        .NNPE-title-item{
+            margin-right: 12px;
+        }
+        .content-con{
+            margin: 0;
+            font-family: 'robot';
+            &.hasCn,&.hanzi{
+                font-family: 'FZJCGFKTK';
+            }
+        }
+        .content-en{
+            font-weight: normal;
+            line-height: 28px;
+            font-family: 'robot';
+        }
+        .con-box{
+            display: flex;
+            flex-flow: wrap;
+            justify-content: center;
+            .con-item{
+                text-align: center;
+                padding: 0 1px;
+            }
+            span{
+                display: block;
+            }
+            .pinyin{
+                font-family: 'GB-PINYINOK-B';
+                font-size: 14px;
+                line-height: 22px;
+                height: 22px;
+            }
+            .synthesis-box{
+                display: flex;
+            }
+        }
+    }
     .NNPE-operate {
       position: absolute;
       top: 10px;
       right: 20px;
       a {
-        background: #66a3ff url("../../assets/newImage/common/btn-pre.png")
+        background: #E35454 url("../../assets/newImage/common/btn-pre.png")
           center no-repeat;
+        background-size: 24px;
         border-radius: 4px;
         width: 44px;
         height: 44px;
         display: inline-block;
         margin: 0 4px;
         &.btn-next {
-          background: #66a3ff url("../../assets/newImage/common/btn-next.png")
+          background: #E35454 url("../../assets/newImage/common/btn-next.png")
             center no-repeat;
+          background-size: 24px;
         }
         &:hover {
-          background-color: #3f75c4;
+          background-color: #D24444;
         }
       }
     }

src/components/Adult/preview/VoiceMatrix.vue

@@ -25,7 +25,7 @@
         v-if="curQue.voiceMatrix.matrix.length > 0"
         class="matrix"
         :style="{
-          'grid-template': `40px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) 1fr / 40px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) 1fr`
+          'grid-template': `40px repeat(${curQue.voiceMatrix.matrix.length}, auto) 1fr / 40px repeat(${curQue.voiceMatrix.matrix[0].length}, auto) 1fr`
         }"
         @mouseleave="clearSelectCell"
       >
@@ -277,6 +277,11 @@ export default {
       return (type.length > 0 && index >= 0) || (row >= 0 && column >= 0);
     }
   },
+  watch: {
+    hasSelectedCell() {
+      this.handleParentPlay();
+    }
+  },
   methods: {
     // 鼠标移入移出
     matrixCellMouseenter(i, j, type) {
@@ -341,7 +346,7 @@ export default {
       if (type.length > 0 && index >= 0 && type === "row") {
         this.curQue.voiceMatrix.matrix[index].forEach(item => {
           if (
-            item.type !== "connection" ||
+            item.type === "SentenceSegwordChs" ||
             (item.type === "text" && item.text.length > 0)
           ) {
             this.lrcArray.push(item.lrc_data);
@@ -353,11 +358,12 @@ export default {
 
       if (type.length > 0 && index >= 0 && type === "column") {
         this.curQue.voiceMatrix.matrix.forEach(item => {
+          let data = item[index];
           if (
-            item.type !== "connection" ||
-            (item.type === "text" && item.text.length > 0)
+            data.type === "SentenceSegwordChs" ||
+            (data.type === "text" && data.text.length > 0)
           ) {
-            this.lrcArray.push(item[index].lrc_data);
+            this.lrcArray.push(data.lrc_data);
           }
         });
         if (this.lrcArray.length > 0) this.lrcPlay(this.lrcArray[0], 0);