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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes" v-if="curQue">
    <div
      :class="item.site == 'left' ? 'left' : 'right'"
      v-for="(item, index) in curQue.option"
      :key="item.hanzi + index"
    >
      <template v-if="item.site == 'left'">
        <img
          v-if="item.img_list.length > 0"
          :src="item.img_list[0].url"
          alt=""
        />
        <div>
          <p>{{ item.hanzi }}</p>
          <div @click="playAudio(item.mp3_list[0], index)" class="audioList">
            <img src="../../../assets/adult/Dialogue-audio.png" alt="" />
            <span>3s</span>
            <audio
              :id="item.mp3_list[0].name + index"
              v-if="item.mp3_list.length > 0"
              :src="item.mp3_list[0].url"
            ></audio>
          </div>
          <div class="imglist">
            <img
              v-for="it in item.img_list"
              :key="it.id"
              :src="it.url"
              class="img"
            />
          </div>
        </div>
      </template>
      <template v-else>
        <div>
          <p>{{ item.hanzi }}</p>
          <div @click="playAudio(item.mp3_list[0], index)" class="audioList">
            <img src="../../../assets/adult/Dialogue-audio.png" alt="" />
            <span>3s</span>
            <audio
              :id="item.mp3_list[0].name + index"
              v-if="item.mp3_list.length > 0"
              :src="item.mp3_list[0].url"
            ></audio>
          </div>
          <div class="imglist">
            <img
              v-for="it in item.img_list"
              :key="it.id"
              :src="it.url"
              class="img"
            />
          </div>
        </div>
      </template>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curQue"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    playAudio(item, index) {
      let audioplay = document.getElementById(`${item.name}${index}`);
      audioplay.play();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log(this.curQue);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes {
  width: 1000px;
  > .left {
    margin-top: 16px;
    display: flex;
    > img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    > div {
      margin-left: 16px;
      padding: 16px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .audioList {
        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 5px;
        cursor: pointer;
        span {
          opacity: 0.4;
        }
      }
      .imglist {
        margin-top: 8px;
        img {
          margin-right: 2px;
        }
      }
    }
  }
  > .right {
    float: right;
    margin-top: 16px;
    display: flex;
    > img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    > div {
      margin-right: 16px;
      padding: 16px;
      background: #eff9ff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .audioList {
        width: 144px;
        height: 40px;
        background: #eff9ff;
        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 5px;
        cursor: pointer;
        span {
          opacity: 0.4;
        }
      }
      .imglist {
        margin-top: 8px;
        img {
          margin-right: 2px;
        }
      }
    }
  }
  .clear {
    clear: both;
  }
}
</style>