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

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

    <div class="main">
      <div class="content-box" v-for="(item, index) in data.content_list" :key="index">
        <div class="main-top" :style="{ width: item.hz_strokes_list.length * 64 + 'px' }">
          <AudioPlay v-if="isEnable(data.property.is_enable_voice)" :file-id="item.audio_file_id" theme-color="gray" />
          <span class="pinyin" v-if="isEnable(data.property.is_enable_pinyin)">{{ item.pinyin }}</span>
        </div>
        <div class="strock-chinese-box">
          <Strockplayredline
            v-for="(items, indexs) in item.hz_strokes_list"
            :key="indexs"
            :play-storkes="isEnable(data.property.is_enable_stroke)"
            :book-text="item.con"
            :target-div="'pre' + item.con + indexs"
            :book-strokes="items.strokes"
            :class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
            :bg-type="data.property.frame_type"
            :frame-color="data.property.frame_color"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

import PreviewMixin from '../common/PreviewMixin';
import AudioPlay from '../character_base/components/AudioPlay.vue';
import Strockplayredline from '../character_base/components/Strockplayredline.vue';

export default {
  name: 'CharacterPreview',
  components: {
    AudioPlay,
    Strockplayredline,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getCharacterData(),
    };
  },
  watch: {},
  computed: {},
  created() {},
  methods: {},
};
</script>

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

.character-preview {
  @include preview-base;

  display: block;

  .main {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    justify-content: start;
  }

  .content-box {
    width: max-content;
  }

  .audio-wrapper-nobg {
    height: 16px;

    :deep .audio-play {
      width: 16px;
      height: 16px;
      color: #000;
      background-color: initial;
    }

    :deep .audio-play.not-url {
      color: #a1a1a1;
    }

    :deep .voice-play {
      width: 16px;
      height: 16px;
    }
  }

  .main-top {
    display: flex;
    column-gap: 4px;
    align-items: center;
    justify-content: center;
  }

  .pinyin {
    font-family: 'League';
    font-size: 12px;
    font-weight: 500;
    color: #000;
  }

  .strock-chinese-box {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0;
  }

  .strockplay-newWord {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 1px solid #e81b1b;

    .character-target-bg,
    .hanzi-writer-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #dedede;
    }

    .hanzi-writer-img {
      z-index: 1;
    }
  }

  .border-right-none {
    border-right: none;
  }
}
</style>