修改preview冲突问题

src/components/Adult/Preview.vue

@@ -1,48 +1,92 @@
 <!--  -->
 <template>
-  <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-item" v-for="(item,index) in cur.detailList" :key="index">
-                <template v-if="item.wordsList.length==0">
-                    <p :class="['content-con',/^[\u4e00-\u9fa5]/.test(item.sentence)?'hasCn':'']" v-if="item.sentence">{{item.sentence}}</p>
+  <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-item"
+          v-for="(item, index) in cur.detailList"
+          :key="index"
+        >
+          <template v-if="item.wordsList.length == 0">
+            <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 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>
+                      <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>
-                    <div class="con-box">
-                        <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>
-                                        <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>
+                  <span class="pinyin">{{ itemCon.pinyin }}</span>
+                  <span class="hanzi content-con">{{ itemCon.chs }}</span>
                 </template>
+              </div>
             </div>
-            
+          </template>
         </div>
+      </div>
       <div class="NNPE-operate">
         <a class="btn-prev" @click="handleNNPEprev" />
         <a class="btn-next" @click="handleNNPEnext" />
       </div>
     </div>
-    <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>
+    <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>
     </div>
     <div v-if="cur" class="NNPE-Book-content-inner">
       <div v-for="(item, index) in cur.cur_fn_data" :key="index">
@@ -188,15 +232,16 @@
                   />
                 </template>
                 <template v-if="itemss.type == 'CourseStart_chs'">
-                  <CourseStart :cur-que="itemss.data" :handleNNPEnext="handleNNPEnext" />
+                  <CourseStart
+                    :cur-que="itemss.data"
+                    :handleNNPEnext="handleNNPEnext"
+                  />
                 </template>
                 <template v-if="itemss.type == 'tinydemo_chs'">
                   <Tinydemo :cur-que="itemss.data" />
+                </template>
                 <template v-if="itemss.type == 'video_chs'">
-                  <VideoControl
-                    :cur-que="itemss.data"
-                    :type="itemss.type"
-                  />
+                  <VideoControl :cur-que="itemss.data" :type="itemss.type" />
                 </template>
               </template>
             </div>
@@ -234,8 +279,8 @@ import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
 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" // 富文本
+import CourseStart from "./preview/CourseStart.vue"; // 封面
+import Tinydemo from "./preview/TinyModule.vue"; // 富文本
 import VideoControl from "./preview/VideoControl.vue"; // 视频控件
 
 export default {
@@ -349,21 +394,21 @@ export default {
   // 方法集合
   methods: {
     // 处理数据
-    handleTitleData(){
-        let _this = this
-        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)
-        })
+    handleTitleData() {
+      let _this = this;
+      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);
+      });
     },
     initContextData() {
       const _this = this;
@@ -595,7 +640,7 @@ export default {
   margin: 0 auto;
   position: relative;
   .NNPE-title {
-    background: #E35454;
+    background: #e35454;
     border-radius: 0px 0px 16px 16px;
     padding: 7px 24px;
     position: relative;
@@ -609,55 +654,56 @@ export default {
       line-height: 150%;
       margin: 0;
     }
-    .NNPE-title-left{
-        display: flex;
-        color: #FFFFFF;
-        font-size: 20px;
+    .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;
-        align-items: flex-end;
-        .NNPE-title-item{
-            margin-right: 12px;
+        font-family: "robot";
+      }
+      .con-box {
+        display: flex;
+        flex-flow: wrap;
+        justify-content: center;
+        .con-item {
+          text-align: center;
+          padding: 0 1px;
         }
-        .content-con{
-            margin: 0;
-            font-family: 'robot';
-            &.hasCn,&.hanzi{
-                font-family: 'FZJCGFKTK';
-            }
+        span {
+          display: block;
         }
-        .content-en{
-            font-weight: normal;
-            line-height: 28px;
-            font-family: 'robot';
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          height: 22px;
         }
-        .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;
-            }
+        .synthesis-box {
+          display: flex;
         }
+      }
     }
     .NNPE-operate {
       position: absolute;
       top: 10px;
       right: 20px;
       a {
-        background: #E35454 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;
@@ -666,38 +712,38 @@ export default {
         display: inline-block;
         margin: 0 4px;
         &.btn-next {
-          background: #E35454 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: #D24444;
+          background-color: #d24444;
         }
       }
     }
   }
-  .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';  
-          }
+  .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;