<template>
    <div class="niudanjiDrawContentC" ref="niudanji" :style="styleData.niudanjiDrawContentC"
        @click="styleClick('click', 'niudanji')" @mousemove="styleClick('mousemove', 'niudanji')"
        @mouseout="styleClick('mouseout')">

        <div :style="styleData.ndjImg">
            <!-- 玻璃框 -->
            <div :style="styleData.bezel"></div>
            <div class="myCanvas" width="471px" height="412px" v-if="showmyCanvas" :style="styleData.myCanvas">
                <img v-for="(item, index) in itemImg" :style="styleData.itemImg" :id="'snow' + (index + 1)"
                    :class="start ? 'snow' + (index + 1) : ''" :key="index" :src="item.img" />
            </div>
            <div :style="styleData.restDrawCountStyle" class="aa">
                <div>您还有<span :style="styleData.restDrawCountSpan">{{ restDrawCount }}</span>次机会</div>
            </div>
            <div :style="styleData.start" :class="styleData.start.className" @click.stop="startPlay"></div>
            <div :style="styleData.hand" class="smallBig" @click.stop></div>
            <!-- <div v-if="isDraw" :style="styleData.showDrawStyle">
        <img :style="styleData.showDrawImageStyle" :src="drawImage" />
      </div> -->
        </div>
        <div :style="styleData.goodsImg" v-if="styleData.goodsImg"></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 v-else></div>
        </div>
    </div>
</template>
<script>
import buttonCom from '../../basisComponent/button/buttonCom.vue';
import dialogMore1 from '../../basisComponent/button/dialogMore1.vue';
import { removeUrlShareUserId } from "../../../util/tools";

import {
    PrizeResultPopComService,
    NoPrizeResultPopComService,
    TaskPopComService1,
    SharePopComService,
    ShopPopComService,
    FollowSkuPopComService
} from '../../../util/comCreate.js';
import store from '../../../store/store.js';
import { TaskPopComServiceNew2 } from '../../../util/hdzxtcomCreate.js';
import apis1 from '../../../util/apis1.js';
let { drawPrize, startDraw, niudanjiRequest, lotteryCenter } = apis1;

