<template>
  <div class="dzTemDivC">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="ui-content-box">
        <div class="prize-style">
          <span class="common-prize-bg">
            <span class="numStyle">
              <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>{{ giftBagData.prizeData[0].prizeTypeName }}</span>
          </span>
        </div>
      </div>
      <img class="decorations" src="//img10.360buyimg.com/imgzone/jfs/t1/33334/4/7384/6589/5cc177a1Eac58303e/27c49995bc1d77d9.png" />
      <div class="btnDiv" @click="btnClick()"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['styleData', 'giftBagData'],
  data() {
    return {};
  },
  created() {
    console.log(this.giftBagData, '定制礼包模板数据');
  },
  methods: {
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.dzTemDivC {
  .ui-content-box {
    padding-top: 4.6rem;
    .prize-style {
      text-align: center;
      background: linear-gradient(#fff, #edfdff, #b7f9ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 0.3rem;
      color: #e7cd80;
      .numStyle{
        font-size: 0.99rem;
      }
    }
  }
  .decorations {
    width: 6.1rem;
    height: 2.47rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2.8rem;
  }
  .btnDiv {
    width: 3.03rem;
    height: 0.63rem;
    margin-top: 0.4rem;
    display: inline-block;
    background-color: initial;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/31366/5/15423/14956/5cc177a1E8f05c1e7/86332d9ca92220c1.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
</style>
