表格优化

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -50,7 +50,12 @@
               >
                 <div :style="[tdStyle]" class="cell-wrap">
                   <template v-if="isEnable(data.property.view_pinyin)">
-                    <p v-for="(item, index) in col.model_pinyin" :key="index" class="pinyin-text">
+                    <p
+                      v-for="(item, index) in col.model_pinyin"
+                      :key="index"
+                      class="pinyin-text"
+                      :class="[index === 0 ? 'pinyin-text-left' : '']"
+                    >
                       <template v-if="item.type === 'input'">
                         <el-input
                           :key="index"
@@ -58,6 +63,7 @@
                           :disabled="disabled"
                           :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
                         />
+                        <span v-if="data.property.pinyin_position === 'bottom'" class="pinyin">&nbsp;</span>
                         <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
                 {{ computedAnswerText(li.mark) }}
               </span> -->
@@ -288,12 +294,23 @@ $border-color: #e6e6e6;
     .pinyin-text {
       display: flex;
       flex-direction: column;
-      font-size: 24px;
+      padding: 0 1px;
+      font-size: 16px;
+
+      span {
+        text-align: center;
+      }
 
       .pinyin {
         font-family: 'League';
         font-size: 12px;
       }
+
+      &-left {
+        span {
+          text-align: left;
+        }
+      }
     }
   }
 }