GCLS_Page_Book_Component_NPC/src/components/Adult/preview/DialogueArticleViewChs/RoleChs.vue

<!--  -->
<template>
  <div class="role-rItem" v-if="curRole">
    <span
      v-if="curRole.role"
      class="adult-book-input-roleText"
      :style="{ background: this.curRole.color.touxiang }"
      >{{ curRole.role }}</span
    >
    <img
      v-else-if="curRole.img_list.length > 0"
      :src="curRole.img_list[0] && curRole.img_list[0].id"
      class="adult-book-input-roleImg"
    />
    <div
      class="adult-book-input-roleImg"
      :class="['adult-book-input-roleImg' + curRole.simpleHead]"
      v-else-if="curRole.simpleHead !== ''"
    ></div>
    <template v-if="type != 1 && curRole.detail.wordsList.length > 0">
      <span class="pinyin" :style="{ color: wordColor }">{{
        curRole.detail.wordsList | handlePinyin
      }}</span>
      <span class="chs" :style="{ color: wordColor }">{{
        curRole.detail.wordsList | handleChs
      }}</span>
    </template>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curRole", "color", "type"],
  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;
    }
  },
  data() {
    return {};
  },
  computed: {
    wordColor: function() {
      let color = "rgba(0,0,0,0.85)";
      if (this.color) {
        color = this.color;
      }
      return color;
    }
  },
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.role-rItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .adult-book-input {
    &-roleText {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      background: #a7a7a7;
      border-radius: 100%;
      text-align: center;
      line-height: 20px;
      font-size: 20px;
      color: #ffffff;
    }
    &-roleImg {
      width: 36px;
      height: 36px;
    }
    &-roleImg0 {
      background: url("../../../../assets/NPC/simple1.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg1 {
      background: url("../../../../assets/NPC/simple2.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg2 {
      background: url("../../../../assets/NPC/simple3.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg3 {
      background: url("../../../../assets/NPC/simple4.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg4 {
      background: url("../../../../assets/NPC/simple5.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg5 {
      background: url("../../../../assets/NPC/simple6.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg6 {
      background: url("../../../../assets/NPC/simple7.png") center no-repeat;
      background-size: contain;
    }
    &-roleImg7 {
      background: url("../../../../assets/NPC/simple8.png") center no-repeat;
      background-size: contain;
    }
  }
  .pinyin {
    font-family: "GB-PINYINOK-B";
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
    margin-right: 4px;
    margin-left: 8px;
  }
  .chs {
    font-family: "楷体", "FZJCGFKTK";
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>