表格的预览效果

src/components/Adult/Preview.vue

@@ -5,9 +5,7 @@
     :class="['NNPE-Big-Book-preview-' + themeColor]"
     v-if="cur"
   >
-    <div
-      class="NNPE-title"
-    >
+    <div class="NNPE-title">
       <!-- 页眉 -->
       <div class="NNPE-title-left">
         <div
@@ -37,19 +35,33 @@
                 <template
                   v-if="
                     item.wordsList[indexCon + 1] &&
-                      item.wordsList[indexCon + 1].chs &&
-                      chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
+                    item.wordsList[indexCon + 1].chs &&
+                    chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
                   "
                 >
                   <div class="synthesis-box">
                     <div>
-                      <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{ itemCon.pinyin }}</span>
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                        ]"
+                        >{{ itemCon.pinyin }}</span
+                      >
                       <span class="hanzi content-con">{{ itemCon.chs }}</span>
                     </div>
                     <div style="text-align: left">
-                      <span class="pinyin" :class="[noFont.indexOf(items.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']">{{
-                        item.wordsList[indexCon + 1].pinyin
-                      }}</span>
+                      <span
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(
+                            items.detail.wordsList[indexCon + 1].pinyin
+                          ) > -1
+                            ? 'noFont'
+                            : '',
+                        ]"
+                        >{{ item.wordsList[indexCon + 1].pinyin }}</span
+                      >
                       <span class="hanzi content-con">{{
                         item.wordsList[indexCon + 1].chs
                       }}</span>
@@ -57,7 +69,13 @@
                   </div>
                 </template>
                 <template v-else>
-                  <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{ itemCon.pinyin }}</span>
+                  <span
+                    class="pinyin"
+                    :class="[
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    >{{ itemCon.pinyin }}</span
+                  >
                   <span class="hanzi content-con">{{ itemCon.chs }}</span>
                 </template>
               </div>
@@ -98,7 +116,11 @@
             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':'']"
+            :class="[
+              indexs === item.table_list.length - 1
+                ? 'NNPE-tableList-tr-last'
+                : '',
+            ]"
           >
             <div
               v-for="(itemss, indexss) in items"
@@ -115,19 +137,32 @@
                   <Ligature :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.data.type == 'image'">
-                  <Picture :cur-que="itemss.data" :child-type="itemss.type" :theme-color="themeColor" />
+                  <Picture
+                    :cur-que="itemss.data"
+                    :child-type="itemss.type"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'record_chs'">
                   <Record :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'phrase_chs'">
-                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
+                  <WordPhrase
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'NewWord_chs'">
-                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
+                  <WordPhrase
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'annotation_chs'">
-                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
+                  <WordPhrase
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'notes_chs'">
                   <Notes :cur-que="itemss.data" :theme-color="themeColor" />
@@ -142,7 +177,10 @@
                   />
                 </template>
                 <template v-if="itemss.type == 'sentence_segword_chs'">
-                  <SentenceSegWordViewChs :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SentenceSegWordViewChs
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'dialogue_article_chs'">
                   <DialogueArticleViewChs
@@ -162,30 +200,48 @@
                   />
                 </template>
                 <template v-if="itemss.type == 'input_record_chs'">
-                  <InputHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
+                  <InputHasRecord
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
-                  <TextInputRecord :cur-que="itemss.data" :theme-color="themeColor" />
+                  <TextInputRecord
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </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'
+                    itemss.type == 'sentence_input_chs' ||
+                    itemss.type == 'sentence_judge_chs' ||
+                    itemss.type == 'sentence_record_chs' ||
+                    itemss.type == 'sentence_input_record_chs'
                   "
                 >
-                  <SentenceInput :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SentenceInput
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'NumberCombination_chs'">
-                  <NumberSelectHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
+                  <NumberSelectHasRecord
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type === 'voice_matrix'">
-                  <voice-matrix :cur-que="itemss.data" :theme-color="themeColor" />
+                  <voice-matrix
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'toneSelect_chs'">
-                  <SelectTone :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SelectTone
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'sudoku_chs'">
                   <Soduko :cur-que="itemss.data" :theme-color="themeColor" />
@@ -194,21 +250,36 @@
                   <Single :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'text_problem_chs'">
-                  <TextProblem :cur-que="itemss.data" :theme-color="themeColor" />
+                  <TextProblem
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'newWord_preview_chs'">
-                  <NewWordShow :cur-que="itemss.data" :theme-color="themeColor" />
+                  <NewWordShow
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template
                   v-if="itemss.type == 'listen_record_single_syllable_chs'"
                 >
-                  <SelectYinjie :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SelectYinjie
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'sentence_listen_read_chs'">
-                  <SentenceListenRead :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SentenceListenRead
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'sort_chs'">
-                  <SentenceSortQP :cur-que="itemss.data" :theme-color="themeColor" />
+                  <SentenceSortQP
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
                   <Checkbox :cur-que="itemss.data" :theme-color="themeColor" />
@@ -216,17 +287,20 @@
                 <template
                   v-if="
                     itemss.type == 'record_control_mini' ||
-                      itemss.type == 'record_control_normal' ||
-                      itemss.type == 'record_control_pro' ||
-                      itemss.type == 'record_control_promax'
+                    itemss.type == 'record_control_normal' ||
+                    itemss.type == 'record_control_pro' ||
+                    itemss.type == 'record_control_promax'
                   "
                 >
