TangJiaWanFeiYi/src/components/Interaction.vue

<template>
  <div class="interaction" v-show="isShowDialog && current.info.leftInfo[0]">
    <SerialFrames
      :frame-total-num="72"
      :frame-interval="45"
      :image-src-func="getImg"
      :auto-play="true"
      :repeat="true"
    />
    <Transition>
      <div class="dialog">
        <p v-for="item in current.info.leftInfo" :key="item">{{ item || '暂无' }}</p>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue"

const roleImg = utils.getImageUrl(`guide-role.png`)
const props = defineProps({
  list: Array,
  currentTimeIdx: Number
})

const current = computed(() => props.list[props.currentTimeIdx])

let timer = null
const isShowDialog = ref(true)

const getImg = (index) => {
  return utils.getImageUrl(`role/active/guide_${(index - 1).toString().padStart(5, '0')}.png`)
}


const handleShow = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
  isShowDialog.value = true
  timer = setTimeout(() => {
    isShowDialog.value = false
  }, current.value.info.voiceDuration * 1000);
}

defineExpose({
  handleShow
})
watch(current, () => {
  handleShow()
})

</script>

<style lang="scss" scoped>
.interaction {
  position: absolute;
  bottom: 0;
  left: 3rem;
  display: flex;
  pointer-events: none;
  .dialog {
    max-width: 30rem;
    background-color: rgba(255, 244, 220, 0.6);
    backdrop-filter: blur(20px);
    box-shadow: inset 0px 1px 3px 0px #FFF3D1;
    margin-left: -5rem;
    color: #514C41;
    padding: 1rem;
    font-size: 0.88rem;
    pointer-events: none;
    align-self: flex-start;
    >p{
      line-height: 1.5;
      text-indent: 1.76rem;
    }

    &::before {
      content: '';
      clip-path: polygon(100% 0, 70% 100%, 100% 50%);
      display: inline-block;
      width: 4rem;
      height: 2rem;
      background-color: rgba(255, 244, 220, 0.6);
      backdrop-filter: blur(20px);
      position: absolute;
      right: 99.9%;
      z-index: -1;
      bottom: -1rem;
    }
  }
}
</style>