小精灵:修复中级高级支付错误和选择异常问题,星际厨房新增今日奖励和我的钻石展示

This commit is contained in:
Dragon
2022-10-27 19:03:08 +08:00
parent b8f138b445
commit ec6ec70293
5 changed files with 570 additions and 415 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -2,7 +2,7 @@
@return $px / $rem+rem;
}
@font-face{
@font-face {
font-family: 'pingfang-bold';
src: url('../../../common/fonts/PingFang\ Bold.ttf');
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
@@ -10,7 +10,7 @@
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
}
@font-face{
@font-face {
font-family: 'din-medium';
src: url('../../../common/fonts/DINCond-Medium.ttf');
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
@@ -18,23 +18,27 @@
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
}
html, body{
html,
body {
font-family: 'din-medium';
background: #C8864C;
// 海浪svga过长
overflow-x: hidden;
}
.wrap{
.wrap {
width: 100%;
height: 100vh;
// background: url('../images/index-bg.png') no-repeat center/cover;
position: relative;
.banner{
.banner {
width: 100%;
}
.rule, .record{
.rule,
.record {
position: fixed;
top: px2rem(160);
// bottom: px2rem(1100);
@@ -42,16 +46,18 @@ html, body{
z-index: 99;
width: px2rem(118);
height: px2rem(40);
img{
img {
width: 100%;
}
}
.record{
.record {
top: px2rem(214);
// bottom: px2rem(1040);
}
.previous-result{
.previous-result {
position: absolute;
// bottom: px2rem(200);
top: px2rem(1120);
@@ -67,34 +73,38 @@ html, body{
align-items: center;
background: url('../images/previous-result-bg.png') no-repeat 0 0/100% 100%;
z-index: 9;
span{
span {
font-weight: bold;
margin-left: px2rem(27);
text-shadow: 1px 1px 0px#fc8321,
-1px -1px 0px#fc8321,
1px 1px 0px#fc8321,
-1px -1px 0px#fc8321,
1px 1px 0px#fc8321,
-1px -1px 0px#fc8321;
-1px -1px 0px#fc8321,
1px 1px 0px#fc8321,
-1px -1px 0px#fc8321,
1px 1px 0px#fc8321,
-1px -1px 0px#fc8321;
}
.result-list{
.result-list {
display: flex;
p{
p {
width: px2rem(40);
height: px2rem(40);
margin-left: px2rem(8);
background: url('../images/little-bubble.png') 0 0/100% 100%;
// &:last-child{
// background: url('../images/last-little-bubble.png') 0 0/100% 100%,url('../images/little-bubble.png') 0 0/100% 100%;
// }
img{
img {
width: 100%;
}
}
}
}
.mall{
.mall {
position: absolute;
top: px2rem(184);
// bottom: px2rem(1020);
@@ -102,21 +112,26 @@ html, body{
z-index: 99;
width: px2rem(142);
height: px2rem(134);
img{
img {
width: 100%;
}
}
.game-area{
.game-area {
position: absolute;
top: px2rem(274);
z-index: 9;
width: 100%;
height: px2rem(1054);
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
// 等待倒计时30s
.select-time{
.select-time {
display: none;
.count-down, .current-tip{
.count-down,
.current-tip {
font-family: 'pingfang-bold';
position: absolute;
top: px2rem(-40);
@@ -125,13 +140,14 @@ html, body{
width: px2rem(322);
height: px2rem(72);
line-height: px2rem(62);
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
text-align: center;
font-size: px2rem(24);
font-weight: bold;
color: #B82F1A;
}
.current-tip{
.current-tip {
top: px2rem(50);
width: px2rem(368);
height: px2rem(68);
@@ -140,13 +156,15 @@ html, body{
font-size: px2rem(22);
color: #F0C799;
}
// 海鲜列表
ul{
ul {
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
padding-left: px2rem(47);
li{
li {
position: relative;
z-index: 99;
width: px2rem(138);
@@ -154,15 +172,18 @@ html, body{
margin-top: px2rem(130);
margin-right: px2rem(32);
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
&:nth-child(-n+4){
&:nth-child(-n+4) {
margin-top: px2rem(80);
}
img{
img {
width: px2rem(120);
height: px2rem(120);
transform: translate( px2rem(8), px2rem(-26) );
transform: translate(px2rem(8), px2rem(-26));
}
.multiple{
.multiple {
position: absolute;
bottom: px2rem(20);
left: px2rem(-10);
@@ -175,7 +196,8 @@ html, body{
font-weight: bold;
color: white;
}
.name{
.name {
position: absolute;
bottom: px2rem(-40);
left: 50%;
@@ -190,17 +212,20 @@ html, body{
font-size: px2rem(20);
font-weight: bold;
color: white;
&.general{
&.general {
height: px2rem(46);
line-height: px2rem(30);
background: url('../images/name-general-bg.png') no-repeat 0 0/100% 100%;
}
.gift-price{
.gift-price {
font-size: px2rem(18);
padding-top: px2rem(4);
}
}
.bubble-2s{
.bubble-2s {
display: none;
// width: px2rem(92);
// height: px2rem(56);
@@ -212,21 +237,25 @@ html, body{
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
transform: rotate(343deg);
text-indent: px2rem(16);
p{
p {
font-size: px2rem(18);
color: white;
font-weight: bold;
text-align: center;
margin-left: px2rem(-20);
&.first-line{
&.first-line {
padding-top: px2rem(10);
}
&.second-line{
&.second-line {
padding-top: px2rem(4);
}
}
}
.select-num{
.select-num {
// display: none;
position: absolute;
top: px2rem(-6);
@@ -236,16 +265,17 @@ html, body{
color: #fff;
// text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
text-shadow: 1px 1px 0px#ff622b,
-1px -1px 0px#ff622b,
1px 1px 0px#ff622b,
-1px -1px 0px#ff622b,
1px 1px 0px#ff622b,
-1px -1px 0px#ff622b;
-1px -1px 0px#ff622b,
1px 1px 0px#ff622b,
-1px -1px 0px#ff622b,
1px 1px 0px#ff622b,
-1px -1px 0px#ff622b;
}
}
}
// 碎片按钮
.btn-wrap{
.btn-wrap {
display: flex;
// justify-content: space-between;
align-items: center;
@@ -253,7 +283,8 @@ html, body{
height: px2rem(126);
margin: px2rem(140) auto 0;
background: url('../images/btn-wrap-bg.png') no-repeat 0 0/100% 100%;
div{
div {
display: flex;
justify-content: center;
width: px2rem(190);
@@ -262,42 +293,51 @@ html, body{
line-height: px2rem(80);
font-size: px2rem(30);
color: #975B25;
&.active{
&.active {
background-image: url('../images/fragment-btn-active.png');
color: #B33E17;
}
&:first-child{
&:first-child {
margin-left: px2rem(60);
}
&:last-child{
&:last-child {
margin-left: 0;
}
&:nth-child(2){
&:nth-child(2) {
margin: 0 px2rem(12);
}
}
}
// 架子
.shelf{
.shelf {
width: px2rem(710);
height: px2rem(100);
position: absolute;
top: px2rem(440);
left: 50%;
transform: translateX(-50%);
&:last-child{
&:last-child {
top: px2rem(720);
}
}
}
// 等待结果5s
.wait-time{
.wait-time {
display: none;
width: px2rem(750);
height: px2rem(600);
margin: auto;
position: relative;
.count-down, .current-tip{
.count-down,
.current-tip {
font-family: 'pingfang-bold';
position: absolute;
top: px2rem(-40);
@@ -312,27 +352,31 @@ html, body{
font-size: px2rem(24);
font-weight: bold;
}
.current-tip{
.current-tip {
top: px2rem(50);
width: px2rem(368);
height: px2rem(68);
line-height: px2rem(68);
background: url('../images/tip.png') no-repeat 0 0/100% 100% ;
background: url('../images/tip.png') no-repeat 0 0/100% 100%;
text-align: center;
font-size: px2rem(22);
color: #FFF0C799;
font-weight: bold;
}
}
// 开奖时间
.draw-time{
.draw-time {
display: none;
width: px2rem(750);
height: px2rem(600);
// margin: auto;
// margin-top: px2rem(80);
.count-down, .current-tip{
.count-down,
.current-tip {
font-family: 'pingfang-bold';
position: absolute;
top: px2rem(-40);
@@ -341,28 +385,31 @@ html, body{
width: px2rem(322);
height: px2rem(72);
line-height: px2rem(62);
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
text-align: center;
font-size: px2rem(24);
color: #B82F1A;
font-weight: bold;
}
.current-tip{
.current-tip {
top: px2rem(50);
width: px2rem(368);
height: px2rem(68);
line-height: px2rem(68);
background: url('../images/tip.png') no-repeat 0 0/100% 100% ;
background: url('../images/tip.png') no-repeat 0 0/100% 100%;
font-size: px2rem(22);
color: #F0C799;
}
.top-three{
.top-three {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(240);
width: 100%;
.top-three-title{
.top-three-title {
display: flex;
justify-content: center;
align-items: center;
@@ -371,20 +418,24 @@ html, body{
font-weight: bold;
color: white;
margin-bottom: px2rem(18);
.line{
.line {
width: px2rem(50);
border: px2rem(1) solid white;
}
}
.top-three-list{
.top-three-list {
display: flex;
justify-content: space-between;
width: px2rem(340);
margin: auto;
p{
p {
width: px2rem(74);
height: px2rem(74);
img{
img {
width: 100%;
height: 100%;
border-radius: 50%;
@@ -393,7 +444,8 @@ html, body{
}
}
}
.draw-pic{
.draw-pic {
position: absolute;
left: 50%;
transform: translateX(-50%);
@@ -401,12 +453,14 @@ html, body{
z-index: 1;
width: px2rem(280);
height: px2rem(280);
img{
img {
width: 100%;
height: 100%;
}
}
.award-info{
.award-info {
position: absolute;
top: px2rem(600);
width: 100%;
@@ -414,21 +468,25 @@ html, body{
text-align: center;
font-size: px2rem(24);
font-weight: bold;
.desc{
.desc {
color: #FEEF60;
margin-bottom: px2rem(12);
}
.award-wrap{
.award-wrap {
color: white;
.award-total{
.award-total {
color: #FEEF60;
}
}
}
}
}
// 底部信息
.info-bottom{
.info-bottom {
position: fixed;
bottom: 0;
left: 0;
@@ -439,9 +497,12 @@ html, body{
display: flex;
// justify-content: space-evenly;
align-items: center;
.f-wrap{
.f-wrap {
margin-top: px2rem(14);
.fragment, .award{
.fragment,
.award {
width: px2rem(250);
height: px2rem(42);
background-color: #BD7F38;
@@ -454,31 +515,36 @@ html, body{
margin-bottom: px2rem(10);
}
}
.avatar{
.avatar {
width: px2rem(100);
height: px2rem(100);
margin-left: px2rem(42);
margin-right: px2rem(20);
img{
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.add{
.add {
width: px2rem(41);
height: px2rem(41);
margin-top: px2rem(-48);
margin-left: px2rem(12);
}
.rank{
.rank {
width: px2rem(170);
height: px2rem(54);
margin-left: px2rem(44);
}
}
// 规则弹窗
.shade-mask{
.shade-mask {
display: none;
position: fixed;
top: 0;
@@ -487,7 +553,8 @@ html, body{
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: 0.4);
.shade-content{
.shade-content {
position: absolute;
top: 50%;
left: 50%;
@@ -501,7 +568,8 @@ html, body{
color: #B58147;
font-weight: 600;
overflow: hidden;
main{
main {
position: absolute;
top: px2rem(60);
width: 100%;
@@ -509,9 +577,11 @@ html, body{
padding: 0 px2rem(42);
box-sizing: border-box;
overflow: auto;
div{
div {
line-height: 1.2;
.title{
.title {
width: px2rem(252);
height: px2rem(46);
line-height: px2rem(46);
@@ -519,15 +589,18 @@ html, body{
margin: 0 auto px2rem(22);
text-align: center;
}
.jietu{
.jietu {
width: px2rem(490);
height: px2rem(275);
margin-top: px2rem(12);
margin-bottom: px2rem(32);
&.t2{
&.t2 {
height: px2rem(299);
}
&.t3{
&.t3 {
height: px2rem(301);
}
}
@@ -535,8 +608,9 @@ html, body{
}
}
}
// 今日排名弹窗
.shade-mask-rank{
.shade-mask-rank {
display: none;
position: fixed;
top: 0;
@@ -545,7 +619,8 @@ html, body{
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: 0.6);
.shade-content-rank{
.shade-content-rank {
position: absolute;
top: 50%;
left: 50%;
@@ -553,18 +628,21 @@ html, body{
width: px2rem(660);
height: px2rem(980);
background: white;
.rank-top{
.rank-top {
height: px2rem(340);
background-image: linear-gradient(#F49C35, #FFDD81);
overflow: hidden;
.tab-wrap{
.tab-wrap {
font-family: 'pingfang-regular';
width: px2rem(460);
height: px2rem(70);
background-color: rgba($color: #fff, $alpha: .3);
border-radius: px2rem(36);
margin: px2rem(20) auto px2rem(6);
span{
span {
display: inline-block;
width: px2rem(210);
height: px2rem(60);
@@ -573,46 +651,55 @@ html, body{
font-size: px2rem(30);
color: white;
margin-top: px2rem(5);
&:first-child{
&:first-child {
margin-left: px2rem(14);
}
}
.active{
.active {
background-color: white;
color: #F5A03A;
border-radius: px2rem(30);
}
}
.topthree-wrap{
.topthree-wrap {
position: relative;
.info-wrap{
.info-wrap {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
&:first-child{
&:first-child {
width: px2rem(132);
// height: px2rem(175);
// margin-top: px2rem(86);
left: 50%;
transform: translateX(-50%);
.diamond-num{
.diamond-num {
display: none;
}
}
.avatar{
.avatar {
width: px2rem(132);
height: px2rem(175);
margin-bottom: px2rem(20);
p{
p {
position: relative;
z-index: 99;
width: 100%;
height: 100%;
background: url('../images/first.png') no-repeat 0 0/100% 100%;
}
img{
img {
position: relative;
z-index: 9;
top: px2rem(-136);
@@ -622,14 +709,17 @@ html, body{
border-radius: 50%;
}
}
.nick, .diamond-num{
.nick,
.diamond-num {
width: px2rem(360);
text-align: center;
font-size: px2rem(30);
font-weight: bold;
color: white;
}
.diamond-num{
.diamond-num {
font-family: 'din-medium';
margin: 0;
margin-top: px2rem(-20);
@@ -640,8 +730,8 @@ html, body{
}
}
}
.other-rank{
.other-rank {
overflow: auto;
position: absolute;
width: 100%;
@@ -649,14 +739,17 @@ html, body{
background-color: white;
padding: px2rem(30) px2rem(20) 0;
box-sizing: border-box;
li{
li {
display: flex;
align-items: center;
margin-bottom: px2rem(40);
&:last-child{
&:last-child {
// margin-bottom: px2rem(140);
}
.index{
.index {
display: inline-block;
width: px2rem(30);
font-size: px2rem(30);
@@ -664,32 +757,36 @@ html, body{
color: #333333;
text-align: center;
}
.others-info{
.others-info {
flex: 1;
display: flex;
align-items: center;
margin-left: px2rem(20);
img{
img {
width: px2rem(100);
height: px2rem(100);
border-radius: 50%;
margin-right: px2rem(20);
}
.others-nick{
.others-nick {
font-size: px2rem(28);
font-weight: bold;
color: #333333;
}
}
.others-diamond-num{
.others-diamond-num {
font-size: px2rem(26);
font-weight: bold;
color: #ED7B50;
}
}
}
.mine{
.mine {
position: fixed;
left: 0;
bottom: 0;
@@ -701,29 +798,34 @@ html, body{
box-sizing: border-box;
display: flex;
align-items: center;
.mine-rank{
.mine-rank {
font-size: px2rem(26);
font-weight: bold;
color: white;
}
.mine-info{
.mine-info {
flex: 1;
display: flex;
align-items: center;
img{
img {
width: px2rem(80);
height: px2rem(80);
border-radius: 50%;
margin-left: px2rem(30);
margin-right: px2rem(40);
}
.mine-nick{
.mine-nick {
font-size: px2rem(28);
font-weight: bold;
color: white;
}
}
.mine-diamond-num{
.mine-diamond-num {
font-size: px2rem(26);
font-weight: bold;
color: #ED7B50;
@@ -731,8 +833,9 @@ html, body{
}
}
}
// 碎片不足弹窗
.shade-mask-fragmentNum{
.shade-mask-fragmentNum {
display: none;
position: fixed;
top: 0;
@@ -741,7 +844,8 @@ html, body{
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: 0.6);
.shade-content-fragmentNum{
.shade-content-fragmentNum {
position: absolute;
top: 50%;
left: 50%;
@@ -754,30 +858,36 @@ html, body{
display: flex;
flex-direction: column;
align-items: center;
.fragmentNum-title{
.fragmentNum-title {
font-size: px2rem(36);
font-weight: bold;
color: #333333;
margin-top: px2rem(38);
}
img{
img {
width: px2rem(120);
width: px2rem(120);
margin-top: px2rem(108);
}
p{
p {
font-size: px2rem(30);
font-weight: 600;
color: #333333;
margin-top: px2rem(50);
}
.fragmentNum-btn-wrap{
.fragmentNum-btn-wrap {
display: flex;
justify-content: space-between;
width: px2rem(512);
height: px2rem(76);
margin-top: px2rem(90);
.cancel-btn, .confirm-btn{
.cancel-btn,
.confirm-btn {
width: px2rem(240);
height: px2rem(76);
line-height: px2rem(76);
@@ -788,7 +898,8 @@ html, body{
background-color: #EAE5FC;
color: #7154EE;
}
.confirm-btn{
.confirm-btn {
background-color: #735FFE;
color: #fff;
}
@@ -797,7 +908,7 @@ html, body{
}
}
.no-in-app{
.no-in-app {
display: none;
position: fixed;
top: 0;
@@ -807,3 +918,69 @@ html, body{
z-index: 99999;
background-color: white;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
height: px2rem(130);
background: url('../images/mall/bottom.png') no-repeat 0 0/100% 100%;
display: flex;
align-items: center;
&.mb-long {
margin-bottom: px2rem(68);
}
.avatar {
width: px2rem(100);
height: px2rem(100);
margin-left: px2rem(42);
margin-right: px2rem(20);
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.info-wrap {
flex: 1;
margin-top: px2rem(14);
.fragment-num,
.diamond-num {
width: px2rem(250);
height: px2rem(42);
background-color: #BD7F38;
border-radius: px2rem(20);
line-height: px2rem(42);
font-size: px2rem(26);
font-weight: bold;
color: white;
text-indent: px2rem(10);
margin-bottom: px2rem(10);
}
}
.add {
width: px2rem(41);
height: px2rem(41);
margin-top: px2rem(-48);
margin-right: px2rem(70);
}
.recharge {
width: px2rem(144);
height: px2rem(62);
margin-right: px2rem(74);
img {
width: 100%;
}
}
}

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
@@ -12,7 +13,7 @@
<body>
<div class="wrap no-in-app">
<!-- <div class="wrap "> -->
<!-- <div class="wrap "> -->
<div class="banner"><img src="./images/banner.png" alt=""></div>
<div class="rule"><img src="./images/rule.png" alt=""></div>
<div class="record"><img src="./images/record.png" alt=""></div>
@@ -21,20 +22,30 @@
<div class="mall" style="display: none;">
<img src="./images/mall.png" alt="">
</div>
<!-- 底部 -->
<div class="bottom">
<div class="avatar"><img src="./images/logo.png" alt=""></div>
<div class="info-wrap">
<div class="diamond-num" style="width: 4rem;">我的鉆石:<span>0</span></div>
<div class="fragment-num" style="width: 4rem;">今日奖励:<span>0</span></div>
</div>
<!-- <div class="add"><img src="./images/add.png" alt=""></div> -->
<a href="https://beta.api.pekolive.com/peko/modules/pay/index.html?channelType=4"><div class="recharge"><img src="./images/mall/recharge.png" alt=""></div></a>
</div>
<!-- 游戏区域 -->
<div class="game-area">
<!-- 选择时间 -->
<div class="select-time">
<div class="count-down">开奖倒计时:<span class="count-down-num"></span></div>
<div class="current-tip">玩法:选择鉆石数量→选择食材</div>
<div class="btn-wrap">
<div class="active">1000</div>
<div>10000</div>
<div>100000</div>
</div>
<ul>
</ul>
<div class="shelf"><img src="./images/shelf.png" alt=""></div>
@@ -99,7 +110,7 @@
<div class="fragment">我的碎片:<span>0</span></div>
<div class="award">今日奖励:<span>0</span></div>
</div>
<div class="add" ><img src="./images/add.png" alt=""></div>
<div class="add"><img src="./images/add.png" alt=""></div>
<div class="rank"><img src="./images/rank.png" alt=""></div>
</div>
@@ -122,7 +133,7 @@
</div>
<div class="qtsm">
<p class="title">其他說明</p>
如果以上說明未能解答您的疑問,請聯系客服,會有專人解答疑難
如果以上說明未能解答您的疑問,請聯系客服,會有專人解答疑難
<p>本活动与苹果公司无关</p>
</div>
</main>
@@ -133,21 +144,21 @@
<div class="shade-mask-rank">
<div class="shade-content-rank">
<div class="rank-top">
<div class="tab-wrap">
<span class="diamond-rank active">今日礼物榜</span>
<span class="num-rank">今日欧皇榜</span>
</div>
<div class="topthree-wrap">
</div>
</div>
<ul class="other-rank">
</ul>
<div class="mine">
<span class="mine-rank"></span>
<div class="mine-info">
@@ -179,7 +190,7 @@
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/index.js"></script>
</body>
</html>

View File

@@ -47,6 +47,10 @@ const getUserInfo = (param) => {
url: urlPrefix + '/act/luckySea/getUserActInfo',
success (res) {
if (res.code === 200) {
$('.bottom .info-wrap .fragment-num span').text(res.data.todayReward);
$('.bottom .info-wrap .diamond-num span').text(res.data.diamonds);
$('.bottom .avatar img').attr('src',res.data.avatar);
$('.info-bottom').find('.avatar img').attr('src', res.data.avatar)
if (res.data.todayReward.toString().length >= 5) {

View File

@@ -156,6 +156,7 @@ $(function () {
giftNameArr[index] = item.giftName;
selectSrcArr[index] = item.headwearPic;
selectSrc = selectSrcArr[0];
giftName = giftNameArr[0];
})
console.log('giftNameArr', giftNameArr);
} else if (res.code == 80002) {
@@ -173,11 +174,13 @@ $(function () {
$('.tabBox div').click(function () {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
diamondNum = Number($(this).children('span').children('b'));
// diamondNum = Number($(this).children('span').children('b'));
diamondNum = index == 0 ? 1000 : index == 1 ? 10000 : 100000
selectSrc = selectSrcArr[index];
giftName = giftNameArr[index];
userRemainDay = remainDayArr[index];
prodID = prodIDArr[index];
$('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
})
const animation = () => {
$('.select-area')