星级厨房：修改开奖页面
This commit is contained in:
qf
@@ -298,9 +298,11 @@ body {
|
||||
}
|
||||
.wrap .game-area .draw-time {
|
||||
display: none;
|
||||
width: 10rem;
|
||||
height: 8rem;
|
||||
margin: auto;
|
||||
width: 2.8rem;
|
||||
height: 2.84rem;
|
||||
margin: 1.2rem auto 0.2rem;
|
||||
background: url(../images/drawBg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .game-area .draw-time .count-down,
|
||||
.wrap .game-area .draw-time .current-tip {
|
||||
@@ -331,8 +333,9 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 3.2rem;
|
||||
bottom: 3.1rem;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-title {
|
||||
display: flex;
|
||||
@@ -349,52 +352,264 @@ body {
|
||||
border: 0.0133333333rem solid white;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 4.5333333333rem;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list p {
|
||||
width: 0.9866666667rem;
|
||||
height: 0.9866666667rem;
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 {
|
||||
width: 2.5066666667rem;
|
||||
height: 2.24rem;
|
||||
background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
|
||||
border-radius: 0.24rem;
|
||||
position: relative;
|
||||
top: 1.3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list p img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .tx {
|
||||
width: 1.7333333333rem;
|
||||
height: 1.7333333333rem;
|
||||
border-radius: 50%;
|
||||
border: 0.0266666667rem solid #FEEF60;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .txBox {
|
||||
width: 1.7466666667rem;
|
||||
height: 2.2666666667rem;
|
||||
position: absolute;
|
||||
top: -1.41rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .nick {
|
||||
width: 100%;
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 1.1733333333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num {
|
||||
width: 100%;
|
||||
height: 0.3333333333rem;
|
||||
position: absolute;
|
||||
bottom: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num .diamond {
|
||||
width: 0.3333333333rem;
|
||||
height: 0.3333333333rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num span {
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 {
|
||||
width: 2.16rem;
|
||||
height: 1.8933333333rem;
|
||||
background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
|
||||
border-radius: 0.24rem;
|
||||
position: relative;
|
||||
top: -0.55rem;
|
||||
left: 1.15rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .tx {
|
||||
width: 1.7333333333rem;
|
||||
height: 1.7333333333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .txBox {
|
||||
width: 1.7466666667rem;
|
||||
height: 2.2666666667rem;
|
||||
position: absolute;
|
||||
top: -1.4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .nick {
|
||||
width: 100%;
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 1.0133333333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num {
|
||||
width: 100%;
|
||||
height: 0.3333333333rem;
|
||||
position: absolute;
|
||||
bottom: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num .diamond {
|
||||
width: 0.3333333333rem;
|
||||
height: 0.3333333333rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num span {
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 {
|
||||
width: 2.16rem;
|
||||
height: 1.8933333333rem;
|
||||
background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
|
||||
border-radius: 0.24rem;
|
||||
position: relative;
|
||||
position: relative;
|
||||
top: -2.45rem;
|
||||
left: 6.7rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .tx {
|
||||
width: 1.7333333333rem;
|
||||
height: 1.7333333333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .txBox {
|
||||
width: 1.7466666667rem;
|
||||
height: 2.2666666667rem;
|
||||
position: absolute;
|
||||
top: -1.44rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .nick {
|
||||
width: 100%;
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 1.0133333333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num {
|
||||
width: 100%;
|
||||
height: 0.3333333333rem;
|
||||
position: absolute;
|
||||
bottom: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num .diamond {
|
||||
width: 0.3333333333rem;
|
||||
height: 0.3333333333rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num span {
|
||||
font-size: 0.2933333333rem;
|
||||
color: #fff;
|
||||
}
|
||||
.wrap .game-area .draw-time .draw-pic {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.92rem;
|
||||
top: 1.65rem;
|
||||
z-index: 1;
|
||||
width: 3.7333333333rem;
|
||||
height: 3.7333333333rem;
|
||||
width: 1.3333333333rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .draw-pic img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.wrap .game-area .draw-time .award-info {
|
||||
width: 8rem;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 8rem;
|
||||
width: 100%;
|
||||
font-family: "pingfang-bold";
|
||||
text-align: center;
|
||||
font-size: 0.32rem;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 6.5rem;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .game-area .draw-time .award-info .desc {
|
||||
color: #FEEF60;
|
||||
margin-bottom: 0.16rem;
|
||||
color: #fff;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.wrap .game-area .draw-time .award-info .diamond {
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .award-info .award-wrap {
|
||||
color: white;
|
||||
}
|
||||
.wrap .game-area .draw-time .award-info .award-wrap .award-total {
|
||||
color: #FEEF60;
|
||||
font-weight: 600;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap {
|
||||
width: 8rem;
|
||||
height: 2.44rem;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.6rem;
|
||||
display: flex;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .put {
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
margin-right: 0.4rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list {
|
||||
width: 6.72rem;
|
||||
height: 2.7733333333rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item {
|
||||
width: 0.9866666667rem;
|
||||
height: 1.2rem;
|
||||
margin-right: 0.92rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item p {
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem;
|
||||
background: url(../images/record_bubble.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item p .gift {
|
||||
width: 75%;
|
||||
margin-top: 0.1rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item div {
|
||||
width: 100%;
|
||||
height: 0.3333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item div .diamond {
|
||||
width: 0.33rem;
|
||||
height: 0.33rem;
|
||||
}
|
||||
.wrap .game-area .draw-time .put-wrap .list .item div .in {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wrap .info-bottom {
|
||||
position: fixed;
|
||||
@@ -422,6 +637,7 @@ body {
|
||||
color: white;
|
||||
text-indent: 0.1333333333rem;
|
||||
margin-bottom: 0.1333333333rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wrap .info-bottom .avatar {
|
||||
width: 1.3333333333rem;
|
||||
|
||||
@@ -106,10 +106,12 @@ body {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.more-result {
|
||||
width: px2rem(42);
|
||||
height: px2rem(44);
|
||||
margin-left: 0.2rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -382,12 +384,14 @@ body {
|
||||
// 开奖时间
|
||||
.draw-time {
|
||||
display: none;
|
||||
width: px2rem(750);
|
||||
height: px2rem(600);
|
||||
// width: 6rem;
|
||||
// height: 6rem;
|
||||
margin: auto;
|
||||
// margin-top: px2rem(80);
|
||||
// width: px2rem(750);
|
||||
// height: px2rem(600);
|
||||
width: px2rem(210, );
|
||||
height: px2rem(213, );
|
||||
margin: 1.2rem auto 0.2rem;
|
||||
background: url(../images/drawBg.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.count-down,
|
||||
.current-tip {
|
||||
font-family: 'pingfang-bold';
|
||||
@@ -419,8 +423,9 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(240);
|
||||
bottom: 3.1rem;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
|
||||
.top-three-title {
|
||||
display: flex;
|
||||
@@ -439,20 +444,189 @@ body {
|
||||
}
|
||||
|
||||
.top-three-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: px2rem(340);
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// width: px2rem(340);
|
||||
// margin: auto;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
width: px2rem(74);
|
||||
height: px2rem(74);
|
||||
.no1 {
|
||||
width: px2rem(188);
|
||||
height: px2rem(168);
|
||||
background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
|
||||
border-radius: px2rem(18, );
|
||||
position: relative;
|
||||
top: 1.3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.tx {
|
||||
width: px2rem(130, );
|
||||
height: px2rem(130, );
|
||||
border-radius: 50%;
|
||||
border: px2rem(2) solid #FEEF60;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
}
|
||||
|
||||
.txBox {
|
||||
width: px2rem(131, );
|
||||
height: px2rem(170, );
|
||||
position: absolute;
|
||||
top: -1.41rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: px2rem(88, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
height: px2rem(25, );
|
||||
position: absolute;
|
||||
bottom: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.diamond {
|
||||
width: px2rem(25, );
|
||||
height: px2rem(25, );
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no2 {
|
||||
width: px2rem(162, );
|
||||
height: px2rem(142, );
|
||||
background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
|
||||
border-radius: px2rem(18, );
|
||||
position: relative;
|
||||
top: -0.55rem;
|
||||
left: 1.15rem;
|
||||
|
||||
.tx {
|
||||
width: px2rem(130, );
|
||||
height: px2rem(130, );
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
}
|
||||
|
||||
.txBox {
|
||||
width: px2rem(131, );
|
||||
height: px2rem(170, );
|
||||
position: absolute;
|
||||
top: -1.4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.nick {
|
||||
width: 100%;
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: px2rem(76, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
height: px2rem(25, );
|
||||
position: absolute;
|
||||
bottom: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.diamond {
|
||||
width: px2rem(25, );
|
||||
height: px2rem(25, );
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
width: px2rem(162, );
|
||||
height: px2rem(142, );
|
||||
background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
|
||||
border-radius: px2rem(18, );
|
||||
position: relative;
|
||||
position: relative;
|
||||
top: -2.45rem;
|
||||
left: 6.7rem;
|
||||
|
||||
.tx {
|
||||
width: px2rem(130, );
|
||||
height: px2rem(130, );
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
}
|
||||
|
||||
.txBox {
|
||||
width: px2rem(131, );
|
||||
height: px2rem(170, );
|
||||
position: absolute;
|
||||
top: -1.44rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.nick {
|
||||
width: 100%;
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: px2rem(76, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 100%;
|
||||
height: px2rem(25, );
|
||||
position: absolute;
|
||||
bottom: 0.14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.diamond {
|
||||
width: px2rem(25, );
|
||||
height: px2rem(25, );
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: px2rem(22, );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -462,39 +636,126 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(144);
|
||||
top: 1.65rem;
|
||||
z-index: 1;
|
||||
width: px2rem(280);
|
||||
height: px2rem(280);
|
||||
width: px2rem(100);
|
||||
// height: px2rem(91);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
// margin: -0.3rem 0 0 1.18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.award-info {
|
||||
width: px2rem(600, );
|
||||
// height: px2rem(183, );
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: px2rem(600);
|
||||
width: 100%;
|
||||
font-family: 'pingfang-bold';
|
||||
text-align: center;
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 6.5rem;
|
||||
display: flex;
|
||||
|
||||
.desc {
|
||||
color: #FEEF60;
|
||||
margin-bottom: px2rem(12);
|
||||
color: #fff;
|
||||
font-size: px2rem(28, );
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.diamond {
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.award-wrap {
|
||||
color: white;
|
||||
color: #FEEF60;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(28, );
|
||||
// .award-total {
|
||||
// color: #FEEF60;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.award-total {
|
||||
color: #FEEF60;
|
||||
.put-wrap {
|
||||
width: px2rem(600, );
|
||||
height: px2rem(183, );
|
||||
// line-height: px2rem(183, );
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.6rem;
|
||||
display: flex;
|
||||
|
||||
.put {
|
||||
font-size: px2rem(28, );
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
margin-right: 0.4rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: px2rem(504, );
|
||||
height: px2rem(208, );
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: px2rem(74, );
|
||||
height: px2rem(90, );
|
||||
margin-right: 0.92rem;
|
||||
// position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
width: px2rem(62, );
|
||||
height: px2rem(62, );
|
||||
background: url(../images/record_bubble.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.gift {
|
||||
width: 75%;
|
||||
margin-top: 0.1rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: px2rem(25, );
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.diamond {
|
||||
width: 0.33rem;
|
||||
height: 0.33rem;
|
||||
}
|
||||
|
||||
.in {
|
||||
font-size: px2rem(20, );
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -526,6 +787,7 @@ body {
|
||||
color: white;
|
||||
text-indent: px2rem(10);
|
||||
margin-bottom: px2rem(10);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
view/peko/activity/act-ocean/images/drawBg.png
Normal file
BIN
view/peko/activity/act-ocean/images/drawBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
view/peko/activity/act-ocean/images/no1.png
Normal file
BIN
view/peko/activity/act-ocean/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
view/peko/activity/act-ocean/images/no2.png
Normal file
BIN
view/peko/activity/act-ocean/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
view/peko/activity/act-ocean/images/no3.png
Normal file
BIN
view/peko/activity/act-ocean/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
@@ -64,9 +64,23 @@
|
||||
<div class="draw-pic">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<!-- 投入列表 -->
|
||||
<div class="put-wrap">
|
||||
<div class="put">投入</div>
|
||||
<div class="list">
|
||||
<!-- <div class="item">
|
||||
<p><img src="" class="gift" alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in"></span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户本轮中奖情况 -->
|
||||
<div class="award-info">
|
||||
<div class="desc"></div>
|
||||
<div class="desc">奖励</div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<div class="award-wrap"></div>
|
||||
</div>
|
||||
<!-- 本轮前3名 -->
|
||||
@@ -77,9 +91,33 @@
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<div class="top-three-list">
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
<div class="no no1">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no1.png" class="txBox" alt="">
|
||||
<div class="nick">虚位以待</div>
|
||||
<div class="num">
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no2.png" class="txBox" alt="">
|
||||
<div class="nick">虚位以待</div>
|
||||
<div class="num">
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no3.png" class="txBox" alt="">
|
||||
<div class="nick">虚位以待</div>
|
||||
<div class="num">
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,7 +143,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 个人信息 -->
|
||||
<div class="info-bottom" >
|
||||
<div class="info-bottom">
|
||||
<div class="avatar"><img src="./images/logo.png" alt=""></div>
|
||||
<div class="info-wrap">
|
||||
<div class="diamond-num">我的鉆石：<span>0</span></div>
|
||||
|
||||
@@ -16,7 +16,7 @@ const showLoading = (content = '加載中...') => {
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
@@ -45,7 +45,7 @@ const getUserInfo = (param) => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
|
||||
$('.info-bottom .info-wrap .fragment-num span').text(res.data.todayReward);
|
||||
@@ -63,7 +63,7 @@ const getUserInfo = (param) => {
|
||||
return toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -73,7 +73,7 @@ const getUserPieceNum = () => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
$('.info-bottom').find('.fragment span').html(res.data.diamonds)
|
||||
myFragment = res.data.diamonds;
|
||||
@@ -82,7 +82,7 @@ const getUserPieceNum = () => {
|
||||
}
|
||||
lock = !lock
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -94,7 +94,7 @@ const getGameMode = () => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/luckySea/getTimeConfig',
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
modelType = res.data.modelType
|
||||
getNewestAct()
|
||||
@@ -102,7 +102,7 @@ const getGameMode = () => {
|
||||
return toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -119,7 +119,7 @@ const getNewestAct = () => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/luckySea/getNewestAct',
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
if ($.isEmptyObject(res.data) || res.data.status === 4) {
|
||||
return showLoading('服務器正在維護中...')
|
||||
@@ -166,7 +166,7 @@ const getNewestAct = () => {
|
||||
return toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -207,7 +207,7 @@ const showView = () => {
|
||||
}
|
||||
|
||||
$('.award-wrap').html('').show()
|
||||
$('.award-info .desc').html('')
|
||||
// $('.award-info .desc').html('')
|
||||
|
||||
getPreviousResults(10, roundId)
|
||||
showCountDown(userComeinTime, startTime, drawStageStartTime)
|
||||
@@ -373,7 +373,7 @@ const judgeStatus = () => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/luckySea/getNewestAct',
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
console.log('res.data的值------------', res.data);
|
||||
if ($.isEmptyObject(res.data) || res.data.status === 4) {
|
||||
@@ -404,7 +404,7 @@ const judgeStatus = () => {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -416,41 +416,74 @@ const renderDrawInfo = () => {
|
||||
$('.draw-time .current-tip .current-result').html(drawInfo.drawName)
|
||||
$('.draw-pic img').attr('src', drawInfo.drawImageUrl)
|
||||
|
||||
if (isStatus3) {
|
||||
if (drawInfo.userDrawResult.drawStatus === 1) {
|
||||
$('.award-info .desc').html('恭喜你，猜中了！')
|
||||
// if (modelType === 1) {
|
||||
// $('.award-wrap').html(`獲得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
|
||||
// } else {
|
||||
// $('.award-wrap').html(`獲得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>鉆)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>個 累計<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
|
||||
// }
|
||||
} else if (drawInfo.userDrawResult.drawStatus === 2) {
|
||||
$('.award-info .desc').html('很遺憾，本輪未猜中')
|
||||
$('.award-wrap').hide()
|
||||
} else if (drawInfo.userDrawResult.drawStatus === 3) {
|
||||
$('.award-info .desc').html('本輪未參與')
|
||||
$('.award-wrap').hide()
|
||||
}
|
||||
}
|
||||
// if (isStatus3) {
|
||||
// if (drawInfo.userDrawResult.drawStatus === 1) {
|
||||
// $('.award-info .desc').html('恭喜你，猜中了！')
|
||||
// // if (modelType === 1) {
|
||||
// // $('.award-wrap').html(`獲得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
|
||||
// // } else {
|
||||
// // $('.award-wrap').html(`獲得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>鉆)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>個 累計<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
|
||||
// // }
|
||||
// } else if (drawInfo.userDrawResult.drawStatus === 2) {
|
||||
// $('.award-info .desc').html('很遺憾，本輪未猜中')
|
||||
// $('.award-wrap').hide()
|
||||
// } else if (drawInfo.userDrawResult.drawStatus === 3) {
|
||||
// $('.award-info .desc').html('本輪未參與')
|
||||
// $('.award-wrap').hide()
|
||||
// }
|
||||
// }
|
||||
$('.put-wrap .list .item').remove()
|
||||
// 渲染投入列表
|
||||
let list = ''
|
||||
drawInfo.userDrawResult.drawRecords.map(res => {
|
||||
list += `
|
||||
<div class="item">
|
||||
<p><img src="${res.imgUrl}" class="gift" alt=""></p>
|
||||
<div>
|
||||
<img src="./images/diamond.png" class="diamond" alt="">
|
||||
<span class="in">${res.costPieceNum}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
$('.put-wrap .list').append(list)
|
||||
$('.award-info .award-wrap').html(drawInfo.userDrawResult.prizeDiamonds)
|
||||
|
||||
// 渲染前三名
|
||||
topThreeArr = drawInfo.rankUserList
|
||||
let str = ''
|
||||
if (topThreeArr.length === 0) {
|
||||
$('.topthree-desc').html('本輪無人猜中')
|
||||
$('.top-three-list p img').attr('src', './images/default-hui.png')
|
||||
$('.top-three-list').css('display', 'none')
|
||||
$('.top-three').css('line-height', '4rem')
|
||||
// $('.top-three-list p img').attr('src', './images/default-hui.png')
|
||||
} else {
|
||||
$('.topthree-desc').html('本輪前三名')
|
||||
$('.topthree-desc').html('本輪MVP')
|
||||
$('.top-three-list').css('display', 'block')
|
||||
$('.top-three').css('line-height', '0rem')
|
||||
if (topThreeArr.length < 3) {
|
||||
let arr = new Array(3 - topThreeArr.length).fill({
|
||||
avatar: './images/default-hui.png',
|
||||
nick: '虚位以待',
|
||||
uid: null,
|
||||
num: 0
|
||||
})
|
||||
topThreeArr.push(...arr)
|
||||
};
|
||||
topThreeArr.map((item, index) => {
|
||||
$('.top-three-list p img').eq(index).attr('src', item)
|
||||
$(`.top-three-list .no${index + 1} .tx`).attr('uid', item.uid)
|
||||
$(`.top-three-list .no${index + 1} .tx`).attr('src', item.avatar)
|
||||
$(`.top-three-list .no${index + 1} .nick`).html(item.nick)
|
||||
$(`.top-three-list .no${index + 1} .num span`).html(item.prizeDiamonds)
|
||||
})
|
||||
if (topThreeArr.length === 1) {
|
||||
$('.top-three-list p img').eq(1).attr('src', './images/default-hui.png')
|
||||
$('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
|
||||
} else if (topThreeArr.length === 2) {
|
||||
$('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
|
||||
}
|
||||
}
|
||||
|
||||
// 点击跳转个人主页
|
||||
$('.draw-time .top-three .top-three-list .on').off()
|
||||
$('.draw-time .top-three .top-three-list .on').click(function () {
|
||||
let uid = $(this).find('.tx').attr('uid');
|
||||
openPerson(uid)
|
||||
})
|
||||
}
|
||||
|
||||
// 獲取每一輪抽獎的相關配置
|
||||
@@ -463,7 +496,7 @@ const getListItem = (roundId, type) => {
|
||||
roundId,
|
||||
type
|
||||
},
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
listItem = res.data
|
||||
renderListItem()
|
||||
@@ -471,7 +504,7 @@ const getListItem = (roundId, type) => {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -542,13 +575,13 @@ const getPreviousResults = (count, roundId) => {
|
||||
count,
|
||||
roundId
|
||||
},
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
previousResults = res.data
|
||||
renderPreviousResults()
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
@@ -602,12 +635,23 @@ const sendUserDrawInfo = (itemId, num) => {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//跳转个人主页
|
||||
function openPerson(uid) {
|
||||
if (!browser.app) return
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************** 今日排名相關 ********************************************/
|
||||
|
||||
@@ -642,7 +686,7 @@ const getListRank = (type, page) => {
|
||||
page,
|
||||
pageSize
|
||||
},
|
||||
success (res) {
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
if (type === 1) {
|
||||
// 鉆石榜單
|
||||
@@ -676,7 +720,7 @@ const getListRank = (type, page) => {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
error(err) {
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
@@ -875,8 +919,9 @@ $(function () {
|
||||
// }
|
||||
if (browser.app) {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.openChargePage();
|
||||
window.androidJsObj.openChargePage(6);
|
||||
} else if (browser.ios) {
|
||||
window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
|
||||
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
|
||||
}
|
||||
}
|
||||
@@ -1017,14 +1062,14 @@ $(function () {
|
||||
})
|
||||
|
||||
// 播放3s動畫
|
||||
let player1 = new SVGA.Player('.draw-time');
|
||||
let parser1 = new SVGA.Parser('.draw-time');
|
||||
parser1.load('./images/draw.svga', function (videoItem) {
|
||||
// player.loops = 2;
|
||||
player1.clearsAfterStop = false;
|
||||
player1.setVideoItem(videoItem);
|
||||
player1.startAnimation();
|
||||
})
|
||||
// let player1 = new SVGA.Player('.draw-time');
|
||||
// let parser1 = new SVGA.Parser('.draw-time');
|
||||
// parser1.load('./images/draw.svga', function (videoItem) {
|
||||
// // player.loops = 2;
|
||||
// player1.clearsAfterStop = false;
|
||||
// player1.setVideoItem(videoItem);
|
||||
// player1.startAnimation();
|
||||
// })
|
||||
|
||||
// 關閉碎片不足提示彈窗
|
||||
$('.cancel-btn').on('click', function () {
|
||||
|
||||
Reference in New Issue
Block a user