src/components/Adult/Preview.vue

@@ -212,7 +212,213 @@
           </span>
         </div>
       </div>
-
+      <div
+        class="NNPE-title-bg"
+        :style="{
+          background: themeColorPhone[themeColorPhoneIndex],
+          position: 'initial'
+        }"
+      >
+        <div class="NNPE-title NNPE-title-top">
+          <!-- 页眉 -->
+          <div
+            class="NNPE-title-left"
+            :style="{ fontSize: baseSizePhone + 4 + 'px' }"
+          >
+            <div
+              v-for="(item, index) in cur.detailList"
+              :key="index"
+              class="NNPE-title-item"
+            >
+              <template
+                v-if="
+                  item.detail &&
+                    item.detail.wordsList &&
+                    item.detail.wordsList.length == 0
+                "
+              >
+                <p
+                  v-if="item.detail.sentence"
+                  :class="[
+                    'content-con',
+                    /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
+                  ]"
+                  v-html="item.detail.sentence"
+                />
+              </template>
+              <template v-else>
+                <div v-if="item.detail && item.detail.resArr" class="con-box">
+                  <div
+                    v-for="(itemCon, indexCon) in item.detail.resArr"
+                    v-show="itemCon.isShow"
+                    :key="indexCon"
+                    :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
+                  >
+                    <template
+                      v-if="
+                        item.detail &&
+                          item.detail.wordsList &&
+                          item.detail.wordsList[indexCon + 1] &&
+                          item.detail.wordsList[indexCon + 1].chs &&
+                          chsFhList.indexOf(
+                            item.detail.wordsList[indexCon + 1].chs
+                          ) > -1
+                      "
+                    >
+                      <div class="synthesis-box">
+                        <div>
+                          <span
+                            v-if="itemCon.pinyin"
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(itemCon.pinyin) > -1
+                                ? 'noFont'
+                                : ''
+                            ]"
+                            >{{ itemCon.pinyin }}</span
+                          >
+                          <span
+                            class="content-con"
+                            :class="
+                              [/^[0-9]*$/.test(itemCon.chs)]
+                                ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
+                                  ? 'hanzi'
+                                  : 'en'
+                                : ''
+                            "
+                            >{{ itemCon.chs }}</span
+                          >
+                        </div>
+                        <div
+                          v-if="item.detail.wordsList[indexCon + 1]"
+                          style="text-align: left"
+                        >
+                          <span
+                            v-if="item.detail.wordsList[indexCon + 1].pinyin"
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.detail.wordsList[indexCon + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : ''
+                            ]"
+                            >{{
+                              item.detail.wordsList[indexCon + 1].pinyin
+                            }}</span
+                          >
+                          <span
+                            class="content-con"
+                            :class="
+                              [
+                                /^[0-9]*$/.test(
+                                  item.detail.wordsList[indexCon + 1].chs
+                                )
+                              ]
+                                ? /^[\u4e00-\u9fa5]/.test(
+                                    item.detail.wordsList[indexCon + 1].chs
+                                  )
+                                  ? 'hanzi'
+                                  : 'en'
+                                : ''
+                            "
+                            >{{ item.detail.wordsList[indexCon + 1].chs }}</span
+                          >
+                        </div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <span
+                        v-if="
+                          item.detail &&
+                            !(
+                              item.detail.wordsList &&
+                              item.detail.wordsList[indexCon - 1] &&
+                              item.detail.wordsList[indexCon - 1].chs &&
+                              chsFhList.indexOf(
+                                item.detail.wordsList[indexCon - 1].chs
+                              ) == -1 &&
+                              chsFhList.indexOf(itemCon.chs) > -1
+                            ) &&
+                            itemCon.pinyin
+                        "
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                        ]"
+                        >{{ itemCon.pinyin }}</span
+                      >
+                      <span
+                        v-if="
+                          item.detail &&
+                            !(
+                              item.detail.wordsList &&
+                              item.detail.wordsList[indexCon - 1] &&
+                              item.detail.wordsList[indexCon - 1].chs &&
+                              chsFhList.indexOf(
+                                item.detail.wordsList[indexCon - 1].chs
+                              ) == -1 &&
+                              chsFhList.indexOf(itemCon.chs) > -1
+                            )
+                        "
+                        class="content-con"
+                        :class="
+                          [/^[0-9]*$/.test(itemCon.chs)]
+                            ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
+                              ? 'hanzi'
+                              : 'en'
+                            : ''
+                        "
+                        >{{ itemCon.chs }}</span
+                      >
+                    </template>
+                  </div>
+                </div>
+              </template>
+              <p
+                class="NNPE-title-item-en"
+                v-html="item.en"
+                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="operater-classTopic" :style="{ minHeight: '40px' }">
+        <div
+          v-if="isShowTitle && isPhone"
+          class="NNPE-operate NNPE-operate-phone"
+        >
+          <a
+            class="btn-prev"
+            :class="[preClick ? '' : 'btn-prev-disabled']"
+            @click="handleNNPEprev"
+            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
+          />
+          <a
+            class="btn-next"
+            :class="[nextClick ? '' : 'btn-next-disabled']"
+            @click="handleNNPEnext"
+            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
+          />
+        </div>
+        <div
+          v-if="
+            cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
+          "
+          class="classTopic-box"
+          :style="{ position: 'initial' }"
+        >
+          <span
+            v-for="(item, index) in cur.classTopic"
+            :key="index"
+            :class="item.font"
+            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
+          >
+            {{ item.con }}
+          </span>
+        </div>
+      </div>
       <el-checkbox
         v-if="previewType && previewType == 'previewCheck'"
         v-model="checkAllNPC"
