<template>
  <div
    class="niudanjiDrawContentC"
    ref="niudanji"
    @click="styleClick('click', 'niudanji')"
    @mousemove="styleClick('mousemove', 'niudanji')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.ndjImg">
      <div class="myCanvas" width="471px" height="412px">
        <img
          v-for="(item, index) in itemImg"
          :id="'snow' + (index + 1)"
          :class="start ? 'snow' + (index + 1) : ''"
          :key="index"
          :src="item.img"
        />
      </div>
      <img
        :src="styleData.start.imageUrl"
        :style="styleData.start"
        @click="startPlay"
      />
      <img
        :src="styleData.hand.imageUrl"
        :style="styleData.hand"
        class="smallBig"
      />
    </div>
    <div class="draw-info">
      您今天还有
      <span class="fontSize1" style="color: rgb(255, 245, 127)">{{
        restDrawCount
      }}</span>
      次抽奖机会 <br />
    </div>
    <div class="f-tac draw-chance" style="margin-top: 0.2rem">
      <div
        class="f-ib"
        :style="styleData.drowChanceBtn"
        @click="dialogMore"
        v-if="moreShow"
      ></div>
    </div>
  </div>
</template>
<script>
import buttonCom from "../../basisComponent/button/buttonCom.vue";
import dialogMore1 from "../../basisComponent/button/dialogMore1.vue";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  TaskPopComService1,
  SharePopComService,
  ShopPopComService,
  FollowSkuPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
