diff --git a/src/pages/aoshi/index/index.scss b/src/pages/aoshi/index/index.scss
index 3cede73..87d56bf 100644
--- a/src/pages/aoshi/index/index.scss
+++ b/src/pages/aoshi/index/index.scss
@@ -1,556 +1,557 @@
 body {
-    line-height: 1;
+  line-height: 1;
 }
 
 .page {
-    background-image: url('../../../static/bg.png');
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    height: 100dvh;
-    overflow: hidden;
+  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);
 
-    .header {
-        margin-top: 30px;
-        display: flex;
-        justify-content: space-between;
+    .avatar-box {
+      position: absolute;
+      left: -5%;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 120px;
+      height: 120px;
 
-        .left-box {
-            width: 378px;
-            height: 40px;
-            background: linear-gradient(90deg, #d19116 65%, #330706 95%);
+      .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;
+      }
 
-            .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;
-            }
-        }
+      .avatar {
+        position: absolute;
+        width: 92px;
+        height: 92px;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
 
-    .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);
+    .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;
 
-        .avatar-box {
-            position: absolute;
-            left: -5%;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 120px;
-            height: 120px;
+      .name {
+        font-size: 30px;
+        font-weight: bold;
+      }
 
-            .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;
-            }
-        }
+      .jf {
+        margin-top: 20px;
+        font-size: 28px;
+      }
     }
 
-    .kj-box {
+    .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;
-        margin-top: -10px;
+        line-height: 72px;
+        font-weight: bold;
+        color: #b2150b;
+      }
 
-        .title {
-            background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
-            -webkit-background-clip: text;
-            color: transparent;
-            font-size: 40px;
-            font-weight: bold;
-        }
+      .item:nth-child(1) {
+        color: #000;
+      }
 
-        .num-box {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 10px;
+      .item:nth-child(2) {
+        color: #000;
+      }
+    }
+  }
 
-            .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;
-            }
+  .turntable-box {
+    position: relative;
+    height: 670px;
+    overflow: hidden;
 
-            .item:nth-child(1) {
-                color: #000;
-            }
-
-            .item:nth-child(2) {
-                color: #000;
-            }
-        }
+    .star {
+      position: absolute;
+      animation: starFlashing 1s ease-in-out infinite alternate;
     }
 
-    .turntable-box {
-        position: relative;
-        height: 670px;
-        overflow: hidden;
+    .star-1 {
+      left: 100px;
+      width: 139px;
+      height: 171px;
+      background-image: url('../../../static/1-1.png');
+      background-size: 100% 100%;
+    }
 
-        .star {
+    .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;
-            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;
+            top: 4px;
+            left: 0;
             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;
+            margin: 0 auto;
+            width: 15px;
+            height: 15px;
             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(-0.8deg);
-
-                .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;
-                        }
-                    }
-                }
-            }
+            box-sizing: border-box;
+          }
         }
 
-        .bet-btn {
+        .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(-0.8deg);
+
+        .prize {
+          position: absolute;
+          width: 300px;
+          height: 300px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) rotate(-200deg);
+
+          .item {
             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%);
+            border-radius: 50%;
+            color: #000;
+            text-align: center;
+            transform-origin: right bottom;
 
-            //&:active {
-            //  animation: betBtnClick .1s ease-in-out;
-            //}
-        }
+            &:nth-child(1) {
+              top: -10px;
+              transform: rotate(70deg);
+            }
 
-        .pointer {
-            position: absolute;
-            background-image: url('../../../static/pointer.png');
-            background-size: 100% 100%;
-            width: 47px;
-            height: 111px;
-            top: 15px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-    }
+            &:nth-child(2) {
+              top: -10px;
+              left: -10px;
+              transform: rotate(-60deg);
+            }
 
-    .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;
+            &:nth-child(3) {
+              top: 10px;
+              left: 10px;
+              transform: rotate(190deg);
+            }
 
-        .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: 240px;
-            height: 100px;
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
+            .img {
+              display: block;
+              width: 100px;
+              height: 100px;
+              transform: rotate(-45deg) scale(1.1);
+            }
 
             .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;