@@ -3391,7 +3597,7 @@ export default {
     .operater-classTopic {
       width: 100%;
       position: relative;
-      padding-top: 120px;
+      padding-top: 0px;
     }
     .NNPE-operate-phone {
       width: 100%;

src/components/Adult/phonePreview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -67,7 +67,7 @@
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
-                  :preview-src-list="[item.img_list[0].id]"
+                  @click="imgShow(item.img_list[0].id)"
                 ></el-image>
               </div>
               <div class="dialogue-answer-model">
@@ -137,7 +137,7 @@
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
-                  :preview-src-list="[item.img_list[0].id]"
+                  @click="imgShow(item.img_list[0].id)"
                 ></el-image>
               </div>
               <div class="dialogue-answer-model">
@@ -187,6 +187,11 @@
         </div>
       </div>
     </template>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -198,6 +203,7 @@ import Soundrecord from "../Soundrecord.vue";
 import AnswerModel from "./AnswerModel.vue";
 import OptionModel from "./OptionModel.vue";
 import WordcardModel from "./WordcardModel.vue";
+import ImgPreview from "../components/ImgPreview.vue";
 
 export default {
   name: "DialogueAnswerViewChs",
@@ -208,7 +214,8 @@ export default {
     Soundrecord,
     AnswerModel,
     OptionModel,
-    WordcardModel
+    WordcardModel,
+    ImgPreview
   },
   props: [
     "curQue",
@@ -228,7 +235,9 @@ export default {
         judge: []
       },
       judgeAnswersList: [],
-      userErrorNumberTotal: 0
+      userErrorNumberTotal: 0,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {
@@ -347,6 +356,13 @@ export default {
         userErrorNumberTotal = errorArr.length;
       }
       return userErrorNumberTotal;
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/DialogueArticleViewChs/RemarkChs.vue

@@ -39,24 +39,41 @@
         }"
         :src="remarkDetail.img_list[0].id"
         fit="contain"
-        :preview-src-list="[remarkDetail.img_list[0].id]"
+        @click="imgShow(remarkDetail.img_list[0].id)"
       ></el-image>
     </div>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
 <script>
+import ImgPreview from "../components/ImgPreview.vue";
 export default {
   name: "RemarkChs",
-  components: {},
+  components: { ImgPreview },
   props: ["remarkDetail", "marginTop", "baseSizePhone"],
   data() {
-    return {};
+    return {
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
+    };
   },
   computed: {},
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/phonePreview/InputHasRecord.vue

@@ -965,4 +965,9 @@ export default {
     }
   }
 }
+.InputHasRecordNPC-phone {
+  .el-textarea__inner {
+    background: transparent;
+  }
+}
 </style>

src/components/Adult/phonePreview/Notes.vue

@@ -90,7 +90,7 @@
                 :src="imgItem.id"
                 fit="scale-down"
                 class="img_url"
-                :preview-src-list="[imgItem.id]"
+                @click="imgShow(imgItem.id)"
               >
                 <div slot="placeholder" class="image-slot">
                   <img src="../../../assets/common/icon-imgloading.png" />
@@ -101,6 +101,11 @@
         </div>
       </div>
     </el-collapse-transition>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -109,11 +114,13 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import WordPhraseDetail from "./components/WordPhraseDetail.vue";
 import OneSentenceTemp from "./components/OneSentenceTemp.vue";
+import ImgPreview from "./components/ImgPreview.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     WordPhraseDetail,
-    OneSentenceTemp
+    OneSentenceTemp,
+    ImgPreview
   },
   props: ["curQue", "TaskModel", "baseSizePhone"],
   data() {
@@ -123,7 +130,9 @@ export default {
         ? this.curQue.isWordShow
         : true,
       chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
-      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"]
+      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"],
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   //计算属性 类似于data概念
@@ -142,6 +151,13 @@ export default {
       } else {
         sItem.isShow = true;
       }
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/Picture.vue

@@ -35,8 +35,7 @@
           :src="itemss.id"
           fit="scale-down"
           class="img_url"
-          @click="playmicrophone(items.mp3_list[0].id, 'mp3')"
-          :preview-src-list="[itemss.id]"
+          @click="imgShow(itemss.id)"
         >
           <div slot="placeholder" class="image-slot">
             <img src="../../../assets/common/icon-imgloading.png" />
@@ -397,6 +396,7 @@
           ></span>
         </template>
         <Soundrecord
+          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
           @handleWav="handleWav"
           :answerRecordList="
             judgeAnswer != 'standardAnswer'
@@ -406,23 +406,25 @@
           :TaskModel="TaskModel"
           :type="'mini'"
           class="luyin-box"
-          :class="[items.RecordControl]"
-          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
+          :class="items.RecordControl"
           :baseSizePhone="baseSizePhone"
         />
-        <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
-                    <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
       </div>
     </li>
-    <!-- </ul> -->
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
 <script>
 import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 import Recorder from "js-audio-recorder"; //录音插件
+import ImgPreview from "./components/ImgPreview.vue";
 export default {
-  components: { Soundrecord },
+  components: { Soundrecord, ImgPreview },
   props: ["curQue", "ChildType", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
@@ -446,7 +448,9 @@ export default {
       audio: new window.Audio(),
       oldUrl: null, // 存储上个播放音频地址
       mp3Play: "", // 音频播放
-      userErrorNumberTotal: 0
+      userErrorNumberTotal: 0,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {
@@ -851,6 +855,14 @@ export default {
     handleWav(list, tmIndex) {
       tmIndex = tmIndex ? tmIndex : 0;
       this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+    },
+
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/PreviewDialogueNPC.vue

@@ -1973,7 +1973,7 @@ export default {
         display: flex;
         b {
           min-width: 39px;
-          height: 24px;
+          height: fit-content;
           background: #e35454;
           border-radius: 8px;
           color: #ffffff;

src/components/Adult/phonePreview/UploadControlView.vue

@@ -18,7 +18,7 @@
               style="width: 100%; height: 100%"
               :src="curQue.Bookanswer.file_url"
               :fit="'contain'"
-              :preview-src-list="[curQue.Bookanswer.file_url]"
+              @click="imgShow(curQue.Bookanswer.file_url)"
             >
             </el-image>
             <!-- <img :src="curQue.Bookanswer.file_url" alt="" /> -->
@@ -56,7 +56,7 @@
               style="width: 100%; height: 100%"
               :src="curQue.data.id"
               :fit="'contain'"
-              :preview-src-list="[curQue.data.id]"
+              @click="imgShow(curQue.data.id)"
             >
             </el-image>
             <!-- <img :src="curQue.data.id" alt="" /> -->
@@ -143,6 +143,11 @@
         border="none"
       ></iframe>
     </el-dialog>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -151,11 +156,13 @@ import UploadView from "../common/UploadView.vue";
 import pdf from "vue-pdf";
 import { getToken, getConfig } from "../../../utils/auth";
 const Base64 = require("js-base64").Base64;
+import ImgPreview from "./components/ImgPreview.vue";
 
 export default {
   components: {
     UploadView,
-    pdf
+    pdf,
+    ImgPreview
   },
   props: ["curQue", "fn_data", "type", "TaskModel"],
   data() {
@@ -179,7 +186,9 @@ export default {
       },
       loading: false,
       file_preview_url: "",
-      showIframe: false
+      showIframe: false,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {},
@@ -282,6 +291,13 @@ export default {
       if (!this.curQue.Bookanswer) {
         this.$set(this.curQue, "Bookanswer", single);
       }
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/VideoControl.vue

@@ -186,6 +186,6 @@ export default {
 .xgplayer-skin-default .xgplayer-start,
 .xgplayer-skin-default .xgplayer-controls,
 .xgplayer-skin-default .xgplayer-poster {
-  z-index: 1;
+  z-index: 1 !important;
 }
 </style>

src/components/Adult/phonePreview/components/Practice.vue

@@ -802,7 +802,7 @@ export default {
   .freewrite .strockred {
     height: 256px;
     .character-target-div {
-      height: 256px;
+      height: 256px !important;
     }
   }
 }