eep_page/src/views/book/courseware/preview/components/character/CharacterPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main" :style="getMainStyle()">预览开发中</div>
  </div>
</template>

<script>
import {
  getCharacterData,
  fillFontList,
  arrangeTypeList,
  audioPositionList,
} from '@/views/book/courseware/data/character';

import PreviewMixin from '../common/PreviewMixin';
import AudioFill from '../fill/components/AudioFillPlay.vue';
import SoundRecord from '../../common/SoundRecord.vue';

export default {
  name: 'CharacterPreview',
  components: {
    AudioFill,
    SoundRecord,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getCharacterData(),
    };
  },
  computed: {
    fontFamily() {
      return fillFontList.find(({ value }) => this.data.property.fill_font === value).font;
    },
  },
  created() {
    this.answer.answer_list = this.data.model_essay
      .map((item) => {
        return item
          .map(({ type, content, mark }) => {
            if (type === 'input') {
              return {
                value: content,
                mark,
              };
            }
          })
          .filter((item) => item);
      })
      .flat();
  },
  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 = {
        'grid-auto-flow': isRow ? 'column' : 'row',
        'column-gap': isRow ? '16px' : undefined,
        'row-gap': isRow ? undefined : '8px',
        grid,
      };
      return style;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.select-preview {
  @include preview-base;

  .main {
    display: grid;
    align-items: center;
  }

  .fill-wrapper {
    grid-area: fill;
    font-size: 16pt;

    p {
      margin: 0;
    }

    .el-input {
      display: inline-flex;
      align-items: center;
      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;
        color: $font-color;
        text-align: center;
        background-color: #fff;
        border-width: 0;
        border-bottom: 1px solid $font-color;
        border-radius: 0;
      }
    }
  }

  .record-box {
    padding: 6px 12px;
    background-color: $fill-color;

    :deep .record-time {
      width: 100px;
    }
  }
}
</style>