export default {
    props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
    components: {
        buttonCom,
        dialogMore1
    },
    data() {
        return {
            isDraw: false,//是否中奖
            drawImage: "",//隐式奖品图片
            showShare: false, // pop页显示分享任务
            showFoll: false, // pop页显示关注任务
            showBuy: false, // pop页显示购买商品任务
            pointFoll: 1, // pop页显示分享任务
            pointShare: 3, // pop页显示关注任务
            pointBuy: 2, // pop页显示购买商品任务
            showmyCanvas: true,

            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: '//img10.360buyimg.com/imgzone/jfs/t1/208663/6/22695/25939/62a9428dEd1a79495/a0af5aa5fefd6558.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/208663/6/22695/25939/62a9428dEd1a79495/a0af5aa5fefd6558.png'
                },

                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/60730/12/18896/25825/62a9428dE36d87087/64d527c7ec0c3d73.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/60730/12/18896/25825/62a9428dE36d87087/64d527c7ec0c3d73.png'
                },

                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/153906/17/23919/25588/62a942a1E3267a2fa/731e3aa03c976a9d.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/153906/17/23919/25588/62a942a1E3267a2fa/731e3aa03c976a9d.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/39647/32/18459/24741/62a9428dEae8791e0/723a411bee05acb0.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/39647/32/18459/24741/62a9428dEae8791e0/723a411bee05acb0.png'
                },

                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/198710/35/25101/25802/62a9428dE2ba4c7e4/c0491003fd1d39a4.png'
                },
                {
                    img: '//img10.360buyimg.com/imgzone/jfs/t1/56744/18/19493/31255/62a9428dE20638411/6a3908f371304e22.png'
                }

            ], //扭蛋机图片
            eggTwisterAnimationFlag: false
        };
    },
    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.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
            if (xhyFollowSkuTask) {
                this.initData(true);
            }
        });
        if (this.datas.itemImg) {
            this.itemImg = this.datas.itemImg
        }
        this.initData(false);
    },

    methods: {
        //点击可修改位置的方法
        styleClick(type, refName) {
            if (this.isWebClick) {
                //传值给B端
                let byValue = {
                    modifyContent: this.modifyContent,
                    refName: refName,
                    styleData: this.styleData,
                    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;
            }

            TaskPopComServiceNew2.create(
                this.isTemplate,
                this.showShare,
                this.showFoll,
                this.showBuy,
                this.restDrawCount,
                this.pointFoll,
                this.pointShare,
                this.pointBuy,
                this.task,
                this.styleData,
                this.datas,
                submit => {
                    TaskPopComServiceNew2.close();
                    if (submit) {
                        this.initData(false);
                    }
                }
            );

        },


        async initData(isCallBack) {
            var datasAll = this.templateData;
            if (this.isTemplate == true) {
                this.moreShow = 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];
                                }
                            }
                        }
                    }
                    this.restDrawCount = datasAll.basicTask.taskList[(datasAll.basicTask.taskList.length - 1)].rule.freeChargeRule.sendNum
                }
                for (var i = 0; i < this.prizeListData.length; i++) {
                    this.prizeListData[i].angle = 0;
                }
                this.$set(this.prizeListData);


            } else {
                if (this.styleData.eggTwisterAnimation) {
                    this.eggTwisterAnimationFlag = true
                }
                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.showWinInfo == '0' || mainDatas.data.showWinInfo == '1') {
                        this.publicData.$emit('showWinInfo', mainDatas.data.showWinInfo);
                    }

                    if (mainDatas.data.taskList.length > 0) {
                        this.moreShow = true;
                        // this.datas = mainDatas.data;
                        if (isCallBack) {
                            // mainDatas.data.taskList = mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO;
                            // console.log(mainDatas.data,'mainDatas.data')
                            this.publicData.$emit('taskCallBackData', mainDatas.data);
                        }
                        this.task = mainDatas.data.taskList;
                    }
                    lotteryCenter(taskDatas => {
                        if (taskDatas.data.showWinInfo == '0' || taskDatas.data.showWinInfo == '1') {
                            this.publicData.$emit('showWinInfo', taskDatas.data.showWinInfo);
                        }
                        console.log(taskDatas, '任务数据');
                        setTimeout(() => {
                            if (taskDatas.data.status == 1) {
                                this.$toast("助力成功");
                            } else if (taskDatas.data.status == 2) {
                                this.$toast("已助力");
                            } else if (taskDatas.data.status == 3) {
                                this.$toast("助力失败");
                            } else if (taskDatas.data.status == 4) {
                                this.$toast("自己不能给自己助力！");
                            } else if (taskDatas.data.status == 5) {
                                this.$toast("您已为其他好友助过力了~");
                            }
                        }, 500);
                        setTimeout(() => {
                            if (store.state.shareUserId) {
                                removeUrlShareUserId()
                            }
                        }, 800);
                    });
                });

                //请求接口
                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;
                                }, 2000);

                                console.log('奖品id', self.pIndex);
                                this.drawImage = this.itemImg[i].img;
                                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;
                            }, 2000);
                            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;
                        }, 2000);
                    }
                    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.publicData.$emit('prizeInit', true)
                //中奖
                this.isDraw = true;//中奖
                this.prizeResultData.datas = prizeData;
                PrizeResultPopComService.create(this.prizeResultData, initDatas, submit => {
                    PrizeResultPopComService.close();
                });
            }
            this.showmyCanvas = false;
            this.$nextTick(() => {
                this.showmyCanvas = true;
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.myCanvas {
    position: relative;
    left: 1.2rem;
    top: 1.06rem;
    border: none;
    width: 5.06rem;
    height: 5.06rem;
    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: 1.6rem;
    height: 1.6rem;
    position: absolute;
    bottom: 23px;
}

#snow1 {
    width: 1.98rem !important;
    height: 1.8rem !important;
    position: absolute;
    top: 1.2rem;
    left: 0.1rem;
    z-index: 10;
}

#snow2 {
    width: 1.95rem !important;
    height: 1.55rem !important;
    position: absolute;
    top: 1.45rem;
    left: 1.2rem;
    z-index: 9;
}

#snow3 {
    width: 1.34rem !important;
    height: 1.34rem !important;
    position: absolute;
    top: 1.66rem;
    left: 2.5rem;
    z-index: 8;
}

#snow4 {
    width: 1.51rem !important;
    height: 1.62rem !important;
    position: absolute;
    top: 0.98rem;
    left: 0.6rem;
    z-index: 7;
}

#snow5 {
    width: 1.33rem !important;
    height: 1.38rem !important;
    position: absolute;
    top: 1.22rem;
    left: 1.8rem;
    z-index: 6;
}

#snow6 {
    width: 1.36rem !important;
    height: 1.34rem !important;
    position: absolute;
    top: 1.26rem;
    left: 3.0rem;
    z-index: 5;
}

#snow7 {
    width: 1.92rem !important;
    height: 2.04rem !important;
    position: absolute;
    top: 0.16rem;
    left: 1.2rem;
    z-index: 4;
}

#snow8 {
    width: 1.33rem !important;
    height: 1.37rem !important;
    position: absolute;
    top: 0.83rem;
    left: 2.4rem;
    z-index: 3;
}

#snow9 {
    width: 1.58rem !important;
    height: 1.58rem !important;
    position: absolute;
    top: 0.62rem;
    left: 3.2rem;
    z-index: 2;
}

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

    25% {
        top: 0.5rem;
        left: 1.5rem;
    }

    50% {
        top: 1.5rem;
        left: 0.3rem;
    }

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

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

@keyframes snow1 {
    0% {
        top: 1.0rem;
        left: 0.1rem;
    }

    25% {
        top: 0.5rem;
        left: 1.6rem;
    }

    50% {
        top: 1.2rem;
        left: 3.0rem;
    }

    75% {
        top: 1.3rem;
        left: 1.5rem;
    }

    100% {
        top: 1.0rem;
        left: 0.1rem;
    }
}

