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" v-if="curQue.con">
            {{curQue.con}}
        </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{
        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;
        min-height: 272px;
    }
    .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);
        }
    }
}
.NNPE-Big-Book-preview-green{
    .NPC-courseStart{
        background: #24B99E;
        .item-intro{
            background: #1FA189;
        }
        .start-btn{
            color: #24B99E;
        }
    }
}
.NNPE-Big-Book-preview-brown{
    .NPC-courseStart{
        background: #BD8865;
        .item-intro{
            background: #A37557;
        }
        .start-btn{
            color: #BD8865;
        }
    }
}
</style>