|
|
@@ -0,0 +1,1467 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ v-if="cur"
|
|
|
+ class="NPC-Big-Book-preview adult-book-preview-sty"
|
|
|
+ :class="['NPC-Big-Book-preview-' + themeColor]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
|
|
|
+ "
|
|
|
+ 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"
|
|
|
+ class="title-box-preview"
|
|
|
+ :class="[
|
|
|
+ !previewType ||
|
|
|
+ previewType == 'previewCheck' ||
|
|
|
+ (previewType == 'previewCheckShow' && item.previewShow) ||
|
|
|
+ JSON.parse(previewGroupId).length == 0
|
|
|
+ ? 'NNPE-Book-content-item'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div v-for="(itemJ, indexJ) in judgeAnswersList" :key="indexJ">
|
|
|
+ <el-checkbox
|
|
|
+ class="NNPE-Book-content-item-checkbox"
|
|
|
+ :label="item.group_id"
|
|
|
+ v-if="previewType && previewType == 'previewCheck' && item.group_id"
|
|
|
+ v-model="groupCheckList[index]"
|
|
|
+ @change="forupdata(index)"
|
|
|
+ ><br
|
|
|
+ /></el-checkbox>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ !previewType ||
|
|
|
+ previewType == 'previewCheck' ||
|
|
|
+ (previewType == 'previewCheckShow' && item.previewShow) ||
|
|
|
+ JSON.parse(previewGroupId).length == 0
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="item.number || item.z_title || item.f_title"
|
|
|
+ class="title-big"
|
|
|
+ >
|
|
|
+ <b v-if="item.number">{{ item.number }}</b>
|
|
|
+ <div
|
|
|
+ class="title-box-right"
|
|
|
+ :class="[item.is_textIndex ? 'title-box-right-index' : '']"
|
|
|
+ >
|
|
|
+ <h2 v-if="item.z_title" v-html="item.z_title" />
|
|
|
+ <h3
|
|
|
+ v-if="item.f_title"
|
|
|
+ :style="{ marginTop: item.z_title ? '8px' : '0' }"
|
|
|
+ v-html="item.f_title"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-little"
|
|
|
+ :class="[
|
|
|
+ item.little_title_number || item.little_title
|
|
|
+ ? 'marginTop'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <b v-html="item.little_title_number" />
|
|
|
+ <p v-html="item.little_title" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'NNPE-tableList',
|
|
|
+ item.is_bg ? 'NNPE-tableList-hasBg' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(items, indexs) in item.table_list"
|
|
|
+ :key="indexs"
|
|
|
+ class="NNPE-tableList-tr"
|
|
|
+ :class="[
|
|
|
+ indexs === item.table_list.length - 1
|
|
|
+ ? 'NNPE-tableList-tr-last'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(itemss, indexss) in items"
|
|
|
+ :key="indexss"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-tableList-item',
|
|
|
+ items.length == 1
|
|
|
+ ? 'NNPE-tableList-item-noMargin'
|
|
|
+ : 'NNPE-tableList-item' + items.length,
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template v-if="itemss.data">
|
|
|
+ <template v-if="itemss.type == 'ligature_chs'">
|
|
|
+ <Ligature
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :number="
|
|
|
+ index +
|
|
|
+ '_' +
|
|
|
+ indexs +
|
|
|
+ '_' +
|
|
|
+ indexss +
|
|
|
+ '_' +
|
|
|
+ currentTreeID
|
|
|
+ "
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.data.type == 'image'">
|
|
|
+ <Picture
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :child-type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'phrase_chs'">
|
|
|
+ <WordPhrase
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :indexStr="
|
|
|
+ index +
|
|
|
+ '_' +
|
|
|
+ indexs +
|
|
|
+ '_' +
|
|
|
+ indexss +
|
|
|
+ '_' +
|
|
|
+ currentTreeID
|
|
|
+ "
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'NewWord_chs'">
|
|
|
+ <WordPhrase
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :current-tree-i-d="currentTreeID"
|
|
|
+ :indexs="indexs"
|
|
|
+ :indexss="indexss"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :indexStr="
|
|
|
+ index +
|
|
|
+ '_' +
|
|
|
+ indexs +
|
|
|
+ '_' +
|
|
|
+ indexss +
|
|
|
+ '_' +
|
|
|
+ currentTreeID
|
|
|
+ "
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'annotation_chs'">
|
|
|
+ <WordPhrase
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :indexStr="
|
|
|
+ index +
|
|
|
+ '_' +
|
|
|
+ indexs +
|
|
|
+ '_' +
|
|
|
+ indexss +
|
|
|
+ '_' +
|
|
|
+ currentTreeID
|
|
|
+ "
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'notes_chs'">
|
|
|
+ <Notes
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'article_chs'">
|
|
|
+ <ArticleTemChs
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :n-n-p-e-new-word-list="NNPENewWordList"
|
|
|
+ :n-n-p-e-new-phrase-list="NNPENewPhraseList"
|
|
|
+ :n-n-p-e-annotation-list="NNPEAnnotationList"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :current-tree-i-d="currentTreeID"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <!-- <template v-if="itemss.type == 'sentence_segword_chs'">
|
|
|
+ <SentenceSegWordViewChs
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ v-if="refresh"
|
|
|
+ />
|
|
|
+ </template> -->
|
|
|
+ <template v-if="itemss.type == 'dialogue_article_chs'">
|
|
|
+ <DialogueArticleViewChs
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :n-n-p-e-new-word-list="NNPENewWordList"
|
|
|
+ :n-n-p-e-new-phrase-list="NNPENewPhraseList"
|
|
|
+ :n-n-p-e-annotation-list="NNPEAnnotationList"
|
|
|
+ :color-box="colorBox"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :current-tree-i-d="currentTreeID"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'dialogue_answer_chs'">
|
|
|
+ <DialogueAnswerViewChs
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :color-box="colorBox"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'input_record_chs'">
|
|
|
+ <InputHasRecord
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
|
|
|
+ <TextInputRecord
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ itemss.type == 'inputItem_chs' ||
|
|
|
+ itemss.type == 'sentence_input_chs' ||
|
|
|
+ itemss.type == 'sentence_judge_chs' ||
|
|
|
+ itemss.type == 'sentence_record_chs' ||
|
|
|
+ itemss.type == 'sentence_input_record_chs'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SentenceInput
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'NumberCombination_chs'">
|
|
|
+ <NumberSelectHasRecord
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type === 'voice_matrix'">
|
|
|
+ <voice-matrix
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type === 'select_drag'">
|
|
|
+ <select-drag
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type === 'fill_drag'">
|
|
|
+ <fill-drag
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type === 'config_table'">
|
|
|
+ <configurable-table
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type === 'header_separate'">
|
|
|
+ <header-separate
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'toneSelect_chs'">
|
|
|
+ <SelectTone
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'sudoku_chs'">
|
|
|
+ <Soduko
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'single_chs'">
|
|
|
+ <Single
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'text_problem_chs'">
|
|
|
+ <TextProblem
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'newWord_preview_chs'">
|
|
|
+ <NewWordShow
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :index-str="index + '_' + indexs + '_' + indexss"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="itemss.type == 'listen_record_single_syllable_chs'"
|
|
|
+ >
|
|
|
+ <SelectYinjie
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'sentence_listen_read_chs'">
|
|
|
+ <SentenceListenRead
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'sort_chs'">
|
|
|
+ <SentenceSortQP
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="itemss.type == 'checkbox_self_assessment_chs'"
|
|
|
+ >
|
|
|
+ <Checkbox
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ itemss.type == 'record_control_mini' ||
|
|
|
+ itemss.type == 'record_control_normal' ||
|
|
|
+ itemss.type == 'record_control_pro' ||
|
|
|
+ itemss.type == 'record_control_promax'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <RecordModule
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ itemss.type == 'upload_control_chs' ||
|
|
|
+ itemss.type == 'upload_control_preview_chs'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <UploadControlView
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'CourseStart_chs'">
|
|
|
+ <CourseStart
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :handle-n-n-p-enext="handleNNPEnext"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'tinydemo_chs'">
|
|
|
+ <Tinydemo
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'video_chs'">
|
|
|
+ <VideoControl
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :index-str="
|
|
|
+ index +
|
|
|
+ '_' +
|
|
|
+ indexs +
|
|
|
+ '_' +
|
|
|
+ indexss +
|
|
|
+ '_' +
|
|
|
+ currentTreeID
|
|
|
+ "
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'table_chs'">
|
|
|
+ <TableView
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'play_record_chs'">
|
|
|
+ <PlayRecordView
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'upload_pdf_chs'">
|
|
|
+ <PdfView
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="itemss.type == 'sentence_segtemp_chs'">
|
|
|
+ <SentenceModule
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :type="itemss.type"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="itemss.type == 'options_list_chs'">
|
|
|
+ <OptionsList
|
|
|
+ v-if="refresh"
|
|
|
+ :cur-que="itemss.data"
|
|
|
+ :theme-color="themeColor"
|
|
|
+ :index-str="index + '_' + indexs + '_' + indexss"
|
|
|
+ :task-model="TaskModel"
|
|
|
+ :judgeAnswer="itemJ"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="isShowSave || isShowTitle" class="NNPE-title NNPE-title-gray">
|
|
|
+ <!-- 页眉 v-if="isShowSave"-->
|
|
|
+ <a class="submitAnswer" @click="submitUserAnswerNPC">提交</a>
|
|
|
+ <div v-if="isShowTitle" class="NNPE-operate">
|
|
|
+ <a
|
|
|
+ class="btn-prev"
|
|
|
+ :class="[preClick ? '' : 'btn-prev-disabled']"
|
|
|
+ @click="handleNNPEprev"
|
|
|
+ />
|
|
|
+ <a
|
|
|
+ class="btn-next"
|
|
|
+ :class="[nextClick ? '' : 'btn-next-disabled']"
|
|
|
+ @click="handleNNPEnext"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Picture from "./Picture.vue"; // 图片模板
|
|
|
+import Record from "./Record.vue"; // 音频播放
|
|
|
+import Soundrecord from "./Soundrecord.vue"; // 录音模板
|
|
|
+import ArticleTemChs from "./ArticleViewChs/index.vue"; // 文章模板
|
|
|
+import DialogueArticleViewChs from "./DialogueArticleViewChs/index.vue"; // 文章模板
|
|
|
+import SentenceSegWordViewChs from "./SentenceSegWordViewChs.vue"; // 句子分词
|
|
|
+import WordPhrase from "./WordPhrase.vue"; // 生词短语
|
|
|
+import Notes from "./Notes.vue"; // 注释
|
|
|
+import Ligature from "./Ligature.vue";
|
|
|
+import InputHasRecord from "./InputHasRecord.vue"; // 输入加录音
|
|
|
+import TextInputRecord from "./TextInputRecord.vue"; // 文本+输入+录音
|
|
|
+import SentenceInput from "./SentenceInput.vue"; // 输入选项
|
|
|
+import NumberSelectHasRecord from "./NumberSelectHasRecord.vue"; // 数字组合
|
|
|
+import SelectTone from "./SelectTone.vue"; // 选择声调
|
|
|
+import Soduko from "./Soduko.vue"; // 数独
|
|
|
+import Single from "./Single.vue"; // 单选
|
|
|
+import TextProblem from "./TextProblem.vue"; // 课文上方的问题
|
|
|
+import NewWordShow from "./NewWordShow.vue"; // 生字展示
|
|
|
+import SelectYinjie from "./SelectYinjie.vue"; // 选择音节
|
|
|
+import SentenceListenRead from "./SentenceListenRead.vue"; // 听并朗读
|
|
|
+import SentenceSortQP from "./SentenceSortQP.vue"; // 句子拖拽排序
|
|
|
+import Checkbox from "./CheckBoxModule.vue"; // 问卷调查-多选题
|
|
|
+import VoiceMatrix from "./VoiceMatrix.vue"; // 语音矩阵
|
|
|
+import SelectDrag from "./SelectDrag.vue"; // 选择 -> 拖拽
|
|
|
+import FillDrag from "./FillDrag.vue"; // 填空 -> 拖拽
|
|
|
+import ConfigurableTable from "./ConfigurableTable.vue"; // 可配置表格
|
|
|
+import HeaderSeparate from "./HeaderSparate/index.vue"; // 表头分离表格
|
|
|
+import RecordModule from "./RecordModule.vue"; // 录音组件
|
|
|
+import UploadControlView from "./UploadControlView.vue"; // 预览控件
|
|
|
+import DialogueAnswerViewChs from "./DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
|
|
|
+import CourseStart from "./CourseStart.vue"; // 封面
|
|
|
+import Tinydemo from "./TinyModule.vue"; // 富文本
|
|
|
+import VideoControl from "./VideoControl.vue"; // 视频控件
|
|
|
+import TableView from "./TableView.vue"; // 视频控件
|
|
|
+import PdfView from "./PdfView.vue"; // 视频控件
|
|
|
+import SentenceModule from "./SentenceModule.vue"; // 图片模板
|
|
|
+import PlayRecordView from "./PlayRecordView.vue";
|
|
|
+import OptionsList from "./OptionsList.vue"; // 选项模板
|
|
|
+
|
|
|
+import { getToken } from "../../../utils/auth";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "PreviewDialogueNPC",
|
|
|
+ components: {
|
|
|
+ Picture,
|
|
|
+ Record,
|
|
|
+ Soundrecord,
|
|
|
+ ArticleTemChs,
|
|
|
+ DialogueArticleViewChs,
|
|
|
+ SentenceSegWordViewChs,
|
|
|
+ WordPhrase,
|
|
|
+ Notes,
|
|
|
+ Ligature,
|
|
|
+ InputHasRecord,
|
|
|
+ TextInputRecord,
|
|
|
+ SentenceInput,
|
|
|
+ NumberSelectHasRecord,
|
|
|
+ SelectTone,
|
|
|
+ Soduko,
|
|
|
+ Single,
|
|
|
+ TextProblem,
|
|
|
+ NewWordShow,
|
|
|
+ SelectYinjie,
|
|
|
+ SentenceListenRead,
|
|
|
+ SentenceSortQP,
|
|
|
+ Checkbox,
|
|
|
+ VoiceMatrix,
|
|
|
+ FillDrag,
|
|
|
+ SelectDrag,
|
|
|
+ ConfigurableTable,
|
|
|
+ HeaderSeparate,
|
|
|
+ RecordModule,
|
|
|
+ UploadControlView,
|
|
|
+ DialogueAnswerViewChs,
|
|
|
+ CourseStart,
|
|
|
+ Tinydemo,
|
|
|
+ VideoControl,
|
|
|
+ TableView,
|
|
|
+ PdfView,
|
|
|
+ PlayRecordView,
|
|
|
+ SentenceModule,
|
|
|
+ OptionsList,
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ "context",
|
|
|
+ "fatherName",
|
|
|
+ "currentTreeID",
|
|
|
+ "FatherTreeData",
|
|
|
+ "changeId",
|
|
|
+ "themeColor",
|
|
|
+ "isShowTitle",
|
|
|
+ "bookAnswerContent",
|
|
|
+ "TaskModel",
|
|
|
+ "isShowSave",
|
|
|
+ "previewType",
|
|
|
+ "previewGroupId",
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contextData: null,
|
|
|
+ answerData: [], // 获取的答案数据
|
|
|
+ queIndex: -1, // 题目的索引
|
|
|
+ cur: null, // 当前的题目
|
|
|
+ watchIndex: -1, // 监听的值
|
|
|
+ queList: [],
|
|
|
+ queTotal: 0, // 题目总数
|
|
|
+ NNPENewWordList: [], // 存放文章的生词
|
|
|
+ NNPENewPhraseList: [], // 存放文章的短语
|
|
|
+ NNPEAnnotationList: [], // 存放文章注释
|
|
|
+ height: "", // 总体的高度
|
|
|
+ colorBox: [
|
|
|
+ {
|
|
|
+ touxiang: "#72B51D",
|
|
|
+ bg: "#E9F0DF",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ touxiang: "#DE4444",
|
|
|
+ bg: "rgba(222, 68, 68, 0.1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ touxiang: "#A7A7A7",
|
|
|
+ bg: "#ffffff",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ touxiang: "#4D91F6",
|
|
|
+ bg: "#F1F7FF",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ touxiang: "#FF8A00",
|
|
|
+ bg: "rgba(255, 138, 0, 0.1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
+ noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
|
|
|
+ idArr: [], // 当前的pid
|
|
|
+ oldCurrentTreeID: "",
|
|
|
+ refresh: true,
|
|
|
+ preClick: false, // 上一页是否可点
|
|
|
+ nextClick: false, // 下一页是否可点
|
|
|
+ answerTime: 0,
|
|
|
+ answerTimeInterval: null, // 计时器
|
|
|
+ groupIndexList: [], // 勾选groupid数组
|
|
|
+ groupCheckList: [], // checkbox 是否选中
|
|
|
+ judgeAnswersList: ["userAnswer", "standardAnswer"],
|
|
|
+ visiblePreviewDialog: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ context: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ const _this = this;
|
|
|
+ _this.refresh = false;
|
|
|
+ if (val) {
|
|
|
+ _this.initContextData();
|
|
|
+ if (_this.FatherTreeData) {
|
|
|
+ _this.idArr = [];
|
|
|
+ _this.FatherTreeData.forEach((item, itemIndex) => {
|
|
|
+ this.seekCurrentTree(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ _this.handleTitleData();
|
|
|
+ if (_this.queIndex == _this.queTotal - 1) {
|
|
|
+ this.idArr.forEach((item, i) => {
|
|
|
+ if (item == _this.currentTreeID) {
|
|
|
+ if (i == 0) {
|
|
|
+ _this.preClick = false;
|
|
|
+ _this.nextClick = true;
|
|
|
+ } else if (i == this.idArr.length - 1) {
|
|
|
+ _this.nextClick = false;
|
|
|
+ _this.preClick = true;
|
|
|
+ } else {
|
|
|
+ _this.nextClick = true;
|
|
|
+ _this.preClick = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ // 重新渲染组件
|
|
|
+ _this.refresh = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ const _this = this;
|
|
|
+ if (_this.context) {
|
|
|
+ _this.initContextData();
|
|
|
+ _this.handleTitleData();
|
|
|
+ }
|
|
|
+ if (_this.FatherTreeData) {
|
|
|
+ _this.idArr = [];
|
|
|
+ _this.FatherTreeData.forEach((item, itemIndex) => {
|
|
|
+ this.seekCurrentTree(item);
|
|
|
+ });
|
|
|
+ if (_this.queIndex == _this.queTotal - 1) {
|
|
|
+ this.idArr.forEach((item, i) => {
|
|
|
+ if (item == _this.currentTreeID) {
|
|
|
+ if (i == 0) {
|
|
|
+ _this.preClick = false;
|
|
|
+ _this.nextClick = true;
|
|
|
+ } else if (i == this.idArr.length - 1) {
|
|
|
+ _this.nextClick = false;
|
|
|
+ _this.preClick = true;
|
|
|
+ } else {
|
|
|
+ _this.nextClick = true;
|
|
|
+ _this.preClick = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
+ updated() {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed() {}, // 生命周期 - 销毁完成
|
|
|
+ activated() {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 处理数据
|
|
|
+ handleTitleData() {
|
|
|
+ let _this = this;
|
|
|
+ let curQue = JSON.parse(JSON.stringify(this.cur));
|
|
|
+ curQue.detailList.forEach((dItem, dIndex) => {
|
|
|
+ let paraArr = [];
|
|
|
+ if (dItem.detail) {
|
|
|
+ dItem.detail.wordsList.forEach((sItem, sIndex) => {
|
|
|
+ let obj = {
|
|
|
+ pinyin: sItem.pinyin,
|
|
|
+ chs: sItem.chs,
|
|
|
+ isShow: true,
|
|
|
+ };
|
|
|
+ paraArr.push(obj);
|
|
|
+ });
|
|
|
+ this.$set(_this.cur.detailList[dIndex].detail, "resArr", paraArr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initContextData() {
|
|
|
+ const _this = this;
|
|
|
+ // _this.$root.isRecording = false;
|
|
|
+
|
|
|
+ _this.contextData = JSON.parse(JSON.stringify(_this.context));
|
|
|
+ _this.queIndex = 0;
|
|
|
+ _this.NNPENewWordList = [];
|
|
|
+ _this.NNPENewPhraseList = [];
|
|
|
+ _this.NNPEAnnotationList = [];
|
|
|
+ _this.watchIndex = _this.queIndex + new Date().getTime();
|
|
|
+ this.groupCheckList = [];
|
|
|
+ let selectGropuIdList = this.previewGroupId
|
|
|
+ ? JSON.parse(this.previewGroupId)
|
|
|
+ : [];
|
|
|
+ this.groupCheckList = [];
|
|
|
+ if (_this.contextData) {
|
|
|
+ // const list = _this.contextData;
|
|
|
+ // if (list && list.length > 0) {
|
|
|
+ // _this.queList = list;
|
|
|
+ // _this.cur = list[_this.queIndex];
|
|
|
+ _this.queTotal = 1;
|
|
|
+ // _this.cur.cur_fn_data.forEach((item) => {
|
|
|
+ // item.table_list.forEach((items) => {
|
|
|
+ // items.forEach((itemss) => {
|
|
|
+ // if (itemss.data && itemss.data.type == "NewWord_chs") {
|
|
|
+ // _this.NNPENewWordList = _this.NNPENewWordList.concat(
|
|
|
+ // itemss.data.option
|
|
|
+ // );
|
|
|
+ // } else if (itemss.data && itemss.data.type == "notes_chs") {
|
|
|
+ // _this.NNPEAnnotationList = _this.NNPEAnnotationList.concat(
|
|
|
+ // itemss.data.option
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ _this.cur = _this.contextData;
|
|
|
+ _this.cur.cur_fn_data.forEach((item, index) => {
|
|
|
+ this.groupCheckList.push(false);
|
|
|
+ selectGropuIdList.forEach((itemId) => {
|
|
|
+ itemId.forEach((itemIds) => {
|
|
|
+ if (item.group_id && itemIds.indexOf(item.group_id[0]) > -1) {
|
|
|
+ item.previewShow = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ item.table_list.forEach((items, indexs) => {
|
|
|
+ items.forEach((itemss, indexss) => {
|
|
|
+ if (itemss.data && itemss.data.type == "NewWord_chs") {
|
|
|
+ _this.NNPENewWordList = _this.NNPENewWordList.concat(
|
|
|
+ itemss.data.option
|
|
|
+ );
|
|
|
+ } else if (itemss.data && itemss.data.type == "notes_chs") {
|
|
|
+ _this.NNPEAnnotationList = _this.NNPEAnnotationList.concat(
|
|
|
+ itemss.data.option
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // let Bookanswer = localStorage.getItem("Bookanswer");
|
|
|
+ let Bookanswer = this.bookAnswerContent;
|
|
|
+ // if (_this.TaskModel == "lookAnswer" && _this.bookAnswerContent) {
|
|
|
+ if (Bookanswer) {
|
|
|
+ let answerData = JSON.parse(Bookanswer);
|
|
|
+ if (answerData && itemss.data) {
|
|
|
+ itemss.data.Bookanswer =
|
|
|
+ answerData.length > 0 &&
|
|
|
+ answerData[index].table_list &&
|
|
|
+ answerData[index].table_list.length > 0 &&
|
|
|
+ answerData[index].table_list[indexs].length > 0 &&
|
|
|
+ answerData[index].table_list[indexs][indexss].data
|
|
|
+ ? answerData[index].table_list[indexs][indexss].data
|
|
|
+ .Bookanswer
|
|
|
+ : [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ // 上一页
|
|
|
+ handleNNPEprev() {
|
|
|
+ let _this = this;
|
|
|
+ _this.puaseAudio();
|
|
|
+ if (_this.queIndex == 0) {
|
|
|
+ this.idArr.forEach((item, i) => {
|
|
|
+ if (item == _this.currentTreeID) {
|
|
|
+ if (i == 0) {
|
|
|
+ _this.preClick = false;
|
|
|
+ _this.nextClick = true;
|
|
|
+ } else {
|
|
|
+ _this.changeId(this.idArr[i - 1]);
|
|
|
+ _this.preClick = true;
|
|
|
+ _this.nextClick = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ _this.queIndex -= 1;
|
|
|
+ _this.watchIndex = _this.queIndex + new Date().getTime();
|
|
|
+ _this.cur = _this.queList[_this.queIndex];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 递归寻找相同的目录并保存目录的pid
|
|
|
+ seekCurrentTree(item) {
|
|
|
+ if (item.is_courseware == "true") {
|
|
|
+ this.idArr.push(item.id);
|
|
|
+ }
|
|
|
+ if (item.children) {
|
|
|
+ item.children.forEach((it, index) => {
|
|
|
+ if (it.is_courseware == "true") {
|
|
|
+ this.idArr.push(it.id);
|
|
|
+ }
|
|
|
+ if (it.children) {
|
|
|
+ this.seekCurrentTree(it);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ puaseAudio() {
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach((item) => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ let video = document.getElementsByTagName("video");
|
|
|
+ video.forEach((item) => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 下一页
|
|
|
+ handleNNPEnext() {
|
|
|
+ const _this = this;
|
|
|
+ _this.puaseAudio();
|
|
|
+ if (_this.queIndex == _this.queTotal - 1) {
|
|
|
+ this.idArr.forEach((item, i) => {
|
|
|
+ if (item == _this.currentTreeID) {
|
|
|
+ if (i == this.idArr.length - 1) {
|
|
|
+ _this.nextClick = false;
|
|
|
+ _this.preClick = true;
|
|
|
+ } else {
|
|
|
+ _this.changeId(this.idArr[i + 1]);
|
|
|
+ _this.nextClick = true;
|
|
|
+ _this.preClick = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ _this.queIndex += 1;
|
|
|
+ _this.watchIndex = _this.queIndex + new Date().getTime();
|
|
|
+ _this.cur = _this.queList[_this.queIndex];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitUserAnswerNPC() {
|
|
|
+ this.handleAnswerTimeEnd();
|
|
|
+ let contextDataStr = JSON.stringify(this.contextData);
|
|
|
+ if (!contextDataStr) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let userErrorNumberTotal = 0;
|
|
|
+ let userRightNumberTotal = 0;
|
|
|
+ let errReg = /\[JUDGE##F##JUDGE\]/g,
|
|
|
+ rightReg = /\[JUDGE##T##JUDGE\]/g;
|
|
|
+ if (errReg.test(contextDataStr)) {
|
|
|
+ let errorArr = contextDataStr.match(/\[JUDGE##F##JUDGE\]/g);
|
|
|
+ userErrorNumberTotal = errorArr.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (rightReg.test(contextDataStr)) {
|
|
|
+ let rightArr = contextDataStr.match(/\[JUDGE##T##JUDGE\]/g);
|
|
|
+ userRightNumberTotal = rightArr.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ let contextData = JSON.parse(contextDataStr);
|
|
|
+ let result = [];
|
|
|
+ contextData.cur_fn_data.forEach((item, index) => {
|
|
|
+ result[index] = {
|
|
|
+ table_list: [],
|
|
|
+ };
|
|
|
+ item.table_list.forEach((items, indexs) => {
|
|
|
+ result[index].table_list[indexs] = [];
|
|
|
+ items.forEach((itemss, indexss) => {
|
|
|
+ if (itemss.data) {
|
|
|
+ let Bookanswer = itemss.data.Bookanswer;
|
|
|
+ let obj = {
|
|
|
+ data: {
|
|
|
+ Bookanswer,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ result[index].table_list[indexs][indexss] = obj;
|
|
|
+ } else {
|
|
|
+ result[index].table_list[indexs][indexss] = {
|
|
|
+ data: null,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.$emit(
|
|
|
+ "finishTaskMaterial",
|
|
|
+ JSON.stringify(result),
|
|
|
+ this.answerTime,
|
|
|
+ userRightNumberTotal,
|
|
|
+ userErrorNumberTotal
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 开始计算答题用时
|
|
|
+ handleAnswerTimeStart() {
|
|
|
+ this.answerTime = 0;
|
|
|
+ window.clearInterval(this.answerTimeInterval);
|
|
|
+ this.answerTimeInterval = window.setInterval(() => {
|
|
|
+ this.answerTime++;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ // 结束计算答题用时
|
|
|
+ handleAnswerTimeEnd() {
|
|
|
+ window.clearInterval(this.answerTimeInterval);
|
|
|
+ },
|
|
|
+ // 提交选中groupid
|
|
|
+ submitPreviewGroupId() {
|
|
|
+ return JSON.stringify(this.groupIndexList);
|
|
|
+ },
|
|
|
+ forupdata(indexI) {
|
|
|
+ if (
|
|
|
+ this.groupIndexList
|
|
|
+ .toString()
|
|
|
+ .indexOf(this.cur.cur_fn_data[indexI].group_id.toString()) == -1
|
|
|
+ ) {
|
|
|
+ this.groupIndexList.push(this.cur.cur_fn_data[indexI].group_id);
|
|
|
+ } else {
|
|
|
+ this.groupIndexList.forEach((items, indexs) => {
|
|
|
+ if (
|
|
|
+ items.toString() == this.cur.cur_fn_data[indexI].group_id.toString()
|
|
|
+ ) {
|
|
|
+ this.groupIndexList.splice(indexs, 1);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.groupCheckList.forEach((item, index) => {
|
|
|
+ this.groupCheckList[index] = false;
|
|
|
+ });
|
|
|
+ this.cur.cur_fn_data.forEach((item, index) => {
|
|
|
+ if (
|
|
|
+ this.groupIndexList.toString().indexOf(item.group_id.toString()) > -1
|
|
|
+ ) {
|
|
|
+ this.groupCheckList[index] = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ }, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.NPC-Big-Book-preview {
|
|
|
+ width: 860px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 120px;
|
|
|
+ .NNPE-title {
|
|
|
+ background: #e35454;
|
|
|
+ border-radius: 0px 0px 16px 16px;
|
|
|
+ padding: 7px 24px;
|
|
|
+ position: relative;
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &.NNPE-title-gray {
|
|
|
+ background: #eeeeee;
|
|
|
+ border-radius: 0;
|
|
|
+ margin-top: 24px;
|
|
|
+ .NNPE-operate {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 20px;
|
|
|
+ a {
|
|
|
+ background: #fff
|
|
|
+ url("../../../assets/newImage/common/btn-pre-black.png") center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ &.btn-next {
|
|
|
+ background: #fff
|
|
|
+ url("../../../assets/newImage/common/btn-next-black.png") center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ &.btn-prev-disabled,
|
|
|
+ &.btn-next-disabled {
|
|
|
+ background-color: rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .NNPE-title-left {
|
|
|
+ display: flex;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ align-items: center;
|
|
|
+ .NNPE-title-item {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .content-con {
|
|
|
+ margin: 4px 0;
|
|
|
+ font-family: "robot";
|
|
|
+ &.hasCn,
|
|
|
+ &.hanzi {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-en {
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 18px;
|
|
|
+ font-family: "robot";
|
|
|
+ }
|
|
|
+ .NNPE-title-item-en {
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 12px;
|
|
|
+ font-family: "robot";
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .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: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ height: 12px;
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .synthesis-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .NNPE-operate {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 20px;
|
|
|
+ a {
|
|
|
+ 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: #e35454
|
|
|
+ url("../../../assets/newImage/common/btn-next.png") center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #f76565;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #d24444;
|
|
|
+ }
|
|
|
+ &.btn-prev-disabled,
|
|
|
+ &.btn-next-disabled {
|
|
|
+ background-color: rgba(0, 0, 0, 0.25);
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .NNPE-Book-content-item {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .NNPE-Book-content-item-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ left: -30px;
|
|
|
+ top: 36px;
|
|
|
+ }
|
|
|
+ > div.title-box-preview {
|
|
|
+ padding-top: 32px;
|
|
|
+ .title-big {
|
|
|
+ display: flex;
|
|
|
+ b {
|
|
|
+ min-width: 39px;
|
|
|
+ height: 24px;
|
|
|
+ background: #e35454;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "robot";
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ margin-right: 12px;
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ color: #e35454;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 0;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ .title-box-right-index {
|
|
|
+ padding-left: 51px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-little {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ &.marginTop {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ b,
|
|
|
+ p {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 0;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+ padding-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .NNPE-tableList {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ // padding: 12px 8px;
|
|
|
+ &.NNPE-tableList-hasBg {
|
|
|
+ background: #f7f7f7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .NNPE-tableList-tr {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // flex-flow: wrap;
|
|
|
+ .NNPE-tableList-item {
|
|
|
+ width: 100%;
|
|
|
+ // margin: 12px 16px;
|
|
|
+ // padding: 16px;
|
|
|
+ // background: #FFFFFF;
|
|
|
+ // border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ &.NNPE-tableList-item-noMargin {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ &.NNPE-tableList-item2 {
|
|
|
+ width: 378px;
|
|
|
+ }
|
|
|
+ &.NNPE-tableList-item3 {
|
|
|
+ width: 244px;
|
|
|
+ }
|
|
|
+ &.NNPE-tableList-item4 {
|
|
|
+ width: 195px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submitAnswer {
|
|
|
+ width: 160px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: robot;
|
|
|
+ background: #e35454;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 16px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f76565;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #d24444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .NNPE-title {
|
|
|
+ background: #24b99e;
|
|
|
+ .NNPE-operate {
|
|
|
+ a {
|
|
|
+ background: #24b99e url("../../../assets/newImage/common/btn-pre.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ &.btn-next {
|
|
|
+ background: #24b99e
|
|
|
+ url("../../../assets/newImage/common/btn-next.png") center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #3dd4b8;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #1fa189;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submitAnswer {
|
|
|
+ background: #24b99e;
|
|
|
+ &:hover {
|
|
|
+ background-color: #3dd4b8;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #1fa189;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .classTopic-box {
|
|
|
+ background: #24b99e;
|
|
|
+ }
|
|
|
+ .NNPE-Book-content-inner {
|
|
|
+ > div.title-box-preview {
|
|
|
+ .title-big {
|
|
|
+ b {
|
|
|
+ background: #24b99e;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ color: #24b99e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .NNPE-title {
|
|
|
+ background: #bd8865;
|
|
|
+ .NNPE-operate {
|
|
|
+ a {
|
|
|
+ background: #bd8865 url("../../../assets/newImage/common/btn-pre.png")
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ &.btn-next {
|
|
|
+ background: #bd8865
|
|
|
+ url("../../../assets/newImage/common/btn-next.png") center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #d6a687;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #a37557;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submitAnswer {
|
|
|
+ background: #bd8865;
|
|
|
+ &:hover {
|
|
|
+ background-color: #d6a687;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: #a37557;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .classTopic-box {
|
|
|
+ background: #bd8865;
|
|
|
+ }
|
|
|
+ .NNPE-Book-content-inner {
|
|
|
+ > div.title-box-preview {
|
|
|
+ .title-big {
|
|
|
+ b {
|
|
|
+ background: #bd8865;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ color: #bd8865;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.NNPE-Book-content-item-checkbox {
|
|
|
+ .el-checkbox__inner {
|
|
|
+ border: 2px solid #4a99ea;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .el-checkbox__inner::after {
|
|
|
+ border-width: 2px;
|
|
|
+ height: 11px;
|
|
|
+ left: 8px;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gcj
