生词卡片设为居中对齐

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -829,11 +829,12 @@
                     <div
                       :style="{
                         display: 'flex',
-                        justifyContent:
-                          !(item.collocation && item.liju_list) && item.new_word.length < 4 ? 'center' : 'auto',
+                        justifyContent: 'center',
                         columnGap: '16px',
                       }"
                     >
+                      <!-- 上面的样式 justifyContent:
+                          !(item.collocation && item.liju_list) && item.new_word.length < 4 ? 'center' : 'auto', -->
                       <div v-if="item.hz_info.length > 0" style="width: max-content">
                         <AudioPlay
                           v-if="item.mp3_list"

src/views/book/courseware/preview/components/new_word/components/writeTableZoom.vue

@@ -68,10 +68,11 @@
         <div
           :style="{
             display: 'flex',
-            justifyContent: !(data.collocation && data.liju_list) && data.new_word.length < 4 ? 'center' : 'auto',
+            justifyContent: 'center',
             columnGap: '16px',
           }"
         >
+          <!-- justifyContent: !(data.collocation && data.liju_list) && data.new_word.length < 4 ? 'center' : 'auto', -->
           <div v-if="data.hz_info.length > 0" style="width: max-content">
             <AudioPlay
               v-if="data.mp3_list"
@@ -525,7 +526,7 @@ export default {
       }
 
       .hz-box {
-        width: 528px; // 内容满屏 多余出滚动条
+        max-width: 528px; // 内容满屏 多余出滚动条
         overflow: auto;
 
         .hz-item {

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

@@ -47,17 +47,14 @@
                       ? data.property.first_line_color
                       : j === 0
                         ? data.property.first_column_color
-                        : '',
-
-                  backgroundColor: data.mode === 'short' ? data.styles.bgColor : '',
+                        : data.mode === 'short' && data.styles.bgColor
+                          ? data.styles.bgColor
+                          : '',
                 }"
               >
-                <div
-                  :style="[tdStyle, computedRichStyle(col.content)]"
-                  :class="['cell-wrap', 'cell-wrap-' + data.mode]"
-                >
+                <div :style="[tdStyle, computedRichStyle(col.content)]" class="cell-wrap">
                   <template v-if="isEnable(data.property.view_pinyin)">
-                    <p
+                    <div
                       v-for="(item, index) in col.model_pinyin"
                       :key="index"
                       class="pinyin-text"
@@ -70,7 +67,7 @@
                             v-model="item.value"
                             :disabled="disabled"
                             :class="[...computedAnswerClass(item, i, j)]"
-                            :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                            :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
                           />
                         </template>
                         <template v-else-if="data.property.fill_type === fillTypeList[1].value">
@@ -91,7 +88,7 @@
                               v-model="item.value"
                               :readonly="true"
                               :class="[...computedAnswerClass(item, i, j)]"
-                              :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                              :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
                             />
                           </el-popover>
                         </template>
@@ -133,10 +130,10 @@
                           item.pinyin.replace(/\s+/g, '')
                         }}</span>
                       </template>
-                    </p>
+                    </div>
                   </template>
                   <template v-else>
-                    <p v-for="(item, index) in col.model_essay" :key="index" :style="[tdStyle]">
+                    <div v-for="(item, index) in col.model_essay" :key="index" :style="[tdStyle]">
                       <span
                         v-if="item.type === 'text'"
                         :key="index"
@@ -154,7 +151,7 @@
                             v-model="item.value"
                             :disabled="disabled"
                             :class="[...computedAnswerClass(item, i, j)]"
-                            :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                            :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
                           />
                         </template>
                         <template v-else-if="data.property.fill_type === fillTypeList[1].value">
@@ -175,7 +172,7 @@
                               v-model="item.value"
                               :readonly="true"
                               :class="[...computedAnswerClass(item, i, j)]"
-                              :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                              :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
                             />
                           </el-popover>
                         </template>
@@ -212,7 +209,7 @@
                           {{ computedAnswerText(item, i, j) }}
                         </span>
                       </template>
-                    </p>
+                    </div>
                   </template>
                 </div>
                 <span v-if="showLang" class="multilingual" :style="[tdStyle, computedRichStyle(col.content)]">