let { drawPrize, startDraw, niudanjiRequest } = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  components: {
    buttonCom,
    dialogMore1,
  },
  data() {
    return {
      current: -1, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
      count: 8, // 总共有多少个位置
      times: 0, // 转动跑格子次数,
      cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      // speed: 500, // 初始转动速度
      lampShow: false, //开始抽奖，灯光闪烁
      followShow: false, //关注店铺
      moreShow: false, //更多任务按钮
      showShare1: false, //
      showShare2: false, //
      showShare3: false, //
      showFoll: false,
      showBuy: false,
      pointFoll: 1, // pop页显示分享任务
      pointShare1: 3, // pop页显示关 注任务
      pointShare2: 3, // pop页显示关 注任务
      pointShare3: 3, // pop页显示关 注任务
      pointBuy: 2, // pop页显示购买商品任务
      timer: 0, // 转动定时器
      prize: 0, // 中奖位置，接口返回
      restDrawCount: 0,
      rotNum: 0, // 旋转圈数基数
      time: 5003, // 旋转时间
      endTime: "",
      startDisabled: false,
      task: {}, //任务列表
      styleDataOld: {},
      showImg:
        "https://img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
      prizeListData: [
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 2,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      backgroundDiv: {
        backgroundImage:
          "url(https://img10.360buyimg.com/imgzone/jfs/t15637/321/1962178342/2198/25ad4f94/5a7126dcNd107479f.png)",
      },
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      start: false, //判断小球是否动
      itemImg: [
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/91850/17/8384/6415/5e041bc8Ea20fe791/deddfe80967d6a15.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/109985/39/2171/5248/5e041bc7Ebd737995/384610cb2b1bf46d.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/90666/6/8309/6398/5e041bc7E02ccf936/e92d8af14a453d2f.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/89974/5/8298/5418/5e041bc7Ead0bacbb/4a0fc66f922ff246.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/91459/28/8311/4109/5e041bc7Ed3bd0e35/8bdd52bf99d146a5.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/91850/17/8384/6415/5e041bc8Ea20fe791/deddfe80967d6a15.png",
        },

        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/109985/39/2171/5248/5e041bc7Ebd737995/384610cb2b1bf46d.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/107308/31/2033/6747/5e041bc7Eb3114a62/ca9b607018c39331.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/90666/6/8309/6398/5e041bc7E02ccf936/e92d8af14a453d2f.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/89974/5/8298/5418/5e041bc7Ead0bacbb/4a0fc66f922ff246.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/91459/28/8311/4109/5e041bc7Ed3bd0e35/8bdd52bf99d146a5.png",
        },
        {
          img: "https://img10.360buyimg.com/imgzone/jfs/t1/93491/21/8300/6437/5e041bc7E1c611beb/132ffc9e959022a6.png",
        },
      ], //扭蛋机图片
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    if(this.isWebClick) {
      this.moreShow = true;
    }
    var golbalPlateStyle = 2;
    this.timer = setInterval(() => {
      // console.log(golbalPlateStyle);
      if (golbalPlateStyle === 1) {
        golbalPlateStyle = 2;
        this.backgroundDiv.backgroundImage =
          "url(https://img10.360buyimg.com/imgzone/jfs/t12637/103/1737108222/2226/82017388/5a7126dcN3d308426.png)";
      } else if (golbalPlateStyle === 2) {
        golbalPlateStyle = 1;
        this.backgroundDiv.backgroundImage =
          "url(https://img10.360buyimg.com/imgzone/jfs/t15637/321/1962178342/2198/25ad4f94/5a7126dcNd107479f.png)";
      }
    }, 500);
    this.initData();
  },

  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    dialogMore() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      TaskPopComService1.create(
        "非常遗憾，您与大奖擦肩而过~",
        this.showShare1,
        this.showShare2,
        this.showShare3,
        this.showFoll,
        this.showBuy,
        this.restDrawCount,
        this.pointFoll,
        this.pointShare1,
        this.pointShare2,
        this.pointShare3,
        this.pointBuy,
        (submit) => {
          console.log("cccc" + submit);
          TaskPopComService1.close();
          if (submit == 2) {
            this.followSku();
          }
          if (submit == 3) {
            this.openShop();
          }
          if (submit == 4) {
            this.openShare(4);
          }
          if (submit == 5) {
            this.openShare(5);
          }
          if (submit == 6) {
            this.openShare(6);
          }
        }
      );
    },

    followSku() {
      var data = this.task.taskFollowSkuWaresVO;
      sessionStorage.setItem("taskShare", "taskShare");
      FollowSkuPopComService.create(data, this.restDrawCount, (submit) => {
        console.log("cccc" + submit);
        sessionStorage.setItem("taskShare", "");
        FollowSkuPopComService.close();
        this.restDrawCount = this.restDrawCount + submit;
      });
    },
    openShare(value) {
      var data;
      var title = "";
      if (value == 4) {
        data = this.task.shareSkuRule;
        title = "分享指定商品";
      } else if (value == 5) {
        data = this.task.shareShopRule;
        title = "分享指定店铺";
      } else {
        data = this.task.shareActiveRule;
        title = "分享指定活动";
      }
      sessionStorage.setItem("taskShare", "taskShare");
      SharePopComService.create(title, data, this.restDrawCount, (submit) => {
        sessionStorage.setItem("taskShare", "");
        this.restDrawCount = this.restDrawCount + submit;
        SharePopComService.close();
      });
    },

    openShop() {
      var data = this.task.taskOrderWaresVO;
      sessionStorage.setItem("taskShare", "taskShare");
      ShopPopComService.create(data, this.restDrawCount, (submit) => {
        sessionStorage.setItem("taskShare", "");
        ShopPopComService.close();
        this.restDrawCount = this.restDrawCount + submit;
      });
    },

    async initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        if (datasAll) {
          var prizeList = datasAll.draw.prizeList;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
        }
        for (var i = 0; i < this.prizeListData.length; i++) {
          this.prizeListData[i].angle = 0;
        }
        this.$set(this.prizeListData);

        this.restDrawCount = 0;
      } else {
        sessionStorage.setItem("taskShare", "");
        await niudanjiRequest((mainDatas) => {
          this.count = mainDatas.data.count;
          console.log(mainDatas.data);
          if (mainDatas.data.involvementFlag == 1) {
            this.followShow = true;
          }
          if (
            mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO ||
            mainDatas.data.taskActivityInfoVO.shareSkuRule ||
            mainDatas.data.taskActivityInfoVO.shareShopRule ||
            mainDatas.data.taskActivityInfoVO.taskOrderWaresVO ||
            mainDatas.data.taskActivityInfoVO.shareActiveRule
          ) {
            this.moreShow = true;

            // if (mainDatas.data.taskActivityInfoVO.shareSkuRule
            // || mainDatas.data.taskActivityInfoVO.shareShopRule
            // || mainDatas.data.taskActivityInfoVO.shareActiveRule
            // ) {
            //   this.showShare = true;

            //   if (mainDatas.data.taskActivityInfoVO.shareSkuRule) {
            //     this.pointShare =
            //       mainDatas.data.taskActivityInfoVO.shareSkuRule.taskPosition;
            //   }
            //   if (mainDatas.data.taskActivityInfoVO.shareShopRule) {
            //     this.pointShare =
            //       mainDatas.data.taskActivityInfoVO.shareShopRule.taskPosition;
            //   }
            //   if (mainDatas.data.taskActivityInfoVO.shareActiveRule) {
            //     this.pointShare =
            //       mainDatas.data.taskActivityInfoVO.shareActiveRule.taskPosition;
            //   }
            // }
            if (mainDatas.data.taskActivityInfoVO.shareSkuRule) {
              this.showShare1 = true;
              this.pointShare1 =
                mainDatas.data.taskActivityInfoVO.shareSkuRule.taskPosition;
            }
            if (mainDatas.data.taskActivityInfoVO.shareShopRule) {
              this.showShare2 = true;
              this.pointShare2 =
                mainDatas.data.taskActivityInfoVO.shareShopRule.taskPosition;
            }
            if (mainDatas.data.taskActivityInfoVO.shareActiveRule) {
              this.showShare3 = true;
              this.pointShare3 =
                mainDatas.data.taskActivityInfoVO.shareActiveRule.taskPosition;
            }

            if (mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO) {
              this.showFoll = true;
              this.pointFoll =
                mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO.taskPosition;
            }
            if (mainDatas.data.taskActivityInfoVO.taskOrderWaresVO) {
              this.showBuy = true;
              this.pointBuy =
                mainDatas.data.taskActivityInfoVO.taskOrderWaresVO.taskPosition;
            }
            this.task = mainDatas.data.taskActivityInfoVO;
          }
        });

        //请求接口
        drawPrize((initdatas) => {
          console.log(initdatas);
          let prizeList = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          this.$set(this.prizeListData);
        });
      }
    },

    //点击开始抽奖
    move() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }

      if (this.restDrawCount == 0) {
        this.$toast("没有抽奖次数,无法抽奖");
        return;
      }
      // 开始抽奖
      if (this.start) {
        this.$toast("正在抽奖中，请勿重复点击");
      } else {
        this.start = true;
        startDraw((initDatas) => {
          console.log("中奖信息", initDatas);
          if (initDatas.resp_code == 50009) {
            this.$toast("活动已结束");
            return;
          }
          console.log("this查看", this);
          if (initDatas.resp_code != 0) {
          }

          const self = this;
          console.log("initDatas.data" + initDatas.data);
          if (initDatas.data) {
            // 奖品id没有匹配上的时候
            var noSelect = true;
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                self.pIndex = i;
                console.log("中奖id", self.pIndex);
                this.prize = self.prizeListData[self.pIndex].position - 1;
                setTimeout(() => {
                  self.fulfillHandle(
                    self.prizeListData[self.pIndex],
                    initDatas.data
                  );
                  self.publicData.$emit(
                    "isNotyFiceWinnerReorrd",
                    true,
                    self.isTemplate
                  );
                  self.start = false;
                }, 5000);

                console.log("奖品id", self.pIndex);

                noSelect = false;
                break;
              }
            }
            if (noSelect) {
              for (var i = 0; i < self.prizeListData.length; i++) {
                if (!self.prizeListData[i].prizeType) {
                  this.prize = self.prizeListData[i].position - 1;
                }
              }
              setTimeout(() => {
                self.fulfillHandle("未中奖");
                this.start = false;
              }, 5000);
              this.isStartPlay = false;
            }
          } else {
            for (var i = 0; i < self.prizeListData.length; i++) {
              if (!self.prizeListData[i].prizeType) {
                this.prize = self.prizeListData[i].position - 1;
              }
            }
            setTimeout(() => {
              self.fulfillHandle("未中奖");
              this.start = false;
            }, 5000);
          }
          this.restDrawCount = this.restDrawCount - 1;
        });
      }
    },

    open() {
      this.start = false;
    },

    // 点击开始,请求接口抽奖
    async startPlay() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }

      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }

      if (this.restDrawCount == 0) {
        this.$toast("没有抽奖次数,无法抽奖");
        return;
      }
      this.move();
      // console.log('1231237')
      // this.isStartPlay = true;
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      // this.isStartPlay = false;
      // var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log("self");
      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.myCanvas {
  position: relative;
  left: 1.2rem;
  top: 2.8rem;
  border: none;
  width: 4.75rem;
  height: 4.5rem;
  animation: mymove 5s infinite;
  -moz-animation: mymove 5s infinite; /* Firefox */
  -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
  -o-animation: mymove 5s infinite; /* Opera */
}