+              position: absolute;
+              background-image: url('../../../static/dz.png');
+              background-size: 100% 100%;
+              width: 50px;
+              height: 50px;
+              transform: rotate(-45deg) scale(1.6);
+              top: -10px;
             }
+          }
         }
-
-        .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);
+    .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%);
 
-        .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;
-            }
-        }
+      //&: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%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    margin-top: 30px;
+
+    .item {
+      background-size: 100% 100%;
+      width: 220px;
+      min-width: 220px;
+      height: 75px;
+      display: flex;
+      align-items: center;
+      margin: 10px auto;
+
+      .icon {
+        background-image: url('../../../static/dz.png');
+        background-size: 100% 100%;
+        width: 55px;
+        height: 55px;
+        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: 40px;
+        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);
-    }
+  from {
+    transform: scale(1);
+  }
 
-    to {
-        transform: scale(1.1);
-    }
+  to {
+    transform: scale(1.1);
+  }
 }
 
 @keyframes betBtnClick {
-    from {
-        transform: translate(-50%, -50%) scale(1);
-    }
+  from {
+    transform: translate(-50%, -50%) scale(1);
+  }
 
-    to {
-        transform: translate(-50%, -50%) scale(1.1);
-    }
+  to {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
 }
 
 @keyframes ruleBtnClick {
-    from {
-        transform: scale(1) translateY(-50%);
-    }
+  from {
+    transform: scale(1) translateY(-50%);
+  }
 
-    to {
-        transform: scale(1.1) translateY(-50%);
-    }
+  to {
+    transform: scale(1.1) translateY(-50%);
+  }
 }
 
 @keyframes bgRevolve {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes starFlashing {
-    from {
-        transform: scale(1);
-    }
+  from {
+    transform: scale(1);
+  }
 
-    to {
-        transform: scale(1.1);
-    }
+  to {
+    transform: scale(1.1);
+  }
 }
 
 @keyframes turntableRevolve {
-    from {
-        transform: translateX(-50%) rotate(0deg);
-    }
-    to {
-        transform: translateX(-50%) rotate(360deg);
-    }
+  from {
+    transform: translateX(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateX(-50%) rotate(360deg);
+  }
 }
 
 @keyframes white-to-yellow {
-    0% {
-        background: transparent;
-    }
-    100% {
-        background: #fefc87;
-    }
+  0% {
+    background: transparent;
+  }
+  100% {
+    background: #fefc87;
+  }
 }
 
 @keyframes lottie {
-    0% {
-        width: 0;
-    }
-    100% {
-        width: 700px;
-    }
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 700px;
+  }
 }
diff --git a/src/pages/aoshi/index/index.vue b/src/pages/aoshi/index/index.vue
index 7272b49..def45f4 100644
--- a/src/pages/aoshi/index/index.vue
+++ b/src/pages/aoshi/index/index.vue
@@ -467,8 +467,6 @@ onBeforeUnmount(() => {
         <view class="icon"></view>
         <view class="name">{{ item.max }}</view>
       </view>
-      <view class="item"></view>
-      <view class="item"></view>
     </view>
     <view id="lottie" v-show="isLottie"></view>
   </view>
diff --git a/src/pages/turntable/index/index.scss b/src/pages/turntable/index/index.scss
index fe41670..01cb2cf 100644
--- a/src/pages/turntable/index/index.scss
+++ b/src/pages/turntable/index/index.scss
@@ -1,556 +1,557 @@
-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;
-    }
-}
+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%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 10px;
+        margin-top: 30px;
+
+        .item {
+            background-size: 100% 100%;
+            width: 220px;
+            min-width: 220px;
+            height: 75px;
+            display: flex;
+            align-items: center;
+            margin: 10px auto;
+
+            .icon {
+                background-image: url('../../../static/dz.png');
+                background-size: 100% 100%;
+                width: 55px;
+                height: 55px;
+                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: 40px;
+                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;
+    }
+}