eep_page/src/views/book/courseware/preview/components/stem/StemPreview.vue

<template>
  <div class="stem-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <PinyinText
        v-if="isEnable(data.property.view_pinyin)"
        :paragraph-list="data.paragraph_list"
        :pinyin-position="data.property.pinyin_position"
      />
      <span v-else class="rich-text" v-html="sanitizeHTML(data.content)"></span>
    </div>
  </div>
</template>

<script>
import { getStemData } from '@/views/book/courseware/data/stem';
import PreviewMixin from '../common/PreviewMixin';
import { isEnable } from '@/views/book/courseware/data/common';
import PinyinText from '@/components/PinyinText.vue';

export default {
  name: 'StemPreview',
  components: { PinyinText },
  mixins: [PreviewMixin],
  data() {
    return {
      isEnable,
      data: getStemData(),
    };
  },
  methods: {},
};
</script>

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

.stem-preview {
  @include preview-base;
}
</style>