<template>
  <div class="drawWinDivAll">
    <div class="conten" v-if="JSON.stringify(drawPrize) != '{}'">
      <p style="margin-top: 1.6rem; color: #fff">
        恭喜获得{{ drawPrize.rewardName }}
      </p>
      <img
        :style="{ width: drawPrize.sw + 'rem', height: drawPrize.sh + 'rem' }"
        :src="drawPrize.rewardImg"
      />
      <button
        :class="drawPrize.rewardType == 3 ? 'swbtn' : 'nobtn'"
        @click="toaddress(drawPrize)"
      ></button>
      <!-- <p class="textbtm">{{drawPrize.content}}</p> -->
    </div>
    <div v-else class="contenno">
      <button class="btn1" @click="drawstart"></button>
    </div>
    <div class="closeDiv" @click="tocolseDiv"></div>
  </div>
</template>

<script>
export default {
  props: ["drawPrize"],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    toaddress(vm) {
      if (vm.rewardType != 3) {
        this.$toast("已发放");
        return;
      }
      this.$emit("toaddress", vm);
    },
    drawstart() {
      this.$emit("drawstart");
    },
    tocolseDiv() {
      this.$emit("closeDiv");
    },
  },
};
</script>

<style lang='scss' scoped>
.drawWinDivAll {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/214262/20/24621/20314/639d5662E7364dee7/a8c21ad78bbc41dc.jpg");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .contenno {
    width: 7.21rem;
    height: 7.26rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/191246/37/30231/27985/63ac0ac3F3a39fcd3/8e65038ee68fb208.png");
    background-size: 100% 100%;
    margin-top: 0.8rem;
    .btn1 {
      width: 1.92rem;
      height: 0.57rem;
      background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/158938/29/33226/7267/63ac0ac3F3d01543c/c01319216e141c18.png");
      background-size: 100% 100%;
      margin-top: 6.1rem;
    }
  }
  .conten {
    width: 7.21rem;
    height: 7.26rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/59627/13/22921/24198/63abf5a7F3d14d018/cd9ddf72b6a37498.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 0.8rem;
    img {
      margin-top: 0.3rem;
      margin-bottom: 0.6rem;
    }
    .textbtm {
      font-size: 0.2rem;
      width: 4.1rem;
      position: absolute;
      bottom: 0.4rem;
      text-align: center;
    }
    .swbtn {
      width: 1.92rem;
      height: 0.57rem;
      background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/159337/6/33805/8449/63abf5a7F5a29c310/3ab55643cd2ae6f5.png");
      background-size: 100% 100%;
      position: absolute;
    bottom: 0.6rem;
    }
    .nobtn {
      width: 1.92rem;
      height: 0.57rem;
      background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/136487/30/32467/7387/63abf78cF04a79587/f0f7ddfa0613bf95.png");
      background-size: 100% 100%;
      position: absolute;
    bottom: 0.6rem;
    }
  }
  .closeDiv {
    width: 0.55rem;
    height: 0.55rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/62477/6/22306/1308/639ab13eEaa8fba40/455db7234cbaad08.png");
    background-size: 100% 100%;
    margin-top: 0.5rem;
  }
}
</style>
