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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes NNPE-single" v-if="curQue">
    <div v-for="(itemI,indexI) in curQue" :key="indexI">
        <div class="stem-box">
            <b v-if="itemI.topicNumber">{{itemI.topicNumber}}.</b>
            <p v-if="itemI.topic.con" :class="[/^[\u4e00-\u9fa5]/.test(itemI.topic.con)?'hasCn':'']">{{itemI.topic.con}}</p>
            <Audio
                :mp3="
                itemI.topic.mp3_list.length > 0 ? itemI.topic.mp3_list[0].url : ''"
                class="audio-play"
            />
            <div v-for="(itemss,indexss) in itemI.topic.img_list" :key="indexss">
                <el-image
                    :src="itemss.url"
                    fit="scale-down"
                    class="img_url"
                >
                    <div slot="placeholder" class="image-slot">
                        <img src="../../../assets/common/icon-imgloading.png" />
                    </div>
                </el-image>
            </div>
        </div>
        <ul v-if="itemI.option">
        <li v-for="(item, index) in itemI.option" :key="index" :class="['option'+itemI.numberList.con,single[indexI]===index?'active':'']">
            <el-radio
                v-model="single[indexI]"
                :label="index"
                style="margin-right: 0"
            >
                <span v-if="item.number">{{item.number}}.</span>
                <p :class="[item.font=='py'?'hasPinyin':item.font=='en'?'hasEn':item.font=='cn'?'hasCn':'']">{{ item.con }}</p>
                <div v-for="(itemss,indexss) in item.img_list" :key="indexss">
                    <el-image
                        :src="itemss.url"
                        fit="scale-down"
                        class="img_urls"
                    >
                        <div slot="placeholder" class="image-slot">
                            <img src="../../../assets/common/icon-imgloading.png" />
                        </div>
                    </el-image>
                </div>
            </el-radio>
            <!-- <template v-if="curQue.type == 'checkbox'">
            <el-checkbox v-model="single" :label="index">
                {{ item.con }}
            </el-checkbox>
            </template> -->
        </li>
        </ul>
        <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" v-if="itemI.IsRecord"/>
    </div>
    
  </div>
</template>

<script>
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import Audio from "../preview/components/AudioRed.vue"; // 音频播放
export default {
  components: {Soundrecord, Audio},
  props: ["curQue"],
  data() {
    return {
        single:[]
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData(){
        let _this = this
        _this.curQue.forEach(item => {
            _this.single.push(null)
        });
    },
    handleWav(data) {
        
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.handleData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
ul {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: start;
  flex-flow: wrap;
  li {
    padding: 8px 16px;
    border-radius: 4px;
    &:hover,&.active{
        background: #fff;
    }
    &.option1{
        width: 100%;
    }
    &.option2{
        width: 50%;
    }
    &.option3{
        width: 33.33%;
    }
    &.option4{
        width: 25%;
    }
    .el-radio{
        width: 100%;
    }
  }
}
.Big-Book-prev-Textdes{
    width: 100%;
    background: #F7F7F7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 24px;
    border-radius: 8px;
    >div{
        margin-bottom: 16px;
    }
    .stem-box{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 8px;
        .audio-play{
            width: 24px;
            margin-left: 4px;
        }
        b{
            font-size: 16px;
            font-weight: normal;
            line-height: 24px;
        }
        p{
            margin: 0 0 0 8px;
            color: #000000;
            font-size: 16px;
            line-height: 24px;
        }
    }
    .hasCn{
        font-family: 'FZJCGFKTK';
    }
    .hasPinyin{
        font-family: 'GB-PINYINOK-B';
    }
    .hasEn{
        font-family: 'robot';
    }
    .luyin-box{
        width: 200px;
        height: 32px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
        padding: 8px 12px;
        margin-top: 16px;
    }
    .img_url{
        width: 380px;
        height: 265px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
        margin-left: 24px;
    }
    .img_urls{
        margin-left: 5px;
        width: 100%;
        height: 221px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
    }
}
</style>
<style lang="scss">
.NNPE-single{
    .el-radio{
        display: flex;
        align-items: flex-start;
    }
    .el-radio__label{
        color: #000;
        font-size: 16px;
        line-height: 150%;
        font-weight: normal;
        display: flex;
        align-items: flex-start;
    }
    .el-radio__input.is-checked+.el-radio__label{
        color: #000;
    }
    .el-radio__inner::after{
        width: 8px;
        height: 8px;
    }
    .el-radio__label{
        span{
            font-family: 'FZJCGFKTK';
            margin-right: 4px;
        }
        p{
            margin: 0;
        }
    }
    .el-radio__inner{
        width: 16px;
        height: 16px;
        margin-top: 4px;
        margin-right: 2px;
    }
}
</style>