移动端 可配置表格

src/components/Adult/phonePreview/ConfigurableTable.vue

@@ -8,14 +8,16 @@
         'box-shadow': `${
           curQue.isShadow ? '4px 4px 4px rgba(0, 0, 0, 0.3)' : ''
         }`,
-        border: `${curQue.marginHighlight ? '1.1px solid #949494' : ''}`
+        border: `${curQue.marginHighlight ? '1.1px solid #949494' : ''}`,
+        width: curQue.tableData.body.length > 5 ? width_total + 'px' : '',
+        fontSize: baseSizePhone + 2 + 'px'
       }"
     >
       <colgroup>
         <col
           v-for="(col, i) in curQue.tableData.colsConfig.width"
           :key="`col-${i}`"
-          :style="{ width: `${col.val}px` }"
+          :style="{ width: `${col.val}px`, fontSize: baseSizePhone + 6 + 'px' }"
         />
       </colgroup>
 
@@ -30,7 +32,11 @@
           v-for="({ content }, i) in curQue.tableData.headers"
           :key="`thead-${i}`"
           :style="{
-            'background-color': `${curQue.headerBgColor}`
+            'background-color':
+              `${curQue.headerBgColor}` === '#fff' ||
+              `${curQue.headerBgColor}` === '#ffffff'
+                ? 'transparent'
+                : `${curQue.headerBgColor}`
           }"
         >
           <template v-for="({ text, colspan, rowspan }, j) in content">
@@ -70,7 +76,13 @@
                     : ''
                   : ''
               ]"
-              :style="{ 'background-color': `${col.background}` }"
+              :style="{
+                'background-color':
+                  `${col.background}` === '#fff' ||
+                  `${col.background}` === '#ffffff'
+                    ? 'transparent'
+                    : `${col.background}`
+              }"
             >
               <div
                 class="cell-wrap"
@@ -286,7 +298,7 @@
                           :fn_check_list="[]"
                           :py-number="col.pyNumber && col.pyNumber[sdIndex]"
                           :heng-leg="sdItem.hengLeg"
-                          :max-fontsize="sdItem.maxFontsize"
+                          :max-fontsize="baseSizePhone"
                         />
                         <template
                           v-if="
@@ -347,6 +359,9 @@ export default {
     },
     TaskModel: {
       type: String
+    },
+    baseSizePhone: {
+      type: String
     }
   },
   data() {
@@ -357,7 +372,8 @@ export default {
         completeInput: []
       },
       userBookanswer: [],
-      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"]
+      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
+      width_total: 0 //总宽度
     };
   },
   computed: {
@@ -516,6 +532,7 @@ export default {
     },
     // 计算单元格是否显示
     computedTableCellShow() {
+      this.width_total = 0;
       this.curQue.tableData.body.forEach(({ content }, i, arr) => {
         content.forEach(({ colspan, rowspan, is_show_cell }, j, arr2) => {
           let col = colspan === undefined ? 1 : Number(colspan);
@@ -545,6 +562,9 @@ export default {
           }
         });
       });
+      this.curQue.tableData.colsConfig.width.forEach(width => {
+        this.width_total += width.val;
+      });
     },
     handleData() {
       let Bookanswer = [];
@@ -724,7 +744,8 @@ export default {
 <style lang="scss" scoped>
 .config-table {
   width: 100%;
-  margin-bottom: 16px;
+  overflow: auto;
+  // margin-bottom: 16px;
 
   table {
     table-layout: fixed;
@@ -796,6 +817,8 @@ export default {
           .text-#{$type} {
             ::v-deep .el-textarea__inner {
               text-align: $type;
+
+              background-color: transparent;
             }
           }
         }

src/components/Adult/phonePreview/RecordModule.vue

@@ -91,7 +91,7 @@ export default {
     width: 200px;
   }
   .record_control_promax {
-    width: 280px;
+    width: 150px;
   }
 }
 </style>

src/components/Adult/phonePreview/Soundrecord.vue

@@ -548,7 +548,6 @@ export default {
   }
   .el-select {
     margin-left: 8px;
-    display: block;
   }
   .record-delete {
     width: 20px;
@@ -582,8 +581,8 @@ export default {
       width: 78px;
     }
     .el-input__inner {
-      height: 24px;
-      line-height: 22px;
+      height: 0;
+      line-height: 0;
       box-sizing: border-box;
       border-radius: 4px;
       padding: 0px 11px;
@@ -607,10 +606,4 @@ export default {
     }
   }
 }
-.el-select-dropdown {
-  background-color: transparent;
-}
-.el-popper[x-placement^="bottom"] .popper__arrow::after {
-  border-bottom-color: transparent;
-}
 </style>

src/components/Adult/phonePreview/TinyModule.vue

@@ -89,7 +89,7 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-prev-Tiny {
   width: 100%;
-  margin-bottom: 24px;
+  // margin-bottom: 24px;
   h2 {
     margin: 16px 0 0;
     font-weight: 500;