eep_page/src/views/book/courseware/preview/components/dialogue_article/RoleChs.vue

<template>
  <div v-if="curRole" class="role-rItems">
    <img
      v-if="type === 'upload'"
      :src="curRole.img_list[0] && curRole.img_list[0].file_url"
      class="adult-book-input-roleImg"
    />
    <img
      v-else-if="type === 'simple' && curRole.simpleHead !== ''"
      class="adult-book-input-roleImg"
      :src="require('@/assets/simple' + curRole.simpleHead + '.png')"
    />
    <span
      v-else
      class="adult-book-input-roleTexts"
      :class="[
        curRole.fullName
          ? curRole.fullName.length === 4
            ? 'adult-book-input-roleTextPadding'
            : curRole.name && curRole.name.length === 4
              ? 'adult-book-input-roleTextPadding'
              : ''
          : '',
      ]"
      :style="{ background: curRole.color }"
      >{{ convertText(curRole.fullName || curRole.name) }}</span
    >
    <!-- <template>
      <span class="pinyin" :style="{ color: wordColor }">{{ curRole.fullName }}</span>
      <span class="chs" :style="{ color: wordColor }">{{ curRole.fullPinyin }}</span>
    </template> -->
  </div>
</template>

<script>
export default {
  components: {},
  filters: {
    handlePinyin(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.pinyin} `;
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.chs} `;
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  props: ['curRole', 'color', 'type'],
  inject: ['convertText'],
  data() {
    return {};
  },
  computed: {
    wordColor() {
      let color = 'rgba(0,0,0,0.85)';
      if (this.color) {
        color = this.color;
      }
      return color;
    },
  },
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.role-rItems {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .adult-book-input {
    &-roleTexts {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 1px;
      font-size: 12px;
      line-height: 15px;
      color: #fff;
      text-align: center;
      background: #a7a7a7;
      border-radius: 100%;
    }

    &-roleTextPadding {
      padding: 2px 5px;
    }

    &-roleImg {
      width: 44px;
      height: 44px;
      overflow: hidden;
      border-radius: 50%;
    }
  }

  .pinyin {
    margin-right: 4px;
    margin-left: 8px;
    font-family: 'League';
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 85%);
  }

  .chs {
    font-family: '楷体';
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 85%);
  }
}
</style>