<template>
  <x-prompt :visible="visible">
    <div class="head">礼物道具明细</div>
    <div class="body">
      <div class="gift-list__wrap">
        <template v-for="(gift, i) in list">
          <p class="gift-item"
             :key="i">
            <img :src="gift.icon"
                 alt="">
            <span>“{{gift.name_desc}}”<i>{{gift.cost}}</i>书币*{{gift.num}}</span>
          </p>
        </template>
      </div>
    </div>
  </x-prompt>
</template>

<script>
import prompt from "../prompt.vue";
export default {
  components: { "x-prompt": prompt }
};
</script>

<style lang="scss" scoped>
.promptBox .body .gift-list__wrap {
  height: auto;
  line-height: inherit;

  .gift-item {
    width: 65%;
    margin: 0 auto;
    font-size: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      width: 0.68rem;
      height: 0.68rem;
      margin-right: 0.2rem;
    }

    span {
      font-size: 0.24rem;
      color: #666;

      i {
        font-style: normal;
        color: #ef5952;
        font-weight: bold;
      }
    }

    &:not(:last-child) {
      margin-bottom: 0.14rem;
    }
  }
}
</style>
