标题

src/components/Adult/Preview.vue

@@ -3,14 +3,14 @@
   <div class="NNPE-Big-Book-preview adult-book-preview-sty preview-red">
     <div class="NNPE-title">
         <!-- 页眉 -->
-        <!-- <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,8 +33,7 @@
                 </template>
             </div>
             
-        </div> -->
-      <h1>{{fatherName}}</h1>
+        </div>
       <div class="NNPE-operate">
         <a class="btn-prev" @click="handleNNPEprev" />
         <a class="btn-next" @click="handleNNPEnext" />
@@ -329,7 +328,7 @@ export default {
     const _this = this;
     if (_this.context) {
       _this.initContextData();
-    //   _this.handleTitleData();
+      _this.handleTitleData();
     }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
@@ -344,17 +343,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;
@@ -587,8 +588,11 @@ export default {
   position: relative;
   .NNPE-title {
     background: #4f92f6;
-    padding: 20px 24px;
+    padding: 7px 24px;
     position: relative;
+    height: 64px;
+    display: flex;
+    align-items: center;
     h1 {
       color: #ffffff;
       font-weight: bold;
@@ -596,6 +600,48 @@ export default {
       line-height: 150%;
       margin: 0;
     }
+    .NNPE-title-left{
+        display: flex;
+        color: #FFFFFF;
+        font-size: 20px;
+        align-items: flex-end;
+        .NNPE-title-item{
+            margin-right: 2px;
+        }
+        .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;