yinmeng/yinmeng-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移深海奇缘

Browse Source
This commit is contained in:
Dragon
2023-03-14 15:37:01 +08:00
parent 8eec6fc733
commit e3e89dfe91
14 changed files with 791 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
view/yinmeng/activity/act-ocean/css/index.css
View File

@@ -1,17 +1,16 @@
@font-face {
font-family: 'pingfang-bold';
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: 'din-medium';
font-family: "din-medium";
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");
}
html, body {
font-family: 'din-medium';
html,
body {
font-family: "din-medium";
overflow-x: hidden;
}
@@ -21,109 +20,102 @@ html, body {
background: url("../images/index-bg.png") no-repeat center/cover;
position: relative;
}
.wrap .rule, .wrap .record, .wrap .rank {
.wrap .rule,
.wrap .record,
.wrap .rank {
position: fixed;
bottom: 12.8rem;
left: 0;
width: 1.6rem;
height: 0.53333rem;
height: 0.5333333333rem;
}
.wrap .rule img, .wrap .record img, .wrap .rank img {
.wrap .rule img,
.wrap .record img,
.wrap .rank img {
width: 100%;
}
.wrap .record {
bottom: 12.05333rem;
bottom: 12.0533333333rem;
}
.wrap .rank {
bottom: 11.36rem;
}
.wrap .previous-result {
position: absolute;
bottom: 10.72rem;
left: 0.24rem;
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
font-size: 0.4rem;
color: white;
display: flex;
align-items: center;
}
.wrap .previous-result span {
font-weight: bold;
}
.wrap .previous-result .result-list {
display: flex;
}
.wrap .previous-result .result-list p {
width: 0.53333rem;
height: 0.53333rem;
margin-left: 0.10667rem;
width: 0.5333333333rem;
height: 0.5333333333rem;
margin-left: 0.1066666667rem;
background: url("../images/little-bubble.png") 0 0/100% 100%;
}
.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%;
}
.wrap .previous-result .result-list p img {
width: 100%;
}
.wrap .previous-result .more {
width: 0.5333333333rem;
height: 0.5333333333rem;
display: inline-block;
margin-left: 0.12rem;
}
.wrap .mall {
position: absolute;
bottom: 10.50667rem;
bottom: 10.5066666667rem;
right: 0.48rem;
width: 2.13333rem;
width: 2.1333333333rem;
height: 2rem;
}
.wrap .mall img {
width: 100%;
}
.wrap .game-area {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9;
width: 9.46667rem;
width: 9.4666666667rem;
height: 10.32rem;
background: url("../images/game-area.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time {
display: none;
}
.wrap .game-area .select-time .count-down {
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
position: absolute;
top: -0.26667rem;
top: -0.2666666667rem;
left: 50%;
transform: translateX(-50%);
width: 3.68rem;
height: 1.01333rem;
line-height: 1.01333rem;
height: 1.0133333333rem;
line-height: 1.0133333333rem;
text-align: center;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
font-size: 0.48rem;
color: white;
font-weight: bold;
}
.wrap .game-area .select-time .count-down span {
font-weight: bold;
color: #FEEF60;
}
.wrap .game-area .select-time ul {
display: flex;
flex-wrap: wrap;
@@ -131,33 +123,30 @@ html, body {
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
margin-top: 0.6rem;
}
.wrap .game-area .select-time ul li {
position: relative;
width: 1.73333rem;
width: 1.7333333333rem;
height: 2rem;
margin-top: 0.98667rem;
margin-right: 0.34667rem;
margin-top: 0.9866666667rem;
margin-right: 0.3466666667rem;
background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time ul li img {
width: 100%;
}
.wrap .game-area .select-time ul li .multiple {
position: absolute;
top: 0.13333rem;
left: 0.13333rem;
top: 0.1333333333rem;
left: 0.1333333333rem;
font-size: 0.32rem;
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;
}
.wrap .game-area .select-time ul li .name {
position: absolute;
bottom: 0.13333rem;
bottom: 0.1333333333rem;
left: 50%;
transform: translateX(-50%);
width: 1.6rem;
@@ -165,53 +154,47 @@ html, body {
font-size: 0.32rem;
color: white;
}
.wrap .game-area .select-time ul li .bubble-2s {
display: none;
width: 1.22667rem;
height: 0.74667rem;
width: 1.2266666667rem;
height: 0.7466666667rem;
position: absolute;
top: -0.8rem;
left: -0.37333rem;
left: -0.3733333333rem;
background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
transform: rotate(-15deg);
text-indent: 0.21333rem;
text-indent: 0.2133333333rem;
}
.wrap .game-area .select-time ul li .bubble-2s p {
font-size: 0.21333rem;
font-size: 0.2133333333rem;
color: white;
font-weight: bold;
padding-top: 0.24rem;
text-align: center;
margin-left: -0.26667rem;
margin-left: -0.2666666667rem;
}
.wrap .game-area .select-time ul li .select-num {
position: absolute;
top: 0.26667rem;
right: 0.21333rem;
top: 0.2666666667rem;
right: 0.2133333333rem;
font-size: 0.32rem;
font-weight: bold;
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;
}
.wrap .game-area .select-time .btn-wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 8.26667rem;
width: 8.2666666667rem;
height: 1.12rem;
margin: 0.21333rem auto 0;
margin-top: 1.06667rem;
margin: 0.4rem auto 0;
}
.wrap .game-area .select-time .btn-wrap div {
display: flex;
justify-content: center;
align-items: center;
width: 2.45333rem;
width: 2.4533333333rem;
height: 1.12rem;
background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
text-align: center;
@@ -219,88 +202,78 @@ html, body {
font-size: 0.48rem;
color: #1C5484;
}
.wrap .game-area .select-time .btn-wrap div.active {
background-image: url("../images/fragment-btn-active.png");
color: #B33E17;
}
.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 img,
.wrap .game-area .select-time .btn-wrap div.active span {
margin-bottom: 0;
}
.wrap .game-area .select-time .btn-wrap div img {
width: 0.48rem;
height: 0.48rem;
margin-bottom: 0.21333rem;
margin-bottom: 0.2133333333rem;
}
.wrap .game-area .select-time .btn-wrap div span {
display: block;
margin-bottom: 0.21333rem;
margin-bottom: 0.2133333333rem;
font-weight: 600;
margin-right: 0.13333rem;
margin-right: 0.1333333333rem;
}
.wrap .game-area .wait-time {
display: none;
width: 9.06667rem;
height: 6.66667rem;
width: 9.0666666667rem;
height: 6.6666666667rem;
margin: auto;
margin-top: 1.06667rem;
margin-top: 1.0666666667rem;
position: relative;
}
.wrap .game-area .wait-time .count-down {
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
position: absolute;
top: -1.33333rem;
top: -1.3333333333rem;
left: 50%;
transform: translateX(-50%);
width: 3.68rem;
height: 1.01333rem;
line-height: 1.01333rem;
height: 1.0133333333rem;
line-height: 1.0133333333rem;
text-align: center;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
font-size: 0.48rem;
color: white;
font-weight: bold;
}
.wrap .game-area .wait-time .count-down span {
font-weight: bold;
color: #FEEF60;
}
.wrap .game-area .draw-time {
display: none;
width: 9.06667rem;
height: 6.66667rem;
width: 9.0666666667rem;
height: 6.6666666667rem;
margin: auto;
margin-top: 1.06667rem;
margin-top: 1.0666666667rem;
}
.wrap .game-area .draw-time .count-down {
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
position: absolute;
top: -0.26667rem;
top: -0.2666666667rem;
left: 50%;
transform: translateX(-50%);
width: 3.68rem;
height: 1.01333rem;
line-height: 1.01333rem;
height: 1.0133333333rem;
line-height: 1.0133333333rem;
text-align: center;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
font-size: 0.48rem;
color: white;
font-weight: bold;
}
.wrap .game-area .draw-time .count-down span {
font-weight: bold;
color: #FEEF60;
}
.wrap .game-area .draw-time .top-three {
position: absolute;
left: 0.4rem;
@@ -309,93 +282,81 @@ html, body {
display: flex;
align-items: center;
}
.wrap .game-area .draw-time .top-three.no-one {
margin-left: 0;
margin-bottom: 0.53333rem;
margin-bottom: 0.5333333333rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three span {
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
font-size: 0.4rem;
font-weight: bold;
color: white;
}
.wrap .game-area .draw-time .top-three .top-three-list {
display: flex;
}
.wrap .game-area .draw-time .top-three .top-three-list p {
width: 1.12rem;
height: 1.12rem;
margin-left: 0.32rem;
box-sizing: border-box;
}
.wrap .game-area .draw-time .top-three .top-three-list p img {
width: 100%;
border-radius: 50%;
border: 0.02667rem solid #FEEF60;
margin-right: 0.21333rem;
border: 0.0266666667rem solid #FEEF60;
margin-right: 0.2133333333rem;
}
.wrap .game-area .draw-time .draw-pic {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.92rem;
z-index: 1;
width: 3.73333rem;
height: 3.73333rem;
width: 3.7333333333rem;
height: 3.7333333333rem;
}
.wrap .game-area .draw-time .draw-pic img {
width: 100%;
height: 100%;
}
.wrap .info-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
height: 1.61333rem;
height: 1.6133333333rem;
background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.wrap .info-bottom .fragment, .wrap .info-bottom .award {
width: 3.06667rem;
height: 1.01333rem;
.wrap .info-bottom .fragment,
.wrap .info-bottom .award {
width: 3.0666666667rem;
height: 1.0133333333rem;
line-height: 0.88rem;
background: url("../images/fragment-mine.png") no-repeat 0 0/100% 100%;
font-size: 0.4rem;
color: white;
text-indent: 1.06667rem;
text-indent: 1.0666666667rem;
}
.wrap .info-bottom .award {
background-image: url("../images/award-today.png");
}
.wrap .info-bottom .avatar {
width: 1.86667rem;
height: 1.86667rem;
width: 1.8666666667rem;
height: 1.8666666667rem;
margin-bottom: 0.8rem;
}
.wrap .info-bottom .avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.wrap .shade-mask {
display: none;
position: fixed;
@@ -406,7 +367,6 @@ html, body {
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
}
.wrap .shade-mask .shade-content {
position: absolute;
top: 50%;
@@ -415,14 +375,13 @@ html, body {
width: 7.68rem;
height: 8.88rem;
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 {
font-size: 0.42667rem;
font-size: 0.3466666667rem;
color: #ED7B50;
font-weight: bold;
margin-bottom: 0.53333rem;
margin-bottom: 0.5333333333rem;
line-height: 0.45rem;
}
.no-in-app {
@@ -435,3 +394,5 @@ html, body {
z-index: 99999;
background-color: white;
}
/*# sourceMappingURL=index.css.map */

79
view/yinmeng/activity/act-ocean/css/index.scss
View File

@@ -18,7 +18,8 @@
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
}
html, body{
html,
body {
font-family: 'din-medium';
// 海浪svga过长
overflow-x: hidden;
@@ -29,25 +30,32 @@ html, body{
height: 100vh;
background: url('../images/index-bg.png') no-repeat center/cover;
position: relative;
.rule, .record, .rank{
.rule,
.record,
.rank {
position: fixed;
// top: px2rem(336);
bottom: px2rem(960);
left: 0;
width: px2rem(120);
height: px2rem(40);
img {
width: 100%;
}
}
.record {
// top: px2rem(390);
bottom: px2rem(904);
}
.rank {
// top: px2rem(440);
bottom: px2rem(852);
}
.previous-result {
position: absolute;
bottom: px2rem(804);
@@ -57,24 +65,35 @@ html, body{
color: white;
display: flex;
align-items: center;
span {
font-weight: bold;
}
.result-list {
display: flex;
p {
width: px2rem(40);
height: px2rem(40);
margin-left: px2rem(8);
background: url('../images/little-bubble.png') 0 0/100% 100%;
&:last-child {
background: url('../images/last-little-bubble.png') 0 0/100% 100%, url('../images/little-bubble.png') 0 0/100% 100%;
}
img {
width: 100%;
}
}
}
.more{
width: px2rem(40, );
height: px2rem(40, );
display: inline-block;
margin-left: px2rem(9, );
}
}
.mall {
@@ -84,10 +103,12 @@ html, body{
right: px2rem(36);
width: px2rem(160);
height: px2rem(150);
img {
width: 100%;
}
}
.game-area {
position: absolute;
// top: px2rem(560);
@@ -98,9 +119,11 @@ html, body{
width: px2rem(710);
height: px2rem(774);
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
// 等待倒计时30s
.select-time {
display: none;
.count-down {
font-family: 'pingfang-bold';
position: absolute;
@@ -115,11 +138,13 @@ html, body{
font-size: px2rem(36);
color: white;
font-weight: bold;
span {
font-weight: bold;
color: #FEEF60;
}
}
// 海鲜列表
ul {
display: flex;
@@ -129,6 +154,8 @@ html, body{
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
margin-top: 0.6rem;
li {
position: relative;
width: px2rem(130);
@@ -136,9 +163,11 @@ html, body{
margin-top: px2rem(74);
margin-right: px2rem(26);
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
img {
width: 100%;
}
.multiple {
position: absolute;
top: px2rem(10);
@@ -152,6 +181,7 @@ html, body{
1px 1px 0px#ED7B50,
-1px -1px 0px#ED7B50;
}
.name {
position: absolute;
bottom: px2rem(10);
@@ -162,6 +192,7 @@ html, body{
font-size: px2rem(24);
color: white;
}
.bubble-2s {
display: none;
width: px2rem(92);
@@ -172,6 +203,7 @@ html, body{
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
transform: rotate(-15deg);
text-indent: px2rem(16);
p {
font-size: px2rem(16);
color: white;
@@ -181,6 +213,7 @@ html, body{
margin-left: px2rem(-20);
}
}
.select-num {
// display: none;
position: absolute;
@@ -202,6 +235,7 @@ html, body{
}
}
}
// 碎片按钮
.btn-wrap {
display: flex;
@@ -209,8 +243,8 @@ html, body{
align-items: center;
width: px2rem(620);
height: px2rem(84);
margin: px2rem(16) auto 0;
margin-top: px2rem(80);
margin: 0.4rem auto 0;
div {
display: flex;
justify-content: center;
@@ -222,18 +256,23 @@ html, body{
line-height: px2rem(60);
font-size: px2rem(36);
color: #1C5484;
&.active {
background-image: url('../images/fragment-btn-active.png');
color: #B33E17;
img, span{
img,
span {
margin-bottom: 0;
}
}
img {
width: px2rem(36);
height: px2rem(36);
margin-bottom: px2rem(16);
}
span {
display: block;
margin-bottom: px2rem(16);
@@ -243,6 +282,7 @@ html, body{
}
}
}
// 等待结果5s
.wait-time {
display: none;
@@ -251,6 +291,7 @@ html, body{
margin: auto;
margin-top: px2rem(80);
position: relative;
.count-down {
font-family: 'pingfang-bold';
position: absolute;
@@ -265,6 +306,7 @@ html, body{
font-size: px2rem(36);
color: white;
font-weight: bold;
span {
font-weight: bold;
color: #FEEF60;
@@ -272,6 +314,7 @@ html, body{
}
}
// 开奖时间
.draw-time {
display: none;
@@ -279,6 +322,7 @@ html, body{
height: px2rem(500);
margin: auto;
margin-top: px2rem(80);
.count-down {
font-family: 'pingfang-bold';
position: absolute;
@@ -293,11 +337,13 @@ html, body{
font-size: px2rem(36);
color: white;
font-weight: bold;
span {
font-weight: bold;
color: #FEEF60;
}
}
.top-three {
position: absolute;
left: px2rem(30);
@@ -305,25 +351,30 @@ html, body{
margin-left: px2rem(30);
display: flex;
align-items: center;
&.no-one {
margin-left: 0;
margin-bottom: px2rem(40);
left: 50%;
transform: translateX(-50%);
}
span {
font-family: 'pingfang-bold';
font-size: px2rem(30);
font-weight: bold;
color: white;
}
.top-three-list {
display: flex;
p {
width: px2rem(84);
height: px2rem(84);
margin-left: px2rem(24);
box-sizing: border-box;
img {
width: 100%;
border-radius: 50%;
@@ -333,6 +384,7 @@ html, body{
}
}
}
.draw-pic {
position: absolute;
left: 50%;
@@ -341,6 +393,7 @@ html, body{
z-index: 1;
width: px2rem(280);
height: px2rem(280);
img {
width: 100%;
height: 100%;
@@ -348,6 +401,7 @@ html, body{
}
}
}
// 底部信息
.info-bottom {
position: fixed;
@@ -360,7 +414,9 @@ html, body{
display: flex;
justify-content: space-evenly;
align-items: center;
.fragment, .award{
.fragment,
.award {
width: px2rem(230);
height: px2rem(76);
line-height: px2rem(66);
@@ -369,13 +425,16 @@ html, body{
color: white;
text-indent: px2rem(80);
}
.award {
background-image: url('../images/award-today.png');
}
.avatar {
width: px2rem(140);
height: px2rem(140);
margin-bottom: px2rem(60);
img {
width: 100%;
height: 100%;
@@ -383,6 +442,7 @@ html, body{
}
}
}
// 规则弹窗
.shade-mask {
display: none;
@@ -393,6 +453,7 @@ html, body{
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: 0.4);
.shade-content {
position: absolute;
top: 50%;
@@ -402,11 +463,13 @@ html, body{
height: px2rem(666);
background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
padding: px2rem(160) px2rem(65) 0 px2rem(40);
p {
font-size: px2rem(32);
font-size: px2rem(26);
color: #ED7B50;
font-weight: bold;
// font-weight: bold;
margin-bottom: px2rem(40);
line-height: 0.45rem;
}
}
}

97
view/yinmeng/activity/act-ocean/css/result.css Normal file
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
view/yinmeng/activity/act-ocean/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
view/yinmeng/activity/act-ocean/images/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
view/yinmeng/activity/act-ocean/images/resultBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

BIN
view/yinmeng/activity/act-ocean/images/rusetTitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

17
view/yinmeng/activity/act-ocean/index.html
View File

@@ -20,12 +20,13 @@
<div class="previous-result">
<span>往轮结果</span>
<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> -->
</div>
<img class="more" src="./images/more.png" alt="">
</div>
<!-- 特权商城 -->
@@ -39,14 +40,14 @@
<div class="count-down">请选择&nbsp;<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>
<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 class="wait-time">
@@ -76,7 +77,7 @@
<div class="shade-mask">
<div class="shade-content">
<p>1.用户购买限定头饰即可获赠送特权碎片，参与游戏活动</p>
<p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物选择总次数*中奖海洋生物对应倍数*10}的钻石奖励</p>
<p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物购买数“中奖海洋生物对应倍数*10}的钻石奖励</p>
<p>3.该活动赠送给您的特权碎片为参与该活动的虚拟道具，不具任何价值也不能转赠其他用户</p>
<p>4.活动结束将关闭页面，剩余碎片将会清空，请留意活动关闭时间</p>
<p>5.本活动与Apple Inc.无关，最终解释权归平台所有</p>

31
view/yinmeng/activity/act-ocean/js/index.js
View File

@@ -32,7 +32,7 @@ const toastMsg = (content = '操作完成', time = 2) => {
})
}
if(!browser.app){
if (false) {//!browser.app
toastMsg('请在app内打开！');
} else {
$('.wrap').removeClass('no-in-app')
@@ -167,7 +167,7 @@ let isStatus3
let isSelectTab = false
let mySelect
let fragmentNum
let fragmentNum = 1;
let reg = /^[0-9]*$/
const showView = () => {
@@ -185,7 +185,7 @@ const showView = () => {
isSelectTab = true
}
getPreviousResults(5, roundId)
getPreviousResults(7, roundId)
showCountDown(userComeinTime, startTime, drawStageStartTime)
getUserInfo()
@@ -204,7 +204,7 @@ const showView = () => {
// $('.btn-wrap').find('div').removeClass('active')
getPreviousResults(5, roundId)
getPreviousResults(7, roundId)
showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
judgeStatus()
getUserInfo()
@@ -367,7 +367,7 @@ const judgeStatus = () => {
drawInfo = res.data
img = res.data.drawImageUrl
if (isStatus3) {
getPreviousResults(5, roundId)
getPreviousResults(7, roundId)
}
renderDrawInfo()
} else {
@@ -556,11 +556,12 @@ const sendUserDrawInfo = (itemId, num) => {
networkRequest({
type: 'POST',
url: urlPrefix + '/act/luckySea/draw',
contentType: 'application/json',
data: `[ {
"itemId":${itemId},
"num":${num}
}]`,
// contentType: 'application/json',
// data: `[ {
// "itemId":${itemId},
// "num":${num}
// }]`,
data: { itemId, num },
success (res) {
if (res.code === 200) {
@@ -591,6 +592,10 @@ $(function(){
isSelectTab = true
sessionStorage.setItem("mySelect", $(this).index())
})
// 点击更多按钮
$('.wrap .previous-result .more').click(function(){
window.location.href = './result.html?roundId=' + roundId
})
// 监听规则按钮点击事件
$('.rule').on('click', function () {
$('.shade-mask').show()
@@ -635,9 +640,9 @@ $(function(){
})
// 点击海鲜动物的动画以及发送请求
$('.select-time ul').on('click', 'li', function () {
if(!isSelectTab){
return toastMsg('请先选择碎片数量')
}
// if(!isSelectTab){
// return toastMsg('请先选择碎片数量')
// }
if (myFragment < fragmentNum) {
return toastMsg('碎片不足，请前往右上角特权商城获取')
}

88
view/yinmeng/activity/act-ocean/js/result.js Normal file
View 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)
}
})
}

2
view/yinmeng/activity/act-ocean/mall.html
View File

@@ -54,7 +54,7 @@
<div class="avatar"><img src="./images/logo.png" alt=""></div>
<div class="info-wrap">
<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>
</div>
<div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>

77
view/yinmeng/activity/act-ocean/result.html Normal file
View 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>