EEP_BookPreview/src/views/book/courseware/preview/components/label/LabelPreview.vue

<template>
  <div class="label-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div class="main">
      <el-tag v-for="(tag, i) in data.dynamicTags" :key="i" size="medium" :style="{ color: tag.color }">
        <span v-if="'ZH' == getLang()">
          {{ convertText(tag.name) }}
        </span>
        <span v-else style="display: flex; flex-direction: column; line-height: 20px">
          <span>{{ convertText(tag.name) }}</span>
          <span style="color: black">
            {{ convertText(tag?.mult_language_list?.find((item) => item.type === getLang())?.name || '') }}</span
          >
        </span>
      </el-tag>
    </div>
  </div>
</template>

<script>
import { getLabelData } from '@/views/book/courseware/data/label';
import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'LabelPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getLabelData(),
    };
  },
  methods: {},
};
</script>

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

.label-preview {
  @include preview-base;

  .main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    :deep .el-tag {
      display: flex;
      align-items: center;
      height: auto;
      padding: 0 10px;
      color: var(--color1);
      background-color: #fff;
      border-color: var(--color1);
      border-radius: 4px;
    }
  }
}
</style>