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

<template>
  <div v-if="curRole" class="role-rItem">
    <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-roleText" :style="{ background: curRole.color }">{{
      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'],
  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-rItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;

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

    &-roleImg {
      width: 36px;
      height: 36px;
      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>