富文本和封面

src/components/Adult/Preview.vue

@@ -2,12 +2,49 @@
 <template>
   <div class="NNPE-Big-Book-preview adult-book-preview-sty preview-red">
     <div class="NNPE-title">
-      <h1>{{ fatherName }}</h1>
+        <!-- 页眉 -->
+        <!-- <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>
+                </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">
+                            <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>
+                                        <span class="pinyin">{{itemCon.pinyin}}</span>
+                                        <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                    </div>
+                                    <div style="text-align: left">
+                                        <span class="pinyin">{{item.wordsList[indexCon + 1].pinyin}}</span>
+                                        <span class="hanzi content-con">{{item.wordsList[indexCon + 1].chs}}</span>
+                                    </div>
+                                </div>
+                                
+                            </template>
+                            <template v-else>
+                                <span class="pinyin">{{itemCon.pinyin}}</span>
+                                <span class="hanzi content-con">{{itemCon.chs}}</span>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            
+        </div> -->
+      <h1>{{fatherName}}</h1>
       <div class="NNPE-operate">
         <a class="btn-prev" @click="handleNNPEprev" />
         <a class="btn-next" @click="handleNNPEnext" />
       </div>
     </div>
+    <div class="classTopic-box">
+        <span v-for="(item,index) in cur.classTopic" :key="index" :class="item.font">
+            {{item.con}}
+        </span>
+    </div>
     <div v-if="cur" class="NNPE-Book-content-inner">
       <div v-for="(item, index) in cur.cur_fn_data" :key="index">
         <h2 v-if="item.z_title">{{ item.z_title }}</h2>
@@ -152,7 +189,10 @@
                   />
                 </template>
                 <template v-if="itemss.type == 'CourseStart_chs'">
-                  <CourseStart :cur-que="itemss.data" />
+                  <CourseStart :cur-que="itemss.data" :handleNNPEnext="handleNNPEnext" />
+                </template>
+                <template v-if="itemss.type == 'tinydemo_chs'">
+                  <Tinydemo :cur-que="itemss.data" />
                 </template>
               </template>
             </div>
@@ -191,6 +231,7 @@ import RecordModule from "./preview/RecordModule.vue"; // 录音组件
 import UploadControlView from "./preview/UploadControlView.vue"; //预览控件
 import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
 import CourseStart from "./preview/CourseStart.vue" // 封面
+import Tinydemo from "./preview/TinyModule.vue" // 富文本
 
 export default {
   name: "Preview",
@@ -222,6 +263,7 @@ export default {
     UploadControlView,
     DialogueAnswerViewChs,
     CourseStart,
+    Tinydemo,
   },
   props: [
     "context",
@@ -264,6 +306,7 @@ export default {
           bg: "rgba(255, 138, 0, 0.1)",
         },
       ],
+      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
     };
   },
   computed: {},
@@ -286,6 +329,7 @@ export default {
     const _this = this;
     if (_this.context) {
       _this.initContextData();
+    //   _this.handleTitleData();
     }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
@@ -297,6 +341,21 @@ export default {
   activated() {},
   // 方法集合
   methods: {
+    // 处理数据
+    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);
+        })
+        this.$set(_this.curQue.detail,'resArr',paraArr)
+    },
     initContextData() {
       const _this = this;
       _this.contextData = JSON.parse(JSON.stringify(_this.context));
@@ -559,6 +618,29 @@ export default {
       }
     }
   }
