GCLS_Page_Book_Component_NPC/src/components/Adult/preview/CourseStart.vue

<template>
  <div class="NPC-courseStart">
    <h2 :class="[curQue.titleType == 'cn' ? 'hanzi' : '']">
      {{ curQue.title }}
    </h2>
    <div class="item-content">
      <template v-if="curQue.detail.wordsList.length == 0">
        <p :class="['content-con']" v-if="curQue.detail.sentence">
          {{ curQue.detail.sentence }}
        </p>
      </template>
      <template v-else>
        <div class="con-box">
          <div
            :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
            v-for="(itemCon, indexCon) in curQue.detail.resArr"
            :key="indexCon"
            v-show="itemCon.isShow"
          >
            <template
              v-if="
                curQue.detail.wordsList[indexCon + 1] &&
                curQue.detail.wordsList[indexCon + 1].chs &&
                chsFhList.indexOf(curQue.detail.wordsList[indexCon + 1].chs) >
                  -1
              "
            >
              <div class="synthesis-box">
                <div>
                  <span
                    class="pinyin"
                    :class="[
                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
                    ]"
                    >{{ itemCon.pinyin }}</span
                  >
                  <span class="hanzi content-con">{{ itemCon.chs }}</span>
                </div>
                <div style="text-align: left">
                  <span
                    class="pinyin"
                    :class="[
                      noFont.indexOf(
                        items.detail.wordsList[indexCon + 1].pinyin
                      ) > -1
                        ? 'noFont'
                        : '',
                    ]"
                    >{{ curQue.detail.wordsList[indexCon + 1].pinyin }}</span
                  >
                  <span class="hanzi content-con">{{
                    curQue.detail.wordsList[indexCon + 1].chs
                  }}</span>
                </div>
              </div>
            </template>
            <template v-else>
              <span
                class="pinyin"
                :class="[noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '']"
                >{{ itemCon.pinyin }}</span
              >
              <span class="hanzi content-con">{{ itemCon.chs }}</span>
            </template>
          </div>
        </div>
      </template>
      <b class="content-en" v-if="curQue.en">{{ curQue.en }}</b>
    </div>
    <div class="item-intro-box">
      <div class="item-intro" v-if="curQue.con">
        {{ curQue.con }}
      </div>
    </div>
    <a class="start-btn" @click="handleNNPEnext">开始学习</a>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["curQue", "handleNNPEnext"],
  data() {
    //这里存放数据
    return {
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let paraArr = [];
      curQue.detail.wordsList.forEach((sItem, sIndex) => {
        let obj = {
          pinyin: sItem.pinyin,
          chs: sItem.chs,
          isShow: true,
        };
        paraArr.push(obj);
      });
      this.$set(_this.curQue.detail, "resArr", paraArr);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.NPC-courseStart {
  width: 100%;
  background: #e35454;
  color: rgba(255, 255, 255, 0.85);
  padding: 40px;
  h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: normal;
    text-align: center;
    font-family: "robot";
    margin: 0;
    &.hanzi {
      font-family: "FZJCGFKTK";
    }
  }
  .item-content {
    text-align: center;
    padding: 24px 0;
  }
  .content-con {
    font-size: 40px;
    line-height: 48px;
    font-family: "FZJCGFKTK";
    margin: 0;
    &.content-con-small {
      font-size: 16px;
    }
  }
  .content-en {
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    font-family: "robot";
    display: block;
  }
  .con-box {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    .con-item {
      text-align: center;
      padding: 0 3px;
    }
    span {
      display: block;
    }
    .pinyin {
      font-family: "GB-PINYINOK-B";
      font-size: 24px;
      line-height: 32px;
      height: 32px;
      &.noFont {
        font-family: initial;
      }
    }
    .synthesis-box {
      display: flex;
    }
  }
  .item-intro-box {
    min-height: 272px;
    .item-intro {
      background: #c43c3c;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      padding: 24px;
      font-size: 16px;
      line-height: 150%;
      white-space: pre-wrap;
      word-break: break-word;
      text-align: justify;
      min-height: 96px;
    }
  }
  .start-btn {
    width: 160px;
    height: 40px;
    box-shadow: 0px 8px 24px rgba(103, 0, 0, 0.25);
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
    margin: 24px auto;
    color: #e35454;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    line-height: 40px;
    &:active {
      background: rgba(255, 255, 255, 0.85);
    }
  }
}
.NPC-Big-Book-preview-green {
  .NPC-courseStart {
    background: #24b99e;
    .item-intro {
      background: #1fa189;
    }
    .start-btn {
      color: #24b99e;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-courseStart {
    background: #bd8865;
    .item-intro {
      background: #a37557;
    }
    .start-btn {
      color: #bd8865;
    }
  }
}
</style>