迁移深海奇缘
This commit is contained in:
Dragon
@@ -1,17 +1,16 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'din-medium';
|
font-family: "din-medium";
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
||||||
}
|
}
|
||||||
|
html,
|
||||||
html, body {
|
body {
|
||||||
font-family: 'din-medium';
|
font-family: "din-medium";
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,109 +20,102 @@ html, body {
|
|||||||
background: url("../images/index-bg.png") no-repeat center/cover;
|
background: url("../images/index-bg.png") no-repeat center/cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.wrap .rule,
|
||||||
.wrap .rule, .wrap .record, .wrap .rank {
|
.wrap .record,
|
||||||
|
.wrap .rank {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 12.8rem;
|
bottom: 12.8rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
height: 0.53333rem;
|
height: 0.5333333333rem;
|
||||||
}
|
}
|
||||||
|
.wrap .rule img,
|
||||||
.wrap .rule img, .wrap .record img, .wrap .rank img {
|
.wrap .record img,
|
||||||
|
.wrap .rank img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .record {
|
.wrap .record {
|
||||||
bottom: 12.05333rem;
|
bottom: 12.0533333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .rank {
|
.wrap .rank {
|
||||||
bottom: 11.36rem;
|
bottom: 11.36rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result {
|
.wrap .previous-result {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10.72rem;
|
bottom: 10.72rem;
|
||||||
left: 0.24rem;
|
left: 0.24rem;
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result span {
|
.wrap .previous-result span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result .result-list {
|
.wrap .previous-result .result-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result .result-list p {
|
.wrap .previous-result .result-list p {
|
||||||
width: 0.53333rem;
|
width: 0.5333333333rem;
|
||||||
height: 0.53333rem;
|
height: 0.5333333333rem;
|
||||||
margin-left: 0.10667rem;
|
margin-left: 0.1066666667rem;
|
||||||
background: url("../images/little-bubble.png") 0 0/100% 100%;
|
background: url("../images/little-bubble.png") 0 0/100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result .result-list p:last-child {
|
.wrap .previous-result .result-list p:last-child {
|
||||||
background: url("../images/last-little-bubble.png") 0 0/100% 100%, url("../images/little-bubble.png") 0 0/100% 100%;
|
background: url("../images/last-little-bubble.png") 0 0/100% 100%, url("../images/little-bubble.png") 0 0/100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .previous-result .result-list p img {
|
.wrap .previous-result .result-list p img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.wrap .previous-result .more {
|
||||||
|
width: 0.5333333333rem;
|
||||||
|
height: 0.5333333333rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
}
|
||||||
.wrap .mall {
|
.wrap .mall {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10.50667rem;
|
bottom: 10.5066666667rem;
|
||||||
right: 0.48rem;
|
right: 0.48rem;
|
||||||
width: 2.13333rem;
|
width: 2.1333333333rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .mall img {
|
.wrap .mall img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area {
|
.wrap .game-area {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 9.46667rem;
|
width: 9.4666666667rem;
|
||||||
height: 10.32rem;
|
height: 10.32rem;
|
||||||
background: url("../images/game-area.png") no-repeat 0 0/100% 100%;
|
background: url("../images/game-area.png") no-repeat 0 0/100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time {
|
.wrap .game-area .select-time {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .count-down {
|
.wrap .game-area .select-time .count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.26667rem;
|
top: -0.2666666667rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 3.68rem;
|
width: 3.68rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
line-height: 1.01333rem;
|
line-height: 1.0133333333rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .count-down span {
|
.wrap .game-area .select-time .count-down span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul {
|
.wrap .game-area .select-time ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -131,33 +123,30 @@ html, body {
|
|||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
margin-top: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li {
|
.wrap .game-area .select-time ul li {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 1.73333rem;
|
width: 1.7333333333rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
margin-top: 0.98667rem;
|
margin-top: 0.9866666667rem;
|
||||||
margin-right: 0.34667rem;
|
margin-right: 0.3466666667rem;
|
||||||
background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li img {
|
.wrap .game-area .select-time ul li img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li .multiple {
|
.wrap .game-area .select-time ul li .multiple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.13333rem;
|
top: 0.1333333333rem;
|
||||||
left: 0.13333rem;
|
left: 0.1333333333rem;
|
||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50;
|
text-shadow: 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li .name {
|
.wrap .game-area .select-time ul li .name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0.13333rem;
|
bottom: 0.1333333333rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
@@ -165,53 +154,47 @@ html, body {
|
|||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li .bubble-2s {
|
.wrap .game-area .select-time ul li .bubble-2s {
|
||||||
display: none;
|
display: none;
|
||||||
width: 1.22667rem;
|
width: 1.2266666667rem;
|
||||||
height: 0.74667rem;
|
height: 0.7466666667rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.8rem;
|
top: -0.8rem;
|
||||||
left: -0.37333rem;
|
left: -0.3733333333rem;
|
||||||
background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
|
background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
|
||||||
transform: rotate(-15deg);
|
transform: rotate(-15deg);
|
||||||
text-indent: 0.21333rem;
|
text-indent: 0.2133333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li .bubble-2s p {
|
.wrap .game-area .select-time ul li .bubble-2s p {
|
||||||
font-size: 0.21333rem;
|
font-size: 0.2133333333rem;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-top: 0.24rem;
|
padding-top: 0.24rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: -0.26667rem;
|
margin-left: -0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time ul li .select-num {
|
.wrap .game-area .select-time ul li .select-num {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.26667rem;
|
top: 0.2666666667rem;
|
||||||
right: 0.21333rem;
|
right: 0.2133333333rem;
|
||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow: 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F;
|
text-shadow: 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .btn-wrap {
|
.wrap .game-area .select-time .btn-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 8.26667rem;
|
width: 8.2666666667rem;
|
||||||
height: 1.12rem;
|
height: 1.12rem;
|
||||||
margin: 0.21333rem auto 0;
|
margin: 0.4rem auto 0;
|
||||||
margin-top: 1.06667rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .btn-wrap div {
|
.wrap .game-area .select-time .btn-wrap div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 2.45333rem;
|
width: 2.4533333333rem;
|
||||||
height: 1.12rem;
|
height: 1.12rem;
|
||||||
background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
|
background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -219,88 +202,78 @@ html, body {
|
|||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
color: #1C5484;
|
color: #1C5484;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .btn-wrap div.active {
|
.wrap .game-area .select-time .btn-wrap div.active {
|
||||||
background-image: url("../images/fragment-btn-active.png");
|
background-image: url("../images/fragment-btn-active.png");
|
||||||
color: #B33E17;
|
color: #B33E17;
|
||||||
}
|
}
|
||||||
|
.wrap .game-area .select-time .btn-wrap div.active img,
|
||||||
.wrap .game-area .select-time .btn-wrap div.active img, .wrap .game-area .select-time .btn-wrap div.active span {
|
.wrap .game-area .select-time .btn-wrap div.active span {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .btn-wrap div img {
|
.wrap .game-area .select-time .btn-wrap div img {
|
||||||
width: 0.48rem;
|
width: 0.48rem;
|
||||||
height: 0.48rem;
|
height: 0.48rem;
|
||||||
margin-bottom: 0.21333rem;
|
margin-bottom: 0.2133333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .select-time .btn-wrap div span {
|
.wrap .game-area .select-time .btn-wrap div span {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.21333rem;
|
margin-bottom: 0.2133333333rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-right: 0.13333rem;
|
margin-right: 0.1333333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .wait-time {
|
.wrap .game-area .wait-time {
|
||||||
display: none;
|
display: none;
|
||||||
width: 9.06667rem;
|
width: 9.0666666667rem;
|
||||||
height: 6.66667rem;
|
height: 6.6666666667rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 1.06667rem;
|
margin-top: 1.0666666667rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .wait-time .count-down {
|
.wrap .game-area .wait-time .count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1.33333rem;
|
top: -1.3333333333rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 3.68rem;
|
width: 3.68rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
line-height: 1.01333rem;
|
line-height: 1.0133333333rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .wait-time .count-down span {
|
.wrap .game-area .wait-time .count-down span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time {
|
.wrap .game-area .draw-time {
|
||||||
display: none;
|
display: none;
|
||||||
width: 9.06667rem;
|
width: 9.0666666667rem;
|
||||||
height: 6.66667rem;
|
height: 6.6666666667rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 1.06667rem;
|
margin-top: 1.0666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .count-down {
|
.wrap .game-area .draw-time .count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.26667rem;
|
top: -0.2666666667rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 3.68rem;
|
width: 3.68rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
line-height: 1.01333rem;
|
line-height: 1.0133333333rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
|
||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .count-down span {
|
.wrap .game-area .draw-time .count-down span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three {
|
.wrap .game-area .draw-time .top-three {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0.4rem;
|
left: 0.4rem;
|
||||||
@@ -309,93 +282,81 @@ html, body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three.no-one {
|
.wrap .game-area .draw-time .top-three.no-one {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-bottom: 0.53333rem;
|
margin-bottom: 0.5333333333rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three span {
|
.wrap .game-area .draw-time .top-three span {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three .top-three-list {
|
.wrap .game-area .draw-time .top-three .top-three-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three .top-three-list p {
|
.wrap .game-area .draw-time .top-three .top-three-list p {
|
||||||
width: 1.12rem;
|
width: 1.12rem;
|
||||||
height: 1.12rem;
|
height: 1.12rem;
|
||||||
margin-left: 0.32rem;
|
margin-left: 0.32rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .top-three .top-three-list p img {
|
.wrap .game-area .draw-time .top-three .top-three-list p img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 0.02667rem solid #FEEF60;
|
border: 0.0266666667rem solid #FEEF60;
|
||||||
margin-right: 0.21333rem;
|
margin-right: 0.2133333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .draw-pic {
|
.wrap .game-area .draw-time .draw-pic {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
top: 1.92rem;
|
top: 1.92rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 3.73333rem;
|
width: 3.7333333333rem;
|
||||||
height: 3.73333rem;
|
height: 3.7333333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .game-area .draw-time .draw-pic img {
|
.wrap .game-area .draw-time .draw-pic img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .info-bottom {
|
.wrap .info-bottom {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1.61333rem;
|
height: 1.6133333333rem;
|
||||||
background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%;
|
background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.wrap .info-bottom .fragment,
|
||||||
.wrap .info-bottom .fragment, .wrap .info-bottom .award {
|
.wrap .info-bottom .award {
|
||||||
width: 3.06667rem;
|
width: 3.0666666667rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
line-height: 0.88rem;
|
line-height: 0.88rem;
|
||||||
background: url("../images/fragment-mine.png") no-repeat 0 0/100% 100%;
|
background: url("../images/fragment-mine.png") no-repeat 0 0/100% 100%;
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
color: white;
|
color: white;
|
||||||
text-indent: 1.06667rem;
|
text-indent: 1.0666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .info-bottom .award {
|
.wrap .info-bottom .award {
|
||||||
background-image: url("../images/award-today.png");
|
background-image: url("../images/award-today.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .info-bottom .avatar {
|
.wrap .info-bottom .avatar {
|
||||||
width: 1.86667rem;
|
width: 1.8666666667rem;
|
||||||
height: 1.86667rem;
|
height: 1.8666666667rem;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .info-bottom .avatar img {
|
.wrap .info-bottom .avatar img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .shade-mask {
|
.wrap .shade-mask {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -406,7 +367,6 @@ html, body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .shade-mask .shade-content {
|
.wrap .shade-mask .shade-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -415,14 +375,13 @@ html, body {
|
|||||||
width: 7.68rem;
|
width: 7.68rem;
|
||||||
height: 8.88rem;
|
height: 8.88rem;
|
||||||
background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%;
|
||||||
padding: 2.13333rem 0.86667rem 0 0.53333rem;
|
padding: 2.1333333333rem 0.8666666667rem 0 0.5333333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .shade-mask .shade-content p {
|
.wrap .shade-mask .shade-content p {
|
||||||
font-size: 0.42667rem;
|
font-size: 0.3466666667rem;
|
||||||
color: #ED7B50;
|
color: #ED7B50;
|
||||||
font-weight: bold;
|
margin-bottom: 0.5333333333rem;
|
||||||
margin-bottom: 0.53333rem;
|
line-height: 0.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-in-app {
|
.no-in-app {
|
||||||
@@ -435,3 +394,5 @@ html, body {
|
|||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=index.css.map */
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
@return $px / $rem+rem;
|
@return $px / $rem+rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'din-medium';
|
font-family: 'din-medium';
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
||||||
@@ -18,37 +18,45 @@
|
|||||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body{
|
html,
|
||||||
|
body {
|
||||||
font-family: 'din-medium';
|
font-family: 'din-medium';
|
||||||
// 海浪svga过长
|
// 海浪svga过长
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap{
|
.wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: url('../images/index-bg.png') no-repeat center/cover;
|
background: url('../images/index-bg.png') no-repeat center/cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
.rule, .record, .rank{
|
|
||||||
|
.rule,
|
||||||
|
.record,
|
||||||
|
.rank {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
// top: px2rem(336);
|
// top: px2rem(336);
|
||||||
bottom: px2rem(960);
|
bottom: px2rem(960);
|
||||||
left: 0;
|
left: 0;
|
||||||
width: px2rem(120);
|
width: px2rem(120);
|
||||||
height: px2rem(40);
|
height: px2rem(40);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.record{
|
|
||||||
|
.record {
|
||||||
// top: px2rem(390);
|
// top: px2rem(390);
|
||||||
bottom: px2rem(904);
|
bottom: px2rem(904);
|
||||||
}
|
}
|
||||||
.rank{
|
|
||||||
|
.rank {
|
||||||
// top: px2rem(440);
|
// top: px2rem(440);
|
||||||
bottom: px2rem(852);
|
bottom: px2rem(852);
|
||||||
}
|
}
|
||||||
.previous-result{
|
|
||||||
|
.previous-result {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: px2rem(804);
|
bottom: px2rem(804);
|
||||||
left: px2rem(18);
|
left: px2rem(18);
|
||||||
@@ -57,38 +65,51 @@ html, body{
|
|||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.result-list{
|
|
||||||
|
.result-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
p{
|
|
||||||
|
p {
|
||||||
width: px2rem(40);
|
width: px2rem(40);
|
||||||
height: px2rem(40);
|
height: px2rem(40);
|
||||||
margin-left: px2rem(8);
|
margin-left: px2rem(8);
|
||||||
background: url('../images/little-bubble.png') 0 0/100% 100%;
|
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%;
|
&: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%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.more{
|
||||||
|
width: px2rem(40, );
|
||||||
|
height: px2rem(40, );
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: px2rem(9, );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mall{
|
.mall {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// top: px2rem(400);
|
// top: px2rem(400);
|
||||||
bottom: px2rem(788);
|
bottom: px2rem(788);
|
||||||
right: px2rem(36);
|
right: px2rem(36);
|
||||||
width: px2rem(160);
|
width: px2rem(160);
|
||||||
height: px2rem(150);
|
height: px2rem(150);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.game-area{
|
|
||||||
|
.game-area {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// top: px2rem(560);
|
// top: px2rem(560);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -98,10 +119,12 @@ html, body{
|
|||||||
width: px2rem(710);
|
width: px2rem(710);
|
||||||
height: px2rem(774);
|
height: px2rem(774);
|
||||||
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
|
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
|
||||||
|
|
||||||
// 等待倒计时30s
|
// 等待倒计时30s
|
||||||
.select-time{
|
.select-time {
|
||||||
display: none;
|
display: none;
|
||||||
.count-down{
|
|
||||||
|
.count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(-20);
|
top: px2rem(-20);
|
||||||
@@ -111,17 +134,19 @@ html, body{
|
|||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
line-height: px2rem(76);
|
line-height: px2rem(76);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
||||||
font-size: px2rem(36);
|
font-size: px2rem(36);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 海鲜列表
|
// 海鲜列表
|
||||||
ul{
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
@@ -129,30 +154,35 @@ html, body{
|
|||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
li{
|
margin-top: 0.6rem;
|
||||||
|
|
||||||
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: px2rem(130);
|
width: px2rem(130);
|
||||||
height: px2rem(150);
|
height: px2rem(150);
|
||||||
margin-top: px2rem(74);
|
margin-top: px2rem(74);
|
||||||
margin-right: px2rem(26);
|
margin-right: px2rem(26);
|
||||||
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.multiple{
|
|
||||||
|
.multiple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(10);
|
top: px2rem(10);
|
||||||
left: px2rem(10);
|
left: px2rem(10);
|
||||||
font-size: px2rem(24);
|
font-size: px2rem(24);
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 1px 1px 0px#ED7B50,
|
text-shadow: 1px 1px 0px#ED7B50,
|
||||||
-1px -1px 0px#ED7B50,
|
-1px -1px 0px#ED7B50,
|
||||||
1px 1px 0px#ED7B50,
|
1px 1px 0px#ED7B50,
|
||||||
-1px -1px 0px#ED7B50,
|
-1px -1px 0px#ED7B50,
|
||||||
1px 1px 0px#ED7B50,
|
1px 1px 0px#ED7B50,
|
||||||
-1px -1px 0px#ED7B50;
|
-1px -1px 0px#ED7B50;
|
||||||
}
|
}
|
||||||
.name{
|
|
||||||
|
.name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: px2rem(10);
|
bottom: px2rem(10);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -162,7 +192,8 @@ html, body{
|
|||||||
font-size: px2rem(24);
|
font-size: px2rem(24);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.bubble-2s{
|
|
||||||
|
.bubble-2s {
|
||||||
display: none;
|
display: none;
|
||||||
width: px2rem(92);
|
width: px2rem(92);
|
||||||
height: px2rem(56);
|
height: px2rem(56);
|
||||||
@@ -172,7 +203,8 @@ html, body{
|
|||||||
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
|
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
|
||||||
transform: rotate(-15deg);
|
transform: rotate(-15deg);
|
||||||
text-indent: px2rem(16);
|
text-indent: px2rem(16);
|
||||||
p{
|
|
||||||
|
p {
|
||||||
font-size: px2rem(16);
|
font-size: px2rem(16);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -181,7 +213,8 @@ html, body{
|
|||||||
margin-left: px2rem(-20);
|
margin-left: px2rem(-20);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.select-num{
|
|
||||||
|
.select-num {
|
||||||
// display: none;
|
// display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(20);
|
top: px2rem(20);
|
||||||
@@ -194,24 +227,25 @@ html, body{
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
// text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
|
// text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
|
||||||
text-shadow: 1px 1px 0px#FF5C7F,
|
text-shadow: 1px 1px 0px#FF5C7F,
|
||||||
-1px -1px 0px#FF5C7F,
|
-1px -1px 0px#FF5C7F,
|
||||||
1px 1px 0px#FF5C7F,
|
1px 1px 0px#FF5C7F,
|
||||||
-1px -1px 0px#FF5C7F,
|
-1px -1px 0px#FF5C7F,
|
||||||
1px 1px 0px#FF5C7F,
|
1px 1px 0px#FF5C7F,
|
||||||
-1px -1px 0px#FF5C7F;
|
-1px -1px 0px#FF5C7F;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 碎片按钮
|
// 碎片按钮
|
||||||
.btn-wrap{
|
.btn-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: px2rem(620);
|
width: px2rem(620);
|
||||||
height: px2rem(84);
|
height: px2rem(84);
|
||||||
margin: px2rem(16) auto 0;
|
margin: 0.4rem auto 0;
|
||||||
margin-top: px2rem(80);
|
|
||||||
div{
|
div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -222,19 +256,24 @@ html, body{
|
|||||||
line-height: px2rem(60);
|
line-height: px2rem(60);
|
||||||
font-size: px2rem(36);
|
font-size: px2rem(36);
|
||||||
color: #1C5484;
|
color: #1C5484;
|
||||||
&.active{
|
|
||||||
|
&.active {
|
||||||
background-image: url('../images/fragment-btn-active.png');
|
background-image: url('../images/fragment-btn-active.png');
|
||||||
color: #B33E17;
|
color: #B33E17;
|
||||||
img, span{
|
|
||||||
|
img,
|
||||||
|
span {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: px2rem(36);
|
width: px2rem(36);
|
||||||
height: px2rem(36);
|
height: px2rem(36);
|
||||||
margin-bottom: px2rem(16);
|
margin-bottom: px2rem(16);
|
||||||
}
|
}
|
||||||
span{
|
|
||||||
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: px2rem(16);
|
margin-bottom: px2rem(16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -243,15 +282,17 @@ html, body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 等待结果5s
|
// 等待结果5s
|
||||||
.wait-time{
|
.wait-time {
|
||||||
display: none;
|
display: none;
|
||||||
width: px2rem(680);
|
width: px2rem(680);
|
||||||
height: px2rem(500);
|
height: px2rem(500);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: px2rem(80);
|
margin-top: px2rem(80);
|
||||||
position: relative;
|
position: relative;
|
||||||
.count-down{
|
|
||||||
|
.count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(-100);
|
top: px2rem(-100);
|
||||||
@@ -261,25 +302,28 @@ html, body{
|
|||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
line-height: px2rem(76);
|
line-height: px2rem(76);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
||||||
font-size: px2rem(36);
|
font-size: px2rem(36);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 开奖时间
|
// 开奖时间
|
||||||
.draw-time{
|
.draw-time {
|
||||||
display: none;
|
display: none;
|
||||||
width: px2rem(680);
|
width: px2rem(680);
|
||||||
height: px2rem(500);
|
height: px2rem(500);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: px2rem(80);
|
margin-top: px2rem(80);
|
||||||
.count-down{
|
|
||||||
|
.count-down {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(-20);
|
top: px2rem(-20);
|
||||||
@@ -289,42 +333,49 @@ html, body{
|
|||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
line-height: px2rem(76);
|
line-height: px2rem(76);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
|
||||||
font-size: px2rem(36);
|
font-size: px2rem(36);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FEEF60;
|
color: #FEEF60;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.top-three{
|
|
||||||
|
.top-three {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: px2rem(30);
|
left: px2rem(30);
|
||||||
bottom: px2rem(180);
|
bottom: px2rem(180);
|
||||||
margin-left: px2rem(30);
|
margin-left: px2rem(30);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&.no-one{
|
|
||||||
|
&.no-one {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-bottom: px2rem(40);
|
margin-bottom: px2rem(40);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.top-three-list{
|
|
||||||
|
.top-three-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
p{
|
|
||||||
|
p {
|
||||||
width: px2rem(84);
|
width: px2rem(84);
|
||||||
height: px2rem(84);
|
height: px2rem(84);
|
||||||
margin-left: px2rem(24);
|
margin-left: px2rem(24);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: px2rem(2) solid #FEEF60;
|
border: px2rem(2) solid #FEEF60;
|
||||||
@@ -333,7 +384,8 @@ html, body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.draw-pic{
|
|
||||||
|
.draw-pic {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
@@ -341,15 +393,17 @@ html, body{
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: px2rem(280);
|
width: px2rem(280);
|
||||||
height: px2rem(280);
|
height: px2rem(280);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 底部信息
|
// 底部信息
|
||||||
.info-bottom{
|
.info-bottom {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -360,7 +414,9 @@ html, body{
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.fragment, .award{
|
|
||||||
|
.fragment,
|
||||||
|
.award {
|
||||||
width: px2rem(230);
|
width: px2rem(230);
|
||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
line-height: px2rem(66);
|
line-height: px2rem(66);
|
||||||
@@ -369,22 +425,26 @@ html, body{
|
|||||||
color: white;
|
color: white;
|
||||||
text-indent: px2rem(80);
|
text-indent: px2rem(80);
|
||||||
}
|
}
|
||||||
.award{
|
|
||||||
|
.award {
|
||||||
background-image: url('../images/award-today.png');
|
background-image: url('../images/award-today.png');
|
||||||
}
|
}
|
||||||
.avatar{
|
|
||||||
|
.avatar {
|
||||||
width: px2rem(140);
|
width: px2rem(140);
|
||||||
height: px2rem(140);
|
height: px2rem(140);
|
||||||
margin-bottom: px2rem(60);
|
margin-bottom: px2rem(60);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 规则弹窗
|
// 规则弹窗
|
||||||
.shade-mask{
|
.shade-mask {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -393,7 +453,8 @@ html, body{
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||||
.shade-content{
|
|
||||||
|
.shade-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -402,17 +463,19 @@ html, body{
|
|||||||
height: px2rem(666);
|
height: px2rem(666);
|
||||||
background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
|
||||||
padding: px2rem(160) px2rem(65) 0 px2rem(40);
|
padding: px2rem(160) px2rem(65) 0 px2rem(40);
|
||||||
p{
|
|
||||||
font-size: px2rem(32);
|
p {
|
||||||
|
font-size: px2rem(26);
|
||||||
color: #ED7B50;
|
color: #ED7B50;
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
margin-bottom: px2rem(40);
|
margin-bottom: px2rem(40);
|
||||||
|
line-height: 0.45rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-in-app{
|
.no-in-app {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
97
view/yinmeng/activity/act-ocean/css/result.css
Normal file
97
view/yinmeng/activity/act-ocean/css/result.css
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "pingfang-bold";
|
||||||
|
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||||
|
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "pingfang-medium";
|
||||||
|
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||||
|
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: #0073E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 10rem;
|
||||||
|
height: 17.7866666667rem;
|
||||||
|
background: url(../images/resultBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.header .title {
|
||||||
|
width: 6.1866666667rem;
|
||||||
|
height: 1.5333333333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.4rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.header span {
|
||||||
|
font-size: 0.5333333333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.9rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 10rem;
|
||||||
|
height: 15.6rem;
|
||||||
|
background: url(../images/gameArea.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: -15.85rem auto 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.main li {
|
||||||
|
width: 9.4533333333rem;
|
||||||
|
height: 1.1466666667rem;
|
||||||
|
line-height: 1.1466666667rem;
|
||||||
|
background: #4C9BE4;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto 0.24rem;
|
||||||
|
}
|
||||||
|
.main li:nth-child(1) {
|
||||||
|
margin-top: 1.5733333333rem;
|
||||||
|
}
|
||||||
|
.main li .session {
|
||||||
|
float: left;
|
||||||
|
width: 1.68rem;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 0.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.main li .list {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.main li .list p {
|
||||||
|
width: 0.8266666667rem;
|
||||||
|
height: 0.8266666667rem;
|
||||||
|
line-height: 1.1466666667rem;
|
||||||
|
margin-left: 0.4666666667rem;
|
||||||
|
background: url("https://img.pekolive.com/cf-record_bubble.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.main li .list p img {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
margin-left: 0.07rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=result.css.map */
|
||||||
122
view/yinmeng/activity/act-ocean/css/result.scss
Normal file
122
view/yinmeng/activity/act-ocean/css/result.scss
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
@function px2rem($px, $rem: 75) {
|
||||||
|
@return $px / $rem+rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function prefixurl() {
|
||||||
|
@return 'https://img.pekolive.com/'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pingfang-bold';
|
||||||
|
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||||
|
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||||
|
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||||
|
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pingfang-medium';
|
||||||
|
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||||
|
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||||
|
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||||
|
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: #0073E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: px2rem(750, );
|
||||||
|
height: px2rem(1334, );
|
||||||
|
background: url(../images/resultBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: px2rem(464, );
|
||||||
|
height: px2rem(115, );
|
||||||
|
position: absolute;
|
||||||
|
top: 1.4rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: px2rem(40, );
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.9rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: px2rem(750, );
|
||||||
|
height: px2rem(1170, );
|
||||||
|
background: url(../images/gameArea.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: -15.85rem auto 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: px2rem(709, );
|
||||||
|
height: px2rem(86, );
|
||||||
|
line-height: px2rem(86, );
|
||||||
|
// background: url(prefixurl()+'cf-result_list_bg.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
background: #4C9BE4;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto 0.24rem;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
margin-top: px2rem(118, );
|
||||||
|
}
|
||||||
|
|
||||||
|
.session {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(126, );
|
||||||
|
height: 100%;
|
||||||
|
font-size: px2rem(30, );
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
// -webkit-text-stroke: px2rem(2, ) #007CE4;
|
||||||
|
margin-left: px2rem(30, );
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
float: right;
|
||||||
|
// width: px2rem(450, );
|
||||||
|
height: 100%;
|
||||||
|
margin-right: px2rem(60, );
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: px2rem(62, );
|
||||||
|
height: px2rem(62, );
|
||||||
|
line-height: px2rem(86, );
|
||||||
|
margin-left: px2rem(35, );
|
||||||
|
background: url(prefixurl()+'cf-record_bubble.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
margin-left: 0.07rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
view/yinmeng/activity/act-ocean/images/gameArea.png
Normal file
BIN
view/yinmeng/activity/act-ocean/images/gameArea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
view/yinmeng/activity/act-ocean/images/more.png
Normal file
BIN
view/yinmeng/activity/act-ocean/images/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
view/yinmeng/activity/act-ocean/images/resultBg.png
Normal file
BIN
view/yinmeng/activity/act-ocean/images/resultBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
BIN
view/yinmeng/activity/act-ocean/images/rusetTitle.png
Normal file
BIN
view/yinmeng/activity/act-ocean/images/rusetTitle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -20,12 +20,13 @@
|
|||||||
<div class="previous-result">
|
<div class="previous-result">
|
||||||
<span>往轮结果</span>
|
<span>往轮结果</span>
|
||||||
<div class="result-list">
|
<div class="result-list">
|
||||||
|
<!-- <p><img src="" alt=""></p>
|
||||||
<p><img src="" alt=""></p>
|
<p><img src="" alt=""></p>
|
||||||
<p><img src="" alt=""></p>
|
<p><img src="" alt=""></p>
|
||||||
<p><img src="" alt=""></p>
|
<p><img src="" alt=""></p>
|
||||||
<p><img src="" alt=""></p>
|
<p><img src="" alt=""></p> -->
|
||||||
<p><img src="" alt=""></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img class="more" src="./images/more.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 特权商城 -->
|
<!-- 特权商城 -->
|
||||||
@@ -39,14 +40,14 @@
|
|||||||
<div class="count-down">请选择 <span class="count-down-num">30</span>S</div>
|
<div class="count-down">请选择 <span class="count-down-num">30</span>S</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="btn-wrap">
|
|
||||||
<div><span>1</span> <img src="./images/fragment.png" alt=""></div>
|
|
||||||
<div><span>10</span> <img src="./images/fragment.png" alt=""></div>
|
|
||||||
<div><span>100</span> <img src="./images/fragment.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="btn-wrap">
|
||||||
|
<div class="active"><span>1</span> <img src="./images/fragment.png" alt=""></div>
|
||||||
|
<div><span>10</span> <img src="./images/fragment.png" alt=""></div>
|
||||||
|
<div><span>100</span> <img src="./images/fragment.png" alt=""></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 等待结果 -->
|
<!-- 等待结果 -->
|
||||||
<div class="wait-time">
|
<div class="wait-time">
|
||||||
@@ -76,10 +77,10 @@
|
|||||||
<div class="shade-mask">
|
<div class="shade-mask">
|
||||||
<div class="shade-content">
|
<div class="shade-content">
|
||||||
<p>1.用户购买限定头饰即可获赠送特权碎片，参与游戏活动</p>
|
<p>1.用户购买限定头饰即可获赠送特权碎片，参与游戏活动</p>
|
||||||
<p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物选择总次数*中奖海洋生物对应倍数*10}的钻石奖励</p>
|
<p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物购买数“中奖海洋生物对应倍数*10}的钻石奖励</p>
|
||||||
<p>3.该活动赠送给您的特权碎片为参与该活动的虚拟道具，不具任何价值也不能转赠其他用户</p>
|
<p>3.该活动赠送给您的特权碎片为参与该活动的虚拟道具，不具任何价值也不能转赠其他用户</p>
|
||||||
<p>4.活动结束将关闭页面，剩余碎片将会清空，请留意活动关闭时间</p>
|
<p>4.活动结束将关闭页面，剩余碎片将会清空，请留意活动关闭时间</p>
|
||||||
<p>5.本活动与 Apple Inc. 无关，最终解释权归平台所有</p>
|
<p>5.本活动与Apple Inc.无关，最终解释权归平台所有</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ const showLoading = (content = '加载中...') => {
|
|||||||
type: 2,
|
type: 2,
|
||||||
shadeClose: false,
|
shadeClose: false,
|
||||||
content,
|
content,
|
||||||
success(e) {
|
success (e) {
|
||||||
layerIndex = $(e).attr('index')
|
layerIndex = $(e).attr('index')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -32,9 +32,9 @@ const toastMsg = (content = '操作完成', time = 2) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!browser.app){
|
if (false) {//!browser.app
|
||||||
toastMsg('请在app内打开！');
|
toastMsg('请在app内打开！');
|
||||||
}else{
|
} else {
|
||||||
$('.wrap').removeClass('no-in-app')
|
$('.wrap').removeClass('no-in-app')
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,16 +45,16 @@ const getUserInfo = (param) => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
$('.info-bottom').find('.avatar img').attr('src', res.data.avatar)
|
$('.info-bottom').find('.avatar img').attr('src', res.data.avatar)
|
||||||
// if(res.data.nick.length > 10){
|
// if(res.data.nick.length > 10){
|
||||||
// res.data.nick = res.data.nick.slice(0,10) + '...'
|
// res.data.nick = res.data.nick.slice(0,10) + '...'
|
||||||
// }
|
// }
|
||||||
// $('.bottom').find('.nick').html(res.data.nick)
|
// $('.bottom').find('.nick').html(res.data.nick)
|
||||||
|
|
||||||
if(res.data.todayReward.toString().length >= 5) {
|
if (res.data.todayReward.toString().length >= 5) {
|
||||||
res.data.todayReward = (res.data.todayReward/10000).toFixed(2) + 'w'
|
res.data.todayReward = (res.data.todayReward / 10000).toFixed(2) + 'w'
|
||||||
}
|
}
|
||||||
$('.info-bottom').find('.award').html(res.data.todayReward)
|
$('.info-bottom').find('.award').html(res.data.todayReward)
|
||||||
// if(res.data.pieceNum.toString().length >= 5) {
|
// if(res.data.pieceNum.toString().length >= 5) {
|
||||||
@@ -62,11 +62,11 @@ const getUserInfo = (param) => {
|
|||||||
// }
|
// }
|
||||||
$('.info-bottom').find('.fragment').html(res.data.pieceNum)
|
$('.info-bottom').find('.fragment').html(res.data.pieceNum)
|
||||||
myFragment = res.data.pieceNum
|
myFragment = res.data.pieceNum
|
||||||
}else{
|
} else {
|
||||||
return toastMsg(res.message)
|
return toastMsg(res.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -76,16 +76,16 @@ const getUserPieceNum = () => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
$('.info-bottom').find('.fragment').html(res.data.pieceNum)
|
$('.info-bottom').find('.fragment').html(res.data.pieceNum)
|
||||||
myFragment = res.data.pieceNum
|
myFragment = res.data.pieceNum
|
||||||
}else{
|
} else {
|
||||||
return toastMsg(res.message)
|
return toastMsg(res.message)
|
||||||
}
|
}
|
||||||
lock = !lock
|
lock = !lock
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -102,19 +102,19 @@ const getNewestAct = () => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: urlPrefix + '/act/luckySea/getNewestAct',
|
url: urlPrefix + '/act/luckySea/getNewestAct',
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
if($.isEmptyObject(res.data) || res.data.status === 4 ) {
|
if ($.isEmptyObject(res.data) || res.data.status === 4) {
|
||||||
return showLoading('服务器正在维护中...')
|
return showLoading('服务器正在维护中...')
|
||||||
}else{
|
} else {
|
||||||
console.log(res.timestamp>res.data.endTime);
|
console.log(res.timestamp > res.data.endTime);
|
||||||
if(res.timestamp >= res.data.endTime){ //请求的还是上一轮的数据，重新请求
|
if (res.timestamp >= res.data.endTime) { //请求的还是上一轮的数据，重新请求
|
||||||
console.log('请求的还是上一轮的数据，必须重新请求');
|
console.log('请求的还是上一轮的数据，必须重新请求');
|
||||||
showLoading()
|
showLoading()
|
||||||
timer2 = setTimeout(() => {
|
timer2 = setTimeout(() => {
|
||||||
getNewestAct()
|
getNewestAct()
|
||||||
}, 600);
|
}, 600);
|
||||||
}else{
|
} else {
|
||||||
clearTimeout(timer2)
|
clearTimeout(timer2)
|
||||||
hideLoading(layerIndex)
|
hideLoading(layerIndex)
|
||||||
|
|
||||||
@@ -122,12 +122,12 @@ const getNewestAct = () => {
|
|||||||
getListItem(roundId)
|
getListItem(roundId)
|
||||||
|
|
||||||
// 进行下一轮时，arrTime重新置为空数组，不然在下一轮开始的时候也会执行location.reload()
|
// 进行下一轮时，arrTime重新置为空数组，不然在下一轮开始的时候也会执行location.reload()
|
||||||
if(roundIdArr.length < 2){
|
if (roundIdArr.length < 2) {
|
||||||
roundIdArr = [roundId, roundId]
|
roundIdArr = [roundId, roundId]
|
||||||
}else{
|
} else {
|
||||||
roundIdArr[0] = roundIdArr[1]
|
roundIdArr[0] = roundIdArr[1]
|
||||||
roundIdArr[1] = roundId
|
roundIdArr[1] = roundId
|
||||||
if(roundIdArr[0] != roundIdArr[1]){
|
if (roundIdArr[0] != roundIdArr[1]) {
|
||||||
arrTime = []
|
arrTime = []
|
||||||
arrTime2 = []
|
arrTime2 = []
|
||||||
arrTime3 = []
|
arrTime3 = []
|
||||||
@@ -141,15 +141,15 @@ const getNewestAct = () => {
|
|||||||
drawStageStartTime = res.data.drawStageStartTime
|
drawStageStartTime = res.data.drawStageStartTime
|
||||||
showResultStageStartTime = res.data.showResultStageStartTime
|
showResultStageStartTime = res.data.showResultStageStartTime
|
||||||
endTime = res.data.endTime
|
endTime = res.data.endTime
|
||||||
console.log('获取5个时间戳的值-----','timestamp:',userComeinTime, 'startTime:', startTime, 'drawStageStartTime:', drawStageStartTime, 'showResultStageStartTime:', showResultStageStartTime, 'endTime:', endTime);
|
console.log('获取5个时间戳的值-----', 'timestamp:', userComeinTime, 'startTime:', startTime, 'drawStageStartTime:', drawStageStartTime, 'showResultStageStartTime:', showResultStageStartTime, 'endTime:', endTime);
|
||||||
showView()
|
showView()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
return toastMsg(res.message)
|
return toastMsg(res.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -167,29 +167,29 @@ let isStatus3
|
|||||||
|
|
||||||
let isSelectTab = false
|
let isSelectTab = false
|
||||||
let mySelect
|
let mySelect
|
||||||
let fragmentNum
|
let fragmentNum = 1;
|
||||||
let reg = /^[0-9]*$/
|
let reg = /^[0-9]*$/
|
||||||
|
|
||||||
const showView = () => {
|
const showView = () => {
|
||||||
if( startTime <= userComeinTime && userComeinTime < drawStageStartTime ){
|
if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
|
||||||
// 第一阶段
|
// 第一阶段
|
||||||
console.log('进入第一阶段');
|
console.log('进入第一阶段');
|
||||||
isSelectTab = false
|
isSelectTab = false
|
||||||
$('.select-time').show().siblings().hide()
|
$('.select-time').show().siblings().hide()
|
||||||
$countDown = $('.select-time .count-down .count-down-num')
|
$countDown = $('.select-time .count-down .count-down-num')
|
||||||
|
|
||||||
mySelect = sessionStorage.getItem("mySelect")
|
mySelect = sessionStorage.getItem("mySelect")
|
||||||
if(reg.test(mySelect)){
|
if (reg.test(mySelect)) {
|
||||||
$('.btn-wrap div').eq(mySelect).addClass('active').siblings().removeClass('active')
|
$('.btn-wrap div').eq(mySelect).addClass('active').siblings().removeClass('active')
|
||||||
fragmentNum = parseInt($('.btn-wrap div').eq(mySelect).find('span').html())
|
fragmentNum = parseInt($('.btn-wrap div').eq(mySelect).find('span').html())
|
||||||
isSelectTab = true
|
isSelectTab = true
|
||||||
}
|
}
|
||||||
|
|
||||||
getPreviousResults(5, roundId)
|
getPreviousResults(7, roundId)
|
||||||
showCountDown(userComeinTime, startTime, drawStageStartTime)
|
showCountDown(userComeinTime, startTime, drawStageStartTime)
|
||||||
getUserInfo()
|
getUserInfo()
|
||||||
|
|
||||||
}else if( drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime ){
|
} else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
|
||||||
// 第二阶段
|
// 第二阶段
|
||||||
console.log('进入第二阶段');
|
console.log('进入第二阶段');
|
||||||
|
|
||||||
@@ -204,22 +204,22 @@ const showView = () => {
|
|||||||
|
|
||||||
// $('.btn-wrap').find('div').removeClass('active')
|
// $('.btn-wrap').find('div').removeClass('active')
|
||||||
|
|
||||||
getPreviousResults(5, roundId)
|
getPreviousResults(7, roundId)
|
||||||
showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
|
showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
|
||||||
judgeStatus()
|
judgeStatus()
|
||||||
getUserInfo()
|
getUserInfo()
|
||||||
|
|
||||||
// 播放5s动画
|
// 播放5s动画
|
||||||
let player = new SVGA.Player('.wait-time');
|
let player = new SVGA.Player('.wait-time');
|
||||||
let parser = new SVGA.Parser('.wait-time');
|
let parser = new SVGA.Parser('.wait-time');
|
||||||
parser.load('./images/wait.svga', function(videoItem){
|
parser.load('./images/wait.svga', function (videoItem) {
|
||||||
// player.loops = 2;
|
// player.loops = 2;
|
||||||
player.clearsAfterStop = false;
|
player.clearsAfterStop = false;
|
||||||
player.setVideoItem(videoItem);
|
player.setVideoItem(videoItem);
|
||||||
player.startAnimation();
|
player.startAnimation();
|
||||||
})
|
})
|
||||||
|
|
||||||
}else if( showResultStageStartTime <= userComeinTime && userComeinTime < endTime ){
|
} else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
|
||||||
// 第三阶段
|
// 第三阶段
|
||||||
console.log('进入第三阶段');
|
console.log('进入第三阶段');
|
||||||
$('.draw-time').show().siblings().hide()
|
$('.draw-time').show().siblings().hide()
|
||||||
@@ -242,78 +242,78 @@ let timer
|
|||||||
let delayTime
|
let delayTime
|
||||||
let interval
|
let interval
|
||||||
const showCountDown = (timestamp, startTime, endTime) => {
|
const showCountDown = (timestamp, startTime, endTime) => {
|
||||||
deltaT = ( (endTime - startTime) - (timestamp - startTime) )/1000 //12.361
|
deltaT = ((endTime - startTime) - (timestamp - startTime)) / 1000 //12.361
|
||||||
if( deltaT >= 1 ){
|
if (deltaT >= 1) {
|
||||||
interval = 1
|
interval = 1
|
||||||
}else{
|
} else {
|
||||||
interval = 0
|
interval = 0
|
||||||
}
|
}
|
||||||
console.log('deltaT----------',deltaT);
|
console.log('deltaT----------', deltaT);
|
||||||
countDownTime = Math.floor( deltaT ) //12.361 => 12
|
countDownTime = Math.floor(deltaT) //12.361 => 12
|
||||||
delayTime = deltaT - countDownTime //请求接口的延迟时间
|
delayTime = deltaT - countDownTime //请求接口的延迟时间
|
||||||
|
|
||||||
$countDown.html(countDownTime)
|
$countDown.html(countDownTime)
|
||||||
|
|
||||||
timer = setInterval(() => {
|
timer = setInterval(() => {
|
||||||
if(browser.ios){
|
if (browser.ios) {
|
||||||
if(!isStatus3 && !isStatus2){
|
if (!isStatus3 && !isStatus2) {
|
||||||
// 处理第一阶段
|
// 处理第一阶段
|
||||||
if(arrTime.length < 2){
|
if (arrTime.length < 2) {
|
||||||
arrTime = [new Date().getTime(), new Date().getTime()]
|
arrTime = [new Date().getTime(), new Date().getTime()]
|
||||||
}else{
|
} else {
|
||||||
arrTime[0] = arrTime[1]
|
arrTime[0] = arrTime[1]
|
||||||
arrTime[1] = new Date().getTime()
|
arrTime[1] = new Date().getTime()
|
||||||
// console.log('第一阶段两个时间差是多少-----',(arrTime[1] - arrTime[0])/1000);
|
// console.log('第一阶段两个时间差是多少-----',(arrTime[1] - arrTime[0])/1000);
|
||||||
if((arrTime[1] - arrTime[0])/1000 > 1.5){
|
if ((arrTime[1] - arrTime[0]) / 1000 > 1.5) {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else if(isStatus2){
|
} else if (isStatus2) {
|
||||||
// 第二阶段也要处理
|
// 第二阶段也要处理
|
||||||
if(arrTime2.length < 2){
|
if (arrTime2.length < 2) {
|
||||||
arrTime2 = [new Date().getTime(), new Date().getTime()]
|
arrTime2 = [new Date().getTime(), new Date().getTime()]
|
||||||
}else{
|
} else {
|
||||||
arrTime2[0] = arrTime2[1]
|
arrTime2[0] = arrTime2[1]
|
||||||
arrTime2[1] = new Date().getTime()
|
arrTime2[1] = new Date().getTime()
|
||||||
// console.log('第二阶段两个时间差是多少-----',(arrTime2[1] - arrTime2[0])/1000);
|
// console.log('第二阶段两个时间差是多少-----',(arrTime2[1] - arrTime2[0])/1000);
|
||||||
if((arrTime2[1] - arrTime2[0])/1000 > 1.5){
|
if ((arrTime2[1] - arrTime2[0]) / 1000 > 1.5) {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else if(isStatus3){
|
} else if (isStatus3) {
|
||||||
// 第三阶段也要处理
|
// 第三阶段也要处理
|
||||||
if(arrTime3.length < 2){
|
if (arrTime3.length < 2) {
|
||||||
arrTime3 = [new Date().getTime(), new Date().getTime()]
|
arrTime3 = [new Date().getTime(), new Date().getTime()]
|
||||||
}else{
|
} else {
|
||||||
arrTime3[0] = arrTime3[1]
|
arrTime3[0] = arrTime3[1]
|
||||||
arrTime3[1] = new Date().getTime()
|
arrTime3[1] = new Date().getTime()
|
||||||
// console.log('第三阶段两个时间差是多少-----',(arrTime3[1] - arrTime3[0])/1000);
|
// console.log('第三阶段两个时间差是多少-----',(arrTime3[1] - arrTime3[0])/1000);
|
||||||
if((arrTime3[1] - arrTime3[0])/1000 > 1.5){
|
if ((arrTime3[1] - arrTime3[0]) / 1000 > 1.5) {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
countDownTime--
|
countDownTime--
|
||||||
if(countDownTime <= 0){
|
if (countDownTime <= 0) {
|
||||||
$countDown.html( 0 )
|
$countDown.html(0)
|
||||||
clearInterval(timer)
|
clearInterval(timer)
|
||||||
|
|
||||||
if(isStatus2){ // 倒计时为0时，处于第二阶段的处理
|
if (isStatus2) { // 倒计时为0时，处于第二阶段的处理
|
||||||
if(status){
|
if (status) {
|
||||||
// hideLoading(layerIndex)
|
// hideLoading(layerIndex)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
getNewestAct()
|
getNewestAct()
|
||||||
}, delayTime * 1000)
|
}, delayTime * 1000)
|
||||||
isStatus2 = false
|
isStatus2 = false
|
||||||
}else{
|
} else {
|
||||||
showLoading()
|
showLoading()
|
||||||
// toastMsg('服务器繁忙，请稍等')
|
// toastMsg('服务器繁忙，请稍等')
|
||||||
console.log('status的值-----------',status);
|
console.log('status的值-----------', status);
|
||||||
judgeStatus()
|
judgeStatus()
|
||||||
|
|
||||||
}
|
}
|
||||||
}else if(isStatus3){ //倒计时为0时，处于第三阶段的处理
|
} else if (isStatus3) { //倒计时为0时，处于第三阶段的处理
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
getNewestAct()
|
getNewestAct()
|
||||||
// getListItem(roundId)
|
// getListItem(roundId)
|
||||||
@@ -321,7 +321,7 @@ const showCountDown = (timestamp, startTime, endTime) => {
|
|||||||
// getNewestAct()
|
// getNewestAct()
|
||||||
// getListItem()
|
// getListItem()
|
||||||
isStatus3 = false
|
isStatus3 = false
|
||||||
}else{
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
getNewestAct()
|
getNewestAct()
|
||||||
}, delayTime * 1000)
|
}, delayTime * 1000)
|
||||||
@@ -334,7 +334,7 @@ const showCountDown = (timestamp, startTime, endTime) => {
|
|||||||
// }, delayTime * 1000)
|
// }, delayTime * 1000)
|
||||||
// }
|
// }
|
||||||
|
|
||||||
}else{
|
} else {
|
||||||
$countDown.html(countDownTime)
|
$countDown.html(countDownTime)
|
||||||
}
|
}
|
||||||
}, interval * 1000)
|
}, interval * 1000)
|
||||||
@@ -350,38 +350,38 @@ const judgeStatus = () => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: urlPrefix + '/act/luckySea/getNewestAct',
|
url: urlPrefix + '/act/luckySea/getNewestAct',
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
console.log('res.data的值------------',res.data);
|
console.log('res.data的值------------', res.data);
|
||||||
if($.isEmptyObject(res.data) || res.data.status === 4){
|
if ($.isEmptyObject(res.data) || res.data.status === 4) {
|
||||||
console.log('程序崩了！！！');
|
console.log('程序崩了！！！');
|
||||||
return showLoading('服务器正在维护中...')
|
return showLoading('服务器正在维护中...')
|
||||||
}else if(res.data.status === 3){
|
} else if (res.data.status === 3) {
|
||||||
clearTimeout(timer4)
|
clearTimeout(timer4)
|
||||||
status = true
|
status = true
|
||||||
if(isStatus2 && countDownTime <= 0){
|
if (isStatus2 && countDownTime <= 0) {
|
||||||
showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
|
showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
|
||||||
}
|
}
|
||||||
// hideLoading(layerIndex)
|
// hideLoading(layerIndex)
|
||||||
console.log('status为3时返回的数据--------------',res.data);
|
console.log('status为3时返回的数据--------------', res.data);
|
||||||
drawInfo = res.data
|
drawInfo = res.data
|
||||||
img = res.data.drawImageUrl
|
img = res.data.drawImageUrl
|
||||||
if(isStatus3){
|
if (isStatus3) {
|
||||||
getPreviousResults(5, roundId)
|
getPreviousResults(7, roundId)
|
||||||
}
|
}
|
||||||
renderDrawInfo()
|
renderDrawInfo()
|
||||||
}else{
|
} else {
|
||||||
|
|
||||||
timer4 = setTimeout(() => {
|
timer4 = setTimeout(() => {
|
||||||
judgeStatus()
|
judgeStatus()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
toastMsg(res.message)
|
toastMsg(res.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -390,10 +390,10 @@ const judgeStatus = () => {
|
|||||||
// 渲染开奖信息
|
// 渲染开奖信息
|
||||||
let topThreeArr = []
|
let topThreeArr = []
|
||||||
const renderDrawInfo = () => {
|
const renderDrawInfo = () => {
|
||||||
if(isStatus3){
|
if (isStatus3) {
|
||||||
if(drawInfo.userDrawResult.drawStatus === 1){
|
if (drawInfo.userDrawResult.drawStatus === 1) {
|
||||||
toastMsg(`恭喜你猜中啦，本轮获得${drawInfo.userDrawResult.prizeDiamonds}钻石！`)
|
toastMsg(`恭喜你猜中啦，本轮获得${drawInfo.userDrawResult.prizeDiamonds}钻石！`)
|
||||||
}else if(drawInfo.userDrawResult.drawStatus === 2){
|
} else if (drawInfo.userDrawResult.drawStatus === 2) {
|
||||||
toastMsg('很遗憾本轮没有猜中~')
|
toastMsg('很遗憾本轮没有猜中~')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -408,11 +408,11 @@ const renderDrawInfo = () => {
|
|||||||
// 渲染前三名
|
// 渲染前三名
|
||||||
topThreeArr = drawInfo.rankUserList
|
topThreeArr = drawInfo.rankUserList
|
||||||
let str = ''
|
let str = ''
|
||||||
if(topThreeArr.length === 0){
|
if (topThreeArr.length === 0) {
|
||||||
// 无人猜中
|
// 无人猜中
|
||||||
$('.top-three').addClass('no-one')
|
$('.top-three').addClass('no-one')
|
||||||
$('.top-three').html('<span>本轮无人猜中</span>')
|
$('.top-three').html('<span>本轮无人猜中</span>')
|
||||||
}else if(topThreeArr.length === 1){
|
} else if (topThreeArr.length === 1) {
|
||||||
$('.top-three').removeClass('no-one')
|
$('.top-three').removeClass('no-one')
|
||||||
$('.top-three span').html('本轮第一名')
|
$('.top-three span').html('本轮第一名')
|
||||||
topThreeArr.map((item) => {
|
topThreeArr.map((item) => {
|
||||||
@@ -421,7 +421,7 @@ const renderDrawInfo = () => {
|
|||||||
`
|
`
|
||||||
})
|
})
|
||||||
$('.top-three-list').html(str)
|
$('.top-three-list').html(str)
|
||||||
}else if(topThreeArr.length === 2){
|
} else if (topThreeArr.length === 2) {
|
||||||
$('.top-three').removeClass('no-one')
|
$('.top-three').removeClass('no-one')
|
||||||
$('.top-three span').html('本轮前两名')
|
$('.top-three span').html('本轮前两名')
|
||||||
topThreeArr.map((item) => {
|
topThreeArr.map((item) => {
|
||||||
@@ -430,7 +430,7 @@ const renderDrawInfo = () => {
|
|||||||
`
|
`
|
||||||
})
|
})
|
||||||
$('.top-three-list').html(str)
|
$('.top-three-list').html(str)
|
||||||
}else{
|
} else {
|
||||||
$('.top-three').removeClass('no-one')
|
$('.top-three').removeClass('no-one')
|
||||||
$('.top-three span').html('本轮前三名')
|
$('.top-three span').html('本轮前三名')
|
||||||
topThreeArr.map((item) => {
|
topThreeArr.map((item) => {
|
||||||
@@ -451,15 +451,15 @@ const getListItem = (roundId) => {
|
|||||||
data: {
|
data: {
|
||||||
roundId
|
roundId
|
||||||
},
|
},
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
listItem = res.data
|
listItem = res.data
|
||||||
renderListItem()
|
renderListItem()
|
||||||
}else{
|
} else {
|
||||||
toastMsg(res.message)
|
toastMsg(res.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -471,11 +471,11 @@ let time2sIndex = 0
|
|||||||
const setTimeout2s = () => {
|
const setTimeout2s = () => {
|
||||||
clearTimeout(timer2s)
|
clearTimeout(timer2s)
|
||||||
$('.bubble-2s').eq(time2sIndex).fadeIn(50)
|
$('.bubble-2s').eq(time2sIndex).fadeIn(50)
|
||||||
timer2s = setTimeout(function(){
|
timer2s = setTimeout(function () {
|
||||||
$('.bubble-2s').eq(time2sIndex).fadeOut(50)
|
$('.bubble-2s').eq(time2sIndex).fadeOut(50)
|
||||||
if(time2sIndex >= listItem.length-1){
|
if (time2sIndex >= listItem.length - 1) {
|
||||||
time2sIndex = 0
|
time2sIndex = 0
|
||||||
}else{
|
} else {
|
||||||
time2sIndex++;
|
time2sIndex++;
|
||||||
}
|
}
|
||||||
setTimeout2s()
|
setTimeout2s()
|
||||||
@@ -508,17 +508,17 @@ const getPreviousResults = (count, roundId) => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
|
url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
|
||||||
data:{
|
data: {
|
||||||
count,
|
count,
|
||||||
roundId
|
roundId
|
||||||
},
|
},
|
||||||
success(res){
|
success (res) {
|
||||||
if(res.code === 200){
|
if (res.code === 200) {
|
||||||
previousResults = res.data
|
previousResults = res.data
|
||||||
renderPreviousResults()
|
renderPreviousResults()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -528,13 +528,13 @@ const getPreviousResults = (count, roundId) => {
|
|||||||
const renderPreviousResults = () => {
|
const renderPreviousResults = () => {
|
||||||
|
|
||||||
let str = ''
|
let str = ''
|
||||||
if(previousResults.length < 5){
|
if (previousResults.length < 5) {
|
||||||
let len = 5 - previousResults.length
|
let len = 5 - previousResults.length
|
||||||
let arr = new Array(len).fill(1)
|
let arr = new Array(len).fill(1)
|
||||||
previousResults.push(...arr)
|
previousResults.push(...arr)
|
||||||
}
|
}
|
||||||
if(isStatus3){
|
if (isStatus3) {
|
||||||
if(img){
|
if (img) {
|
||||||
previousResults.pop()
|
previousResults.pop()
|
||||||
previousResults.unshift({
|
previousResults.unshift({
|
||||||
drawImageUrl: img
|
drawImageUrl: img
|
||||||
@@ -556,27 +556,28 @@ const sendUserDrawInfo = (itemId, num) => {
|
|||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
url: urlPrefix + '/act/luckySea/draw',
|
url: urlPrefix + '/act/luckySea/draw',
|
||||||
contentType: 'application/json',
|
// contentType: 'application/json',
|
||||||
data: `[ {
|
// data: `[ {
|
||||||
"itemId":${itemId},
|
// "itemId":${itemId},
|
||||||
"num":${num}
|
// "num":${num}
|
||||||
}]`,
|
// }]`,
|
||||||
success(res){
|
data: { itemId, num },
|
||||||
if(res.code === 200){
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
|
||||||
}else{
|
} else {
|
||||||
toastMsg(res.message)
|
toastMsg(res.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error(err){
|
error (err) {
|
||||||
toastMsg('网络错误，请退出重进')
|
toastMsg('网络错误，请退出重进')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$(function(){
|
$(function () {
|
||||||
getInfoFromClient()
|
getInfoFromClient()
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
// getUserInfo()
|
// getUserInfo()
|
||||||
getNewestAct()
|
getNewestAct()
|
||||||
// getListItem()
|
// getListItem()
|
||||||
@@ -585,33 +586,37 @@ $(function(){
|
|||||||
// 监听按钮点击事件
|
// 监听按钮点击事件
|
||||||
// let fragmentNum
|
// let fragmentNum
|
||||||
// let isSelectTab = false
|
// let isSelectTab = false
|
||||||
$('.btn-wrap').on('click', 'div', function(){
|
$('.btn-wrap').on('click', 'div', function () {
|
||||||
$(this).addClass('active').siblings().removeClass('active')
|
$(this).addClass('active').siblings().removeClass('active')
|
||||||
fragmentNum = parseInt($(this).find('span').html())
|
fragmentNum = parseInt($(this).find('span').html())
|
||||||
isSelectTab = true
|
isSelectTab = true
|
||||||
sessionStorage.setItem("mySelect", $(this).index())
|
sessionStorage.setItem("mySelect", $(this).index())
|
||||||
})
|
})
|
||||||
|
// 点击更多按钮
|
||||||
|
$('.wrap .previous-result .more').click(function(){
|
||||||
|
window.location.href = './result.html?roundId=' + roundId
|
||||||
|
})
|
||||||
// 监听规则按钮点击事件
|
// 监听规则按钮点击事件
|
||||||
$('.rule').on('click', function(){
|
$('.rule').on('click', function () {
|
||||||
$('.shade-mask').show()
|
$('.shade-mask').show()
|
||||||
})
|
})
|
||||||
// 关闭规则弹窗
|
// 关闭规则弹窗
|
||||||
$('.shade-mask').on('click', function(){
|
$('.shade-mask').on('click', function () {
|
||||||
$(this).hide()
|
$(this).hide()
|
||||||
})
|
})
|
||||||
$('.shade-content').on('click', function(e){
|
$('.shade-content').on('click', function (e) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
})
|
})
|
||||||
// 监听游戏记录按钮点击事件
|
// 监听游戏记录按钮点击事件
|
||||||
$('.record').on('click', function(){
|
$('.record').on('click', function () {
|
||||||
window.location.href = './record.html'
|
window.location.href = './record.html'
|
||||||
})
|
})
|
||||||
// 监听今日排名按钮点击事件
|
// 监听今日排名按钮点击事件
|
||||||
$('.rank').on('click', function(){
|
$('.rank').on('click', function () {
|
||||||
window.location.href = './rank.html'
|
window.location.href = './rank.html'
|
||||||
})
|
})
|
||||||
// 跳转特权商城
|
// 跳转特权商城
|
||||||
$('.mall').on('click', function(){
|
$('.mall').on('click', function () {
|
||||||
window.location.href = './mall.html'
|
window.location.href = './mall.html'
|
||||||
})
|
})
|
||||||
// 播放5s动画
|
// 播放5s动画
|
||||||
@@ -627,56 +632,56 @@ $(function(){
|
|||||||
// 播放3s动画
|
// 播放3s动画
|
||||||
let player1 = new SVGA.Player('.draw-time');
|
let player1 = new SVGA.Player('.draw-time');
|
||||||
let parser1 = new SVGA.Parser('.draw-time');
|
let parser1 = new SVGA.Parser('.draw-time');
|
||||||
parser1.load('./images/draw.svga', function(videoItem){
|
parser1.load('./images/draw.svga', function (videoItem) {
|
||||||
// player.loops = 2;
|
// player.loops = 2;
|
||||||
player1.clearsAfterStop = false;
|
player1.clearsAfterStop = false;
|
||||||
player1.setVideoItem(videoItem);
|
player1.setVideoItem(videoItem);
|
||||||
player1.startAnimation();
|
player1.startAnimation();
|
||||||
})
|
})
|
||||||
// 点击海鲜动物的动画以及发送请求
|
// 点击海鲜动物的动画以及发送请求
|
||||||
$('.select-time ul').on('click', 'li', function(){
|
$('.select-time ul').on('click', 'li', function () {
|
||||||
if(!isSelectTab){
|
// if(!isSelectTab){
|
||||||
return toastMsg('请先选择碎片数量')
|
// return toastMsg('请先选择碎片数量')
|
||||||
}
|
// }
|
||||||
if(myFragment < fragmentNum){
|
if (myFragment < fragmentNum) {
|
||||||
return toastMsg('碎片不足，请前往右上角特权商城获取')
|
return toastMsg('碎片不足，请前往右上角特权商城获取')
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!lock){
|
if (!lock) {
|
||||||
lock = !lock
|
lock = !lock
|
||||||
console.log($(this).data('total-num'));
|
console.log($(this).data('total-num'));
|
||||||
$(this).data('total-num').number = parseInt($(this).data('total-num').number) + fragmentNum
|
$(this).data('total-num').number = parseInt($(this).data('total-num').number) + fragmentNum
|
||||||
$(this)
|
$(this)
|
||||||
.stop(true,true)
|
.stop(true, true)
|
||||||
.animate({scale: 1.1}, 200)
|
.animate({ scale: 1.1 }, 200)
|
||||||
.animate({scale: 1}, 200, function(){
|
.animate({ scale: 1 }, 200, function () {
|
||||||
if(lock){
|
if (lock) {
|
||||||
$(this).find('.select-num').html('+' + $(this).data('total-num').number).hide().fadeIn(200)
|
$(this).find('.select-num').html('+' + $(this).data('total-num').number).hide().fadeIn(200)
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// getUserInfo()
|
// getUserInfo()
|
||||||
getUserPieceNum()
|
getUserPieceNum()
|
||||||
// getListItem(roundId)
|
// getListItem(roundId)
|
||||||
},100)
|
}, 100)
|
||||||
})
|
})
|
||||||
sendUserDrawInfo($(this).data('total-num').id , fragmentNum)
|
sendUserDrawInfo($(this).data('total-num').id, fragmentNum)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// ios去到后台或者锁屏后再回来倒计时不准确
|
// ios去到后台或者锁屏后再回来倒计时不准确
|
||||||
let leftTime, deltaTime, startTime, endTime
|
let leftTime, deltaTime, startTime, endTime
|
||||||
document.addEventListener('visibilitychange',function(){
|
document.addEventListener('visibilitychange', function () {
|
||||||
if(document.visibilityState == 'hidden'){
|
if (document.visibilityState == 'hidden') {
|
||||||
leftTime = countDownTime
|
leftTime = countDownTime
|
||||||
startTime = new Date().getTime()
|
startTime = new Date().getTime()
|
||||||
}else if(document.visibilityState == 'visible'){
|
} else if (document.visibilityState == 'visible') {
|
||||||
endTime = new Date().getTime()
|
endTime = new Date().getTime()
|
||||||
deltaTime = Math.floor( ( endTime - startTime )/1000 ) //出去了多久
|
deltaTime = Math.floor((endTime - startTime) / 1000) //出去了多久
|
||||||
if(deltaTime > 300){
|
if (deltaTime > 300) {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
countDownTime = leftTime - deltaTime
|
countDownTime = leftTime - deltaTime
|
||||||
if(countDownTime < 0){
|
if (countDownTime < 0) {
|
||||||
countDownTime = 0
|
countDownTime = 0
|
||||||
}
|
}
|
||||||
$countDown.html(countDownTime)
|
$countDown.html(countDownTime)
|
||||||
|
|||||||
88
view/yinmeng/activity/act-ocean/js/result.js
Normal file
88
view/yinmeng/activity/act-ocean/js/result.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
let urlPrefix = getUrlPrefix()
|
||||||
|
let browser = checkVersion()
|
||||||
|
let locateObj = getQueryString();
|
||||||
|
|
||||||
|
let roundId
|
||||||
|
|
||||||
|
// 封装layer消息提醒框
|
||||||
|
let layerIndex
|
||||||
|
const showLoading = (content = '加载中...') => {
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
shadeClose: false,
|
||||||
|
content,
|
||||||
|
success (e) {
|
||||||
|
layerIndex = $(e).attr('index')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const hideLoading = (index) => {
|
||||||
|
layer.close(index)
|
||||||
|
}
|
||||||
|
const toastMsg = (content = '操作完成', time = 2) => {
|
||||||
|
layer.open({
|
||||||
|
content,
|
||||||
|
time,
|
||||||
|
skin: 'msg'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
getInfoFromClient()
|
||||||
|
roundId = locateObj.roundId
|
||||||
|
console.log(roundId);
|
||||||
|
|
||||||
|
if (EnvCheck() === 'test') { new VConsole }
|
||||||
|
setTimeout(function () {
|
||||||
|
getPreviousResults()
|
||||||
|
}, 100)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
// 获取往轮游戏结果
|
||||||
|
let previousResults = []
|
||||||
|
const getPreviousResults = () => {
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'GET',
|
||||||
|
url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
|
||||||
|
data: {
|
||||||
|
count: 50,
|
||||||
|
roundId
|
||||||
|
},
|
||||||
|
success(res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
|
||||||
|
// previousResults = res.data
|
||||||
|
for (var i = 0; i < res.data.length; i += 5) {
|
||||||
|
previousResults.push(res.data.slice(i, i + 5));
|
||||||
|
}
|
||||||
|
console.log(previousResults)
|
||||||
|
|
||||||
|
let str
|
||||||
|
previousResults.forEach((item, index) => {
|
||||||
|
str = ''
|
||||||
|
item.forEach(res => {
|
||||||
|
// console.log(index);
|
||||||
|
str += `
|
||||||
|
<p><img src="${res.drawImageUrl}" alt=""></p>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
// console.log(str);
|
||||||
|
$('.main li').eq(index).find('.list').append(str)
|
||||||
|
|
||||||
|
})
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error(err) {
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
<div class="avatar"><img src="./images/logo.png" alt=""></div>
|
<div class="avatar"><img src="./images/logo.png" alt=""></div>
|
||||||
<div class="info-wrap">
|
<div class="info-wrap">
|
||||||
<p class="nick">你的昵称</p>
|
<p class="nick">你的昵称</p>
|
||||||
<p class="fragment-num">我的66碎片：<span>0</span></p>
|
<p class="fragment-num">我的碎片：<span>0</span></p>
|
||||||
<p class="diamond-num">我的钻石数量：<span>0</span></p>
|
<p class="diamond-num">我的钻石数量：<span>0</span></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>
|
<div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>
|
||||||
|
|||||||
77
view/yinmeng/activity/act-ocean/result.html
Normal file
77
view/yinmeng/activity/act-ocean/result.html
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<title>中奖结果</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="./css/result.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="result">
|
||||||
|
<div class="header">
|
||||||
|
<img src="./images/rusetTitle.png" class="title" alt="">
|
||||||
|
<span>前50轮中奖结果</span>
|
||||||
|
</div>
|
||||||
|
<ul class="main">
|
||||||
|
<li>
|
||||||
|
<div class="session">前5轮</div>
|
||||||
|
<div class="list">
|
||||||
|
<!-- <p><img src="" alt=""></p>
|
||||||
|
<p><img src="" alt=""></p>
|
||||||
|
<p><img src="" alt=""></p>
|
||||||
|
<p><img src="" alt=""></p>
|
||||||
|
<p><img src="" alt=""></p> -->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">6-10轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">11-15轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">16-20轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">21-25轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">26-30轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">31-35轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">36-40轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">41-45轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="session">46-50轮</div>
|
||||||
|
<div class="list"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="./js/result.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user