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

<!--  -->
<template>
  <div
    :class="['dialogue-option', index % 2 == 0 ? 'pink-bg' : 'blue-bg']"
    v-if="curOption"
  >
    <div
      :class="['left-icon', index % 2 == 0 ? 'pink-left' : 'blue-left']"
    ></div>
    <div
      class="dialogue-option-con"
      v-for="(item, index) in resArr"
      :key="'curOption' + index"
    >
      <span
        class="sentence"
        v-for="(wItem, wIndex) in item"
        :key="'curOption_word' + wIndex"
      >
        <span class="NNPE-pinyin padding">{{ wItem.pinyin }}</span>
        <span class="NNPE-chs padding">{{ wItem.chs }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curOption", "index"],
  data() {
    return {
      bgList: [
        {
          bg: require("../../../../assets/NPC/op-pink-bg.png"),
          bgLeft: require("../../../../assets/NPC/op-pink-left.png"),
        },
        {
          bg: require("../../../../assets/NPC/op-blue-bg.png"),
          bgLeft: require("../../../../assets/NPC/op-blue-left.png"),
        },
      ],
      resArr: [],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handleData() {
      let resArr = [];
      this.curOption.detail.forEach((dItem) => {
        dItem.wordsList.forEach((sItem) => {
          let sentArr = [];
          sItem.forEach((wItem) => {
            let obj = {
              chs: wItem.chs,
              pinyin: wItem.pinyin,
            };
            sentArr.push(obj);
          });
          resArr.push(sentArr);
        });
      });
      this.resArr = resArr;
      console.log(this.resArr);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("curOption");
    console.log(this.curOption);
    if (this.curOption) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dialogue-option {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  &.pink-bg {
    background: url("../../../../assets/NPC/op-pink-bg.png") no-repeat left top;
    background-size: 100% 100%;
  }
  &.blue-bg {
    background: url("../../../../assets/NPC/op-blue-bg.png") no-repeat left top;
    background-size: 100% 100%;
  }
  .left-icon {
    position: absolute;
    left: -16px;
    top: -16px;
    z-index: 9999;
    &.pink-left {
      width: 44px;
      height: 54px;
      background: url("../../../../assets/NPC/op-pink-left.png") no-repeat left
        top;
      background-size: 100% 100%;
    }
    &.blue-left {
      width: 82px;
      height: 68px;
      background: url("../../../../assets/NPC/op-blue-left.png") no-repeat left
        top;
      background-size: 100% 100%;
    }
  }
  .dialogue-option-con {
    clear: both;
    overflow: hidden;
    margin-bottom: 8px;
    .sentence {
      float: left;
      text-align: center;
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          color: #000000;
          height: 21px;

          &.textLeft {
            text-align: left;
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 24px;
          line-height: 32px;
          color: #000000;
          &.active {
            background: rgba(60, 200, 99, 0.2);
          }
          &.wordActive {
            color: #de4444;
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
  }
}
</style>