表头分离表格 移动端

src/components/Adult/phonePreview/ConfigurableTable.vue

@@ -124,6 +124,7 @@
                         judgeAnswer !== 'standardAnswer' ||
                           (judgeAnswer === 'standardAnswer' && col.answer)
                       "
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     />
                   </template>
                 </template>
@@ -150,6 +151,7 @@
                         judgeAnswer !== 'standardAnswer' ||
                           (judgeAnswer === 'standardAnswer' && col.answer)
                       "
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     />
                   </template>
                 </div>
@@ -343,7 +345,7 @@
 
 <script>
 import CrossTick from "./HeaderSparate/CrossTick.vue";
-import AnswerTitle from "../preview/components/AnswerTitle.vue";
+import AnswerTitle from "../phonePreview/components/AnswerTitle.vue";
 import OneSentenceTemp from "./components/OneSentenceTemp.vue";
 
 export default {

src/components/Adult/phonePreview/HeaderSparate/index.vue

@@ -3,12 +3,22 @@
     class="header-separate"
     v-if="judgeAnswer == 'standardAnswer' ? (userError ? true : false) : true"
   >
-    <table>
+    <table
+      :style="{
+        width:
+          curQue.tableData.colsConfig.width.length > 5
+            ? width_total + 'px'
+            : '',
+        fontSize: baseSizePhone + 2 + 'px'
+      }"
+    >
       <colgroup>
         <col
           v-for="(item, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
-          :style="{ width: `${item.val}px` }"
+          :style="{
+            width: `${item.val}px`
+          }"
         />
       </colgroup>
 
@@ -54,7 +64,11 @@
                   : ''
               ]"
               :style="{
-                'background-color': `${col.background}`,
+                'background-color':
+                  `${col.background}` === '#fff' ||
+                  `${col.background}` === '#ffffff'
+                    ? 'transparent'
+                    : `${col.background}`,
                 display: tdHeaderIsNone(i, j)
               }"
             >
@@ -91,6 +105,7 @@
                       :disabled="isAnswerMode"
                       :autosize="{ minRows: 1, maxRows: 6 }"
                       @input="enterAnswer(i, j, 'input')"
+                      :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                     />
                   </template>
                 </template>
@@ -226,7 +241,7 @@
                           :fn_check_list="[]"
                           :pyNumber="col.pyNumber && col.pyNumber[sdIndex]"
                           :hengLeg="sdItem.hengLeg"
-                          :maxFontsize="sdItem.maxFontsize"
+                          :maxFontsize="baseSizePhone"
                         />
                         <template
                           v-if="
@@ -268,7 +283,7 @@
 
 <script>
 import CrossTick from "./CrossTick.vue";
-import AnswerTitle from "../../preview/components/AnswerTitle.vue";
+import AnswerTitle from "../../phonePreview/components/AnswerTitle.vue";
 import OneSentenceTemp from "../components/OneSentenceTemp.vue";
 
 export default {
@@ -287,6 +302,9 @@ export default {
     },
     TaskModel: {
       type: String
+    },
+    baseSizePhone: {
+      type: Number
     }
   },
   data() {
@@ -297,7 +315,8 @@ export default {
         completeInput: []
       },
       userBookanswer: [],
-      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"]
+      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
+      width_total: 0 //总宽度
     };
   },
   computed: {
@@ -360,6 +379,7 @@ export default {
     if (!this.curQue.Bookanswer) {
       let arr = [];
       let flag = false; // 是否含有多个句子类型
+      this.width_total = 0;
       this.curQue.tableData.body.forEach((item, i) => {
         arr.push({
           content: []
@@ -384,6 +404,9 @@ export default {
       if (!flag) {
         this.$set(this.curQue, "Bookanswer", arr);
       }
+      this.curQue.tableData.colsConfig.width.forEach(width => {
+        this.width_total += width.val;
+      });
     } else {
       this.curQue.Bookanswer.forEach(item => {
         item.content.forEach(item => {
@@ -697,7 +720,7 @@ export default {
 .header-separate {
   width: 100%;
   margin-bottom: 16px;
-
+  overflow: auto;
   table {
     table-layout: fixed;
     font-size: 16px;
@@ -749,6 +772,7 @@ export default {
           .text-#{$type} {
             ::v-deep .el-textarea__inner {
               text-align: $type;
+              background-color: transparent;
             }
           }
         }