eep_page/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" :style="{ color: tag.color }">
        {{ tag.text }}
      </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 {
      height: 32px;
      padding: 0 10px;
      line-height: 30px;
      color: var(--color1);
      background-color: #fff;
      border-color: var(--color1);
      border-radius: 2px;
    }
  }
}
</style>