<template>
  <div>
    <div class="light-back"></div>
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="dot">
        <div class="dot-one"></div>
        <div class="dot-two"></div>
      </div>
      <div class="car-box"></div>
      <div :style="styleData.contentDiv" class="contentDiv">
        <div class="congratulations-text"></div>
        <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>
              <span v-if="giftBagData.prizeData[0].prizeType == '101' || giftBagData.prizeData[0].prizeType == '102'"
                :style="styleData.prizeTypeDiv" class="unit">元</span>
              <span v-else-if="giftBagData.prizeData[0].prizeType == '1'" :style="styleData.prizeTypeDiv"
                class="unit">个</span>
            </span> -->
            <span class="unit">{{ giftBagData.prizeData[0].prizeTypeName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tem999a-btn" @click="btnClick"></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: 3.51rem !important;
  height: 5.08rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.tem999a-btn {
  position: absolute;
  width: 4.25rem;
  height: 0.83rem;
  display: block;
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/94182/38/44575/6176/65bc521eF23854871/11dde878fe71655d.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50% !important;
  margin-left: -2.125rem !important;
  top: calc(50% + 1.9rem);
  animation: example4 3s ease-in-out infinite;
}
.light-back {
  position: absolute;
  left: -1.66rem;
  width: 6.83rem;
  height: 7.23rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/249072/1/4208/159303/65bc521eF37ed3461/9e479adcc25b6baa.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  left: 50% !important;
  margin-left: -3.415rem;
  top: calc(50% - 4.5rem);
  animation: example5 3s ease-in-out infinite;
}
.congratulations-text {
  position: absolute;
  width: 5.66rem;
  height: 1.09rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/102138/16/39104/48617/65bc521eF0c0008d2/4eb21844f3b32fe4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: -1.3rem;
}
.dot {
  animation: example1 3s ease-in-out infinite;
}
.dot-one {
  position: absolute;
  width: 0.84rem;
  height: 0.81rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/106853/10/46310/9770/65bc521fFc4a53171/473cbd39e407e769.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  left: -0.9rem;
  top: 1.05rem;
}
.dot-two {
  position: absolute;
  width: 1.08rem;
  height: 1.24rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/131950/37/41477/13521/65bc521fFdda4cfe8/60eafd12d34eb124.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  right: -0.55rem;
  top: 1.14rem;
}
.car-box {
  position: absolute;
  width: 5.18rem;
  height: 3.42rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/173467/18/42229/149933/65bc9e3cF5b8de34d/202bfae0d8942fa3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  right: -0.75rem;
  top: 1.3rem;
  animation: example2 3s ease-in-out infinite;
}
.contentDiv {
  padding-top: 0.3rem !important;
  animation: example1 3s ease-in-out infinite;
}
.priceInfo {
  span {
    font-size: 0.81rem;
    background: linear-gradient(180deg, #ff6f97, #f90f2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.unit {
  vertical-align: bottom;
  font-size: 0.41rem;
  background: linear-gradient(180deg, #ff6f97, #f90f2f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes example1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes example2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes example3 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes example4 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  65% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes example5 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    transform: rotateZ(26deg);
  }
  65% {
    opacity: 1;
    transform: rotateZ(46deg);
  }
  70% {
    opacity: 1;
    transform: rotateZ(56deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(66deg);
  }
}
.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>
