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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes" v-if="curQue">
    <div>
      <p v-if="curQue.con" v-html="curQue.con"></p>
      <p v-if="curQue.con" v-html="curQue.english"></p>
      <ul
        v-if="curQue.mp3_list && curQue.mp3_list.length > 0"
        class="audioList"
      >
        <li
          v-for="(item, index) in curQue.mp3_list"
          :key="item.id + index"
          @click="playAudio(item, index)"
        >
          <img src="../../../assets/adult/Dialogue-audio.png" alt="" />
          <span>3s</span>
          <audio
            :id="item.name + index"
            v-if="curQue.mp3_list.length > 0"
            :src="item.id"
          ></audio>
        </li>
      </ul>
      <ul v-if="curQue.img_list && curQue.img_list.length > 0" class="imglist">
        <li v-for="(item, index) in curQue.img_list" :key="item.id + index">
          <img :src="item.id" class="img" />
        </li>
      </ul>
    </div>
    <div v-if="curQue.judge" class="left">
      <el-radio v-model="curQue.judge" label="right">正确</el-radio>
      <el-radio v-model="curQue.judge" label="error">错误</el-radio>
      <el-radio v-model="curQue.judge" label="noSolution">无解</el-radio>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curQue"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    playAudio(item, index) {
      let audio = document.getElementById(`${item.name}${index}`);
      audio.play();
    },
  },
  //生命周期 - 创建完成（可以访问当前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 {
  display: flex;
  .left {
    display: flex;
    align-items: center;
    margin-left: 50px;
  }
  ul {
    list-style: none;
  }
  .imglist {
    display: flex;
    img {
      margin-left: 2px;
    }
  }
  .audioList {
    display: flex;
    > li {
      width: 144px;
      height: 40px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8px;
      img {
        width: 24px;
        height: 24px;
      }
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
.img {
  width: 200px;
}
</style>