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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
      <div class="item-box">
          <div class="item" v-for="(item,index) in curQue.option" :key="index">
              <p v-if="item.pinyin">{{item.pinyin}}</p>
              <div class="con-box">
                  <template v-if="item.imgOrText=='text'">
                      <template v-if="item.con">
                            <div
                                :key="conindex"
                                class="strockplay"
                                v-for="(conItem, conindex) in item.con"
                                @click="writeWord(conItem,item.pinyin)"
                            >
                                <Strockplayredline
                                    :Book_text="conItem"
                                    :playStorkes="true"
                                    :targetDiv="'bwcHanziIntp' + conItem + conindex"
                                />
                                <div
                                    class="bwc-line"
                                    v-if="conindex < item.con.length - 1"
                                ></div>
                            </div>
                      </template>
                      <template v-else>
                          <div class="blank-item">

                          </div>
                      </template>
                </template>
                <template v-else>
                    <div class="img-box" v-for="(imgItem,imgIndex) in item.img_list" :key="imgIndex">
                        <el-image
                            :src="imgItem.url"
                            fit="scale-down"
                            class="img_url"
                        >
                            <div slot="placeholder" class="image-slot">
                                <img src="../../../assets/common/icon-imgloading.png" />
                            </div>
                        </el-image>
                    </div>
                </template>
              </div>
          </div>
      </div>
      <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
        <Practice :changePraShow="changePraShow" :cur="curData" />
      </div>
  </div>
</template>

<script>
import Strockplayredline from "../preview/components/Strockplayredline.vue";
import Practice from "../preview/components/Practice.vue";
export default {
  components: {Strockplayredline,Practice},
  props: ["curQue"],
  data() {
    return {
        isPraShow: false,
        curData: null,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData(){
        let _this = this
        
    },
    changePraShow() {
      this.isPraShow = false;
    },
    writeWord(words, pinyin) {
      this.isPraShow = true;
      this.curData = {
        stem: [
          {
            con: words ? words : "",
            pinyin: pinyin && pinyin ? pinyin : "",
            mp3_url: "",
          },
        ],
      };
    },
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NewWordShow{
    width: 100%;
    padding: 0 4px;
    background: #F7F7F7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    .item-box{
        display: flex;
        flex-flow: wrap;
        padding-bottom: 8px;
        .item{
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-flow: wrap;
            margin: 9px 20px;
            box-sizing: border-box;
            width: 66px;
            cursor: pointer;
            >p{
                color: #2C2C2C;
                font-size: 14px;
                line-height: 130%;
                font-family: 'GB-PINYINOK-B';
                width: 100%;
                text-align: center;
                margin: 0 0 8px 0;
            }
            .strockplay {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                width: 64px;
                height: 64px;
            }
            .strockplayRedInner{
                width: 64px;
                height: 64px;
            }
            .bwc-line {
                width: 1px;
                height: 62px;
                background: #BF875E;
            }
        }
        .con-box{
            display: flex;
            border: 1px solid #BF875E;
            border-radius: 8px;
            overflow: hidden;
            .img-box{
                background: url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
                background-size: cover;
                .img_url{
                    width: 64px;
                    height: 64px;
                }
            }
            .blank-item{
                width: 64px;
                height: 64px;
            }
        }
    }
    .practiceBox {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.19);
        padding-top: 32px;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        &.practiceBoxStrock {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 0px;
        }
    }
}
</style>
<style lang="scss">
.NewWordShow{
    .strock-play-box{
        width: 16px;
        height: 16px;
        right: -1px;
        background: url('../../../assets/NPC/strock-play-yellow-click.png') center no-repeat;
        background-size: cover;
    }
    .character-target-div{
        background-color: initial;
    }
}
</style>