-                  <RecordModule :cur-que="itemss.data" :theme-color="themeColor" />
+                  <RecordModule
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                  />
                 </template>
                 <template
                   v-if="
                     itemss.type == 'upload_control_chs' ||
-                      itemss.type == 'upload_control_preview_chs'
+                    itemss.type == 'upload_control_preview_chs'
                   "
                 >
                   <UploadControlView
@@ -246,7 +320,18 @@
                   <Tinydemo :cur-que="itemss.data" :theme-color="themeColor" />
                 </template>
                 <template v-if="itemss.type == 'video_chs'">
-                  <VideoControl :cur-que="itemss.data" :type="itemss.type" :theme-color="themeColor" />
+                  <VideoControl
+                    :cur-que="itemss.data"
+                    :type="itemss.type"
+                    :theme-color="themeColor"
+                  />
+                </template>
+                <template v-if="itemss.type == 'table_chs'">
+                  <TableView
+                    :cur-que="itemss.data"
+                    :type="itemss.type"
+                    :theme-color="themeColor"
+                  />
                 </template>
               </template>
             </div>
@@ -287,6 +372,8 @@ import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnsw
 import CourseStart from "./preview/CourseStart.vue"; // 封面
 import Tinydemo from "./preview/TinyModule.vue"; // 富文本
 import VideoControl from "./preview/VideoControl.vue"; // 视频控件
+import TableView from "./preview/TableView.vue"; // 视频控件
+
 
 export default {
   name: "Preview",
@@ -320,6 +407,7 @@ export default {
     CourseStart,
     Tinydemo,
     VideoControl,
+    TableView,
   },
   props: [
     "context",
@@ -328,7 +416,7 @@ export default {
     "FatherTreeData",
     "changeId",
     "themeColor",
-    "isShowTitle"
+    "isShowTitle",
   ],
   data() {
     return {
@@ -365,7 +453,7 @@ export default {
         },
       ],
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
-      noFont: ['~','!','@','#','$','%','^','&','*','(',')'], // 对应不要拼音字体
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
       idArr: [], //当前的pid
     };
   },
@@ -449,9 +537,9 @@ export default {
         //   });
         // }
         _this.cur = _this.contextData;
-        _this.cur.cur_fn_data.forEach(item => {
-          item.table_list.forEach(items => {
-            items.forEach(itemss => {
+        _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
@@ -482,8 +570,7 @@ export default {
               });
             } else {
               _this.changeId(this.idArr[i - 1]);
-              _this.$forceUpdate()
-
+              _this.$forceUpdate();
             }
           }
         });
@@ -525,7 +612,7 @@ export default {
               });
             } else {
               _this.changeId(this.idArr[i + 1]);
-              _this.$forceUpdate()
+              _this.$forceUpdate();
             }
           }
         });
@@ -597,7 +684,7 @@ export default {
           font-size: 14px;
           line-height: 22px;
           height: 22px;
-          &.noFont{
+          &.noFont {
             font-family: initial;
           }
         }
@@ -625,7 +712,7 @@ export default {
           background-size: 24px;
         }
         &:hover {
-          background-color: #F76565;
+          background-color: #f76565;
         }
         &:active {
           background-color: #d24444;
@@ -725,76 +812,76 @@ export default {
     }
   }
 }
-.NNPE-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;
-                }
-            }
+.NNPE-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;
+        }
+      }
     }
-    .classTopic-box {
-        background: #24B99E;
-    }
-    .NNPE-Book-content-inner {
-        > div {
-            > h2 {
-                color: #24B99E;
-                b{
-                    background: #24B99E;
-                }
-            }
+  }
+  .classTopic-box {
+    background: #24b99e;
+  }
+  .NNPE-Book-content-inner {
+    > div {
+      > h2 {
+        color: #24b99e;
+        b {
+          background: #24b99e;
         }
+      }
     }
+  }
 }
-.NNPE-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;
-                }
-            }
+.NNPE-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;
+        }
+      }
     }
-    .classTopic-box {
-        background: #BD8865;
-    }
-    .NNPE-Book-content-inner {
-        > div {
-            > h2 {
-                color: #BD8865;
-                b{
-                    background: #BD8865;
-                }
-            }
+  }
+  .classTopic-box {
+    background: #bd8865;
+  }
+  .NNPE-Book-content-inner {
+    > div {
+      > h2 {
+        color: #bd8865;
+        b {
+          background: #bd8865;
         }
+      }
     }
+  }
 }
 </style>

src/components/Adult/inputModules/Table.vue

@@ -315,7 +315,7 @@ export default {
           {
             width: "",
           },
-        ],
+        ], // 每一列的宽度
         img_list: [],
         hintTitle: "",
         hintOtion: [

src/components/Adult/preview/Ligature.vue

@@ -437,6 +437,7 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .JoinLine {
+  width: 100%;
   .container {
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);

src/components/Adult/preview/TableView.vue

@@ -55,7 +55,6 @@ export default {
     Soundrecord,
   },
   props: ["curQue"],
-
   data() {
     //这里存放数据
     return {};
@@ -99,6 +98,7 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .TableView {
+  width: 100%;
   .hint {
     p {
       font-family: "robot";
@@ -171,10 +171,11 @@ export default {
           height: 64px;
           text-align: center;
           input {
-            width: 80%;
             outline: none;
             border: none;
-            border-bottom: 1px solid black;
+            // border-bottom: 1px solid black;
+            width: 100%;
+            height: 100%;
           }
         }
       }