#snow {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
}
#snow1 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  left: 0px;
}
#snow2 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  right: 0;
}
#snow3 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  left: 37px;
}
#snow4 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  left: 79px;
}
#snow5 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  right: 38px;
}
#snow6 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  right: 80px;
}

#snow7 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 50px;
  right: 173px;
}
#snow8 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 50px;
  right: 15px;
}
#snow9 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 53px;
  right: 89px;
}
#snow10 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 63px;
  right: 54px;
}
#snow11 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 62px;
  right: 129px;
}
#snow12 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 65px;
  right: 195px;
}

@keyframes snow {
  0% {
    top: 0px;
    left: 0px;
  }

  25% {
    top: 50px;
    left: 150px;
  }

  50% {
    top: 150px;
    left: 30px;
  }

  75% {
    top: 20px;
    left: 0px;
  }

  100% {
    top: 0px;
    left: 0px;
  }
}
@keyframes snow1 {
  0% {
    top: 0px;
    left: 30px;
  }

  25% {
    top: 169px;
    left: 183px;
  }

  50% {
    top: 69px;
    left: 200px;
  }

  75% {
    top: 167;
    left: 5px;
  }

  100% {
    top: 0px;
    left: 30px;
  }
}
@keyframes snow2 {
  0% {
    top: 110px;
    left: 97px;
  }

  25% {
    top: 10px;
    left: 205px;
  }

  50% {
    top: 178px;
    left: 102px;
  }

  75% {
    top: 20px;
    left: 10px;
  }

  100% {
    top: 110px;
    left: 97px;
  }
}
@keyframes snow3 {
  0% {
    top: 50px;
    left: 50px;
  }

  25% {
    top: 120px;
    left: 150px;
  }

  50% {
    top: 170px;
    left: 101px;
  }

  75% {
    top: 20px;
    left: 0px;
  }

  100% {
    top: 50px;
    left: 50px;
  }
}
@keyframes snow4 {
  0% {
    top: 0px;
    left: 30px;
  }

  25% {
    top: 169px;
    left: 183px;
  }

  50% {
    top: 69px;
    left: 200px;
  }

  75% {
    top: 167;
    left: 5px;
  }

  100% {
    top: 0px;
    left: 30px;
  }
}
@keyframes snow5 {
  0% {
    top: 110px;
    left: 97px;
  }

  25% {
    top: 10px;
    left: 205px;
  }

  50% {
    top: 178px;
    left: 102px;
  }

  75% {
    top: 20px;
    left: 10px;
  }

  100% {
    top: 110px;
    left: 97px;
  }
}
@keyframes snow6 {
  0% {
    top: 50px;
    left: 50px;
  }

  25% {
    top: 120px;
    left: 150px;
  }

  50% {
    top: 170px;
    left: 101px;
  }

  75% {
    top: 20px;
    left: 0px;
  }

  100% {
    top: 50px;
    left: 50px;
  }
}