+  .classTopic-box{
+      background: #E35454;
+      border-radius: 8px;
+      width: 780px;
+      margin: 24px auto 0 auto;
+      text-align: center;
+      padding: 8px 24px;
+      span{
+          font-size: 16px;
+          line-height: 150%; 
+          color: #FFFFFF;
+          padding: 0 1px;
+          &.cn{
+             font-family: 'FZJCGFKTK';  
+          }
+          &.en{
+             font-family: 'robot';  
+          }
+          &.pinyin{
+             font-family: 'GB-PINYINOK-B';  
+          }
+      }
+  }
   .NNPE-Book-content-inner {
     padding: 0 40px;
     > div {

src/components/Adult/preview/CourseStart.vue

@@ -1,6 +1,39 @@
 <template>
   <div class="NPC-courseStart">
-      
+        <h2 :class="[curQue.titleType=='cn'?'hanzi':'']">{{curQue.title}}</h2>
+        <div class="item-content">
+            <template v-if="curQue.detail.wordsList.length==0">
+                <p :class="['content-con']" v-if="curQue.detail.sentence">{{curQue.detail.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">
+                        <template v-if="curQue.detail.wordsList[indexCon + 1] && curQue.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(curQue.detail.wordsList[indexCon + 1].chs) > -1">
+                            <div class="synthesis-box">
+                                <div>
+                                    <span class="pinyin">{{itemCon.pinyin}}</span>
+                                    <span class="hanzi content-con">{{itemCon.chs}}</span>
+                                </div>
+                                <div style="text-align: left">
+                                    <span class="pinyin">{{curQue.detail.wordsList[indexCon + 1].pinyin}}</span>
+                                    <span class="hanzi content-con">{{curQue.detail.wordsList[indexCon + 1].chs}}</span>
+                                </div>
+                            </div>
+                            
+                        </template>
+                        <template v-else>
+                            <span class="pinyin">{{itemCon.pinyin}}</span>
+                            <span class="hanzi content-con">{{itemCon.chs}}</span>
+                        </template>
+                    </div>
+                </div>
+            </template>
+            <b class="content-en" v-if="curQue.en">{{curQue.en}}</b>
+        </div>
+        <div class="item-intro" v-if="curQue.con">
+            {{curQue.con}}
+        </div>
+        <a class="start-btn" @click="handleNNPEnext">开始学习</a>
   </div>
 </template>
 
@@ -11,11 +44,11 @@ export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
   },
-  props: ["curQue"],
+  props: ["curQue","handleNNPEnext"],
   data() {
     //这里存放数据
     return {
-      
+      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
     };
   },
   //计算属性 类似于data概念
@@ -23,9 +56,27 @@ export default {
   //监控data中数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+      // 处理数据
+        handleData(){
+            let _this = this
+            let curQue = JSON.parse(JSON.stringify(this.curQue));
+            let paraArr = []
+            curQue.detail.wordsList.forEach((sItem, sIndex) => {
+                let obj = {
+                    pinyin: sItem.pinyin,
+                    chs: sItem.chs,
+                    isShow: true,
+                };
+                paraArr.push(obj);
+            })
+            this.$set(_this.curQue.detail,'resArr',paraArr)
+        }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+      this.handleData()
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   //生命周期-创建之前
@@ -47,6 +98,90 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .NPC-courseStart{
+    width: 100%;
     background: #E35454;
+    color: rgba(255, 255, 255, 0.85);
+    padding: 40px;
+    h2{
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: normal;
+        text-align: center;
+        font-family: 'robot';
+        margin: 0;
+        &.hanzi{
+            font-family: 'FZJCGFKTK';
+        }
+    }
+    .item-content{
+        text-align: center;
+        padding: 24px 0;
+    }
+    .content-con{
+        font-size: 40px;
+        line-height: 48px;
+        font-family: 'FZJCGFKTK';
+        margin: 0;
+        &.content-con-small{
+            font-size: 16px;
+        }
+    }
+    .content-en{
+        font-weight: normal;
+        font-size: 20px;
+        line-height: 28px;
+        font-family: 'robot';
+        display: block;
+    }
+    .con-box{
+        display: flex;
+        flex-flow: wrap;
+        justify-content: center;
+        .con-item{
+            text-align: center;
+            padding: 0 3px;
+        }
+        span{
+            display: block;
+        }
+        .pinyin{
+            font-family: 'GB-PINYINOK-B';
+            font-size: 24px;
+            line-height: 32px;
+            height: 32px;
+        }
+        .synthesis-box{
+            display: flex;
+        }
+    }
+    .item-intro{
+        background: #DD5252;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 24px;
+        font-size: 16px;
+        line-height: 150%;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+    .start-btn{
+        width: 160px;
+        height: 40px;
+        box-shadow: 0px 8px 24px rgba(103, 0, 0, 0.25);
+        border-radius: 8px;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        display: block;
+        margin: 24px auto;
+        color: #E35454;
+        font-size: 20px;
+        line-height: 28px;
+        text-align: center;
+        line-height: 40px;
+        &:hover{
+            color: #DD5252;
+        }
+    }
 }
 </style>

src/components/Adult/preview/TinyModule.vue

@@ -0,0 +1,37 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Tiny" v-if="curQue">
+    <div v-html="curQue.con"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-prev-Tiny{
+    width: 100%;
+}
+</style>