vue 中秋节博饼游戏，摇骰子游戏，兼容移动端跟pc

 如果报错把图片骰子等换成自己的图片，我这里是本地图片

<template>
    <div class="home" v-cloak>
        <!-- 头部logo -->
        <div class="BoCake-top">
            <img src="../assets/logo.png" />
            <span>微星</span>
        </div>
        <!-- 头像、名字、次数等 -->
        <div class="BoCake-userinfo">
            <div class="userinfo-logo">
                <img src="../assets/logo.png" alt="">
            </div>
            <div class="userinfo-name">
                <span>liumour</span>
                <span style="margin-top: 2px;">剩余体力：999</span>
            </div>
            <div class="ranking">
                <span>等级：状元</span>
                <span style="margin-top: 2px;">排名：1</span>
            </div>
        </div>
        <!-- 骰子区域 -->
        <div class="dice">
            <div class="dice-box1">
                <div class="box" style="margin-left: 30px;">
                    <div v-for="(item,index) in imgUrl" :key="index">
                        <img v-show="bannerIndex==index" :src="item.img">
                    </div>
                </div>
                <div class="box" style="margin-right: 30px;">
                    <div v-for="(item,index) in imgUrl2" :key="index">
                        <img v-show="bannerIndex2==index" :src="item.img">
                    </div>
                </div>
            </div>
            <div class="dice-box2">
                <div class="box">
                    <div v-for="(item,index) in imgUrl3" :key="index">
                        <img v-show="bannerIndex3==index" :src="item.img">
                    </div>
                </div>
                <div class="box">
                    <div v-for="(item,index) in imgUrl4" :key="index">
                        <img v-show="bannerIndex4==index" :src="item.img">
                    </div>
                </div>
            </div>
            <div class="dice-box3">
                <div class="box" style="margin-left: 30px;">
                    <div v-for="(item,index) in imgUrl5" :key="index">
                        <img v-show="bannerIndex5==index" :src="item.img">
                    </div>
                </div>
                <div class="box" style="margin-right: 30px;">
                    <div v-for="(item,index) in imgUrl6" :key="index">
                        <img v-show="bannerIndex6==index" :src="item.img">
                    </div>
                </div>
            </div>
        </div>
        <!-- 摇骰子按钮 -->
        <div v-if="showNa" class="dice-start" @click="handlestart">
            <img src="../assets/ioc6.png" alt="">
            <span>摇骰子</span>
        </div>
        <div v-if="!showNa" class="dice-start">
            <img src="../assets/ioc6.png" alt="">
            <span>摇骰子</span>
        </div>
        <!-- 规则、奖品、排行 -->
        <div class="dice-prize">
            <div class="prize">
                <img class="guize" src="../assets/guize.png" alt="">
                <span>规则</span>
            </div>
            <div class="prize">
                <img class="liwu" src="../assets/liwu.png" alt="">
                <span>奖品</span>
            </div>
            <div class="prize">
                <img class="paihang" src="../assets/paihang.png" alt="">
                <span>排行</span>
            </div>
        </div>
        <!-- 遮罩层 -->
        <div v-if="mask==true" class="mask-layer">
            <!-- 弹出层内容块 -->
            <div class="mask-prize">
                <p>恭喜您！</p>
                <p>摇中了“状元”！</p>
                <p>获得100元饭票券一份</p>
                <div @click="maskClose">
                    关闭
                </div>
                <span>当前剩余2次</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                imgUrl: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl2: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl3: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl4: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl5: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl6: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                bannerIndex: 1,
                bannerIndex2: 3,
                bannerIndex3: 5,
                bannerIndex4: 4,
                bannerIndex5: 2,
                bannerIndex6: 0,
                setInter1: null, // 定时器
                mask: false,
                showNa: true, //防抖
            }
        },
        methods: {
            handlestart() { //开始
                this.showNa = false //防抖
                this.setInter1 = setInterval(() => {
                    this.bannerIndex++
                    this.bannerIndex2++
                    this.bannerIndex3++
                    this.bannerIndex4++
                    this.bannerIndex5++
                    this.bannerIndex6++
                    if (this.bannerIndex == this.imgUrl.length) {
                        this.bannerIndex = 0
                        this.bannerIndex2 = 0
                        this.bannerIndex3 = 0
                        this.bannerIndex4 = 0
                        this.bannerIndex5 = 0
                        this.bannerIndex6 = 0
                    }
                })
                setTimeout(() => {
                    clearInterval(this.setInter1) // 先将已有的计时器清除
                    //随机1-6点数
                    this.bannerIndex = Math.round(Math.random() * 5);
                    this.bannerIndex2 = Math.round(Math.random() * 5);
                    this.bannerIndex3 = Math.round(Math.random() * 5);
                    this.bannerIndex4 = Math.round(Math.random() * 5);
                    this.bannerIndex5 = Math.round(Math.random() * 5);
                    this.bannerIndex6 = Math.round(Math.random() * 5);
                    setTimeout(() => {
                        this.showNa = true
                        this.mask = true

                    }, 300)
                }, 1000)
            },
            maskClose() { //关闭中奖信息
                this.mask = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .home {
        position: relative;
        height: 100vh;
        overflow: hidden;
        background: url("../assets/bg.png") no-repeat;
        background-size: cover;
    }

    [v-cloak] {
        display: none !important;
    }

    .BoCake-top {
        width: 690px;
        margin-top: 20px;
        margin-left: 30px;
        margin-bottom: 55px;
        display: flex;

        align-items: center;

        img {
            width: 66px;
            height: 66px;
        }

        span {
            font-size: 34px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            color: #ffffff;
            letter-spacing: 0.6px;
            margin-left: 13px;
        }
    }

    .BoCake-userinfo {
        width: 630px;
        height: 126px;
        background-color: rgb(250 250 214 / 0.3);
        border-radius: 60px;
        margin: auto;
        display: flex;
        align-items: center;

        .userinfo-logo {
            width: 126px;
            height: 126px;
            background-color: #fffad6;
            border-radius: 50%;
            margin-left: -2px;

            img {
                width: 126px;
                height: 126px;
                border-radius: 50%;
            }
        }

        .userinfo-name {
            display: flex;
            flex-flow: column;
            margin-left: 25px;

            >span {
                font-size: 30px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.6px;
            }
        }

        .ranking {
            display: flex;
            flex-flow: column;
            margin-left: 60px;

            >span {
                font-size: 30px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.6px;
            }
        }
    }

    .dice {
        width: 510px;
        margin: 142px auto 0;
        display: flex;
        flex-flow: column;

        .dice-box1 {
            display: flex;
            justify-content: space-evenly;

            .box {
                width: 100px;
                height: 100px;
                position: relative;

                img {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                }

                div:nth-child(2) {
                    margin-left: 8px;
                }

                div:nth-child(4) {
                    margin-left: -2px;
                }

                div:nth-child(5) {
                    margin-right: 5px;
                }
            }
        }

        .dice-box2 {
            display: flex;
            justify-content: space-between;
            margin: 36px 0;

            .box {
                width: 100px;
                height: 100px;

                img {
                    width: 100px;
                    height: 100px;
                }

                div:nth-child(2) {
                    margin-left: -5px;
                }

                div:nth-child(3) {
                    margin-right: 5px;
                }

                div:nth-child(4) {
                    margin-left: 5px;
                }
            }
        }

        .dice-box3 {
            display: flex;
            justify-content: space-evenly;

            .box {
                width: 100px;
                height: 100px;

                img {
                    width: 100px;
                    height: 100px;
                }

                div:nth-child(2) {
                    margin-left: 2px;
                }

                div:nth-child(3) {
                    margin-right: 2px;
                }

                div:nth-child(4) {
                    margin-left: -6px;
                }
            }
        }
    }

    .dice-start {
        width: 280px;
        height: 72px;
        border: 2px solid #f9fabe;
        border-radius: 38px;
        margin: 180px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 42px;
            height: 42px;
            margin-right: 15px;
        }

        span {
            font-size: 36px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            color: #f9fabe;
            letter-spacing: 0.6px;
        }
    }

    .dice-prize {
        width: 680px;
        height: 70px;
        margin: 65px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .prize {
            width: 172px;
            height: 60px;
            border: 2px solid #f9fabe;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                margin-right: 10px;
            }

            .guize {
                width: 24px;
                height: 28px;
            }

            .liwu {
                width: 32px;
                height: 28px;
            }

            .paihang {
                width: 28px;
                height: 26px;
            }

            span {
                font-size: 24px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.5px;
            }
        }
    }

    // 遮罩层
    .mask-layer {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgb(000 000 000 /0.5);
        left: 0;
        top: 0;
        z-index: 999;

        .mask-prize {
            width: 630px;
            height: 400px;
            background: #ffdf9b;
            border-radius: 40px;
            margin: 500px auto 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;

            p {
                font-size: 44px;
                font-family: PingFang SC, PingFang SC-Regular;
                color: #624300;
                letter-spacing: 0.88px;
                margin-bottom: 10px;
            }

            div {
                width: 320px;
                line-height: 84px;
                background: #1d171b;
                border-radius: 42px;
                text-align: center;
                font-size: 36px;
                font-family: PingFang SC, PingFang SC-Regular;
                color: #ffffff;
                letter-spacing: 0.75px;
            }

            span {
                margin-top: 6px;
                font-size: 32px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: center;
                color: #624300;
                letter-spacing: 0.64px;
            }
        }
    }
</style>