@keyframes snow7 {
  0% {
    top: 0px;
    left: 30px;
  }

  25% {
    top: 169px;
    left: 183px;
  }

  50% {
    top: 69px;
    left: 200px;
  }

  75% {
    top: 167;
    left: 5px;
  }

  100% {
    top: 0px;
    left: 30px;
  }
}
@keyframes snow8 {
  0% {
    top: 110px;
    left: 97px;
  }

  25% {
    top: 10px;
    left: 205px;
  }

  50% {
    top: 178px;
    left: 102px;
  }

  75% {
    top: 20px;
    left: 10px;
  }

  100% {
    top: 110px;
    left: 97px;
  }
}
@keyframes snow9 {
  0% {
    top: 50px;
    left: 50px;
  }

  25% {
    top: 120px;
    left: 150px;
  }

  50% {
    top: 170px;
    left: 101px;
  }

  75% {
    top: 20px;
    left: 0px;
  }

  100% {
    top: 50px;
    left: 50px;
  }
}
@keyframes snow10 {
  0% {
    top: 0px;
    left: 30px;
  }

  25% {
    top: 169px;
    left: 183px;
  }

  50% {
    top: 69px;
    left: 200px;
  }

  75% {
    top: 167;
    left: 5px;
  }

  100% {
    top: 0px;
    left: 30px;
  }
}
@keyframes snow11 {
  0% {
    top: 110px;
    left: 97px;
  }

  25% {
    top: 10px;
    left: 205px;
  }

  50% {
    top: 178px;
    left: 102px;
  }

  75% {
    top: 20px;
    left: 10px;
  }

  100% {
    top: 110px;
    left: 97px;
  }
}
@keyframes snow12 {
  0% {
    top: 50px;
    left: 50px;
  }

  25% {
    top: 120px;
    left: 150px;
  }

  50% {
    top: 170px;
    left: 101px;
  }

  75% {
    top: 20px;
    left: 0px;
  }

  100% {
    top: 50px;
    left: 50px;
  }
}
.snow {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow 1s linear infinite;
  -webkit-animation: snow 1s linear infinite;
}
.snow1 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  left: 0px;
  animation-iteration-count: infinite;
  animation: snow1 0.8s linear infinite;
  -webkit-animation: snow1 0.8s linear infinite;
}
.snow2 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  right: 0;
  animation-iteration-count: infinite;
  animation: snow2 0.9s linear infinite;
  -webkit-animation: snow2 0.9s linear infinite;
}
.snow3 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow3 1s linear infinite;
  -webkit-animation: snow3 1s linear infinite;
}
.snow4 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow4 1.1s linear infinite;
  -webkit-animation: snow4 1.1s linear infinite;
}
.snow5 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow5 1.2s linear infinite;
  -webkit-animation: snow5 1.2s linear infinite;
}
.snow6 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow6 1.3s linear infinite;
  -webkit-animation: snow6 1.3s linear infinite;
}

