修改填空组件问题

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -887,7 +887,7 @@ export default {
   }
 
   .drag-line {
-    z-index: 9;
+    z-index: 2;
     width: calc(100% - 16px);
     height: 4px;
     margin: 0 8px;
@@ -907,7 +907,7 @@ export default {
 
   .drag-vertical-line {
     position: relative;
-    z-index: 9;
+    z-index: 2;
     width: 4px;
     height: 100%;
     background-color: #379fff;

src/views/book/courseware/create/components/PreviewEdit.vue

@@ -337,7 +337,7 @@ export default {
       }
 
       .drag-line {
-        z-index: 9;
+        z-index: 2;
         width: 100%;
         height: 6px;
         cursor: ns-resize;
@@ -356,7 +356,7 @@ export default {
       }
 
       .drag-vertical-line {
-        z-index: 9;
+        z-index: 2;
         width: 6px;
         height: 100%;
         cursor: ew-resize;

src/views/book/courseware/preview/common/SoundRecord.vue

@@ -313,8 +313,10 @@ export default {
 <style lang="scss" scoped>
 .record {
   display: flex;
+  grid-area: record;
   align-items: center;
   justify-content: center;
+  max-width: 160px;
   height: 32px;
 
   .playBack {

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -40,8 +40,11 @@ const mixin = {
      * 得到序号外部样式
      */
     getAreaStyle() {
-      if (!isEnable(this.data.property.sn_display_mode)) return {};
-
+      if (!isEnable(this.data.property.sn_display_mode)) {
+        return {
+          grid: `"main" / 1fr`,
+        };
+      }
       const position = this.data.property.sn_position;
       let grid = '';
 

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -13,19 +13,25 @@
               <el-input
                 :key="j"
                 v-model="li.content"
-                :style="[{ width: Math.max(80, li.content.length * 21.3) + 'px' }, { 'font-family': fontFamily }]"
+                :class="[data.property.fill_font]"
+                :style="[{ width: Math.max(80, li.content.length * 21.3) + 'px' }]"
               />
             </template>
           </template>
         </p>
       </div>
-      <SoundRecord ref="record" type="normal" class="record-box" />
+      <SoundRecord
+        v-if="isEnable(data.property.is_enable_voice_answer)"
+        ref="record"
+        type="normal"
+        class="record-box"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { getFillData, fillFontList, arrangeTypeList } from '@/views/book/courseware/data/fill';
+import { getFillData, fillFontList, arrangeTypeList, audioPositionList } from '@/views/book/courseware/data/fill';
 
 import PreviewMixin from '../common/PreviewMixin';
 import AudioFill from './components/AudioFillPlay.vue';
@@ -67,14 +73,24 @@ export default {
   methods: {
     getMainStyle() {
       const isRow = this.data.property.arrange_type === arrangeTypeList[0].value;
+      const isFront = this.data.property.audio_position === audioPositionList[0].value;
+      const isEnableVoice = this.data.property.is_enable_voice_answer === 'true';
+      let _list = [
+        { name: 'audio', value: '24px' },
+        { name: 'fill', value: '1fr' },
+      ];
+      if (!isFront) {
+        _list = _list.reverse();
+      }
+      let grid = isRow
+        ? `"${_list[0].name} ${_list[1].name}${isEnableVoice ? ' record' : ''}" auto / ${_list[0].value} ${_list[1].value}${isEnableVoice ? ' 160px' : ''}`
+        : `"${_list[0].name}" ${_list[0].value} "${_list[1].name}" ${_list[1].value}${isEnableVoice ? `" record" 32px ` : ''} / 1fr`;
       let style = {
-        'flex-direction': isRow ? 'row' : 'column',
+        'grid-auto-flow': isRow ? 'column' : 'row',
+        'column-gap': isRow ? '16px' : undefined,
+        'row-gap': isRow ? undefined : '8px',
+        grid,
       };
-      if (isRow) {
-        style['column-gap'] = '16px';
-      } else {
-        style['row-gap'] = '8px';
-      }
       return style;
     },
   },
@@ -88,12 +104,12 @@ export default {
   @include preview-base;
 
   .main {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    align-items: center;
   }
 
   .fill-wrapper {
-    flex: 1;
+    grid-area: fill;
     font-size: 16pt;
 
     p {
@@ -106,6 +122,18 @@ export default {
       width: 120px;
       margin: 0 2px;
 
+      &.pinyin :deep input.el-input__inner {
+        font-family: 'PINYIN-B', sans-serif;
+      }
+
+      &.chinese :deep input.el-input__inner {
+        font-family: 'arial', sans-serif;
+      }
+
+      &.english :deep input.el-input__inner {
+        font-family: 'arial', sans-serif;
+      }
+
       :deep input.el-input__inner {
         padding: 0;
         font-size: 16pt;

src/views/book/courseware/preview/components/fill/components/AudioFillPlay.vue

@@ -125,6 +125,8 @@ export default {
 
 <style lang="scss" scoped>
 .audio-fill {
+  grid-area: audio;
+
   .audio-play {
     width: 24px;
     height: 24px;

src/views/home/index.vue

@@ -25,7 +25,7 @@
         @keyup.enter.native="pageQueryBookList"
       />
       <span class="search-name">创建者</span>
-      <el-select v-model="creator_id" placeholder="全部">
+      <el-select v-model="creator_id" placeholder="全部" @change="pageQueryBookList">
         <el-option label="-全部- " value="" />
         <el-option
           v-for="{ user_id, user_real_name } in user_list"