@keyframes snow2 {
    0% {
        top: 1.2rem;
        left: 3.0rem;
    }

    25% {
        top: 1.4rem;
        left: 1.0rem;
    }

    50% {
        top: 0.4rem;
        left: 2.0rem;
    }

    75% {
        top: 1.5rem;
        left: 3.2rem;
    }

    100% {
        top: 1.2rem;
        left: 3.0rem;
    }
}

@keyframes snow3 {
    0% {
        top: 0.5rem;
        left: 2.0rem;
    }

    25% {
        top: 1.5rem;
        left: 3.5rem;
    }

    50% {
        top: 1.0rem;
        left: 0.5rem;
    }

    75% {
        top: 1.6rem;
        left: 2.5rem;
    }

    100% {
        top: 0.5rem;
        left: 2.0rem;
    }
}

@keyframes snow4 {
    0% {
        top: 1.2rem;
        left: 3.5rem;
    }

    25% {
        top: 0.6rem;
        left: 2.0rem;
    }

    50% {
        top: 1.3rem;
        left: 0.2rem;
    }

    75% {
        top: 0.8rem;
        left: 1.5rem;
    }

    100% {
        top: 1.2rem;
        left: 3.5rem;
    }
}

@keyframes snow5 {
    0% {
        top: 1.5rem;
        left: 0.5rem;
    }

    25% {
        top: 1.6rem;
        left: 2.5rem;
    }

    50% {
        top: 0.4rem;
        left: 3.5rem;
    }

    75% {
        top: 1.2rem;
        left: 1.5rem;
    }

    100% {
        top: 1.5rem;
        left: 0.5rem;
    }
}

@keyframes snow6 {
    0% {
        top: 0.8rem;
        left: 3.0rem;
    }

    25% {
        top: 1.5rem;
        left: 3.8rem;
    }

    50% {
        top: 1.6rem;
        left: 1.0rem;
    }

    75% {
        top: 0.6rem;
        left: 1.5rem;
    }

    100% {
        top: 0.8rem;
        left: 3.0rem;
    }
}

@keyframes snow7 {
    0% {
        top: 0.8rem;
        left: 1.5rem;
    }

    25% {
        top: 0.5rem;
        left: 0.5rem;
    }

    50% {
        top: 0.2rem;
        left: 2.0rem;
    }

    75% {
        top: 0.9rem;
        left: 3.0rem;
    }

    100% {
        top: 0.8rem;
        left: 1.5rem;
    }
}

@keyframes snow8 {
    0% {
        top: 0.3rem;
        left: 1.8rem;
    }

    25% {
        top: 1.2rem;
        left: 3.6rem;
    }

    50% {
        top: 1.6rem;
        left: 0.5rem;
    }

    75% {
        top: 1.0rem;
        left: 2.5rem;
    }

    100% {
        top: 0.3rem;
        left: 1.8rem;
    }
}

@keyframes snow9 {
    0% {
        top: 1.4rem;
        left: 0.5rem;
    }

    25% {
        top: 0.8rem;
        left: 2.5rem;
    }

    50% {
        top: 1.3rem;
        left: 3.5rem;
    }

    75% {
        top: 0.6rem;
        left: 1.5rem;
    }

    100% {
        top: 1.4rem;
        left: 0.5rem;
    }
}

.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 {
    position: absolute;
    bottom: 23px;
    left: 0px;
    animation-iteration-count: infinite;
    animation: snow1 1.8s linear infinite;
    -webkit-animation: snow1 1.8s linear infinite;
}

.snow2 {
    position: absolute;
    bottom: 23px;
    left: 0px;
    animation-iteration-count: infinite;
    animation: snow2 1.9s linear infinite;
    -webkit-animation: snow2 1.9s linear infinite;
}

.snow3 {
    position: absolute;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation: snow3 2s linear infinite;
    -webkit-animation: snow3 2s linear infinite;
}

.snow4 {
    position: absolute;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation: snow4 2.1s linear infinite;
    -webkit-animation: snow4 2.1s linear infinite;
}

.snow5 {
    position: absolute;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation: snow5 2.2s linear infinite;
    -webkit-animation: snow5 2.2s linear infinite;
}

.snow6 {
    position: absolute;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation: snow6 2.3s linear infinite;
    -webkit-animation: snow6 2.3s linear infinite;
}

.snow7 {
    position: absolute;
    bottom: 23px;
    left: 0px;
    animation-iteration-count: infinite;
    animation: snow7 1.7s linear infinite;
    -webkit-animation: snow7 1.7s linear infinite;
}

.snow8 {
    position: absolute;
    bottom: 23px;
    right: 0;
    animation-iteration-count: infinite;
    animation: snow8 1.7s linear infinite;
    -webkit-animation: snow8 1.7s linear infinite;
}

.snow9 {
    position: absolute;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation: snow9 2.2s linear infinite;
    -webkit-animation: snow9 2.2s 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 btnSmallBig {
    0% {
        transform: scaleY(1);
        transform-origin: 100% 100%;
    }

    100% {
        transform: scaleY(1.1);
        transform-origin: 100% 100%;
    }
}

@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;
}

.btnSmallBig {
    animation-name: btnSmallBig;
    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;
}

.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>