.snow7 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  left: 0px;
  animation-iteration-count: infinite;
  animation: snow7 0.7s linear infinite;
  -webkit-animation: snow7 0.7s linear infinite;
}
.snow8 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  right: 0;
  animation-iteration-count: infinite;
  animation: snow8 0.7s linear infinite;
  -webkit-animation: snow8 0.7s linear infinite;
}
.snow9 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow9 1.2s linear infinite;
  -webkit-animation: snow9 1.2s linear infinite;
}
.snow10 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow10 0.8s linear infinite;
  -webkit-animation: snow10 0.8s linear infinite;
}
.snow11 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow11 1s linear infinite;
  -webkit-animation: snow11 1s linear infinite;
}
.snow12 {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  bottom: 23px;
  animation-iteration-count: infinite;
  animation: snow12 1.5s linear infinite;
  -webkit-animation: snow12 1.5s linear infinite;
}

@keyframes smallBig {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
// .shopDivClass {
//   position: absolute;
//   top: 1rem;
//   color: #ffffff;
//   left: 2.5rem;
// }
.smallBig {
  animation-name: smallBig;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
// .hand {
//   width: 1.31rem;
//   height: 1.07rem;
//   position: absolute;
//   right: 0.64rem;
//   top: 8.8rem;
//   z-index: 10;
// }
// #start {
//   position: absolute;
//   z-index: 3;
//   width: 1.79rem;
//   height: 1.79rem;
//   right: 1.44rem;
//   top: 7.69rem;
// }
// .ndjImg{
//   background: url(https://img10.360buyimg.com/imgzone/jfs/t1/145401/18/8998/339218/5f680edfEa240917a/a78ead2361d8e2c0.png) no-repeat;
//   background-size: 100%;
//   width: 7.5rem;
//   height: 11.43rem;
// }
.draw-start span {
  color: #fff;
  font-size: 0.2rem;
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  margin-left: -0.45rem;
}
.active {
  .mask {
    width: 1.64rem;
    height: 1.69rem;
    position: absolute;
    border-radius: 10px;
    background-color: #fff0bd;
    opacity: 0.6;
  }
}
.niudanjiDrawContentC {
  text-align: center;
  margin-top: 0.5rem;
  position: absolute;
  top: 1rem;
}

.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

.draw-item.active {
  z-index: 8;
}

.draw-start {
  position: absolute;
  top: 2.26rem;
  left: 2.34rem;
  width: 1.64rem;
  height: 1.69rem;
  background: url(https://img10.360buyimg.com/imgzone/jfs/t27337/183/2617377802/1907/52f64fef/5c05f07cNb3d7c12b.png)
    no-repeat;
  background-size: 100%;
}
.draw-isdraw-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.35rem;
}
.draw-item-mtext {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1.69rem;
  font-size: 0.24rem;
  color: #333;
}
.draw-item {
  position: absolute;
  z-index: 2;
  width: 1.64rem;
  height: 1.69rem;
  background: url(https://img10.360buyimg.com/imgzone/jfs/t17275/289/374056995/546/c3d782c8/5a7126dcNb5a90721.png)
    no-repeat;
  background-size: 100%;
}
.prizeIcon {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1rem;
}

img {
  border: 0;
  max-width: 100%;
}
.icon-jifen {
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/82425/7/320/5494/5ce7a2dbE0cf643aa/d798e181a8e294af.png)
    no-repeat;
  background-size: 100%;
}
.icon-common {
  display: block;
  width: 1.1rem;
  height: 0.8rem;
  margin: 0.2rem auto 0;
  margin-top: 0.1em;
}

.draw-info {
  color: #ffffff;
  text-align: center;
  font-size: 0.3rem;
}
.draw-item-name {
  position: absolute;
  width: 90%;
  top: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.2rem;
  color: #e65596;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-item-name1 {
  position: absolute;
  width: 90%;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-info-drawTime {
  width: 1.16rem;
  height: 1.16rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  background: #fc3c2c;
  font-size: 0.6rem;
  color: #fff;
  text-align: center;
  line-height: 1.16rem;
  margin-top: 0.1rem;
}
.lookDrawCondition {
  color: #fff;
  font-size: 0.24rem;
  z-index: 2;
  margin: -0.6rem auto 0;
  text-align: center;
}
.seeShiwuPrizes {
  color: #000 !important;
  line-height: 0.3rem;
}
// .draw-chance .drow-chance-btn {
//   position: relative;
//   overflow: hidden;
//   width: 3.5rem;
//   height: 1rem;
//   line-height: 0.72rem;
//   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t20218/109/472562343/14078/12e90d2b/5b0e256eNfd19da8f.png);
//   background-size: 100%;
//   background-repeat: no-repeat;
// }
.f-tac {
  text-align: center;
}
.f-ib {
  display: inline-block;
  vertical-align: middle;
}
</style>
