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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes SelectTone" v-if="curQue">
      <ul>
          <li v-for="(item,index) in curQue.option" :key="index">
              <Audio
                    :mp3="
                    item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
                    :themeColor="themeColor"
                    class="audio-play"
                />
                <div v-html="item.con" class="con"></div>
                <a v-for="(itmes,indexs) in toneList" :key="indexs" :class="['tone-item',userSelect[index]===indexs?'active':'']" @click="handleClick(index,indexs)">
                    <img :src="itmes">
                </a>
          </li>
      </ul>
  </div>
</template>

<script>
import Audio from "../preview/components/AudioRed.vue"; // 音频播放
export default {
  components: {Audio},
  props: ["curQue","themeColor"],
  data() {
    return {
        toneList: [
            require('../../../assets/NPC/tone1.png'),
            require('../../../assets/NPC/tone2.png'),
            require('../../../assets/NPC/tone3.png'),
            require('../../../assets/NPC/tone4.png'),
            require('../../../assets/NPC/tone0.png')
        ],
        userSelect:[]
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
      // 处理数据
      handleData(){
          let _this = this
          _this.userSelect = []
          _this.curQue.option.forEach(item => {
              _this.userSelect.push('')
          });
      },
      handleClick(index,indexs){
          this.$set(this.userSelect,index,indexs)
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes{
    width: 100%;
    ul{
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        align-items: flex-start;
        li{
            width: 363px;
            background: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding: 8px 12px 8px 16px;
            margin: 8px 0;
            .audio-play{
                width: 16px;
                margin-right: 12px;
            }
            >div.con{
                font-size: 16px;
                line-height: 1.5;
                flex: 1;
                margin: 0;
            }
            a{
                margin-left: 8px;
                &.active{
                    background: #98D1EB;
                    border-radius: 4px;
                }
                img{
                    width: 24px;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.SelectTone.Big-Book-prev-Textdes{
    ul{
        li{
            div.con{
                margin: 0 ;
                >p{
                    margin: 0;
                }
            }
        }
    }
}
</style>