diff --git a/.prettierrc.json b/.prettierrc.json
index 5adf1d3..ffa860c 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +1,7 @@
-{
-  "printWidth": 100,
-  "singleQuote": true,
-  "semi": false,
-  "endOfLine": "lf",
-  "htmlWhitespaceSensitivity": "ignore"
-}
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "ignore"
+}
diff --git a/src/pages/turntable/index/index.scss b/src/pages/turntable/index/index.scss
index ae3eb8e..08bd859 100644
--- a/src/pages/turntable/index/index.scss
+++ b/src/pages/turntable/index/index.scss
@@ -1,555 +1,556 @@
-body {
-    line-height: 1;
-}
-
-.page {
-    background-image: url('../static/bg.png');
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    height: 100dvh;
-    overflow: hidden;
-    position: relative;
-
-    .header {
-        margin-top: 30px;
-        display: flex;
-        justify-content: space-between;
-
-        .left-box {
-            width: 378px;
-            height: 40px;
-            background: linear-gradient(90deg, #d19116 65%, #330706 95%);
-
-            .text {
-                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-                -webkit-background-clip: text;
-                color: transparent;
-                font-size: 25px;
-                font-weight: bold;
-            }
-        }
-
-        .right-box {
-            display: flex;
-
-            .btn {
-                background-size: 100% 100%;
-                width: 149px;
-                height: 46px;
-
-                &:active {
-                    animation: btnClick 0.1s ease-in-out;
-                }
-            }
-
-            .tz-btn {
-                background-image: url('../static/tz_btn.png');
-                transform-origin: center center;
-            }
-
-            .kj-btn {
-                background-image: url('../static/kj_btn.png');
-                transform-origin: center center;
-                margin-left: 10px;
-            }
-        }
-    }
-
-    .user-box {
-        width: 646px;
-        height: 115px;
-        background: rgba(98, 98, 98, 0.3);
-        border-radius: 30px;
-        margin: 35px auto;
-        position: relative;
-        backdrop-filter: blur(10px);
-
-        .avatar-box {
-            position: absolute;
-            left: -5%;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 120px;
-            height: 120px;
-
-            .bg {
-                background-image: url('../static/avatar_border.png');
-                background-size: 100% 100%;
-                border-radius: 50%;
-                width: 120px;
-                height: 120px;
-                animation: bgRevolve 10s linear infinite;
-                transform-origin: center;
-            }
-
-            .avatar {
-                position: absolute;
-                width: 92px;
-                height: 92px;
-                border-radius: 50%;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
-
-        .user-info {
-            position: absolute;
-            left: 100px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-            -webkit-background-clip: text;
-            color: transparent;
-
-            .name {
-                font-size: 30px;
-                font-weight: bold;
-            }
-
-            .jf {
-                margin-top: 20px;
-                font-size: 28px;
-            }
-        }
-
-        .dz-box {
-            position: absolute;
-            right: 160px;
-            top: 50%;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-
-            .dz-bg {
-                background-image: url('../static/dz.png');
-                background-size: 100% 100%;
-                width: 55px;
-                height: 55px;
-            }
-
-            .text {
-                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-                -webkit-background-clip: text;
-                color: transparent;
-                font-weight: bold;
-            }
-        }
-
-        .rule-btn {
-            position: absolute;
-            right: -8%;
-            top: 45%;
-            transform: translateY(-50%);
-            background-image: url('../static/rule_btn.png');
-            background-size: 100% 100%;
-            width: 173px;
-            height: 176px;
-            transform-origin: center center;
-
-            &:active {
-                animation: ruleBtnClick 0.1s ease-in-out;
-            }
-        }
-    }
-
-    .kj-box {
-        text-align: center;
-        margin-top: -10px;
-
-        .title {
-            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-            -webkit-background-clip: text;
-            color: transparent;
-            font-size: 40px;
-            font-weight: bold;
-        }
-
-        .num-box {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 10px;
-
-            .item {
-                background-image: url('../static/num.png');
-                background-size: 100% 100%;
-                width: 72px;
-                height: 72px;
-                text-align: center;
-                line-height: 72px;
-                font-weight: bold;
-                color: #b2150b;
-            }
-
-            .item:nth-child(1) {
-                color: #000;
-            }
-
-            .item:nth-child(2) {
-                color: #000;
-            }
-        }
-    }
-
-    .turntable-box {
-        position: relative;
-        height: 670px;
-        overflow: hidden;
-
-        .star {
-            position: absolute;
-            animation: starFlashing 1s ease-in-out infinite alternate;
-        }
-
-        .star-1 {
-            left: 100px;
-            width: 139px;
-            height: 171px;
-            background-image: url('../static/1-1.png');
-            background-size: 100% 100%;
-        }
-
-        .star-2 {
-            top: 100px;
-            width: 205px;
-            height: 251px;
-            background-image: url('../static/1-2.png');
-            background-size: 100% 100%;
-        }
-
-        .star-3 {
-            right: 50px;
-            width: 205px;
-            height: 251px;
-            background-image: url('../static/2-2.png');
-            background-size: 100% 100%;
-        }
-
-        .star-4 {
-            top: 200px;
-            right: 0;
-            width: 140px;
-            height: 171px;
-            background-image: url('../static/2-1.png');
-            background-size: 100% 100%;
-        }
-
-        .turntable-wrap {
-            background-image: url('../static/turntable_bg.png');
-            background-size: 100% 100%;
-            width: 650px;
-            height: 650px;
-            position: relative;
-            border-radius: 50%;
-            transform-origin: center center;
-            left: 50%;
-            top: 20px;
-            transform: translateX(-50%);
-            overflow: hidden;
-            //animation: turntableRevolve 5s linear infinite;
-
-            .light {
-                .lightItem {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    margin: 0 auto;
-                    width: 10px;
-                    height: 100%;
-                    border-radius: 50%;
-                    transform-origin: center center;
-
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        top: 4px;
-                        left: 0;
-                        right: 0;
-                        margin: 0 auto;
-                        width: 15px;
-                        height: 15px;
-                        border-radius: 50%;
-                        box-sizing: border-box;
-                    }
-                }
-
-                .lightItem:nth-of-type(even):before {
-                    background: transparent;
-                    animation: white-to-yellow 1.5s linear infinite;
-                }
-
-                .lightItem:nth-of-type(odd):before {
-                    background: #fefc87;
-                    animation: white-to-yellow 1.5s linear reverse infinite;
-                }
-            }
-
-            .turntable {
-                position: absolute;
-                width: 530px;
-                height: 530px;
-                border-radius: 50%;
-                background: url('../static/turntable_bg_1.png') no-repeat 100% 100%;
-                background-size: contain;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%) rotate(0deg);
-                border: 1px solid #625933;
-
-                .prize {
-                    position: absolute;
-                    width: 300px;
-                    height: 300px;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%) rotate(-200deg);
-
-                    .item {
-                        position: absolute;
-                        width: 150px;
-                        height: 150px;
-                        border-radius: 50%;
-                        color: #000;
-                        text-align: center;
-                        transform-origin: right bottom;
-
-                        &:nth-child(1) {
-                            top: -10px;
-                            transform: rotate(70deg);
-                        }
-
-                        &:nth-child(3) {
-                            top: 10px;
-                            left: 10px;
-                            transform: rotate(190deg);
-                        }
-
-                        &:nth-child(5) {
-                            top: 10px;
-                            left: -12px;
-                            transform: rotate(295deg);
-                        }
-
-                        .img {
-                            display: block;
-                            width: 100px;
-                            height: 100px;
-                            transform: rotate(-45deg) scale(1.1);
-                        }
-
-                        .icon {
-                            position: absolute;
-                            background-image: url('../static/dz.png');
-                            background-size: 100% 100%;
-                            width: 50px;
-                            height: 50px;
-                            transform: rotate(-45deg) scale(1.6);
-                            top: -10px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .bet-btn {
-            position: absolute;
-            background-image: url('../static/bet_btn.png');
-            background-size: 100% 100%;
-            width: 150px;
-            height: 150px;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-
-            //&:active {
-            //  animation: betBtnClick .1s ease-in-out;
-            //}
-        }
-
-        .pointer {
-            position: absolute;
-            background-image: url('../static/pointer.png');
-            background-size: 100% 100%;
-            width: 47px;
-            height: 111px;
-            top: 15px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
-
-    .countdown-box {
-        margin-top: 50px;
-        background-image: url('../static/countdown_bg.png');
-        background-size: 100% 100%;
-        width: 750px;
-        height: 96px;
-        text-align: center;
-        line-height: 96px;
-
-        .title {
-            font-size: 38px;
-            font-weight: bold;
-            color: #b81801;
-            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
-        }
-    }
-
-    .footer-box {
-        width: 100%;
-        margin-top: 10%;
-        display: flex;
-        justify-content: space-evenly;
-
-        .item {
-            background-size: 100% 100%;
-            width: 194px;
-            height: 73px;
-            display: flex;
-            align-items: center;
-
-            .icon {
-                background-image: url('../static/dz.png');
-                background-size: 100% 100%;
-                width: 55px;
-                height: 56px;
-                margin: auto 15px;
-            }
-
-            .name {
-                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-                -webkit-background-clip: text;
-                -webkit-text-stroke: 2px #000;
-                color: transparent;
-                font-size: 33px;
-                font-weight: bold;
-            }
-        }
-
-        .item-active {
-            background-image: url('../static/dz_active.png');
-        }
-
-        .item-no-active {
-            background-image: url('../static/dz_opt.png');
-        }
-    }
-
-    #lottie {
-        position: fixed;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.8);
-
-        .lottie-text {
-            position: absolute;
-            top: 59%;
-            left: 50%;
-            transform: translateX(-50%);
-            color: #b81801;
-            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
-            font-size: 80px;
-            font-weight: bold;
-        }
-
-        .lottie-bg {
-            position: absolute;
-            left: 50%;
-            bottom: 5%;
-            transform: translateX(-50%);
-            background-image: url('../static/img_0.png');
-            background-size: 100% 100%;
-            // width: 700px;
-            height: 300px;
-            animation: lottie .3s linear forwards;
-            text-align: center;
-            line-height: 310px;
-            overflow: hidden;
-
-            .lottie-num {
-                color: #b81801;
-                text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
-                font-size: 60px;
-                font-weight: bold;
-            }
-        }
-    }
-}
-
-@keyframes btnClick {
-    from {
-        transform: scale(1);
-    }
-
-    to {
-        transform: scale(1.1);
-    }
-}
-
-@keyframes betBtnClick {
-    from {
-        transform: translate(-50%, -50%) scale(1);
-    }
-
-    to {
-        transform: translate(-50%, -50%) scale(1.1);
-    }
-}
-
-@keyframes ruleBtnClick {
-    from {
-        transform: scale(1) translateY(-50%);
-    }
-
-    to {
-        transform: scale(1.1) translateY(-50%);
-    }
-}
-
-@keyframes bgRevolve {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes starFlashing {
-    from {
-        transform: scale(1);
-    }
-
-    to {
-        transform: scale(1.1);
-    }
-}
-
-@keyframes turntableRevolve {
-    from {
-        transform: translateX(-50%) rotate(0deg);
-    }
-    to {
-        transform: translateX(-50%) rotate(360deg);
-    }
-}
-
-@keyframes white-to-yellow {
-    0% {
-        background: transparent;
-    }
-    100% {
-        background: #fefc87;
-    }
-}
-
-@keyframes lottie {
-    0% {
-        width: 0;
-    }
-    100% {
-        width: 700px;
-    }
-}
+body {
+    line-height: 1;
+}
+
+.page {
+    background-image: url('../static/bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    height: 100dvh;
+    overflow: hidden;
+    position: relative;
+
+    .header {
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        .left-box {
+            width: 378px;
+            height: 40px;
+            background: linear-gradient(90deg, #d19116 65%, #330706 95%);
+
+            .text {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                color: transparent;
+                font-size: 25px;
+                font-weight: bold;
+            }
+        }
+
+        .right-box {
+            display: flex;
+
+            .btn {
+                background-size: 100% 100%;
+                width: 149px;
+                height: 46px;
+
+                &:active {
+                    animation: btnClick 0.1s ease-in-out;
+                }
+            }
+
+            .tz-btn {
+                background-image: url('../static/tz_btn.png');
+                transform-origin: center center;
+            }
+
+            .kj-btn {
+                background-image: url('../static/kj_btn.png');
+                transform-origin: center center;
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .user-box {
+        width: 646px;
+        height: 115px;
+        background: rgba(98, 98, 98, 0.3);
+        border-radius: 30px;
+        margin: 35px auto;
+        position: relative;
+        backdrop-filter: blur(10px);
+
+        .avatar-box {
+            position: absolute;
+            left: -5%;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 120px;
+            height: 120px;
+
+            .bg {
+                background-image: url('../static/avatar_border.png');
+                background-size: 100% 100%;
+                border-radius: 50%;
+                width: 120px;
+                height: 120px;
+                animation: bgRevolve 10s linear infinite;
+                transform-origin: center;
+            }
+
+            .avatar {
+                position: absolute;
+                width: 92px;
+                height: 92px;
+                border-radius: 50%;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        .user-info {
+            position: absolute;
+            left: 100px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+            -webkit-background-clip: text;
+            color: transparent;
+
+            .name {
+                font-size: 30px;
+                font-weight: bold;
+            }
+
+            .jf {
+                margin-top: 20px;
+                font-size: 28px;
+            }
+        }
+
+        .dz-box {
+            position: absolute;
+            right: 160px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            align-items: center;
+
+            .dz-bg {
+                background-image: url('../static/dz.png');
+                background-size: 100% 100%;
+                width: 55px;
+                height: 55px;
+            }
+
+            .text {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                color: transparent;
+                font-weight: bold;
+            }
+        }
+
+        .rule-btn {
+            position: absolute;
+            right: -8%;
+            top: 45%;
+            transform: translateY(-50%);
+            background-image: url('../static/rule_btn.png');
+            background-size: 100% 100%;
+            width: 173px;
+            height: 176px;
+            transform-origin: center center;
+
+            &:active {
+                animation: ruleBtnClick 0.1s ease-in-out;
+            }
+        }
+    }
+
+    .kj-box {
+        text-align: center;
+        margin-top: -10px;
+
+        .title {
+            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+            -webkit-background-clip: text;
+            color: transparent;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        .num-box {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+
+            .item {
+                background-image: url('../static/num.png');
+                background-size: 100% 100%;
+                width: 72px;
+                height: 72px;
+                text-align: center;
+                line-height: 72px;
+                font-weight: bold;
+                color: #b2150b;
+            }
+
+            .item:nth-child(1) {
+                color: #000;
+            }
+
+            .item:nth-child(2) {
+                color: #000;
+            }
+        }
+    }
+
+    .turntable-box {
+        position: relative;
+        height: 670px;
+        overflow: hidden;
+
+        .star {
+            position: absolute;
+            animation: starFlashing 1s ease-in-out infinite alternate;
+        }
+
+        .star-1 {
+            left: 100px;
+            width: 139px;
+            height: 171px;
+            background-image: url('../static/1-1.png');
+            background-size: 100% 100%;
+        }
+
+        .star-2 {
+            top: 100px;
+            width: 205px;
+            height: 251px;
+            background-image: url('../static/1-2.png');
+            background-size: 100% 100%;
+        }
+
+        .star-3 {
+            right: 50px;
+            width: 205px;
+            height: 251px;
+            background-image: url('../static/2-2.png');
+            background-size: 100% 100%;
+        }
+
+        .star-4 {
+            top: 200px;
+            right: 0;
+            width: 140px;
+            height: 171px;
+            background-image: url('../static/2-1.png');
+            background-size: 100% 100%;
+        }
+
+        .turntable-wrap {
+            background-image: url('../static/turntable_bg.png');
+            background-size: 100% 100%;
+            width: 650px;
+            height: 650px;
+            position: relative;
+            border-radius: 50%;
+            transform-origin: center center;
+            left: 50%;
+            top: 20px;
+            transform: translateX(-50%);
+            overflow: hidden;
+            //animation: turntableRevolve 5s linear infinite;
+
+            .light {
+                .lightItem {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    margin: 0 auto;
+                    width: 10px;
+                    height: 100%;
+                    border-radius: 50%;
+                    transform-origin: center center;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: 4px;
+                        left: 0;
+                        right: 0;
+                        margin: 0 auto;
+                        width: 15px;
+                        height: 15px;
+                        border-radius: 50%;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .lightItem:nth-of-type(even):before {
+                    background: transparent;
+                    animation: white-to-yellow 1.5s linear infinite;
+                }
+
+                .lightItem:nth-of-type(odd):before {
+                    background: #fefc87;
+                    animation: white-to-yellow 1.5s linear reverse infinite;
+                }
+            }
+
+            .turntable {
+                position: absolute;
+                width: 530px;
+                height: 530px;
+                border-radius: 50%;
+                // background: url('../../../static/wu.png') no-repeat;
+                // background-size: contain;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%) rotate(0deg);
+
+                .prize {
+                    position: absolute;
+                    width: 300px;
+                    height: 300px;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%) rotate(-200deg);
+
+                    .item {
+                        position: absolute;
+                        width: 150px;
+                        height: 150px;
+                        border-radius: 50%;
+                        color: #000;
+                        text-align: center;
+                        transform-origin: right bottom;
+
+                        &:nth-child(1) {
+                            top: -10px;
+                            transform: rotate(70deg);
+                        }
+
+                        &:nth-child(2) {
+                            top: -10px;
+                            left: -10px;
+                            transform: rotate(-60deg);
+                        }
+
+                        &:nth-child(3) {
+                            top: 10px;
+                            left: 10px;
+                            transform: rotate(190deg);
+                        }
+
+                        .img {
+                            display: block;
+                            width: 100px;
+                            height: 100px;
+                            transform: rotate(-45deg) scale(1.1);
+                        }
+
+                        .icon {
+                            position: absolute;
+                            background-image: url('../static/dz.png');
+                            background-size: 100% 100%;
+                            width: 50px;
+                            height: 50px;
+                            transform: rotate(-45deg) scale(1.6);
+                            top: -10px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .bet-btn {
+            position: absolute;
+            background-image: url('../static/bet_btn.png');
+            background-size: 100% 100%;
+            width: 150px;
+            height: 150px;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            //&:active {
+            //  animation: betBtnClick .1s ease-in-out;
+            //}
+        }
+
+        .pointer {
+            position: absolute;
+            background-image: url('../static/pointer.png');
+            background-size: 100% 100%;
+            width: 47px;
+            height: 111px;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .countdown-box {
+        margin-top: 30px;
+        background-image: url('../static/countdown_bg.png');
+        background-size: 100% 100%;
+        width: 750px;
+        height: 96px;
+        text-align: center;
+        line-height: 96px;
+
+        .title {
+            font-size: 38px;
+            font-weight: bold;
+            color: #b81801;
+            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+        }
+    }
+
+    .footer-box {
+        width: 100%;
+        margin-top: 5%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        .item {
+            background-size: 100% 100%;
+            width: 300px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .icon {
+                background-image: url('../static/dz.png');
+                background-size: 100% 100%;
+                width: 70px;
+                height: 70px;
+                margin: auto 15px;
+            }
+
+            .name {
+                background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
+                -webkit-background-clip: text;
+                -webkit-text-stroke: 2px #000;
+                color: transparent;
+                font-size: 50px;
+                font-weight: bold;
+            }
+        }
+
+        .item-active {
+            background-image: url('../static/dz_active.png');
+        }
+
+        .item-no-active {
+            background-image: url('../static/dz_opt.png');
+        }
+    }
+
+    #lottie {
+        position: fixed;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+
+        .lottie-text {
+            position: absolute;
+            top: 59%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #b81801;
+            text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+            font-size: 80px;
+            font-weight: bold;
+        }
+
+        .lottie-bg {
+            position: absolute;
+            left: 50%;
+            bottom: 5%;
+            transform: translateX(-50%);
+            background-image: url('../static/img_0.png');
+            background-size: 100% 100%;
+            // width: 700px;
+            height: 300px;
+            animation: lottie 0.3s linear forwards;
+            text-align: center;
+            line-height: 310px;
+            overflow: hidden;
+
+            .lottie-num {
+                color: #b81801;
+                text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
+                font-size: 60px;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+@keyframes btnClick {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(1.1);
+    }
+}
+
+@keyframes betBtnClick {
+    from {
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    to {
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+}
+
+@keyframes ruleBtnClick {
+    from {
+        transform: scale(1) translateY(-50%);
+    }
+
+    to {
+        transform: scale(1.1) translateY(-50%);
+    }
+}
+
+@keyframes bgRevolve {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes starFlashing {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(1.1);
+    }
+}
+
+@keyframes turntableRevolve {
+    from {
+        transform: translateX(-50%) rotate(0deg);
+    }
+    to {
+        transform: translateX(-50%) rotate(360deg);
+    }
+}
+
+@keyframes white-to-yellow {
+    0% {
+        background: transparent;
+    }
+    100% {
+        background: #fefc87;
+    }
+}
+
+@keyframes lottie {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 700px;
+    }
+}
diff --git a/src/pages/turntable/index/index.vue b/src/pages/turntable/index/index.vue
index ebe1989..b7a6f02 100644
--- a/src/pages/turntable/index/index.vue
+++ b/src/pages/turntable/index/index.vue
@@ -6,6 +6,10 @@ import * as dayjs from 'dayjs'
 import dan from '../static/dan.png'
 import he from '../static/he.png'
 import shuang from '../static/shuang.png'
+import kd from '../../../static/kd.png'
+import kh from '../../../static/kh.png'
+import ks from '../../../static/ks.png'
+import wu from '../../../static/wu.png'
 import wzj from '../static/wzj.json'
 import zj from '../static/zj.json'
 import './index.scss'
@@ -160,7 +164,7 @@ const handelBetClick = (index: number) => {
 const light = ref({
     container: null,
     num: 8,
-    itemNum: 6,
+    itemNum: 3,
 })
 
 const turntable_light = ref()
@@ -173,33 +177,21 @@ const turntable_list = ref([
         url: he,
         name: '和',
         isActive: false,
-    },
-    {
-        id: 5,
-        url: null,
-        isActive: false,
-    },
-    {
-        id: 2,
-        name: '双',
-        url: shuang,
-        isActive: false,
-    },
-    {
-        id: 4,
-        url: null,
-        isActive: false,
+        activeUrl: kh,
     },
     {
         id: 1,
         url: dan,
         name: '单',
         isActive: false,
+        activeUrl: kd,
     },
     {
-        id: 6,
-        url: null,
+        id: 2,
+        name: '双',
+        url: shuang,
         isActive: false,
+        activeUrl: ks,
     },
 ])
 
@@ -215,11 +207,14 @@ const getBetList = () => {
     })
 }
 
-const handelDzClick = (index: number) => {
-    turntable_list.value.forEach((item) => {
-        item.isActive = false
+const bgUrl = ref(wu)
+
+const handelDzClick = (item) => {
+    turntable_list.value.forEach((itm) => {
+        itm.isActive = false
     })
-    turntable_list.value[index].isActive = true
+    item.isActive = true
+    bgUrl.value = item.activeUrl
 }
 
 const init = () => {
@@ -242,6 +237,13 @@ onMounted(() => {
 })
 
 const startRun = (name: string) => {
+    if (!name)
+        return Taro.showToast({
+            title: '未知开奖结果',
+            mask: true,
+            icon: 'none',
+            duration: 1000,
+        })
     isRunning.value = true
 
     turntable_list.value.forEach((item) => {
@@ -254,19 +256,19 @@ const startRun = (name: string) => {
 
     switch (name) {
         case '单':
-            kj_num = 6
+            kj_num = 1
             break
         case '双':
             kj_num = 2
             break
         case '和':
-            kj_num = 4
+            kj_num = 3
             break
     }
 
     let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
 
-    let rotate = rotateItemDeg + 5 * 360
+    let rotate = rotateItemDeg + 5 * 360 - 70
 
     const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
 
@@ -278,6 +280,7 @@ const startRun = (name: string) => {
 
     setTimeout(() => {
         isRunning.value = false
+        bgUrl.value = wu
         getBetJl()
         setTimeout(() => {
             getList()
@@ -451,16 +454,23 @@ onBeforeUnmount(() => {
 
                 <view class="turntable-wrap" id="turntable-wrap">
                     <view class="light" id="turntable_light"></view>
-                    <view class="turntable" id="turntable">
+                    <view
+                        :style="{
+                            background: `url(${bgUrl}) no-repeat`,
+                            backgroundSize: 'contain',
+                        }"
+                        class="turntable"
+                        id="turntable"
+                    >
                         <view class="prize" v-if="turntable_list && turntable_list.length">
                             <view
                                 class="item"
                                 v-for="(item, index) in turntable_list"
                                 :key="index"
-                                @click="handelDzClick(index)"
+                                @click="handelDzClick(item)"
                             >
                                 <image class="img" :src="item.url" />
-                                <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view>
+                                <!-- <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view> -->
                             </view>
                         </view>
                     </view>
diff --git a/src/pages/turntable/records/index.vue b/src/pages/turntable/records/index.vue
index c291264..5338613 100644
--- a/src/pages/turntable/records/index.vue
+++ b/src/pages/turntable/records/index.vue
@@ -3,9 +3,8 @@
         <template v-if="typeNum === 1">
             <view class="card" v-for="(item,index) in list as any[]" :key="index">
                 <view>
-                    <view>第{{ item.Periods }}期开奖</view>
                     <view>
-                        开奖数字:
+                        第{{ item.Periods }}期开奖:
                         <text
                             :style="{
                                 color: numColor(item.Name),
diff --git a/src/static/kd.png b/src/static/kd.png
new file mode 100644
index 0000000..bdd603d
Binary files /dev/null and b/src/static/kd.png differ
diff --git a/src/static/kh.png b/src/static/kh.png
new file mode 100644
index 0000000..a891d1b
Binary files /dev/null and b/src/static/kh.png differ
diff --git a/src/static/ks.png b/src/static/ks.png
new file mode 100644
index 0000000..ffbebd5
Binary files /dev/null and b/src/static/ks.png differ
diff --git a/src/static/wu.png b/src/static/wu.png
new file mode 100644
index 0000000..cdffe8d
Binary files /dev/null and b/src/static/wu.png differ