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

<!--  -->
<template>
  <div class="NPC-ArticleView">
    <div class="ArticleView-header">
      <el-switch
        style="display: block"
        v-model="showPhrases"
        active-color="#DE4444"
        inactive-color="rgba(0,0,0,0.1)"
        active-text=""
        inactive-text="本课生词"
        @change="handleSwitchChange('showPractice', 'showWord')"
      >
      </el-switch>
      <el-switch
        style="display: block"
        v-model="showPractice"
        active-color="#DE4444"
        inactive-color="rgba(0,0,0,0.1)"
        active-text=""
        inactive-text="语音练习"
        @change="handleSwitchChange('showPhrases', 'showWord')"
      >
      </el-switch>
      <el-switch
        style="display: block"
        v-model="showWord"
        active-color="#DE4444"
        inactive-color="rgba(0,0,0,0.1)"
        active-text=""
        inactive-text="取词"
        @change="handleSwitchChange('showPhrases', 'showPractice')"
      >
      </el-switch>
      <!-- <div class="setting-fontsize">
        <a @click="handleFontsize('-')"
          ><img src="../../../../assets/newImage/common/btn-reduce.png"
        /></a>
        <img src="../../../../assets/newImage/common/font-size.png" />
        <a @click="handleFontsize('+')"
          ><img src="../../../../assets/newImage/common/btn-increase.png"
        /></a>
      </div> -->
    </div>
    <div class="ArticleView-body" ref="ArticleViewbody">
      <NormalModelChs
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :colorBox="colorBox"
        v-if="!showPhrases && !showPractice && !showWord"
      />
      <PhraseModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :NNPENewWordList="NNPENewWordList"
        :colorBox="colorBox"
        v-if="showPhrases"
      />
      <Practice
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :colorBox="colorBox"
        v-if="showPractice"
      />
      <WordModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :NNPENewWordList="NNPENewWordList"
        :colorBox="colorBox"
        v-if="showWord"
      />
    </div>
  </div>
</template>

<script>
import PhraseModel from "./PhraseModelChs.vue";
import NormalModelChs from "./NormalModelChs.vue";
import Practice from "./Practicechs.vue"; // 语音练习模式
import WordModel from "./WordModelChs.vue"; // 语音练习模式

export default {
  name: "ArticleView",
  props: ["curQue", "NNPENewWordList"],
  components: { NormalModelChs, Practice, WordModel, PhraseModel },
  data() {
    return {
      showPreview: true, // 全文预览
      showPhrases: false, // 显示单词和短语
      showPractice: false, // 语音练习

      showWord: false, // 取词
      titleFontsize: 20, // 标题字号初始值
      wordFontsize: 16, // 文章内容字号初始值
      bodyLeft: 0,
      bodyWidth: 0,
      resColorArr: [],
      colorBox: [
        {
          touxiang: "#72B51D",
          bg: "#E9F0DF",
        },
        {
          touxiang: "#DE4444",
          bg: "rgba(222, 68, 68, 0.1)",
        },
        {
          touxiang: "#A7A7A7",
          bg: "#ffffff",
        },
        {
          touxiang: "#4D91F6",
          bg: "#F1F7FF",
        },
        {
          touxiang: "#FF8A00",
          bg: "rgba(255, 138, 0, 0.1)",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol == "+") {
        if (this.wordFontsize < 24) {
          this.titleFontsize = this.titleFontsize + 2;
          this.wordFontsize = this.wordFontsize + 2;
        }
      } else if (symbol == "-") {
        if (this.wordFontsize > 12) {
          this.titleFontsize = this.titleFontsize - 2;
          this.wordFontsize = this.wordFontsize - 2;
        }
      }
    },
    // 切换开关
    handleSwitchChange(obj1, obj2) {
      this[obj1] = false;
      this[obj2] = false;
      this.showPreview = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("我是文章预览");
    console.log(this.curQue);

    this.$nextTick(() => {
      this.bodyLeft = this.$refs.ArticleViewbody.getBoundingClientRect().left;
    });
    console.log(this.NNPENewWordList);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NPC-ArticleView {
  width: 100%;
  .ArticleView-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    .setting-fontsize {
      display: flex;
      margin-left: 24px;
      a {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 4px;
        display: block;
        height: 24px;
        width: 24px;
      }
      img {
        width: 100%;
      }
      > img {
        margin: 0 8px;
        width: 24px;
      }
    }
  }
  .ArticleView-body {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    .aduioLine-box {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.NPC-ArticleView {
  .ArticleView-header {
    .el-switch {
      margin-left: 24px;
    }
    .el-switch__core {
      width: 44px !important;
      height: 24px;
      border-radius: 20px;
    }
    .el-switch__core:after {
      top: 3px;
      left: 3px;
    }
    .el-switch.is-checked .el-switch__core::after {
      left: 100%;
      margin-left: -19px;
    }
    .el-switch__label {
      color: #000000;
    }
    .el-switch__label.is-active {
      color: rgba($color: #000000, $alpha: 0.3);
    }
    .el-switch__label--left {
      margin-right: 8px;
    }
  }
}
</style>