星级厨房：修改开奖页面
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,42 +636,129 @@ 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;
|
||||
|
||||
.award-total {
|
||||
color: #FEEF60;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(28, );
|
||||
// .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 底部信息
|
||||
.info-bottom {
|
||||
position: fixed;
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
@@ -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>鉆石`)
|
||||
// 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()
|
||||
// }
|
||||
} 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('本輪前三名')
|
||||
topThreeArr.map((item, index) => {
|
||||
$('.top-three-list p img').eq(index).attr('src', item)
|
||||
$('.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 .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)
|
||||
})
|
||||
}
|
||||
|
||||
// 獲取每一輪抽獎的相關配置
|
||||
@@ -608,6 +641,17 @@ const sendUserDrawInfo = (itemId, num) => {
|
||||
})
|
||||
}
|
||||
|
||||
//跳转个人主页
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************** 今日排名相關 ********************************************/
|
||||
|
||||
@@ -1018,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