<template>
  <div>
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="flower-one"></div>
      <div class="flower-two"></div>
      <div :style="styleData.contentDiv" class="contentDiv">
        <div>
          <div :style="styleData.prizeDiv">
            <span class="priceInfo">
              <span
                v-if="giftBagData.prizeData[0].prizeType == '1' || giftBagData.prizeData[0].prizeType == '4'">{{ giftBagData.prizeData[0].beanNum }}</span>
              <span
                v-else-if="giftBagData.prizeData[0].prizeType == '101'">{{ giftBagData.prizeData[0].priceInfo }}</span>
              <span
                v-else-if="giftBagData.prizeData[0].prizeType == '102'">{{ giftBagData.prizeData[0].priceInfo }}</span>
            </span>
            <span class="unit">{{ giftBagData.prizeData[0].prizeTypeName }}</span>
          </div>

        </div>
      </div>
      <div class="tem999a-btn" @click="btnClick"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['styleData', 'giftBagData'],
  data() {
    return {};
  },
  created() { },
  methods: {
    //收下礼包
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.ui-modal-body {
  position: relative;
  width: 6.5rem !important;
  height: 7.88rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-image: url('https://interact.oss-cn-beijing.aliyuncs.com/%E5%BA%97%E9%93%BA%E7%A4%BC%E5%90%A8%E5%90%A8%E5%90%A8%E5%8C%85-2_03.gif') !important;
}
.contentDiv {
  padding-top: 3rem !important;
}
.tem999a-btn {
  position: absolute;
  width: 4.43rem;
  height: 1.09rem;
  display: block;
  background-image: url("https://interact.oss-cn-beijing.aliyuncs.com/3.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50% !important;
  margin-left: -2.125rem !important;
  bottom: 0.1rem;
}
.priceInfo {
  position: relative;
  z-index: 2;
  span {
    vertical-align: sub;
    font-size: 1.29rem;
    color: #ffd668;
  }
}
.unit {
  position: relative;
  z-index: 2;
  vertical-align: baseline;
  font-size: 0.81rem;
  color: #fff;
}
.videoStyle {
  position: absolute;
  background-color: initial;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 1;
  width: 6.5rem;
  height: 10rem;
  left: calc(50% - 3.25rem);
  top: calc(50% - 5rem);
}
</style>
