moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dragon
2022-10-27 19:03:08 +08:00
parent a3c3513feb
commit 05fdc0e71e
5 changed files with 570 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

502
view/peko/activity/act-ocean/css/index.css
View File

File diff suppressed because it is too large Load Diff

439
view/peko/activity/act-ocean/css/index.scss
View File

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

35
view/peko/activity/act-ocean/index.html
View File

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

4
view/peko/activity/act-ocean/js/index.js
View File

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

5
view/peko/modules/spirit/js/main.js
View File

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