小精灵：修复中级高级支付错误和选择异常问题，星际厨房新增今日奖励和我的钻石展示
This commit is contained in:
Dragon
File diff suppressed because it is too large
Load Diff
@@ -2,7 +2,7 @@
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
@@ -10,7 +10,7 @@
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
@font-face {
|
||||
font-family: 'din-medium';
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
||||
@@ -18,23 +18,27 @@
|
||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
html, body{
|
||||
html,
|
||||
body {
|
||||
font-family: 'din-medium';
|
||||
background: #C8864C;
|
||||
// 海浪svga过长
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wrap{
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// background: url('../images/index-bg.png') no-repeat center/cover;
|
||||
position: relative;
|
||||
.banner{
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.rule, .record{
|
||||
|
||||
.rule,
|
||||
.record {
|
||||
position: fixed;
|
||||
top: px2rem(160);
|
||||
// bottom: px2rem(1100);
|
||||
@@ -42,16 +46,18 @@ html, body{
|
||||
z-index: 99;
|
||||
width: px2rem(118);
|
||||
height: px2rem(40);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.record{
|
||||
|
||||
.record {
|
||||
top: px2rem(214);
|
||||
// bottom: px2rem(1040);
|
||||
}
|
||||
|
||||
.previous-result{
|
||||
.previous-result {
|
||||
position: absolute;
|
||||
// bottom: px2rem(200);
|
||||
top: px2rem(1120);
|
||||
@@ -67,7 +73,8 @@ html, body{
|
||||
align-items: center;
|
||||
background: url('../images/previous-result-bg.png') no-repeat 0 0/100% 100%;
|
||||
z-index: 9;
|
||||
span{
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
margin-left: px2rem(27);
|
||||
text-shadow: 1px 1px 0px#fc8321,
|
||||
@@ -77,24 +84,27 @@ html, body{
|
||||
1px 1px 0px#fc8321,
|
||||
-1px -1px 0px#fc8321;
|
||||
}
|
||||
.result-list{
|
||||
|
||||
.result-list {
|
||||
display: flex;
|
||||
p{
|
||||
|
||||
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{
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mall{
|
||||
.mall {
|
||||
position: absolute;
|
||||
top: px2rem(184);
|
||||
// bottom: px2rem(1020);
|
||||
@@ -102,21 +112,26 @@ html, body{
|
||||
z-index: 99;
|
||||
width: px2rem(142);
|
||||
height: px2rem(134);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.game-area{
|
||||
|
||||
.game-area {
|
||||
position: absolute;
|
||||
top: px2rem(274);
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
height: px2rem(1054);
|
||||
background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
|
||||
|
||||
// 等待倒计时30s
|
||||
.select-time{
|
||||
.select-time {
|
||||
display: none;
|
||||
.count-down, .current-tip{
|
||||
|
||||
.count-down,
|
||||
.current-tip {
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: px2rem(-40);
|
||||
@@ -125,13 +140,14 @@ html, body{
|
||||
width: px2rem(322);
|
||||
height: px2rem(72);
|
||||
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;
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
color: #B82F1A;
|
||||
}
|
||||
.current-tip{
|
||||
|
||||
.current-tip {
|
||||
top: px2rem(50);
|
||||
width: px2rem(368);
|
||||
height: px2rem(68);
|
||||
@@ -140,13 +156,15 @@ html, body{
|
||||
font-size: px2rem(22);
|
||||
color: #F0C799;
|
||||
}
|
||||
|
||||
// 海鲜列表
|
||||
ul{
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
padding-left: px2rem(47);
|
||||
li{
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
width: px2rem(138);
|
||||
@@ -154,15 +172,18 @@ html, body{
|
||||
margin-top: px2rem(130);
|
||||
margin-right: px2rem(32);
|
||||
background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
|
||||
&:nth-child(-n+4){
|
||||
|
||||
&:nth-child(-n+4) {
|
||||
margin-top: px2rem(80);
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
width: px2rem(120);
|
||||
height: px2rem(120);
|
||||
transform: translate( px2rem(8), px2rem(-26) );
|
||||
transform: translate(px2rem(8), px2rem(-26));
|
||||
}
|
||||
.multiple{
|
||||
|
||||
.multiple {
|
||||
position: absolute;
|
||||
bottom: px2rem(20);
|
||||
left: px2rem(-10);
|
||||
@@ -175,7 +196,8 @@ html, body{
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.name{
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: px2rem(-40);
|
||||
left: 50%;
|
||||
@@ -190,17 +212,20 @@ html, body{
|
||||
font-size: px2rem(20);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
&.general{
|
||||
|
||||
&.general {
|
||||
height: px2rem(46);
|
||||
line-height: px2rem(30);
|
||||
background: url('../images/name-general-bg.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
.gift-price{
|
||||
|
||||
.gift-price {
|
||||
font-size: px2rem(18);
|
||||
padding-top: px2rem(4);
|
||||
}
|
||||
}
|
||||
.bubble-2s{
|
||||
|
||||
.bubble-2s {
|
||||
display: none;
|
||||
// width: px2rem(92);
|
||||
// height: px2rem(56);
|
||||
@@ -212,21 +237,25 @@ html, body{
|
||||
background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
|
||||
transform: rotate(343deg);
|
||||
text-indent: px2rem(16);
|
||||
p{
|
||||
|
||||
p {
|
||||
font-size: px2rem(18);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-left: px2rem(-20);
|
||||
&.first-line{
|
||||
|
||||
&.first-line {
|
||||
padding-top: px2rem(10);
|
||||
}
|
||||
&.second-line{
|
||||
|
||||
&.second-line {
|
||||
padding-top: px2rem(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-num{
|
||||
|
||||
.select-num {
|
||||
// display: none;
|
||||
position: absolute;
|
||||
top: px2rem(-6);
|
||||
@@ -244,8 +273,9 @@ html, body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 碎片按钮
|
||||
.btn-wrap{
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -253,7 +283,8 @@ html, body{
|
||||
height: px2rem(126);
|
||||
margin: px2rem(140) auto 0;
|
||||
background: url('../images/btn-wrap-bg.png') no-repeat 0 0/100% 100%;
|
||||
div{
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: px2rem(190);
|
||||
@@ -262,42 +293,51 @@ html, body{
|
||||
line-height: px2rem(80);
|
||||
font-size: px2rem(30);
|
||||
color: #975B25;
|
||||
&.active{
|
||||
|
||||
&.active {
|
||||
background-image: url('../images/fragment-btn-active.png');
|
||||
color: #B33E17;
|
||||
}
|
||||
&:first-child{
|
||||
|
||||
&:first-child {
|
||||
margin-left: px2rem(60);
|
||||
}
|
||||
&:last-child{
|
||||
|
||||
&:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:nth-child(2){
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 px2rem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 架子
|
||||
.shelf{
|
||||
.shelf {
|
||||
width: px2rem(710);
|
||||
height: px2rem(100);
|
||||
position: absolute;
|
||||
top: px2rem(440);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
&:last-child{
|
||||
|
||||
&:last-child {
|
||||
top: px2rem(720);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 等待结果5s
|
||||
.wait-time{
|
||||
.wait-time {
|
||||
display: none;
|
||||
width: px2rem(750);
|
||||
height: px2rem(600);
|
||||
margin: auto;
|
||||
position: relative;
|
||||
.count-down, .current-tip{
|
||||
|
||||
.count-down,
|
||||
.current-tip {
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: px2rem(-40);
|
||||
@@ -312,12 +352,13 @@ html, body{
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
}
|
||||
.current-tip{
|
||||
|
||||
.current-tip {
|
||||
top: px2rem(50);
|
||||
width: px2rem(368);
|
||||
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;
|
||||
font-size: px2rem(22);
|
||||
color: #FFF0C799;
|
||||
@@ -325,14 +366,17 @@ html, body{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 开奖时间
|
||||
.draw-time{
|
||||
.draw-time {
|
||||
display: none;
|
||||
width: px2rem(750);
|
||||
height: px2rem(600);
|
||||
|
||||
// margin: auto;
|
||||
// margin-top: px2rem(80);
|
||||
.count-down, .current-tip{
|
||||
.count-down,
|
||||
.current-tip {
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: px2rem(-40);
|
||||
@@ -341,28 +385,31 @@ html, body{
|
||||
width: px2rem(322);
|
||||
height: px2rem(72);
|
||||
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;
|
||||
font-size: px2rem(24);
|
||||
color: #B82F1A;
|
||||
font-weight: bold;
|
||||
}
|
||||
.current-tip{
|
||||
|
||||
.current-tip {
|
||||
top: px2rem(50);
|
||||
width: px2rem(368);
|
||||
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);
|
||||
color: #F0C799;
|
||||
}
|
||||
.top-three{
|
||||
|
||||
.top-three {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(240);
|
||||
width: 100%;
|
||||
.top-three-title{
|
||||
|
||||
.top-three-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -371,20 +418,24 @@ html, body{
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: px2rem(18);
|
||||
.line{
|
||||
|
||||
.line {
|
||||
width: px2rem(50);
|
||||
border: px2rem(1) solid white;
|
||||
}
|
||||
}
|
||||
.top-three-list{
|
||||
|
||||
.top-three-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: px2rem(340);
|
||||
margin: auto;
|
||||
p{
|
||||
|
||||
p {
|
||||
width: px2rem(74);
|
||||
height: px2rem(74);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
@@ -393,7 +444,8 @@ html, body{
|
||||
}
|
||||
}
|
||||
}
|
||||
.draw-pic{
|
||||
|
||||
.draw-pic {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -401,12 +453,14 @@ html, body{
|
||||
z-index: 1;
|
||||
width: px2rem(280);
|
||||
height: px2rem(280);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.award-info{
|
||||
|
||||
.award-info {
|
||||
position: absolute;
|
||||
top: px2rem(600);
|
||||
width: 100%;
|
||||
@@ -414,21 +468,25 @@ html, body{
|
||||
text-align: center;
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
.desc{
|
||||
|
||||
.desc {
|
||||
color: #FEEF60;
|
||||
margin-bottom: px2rem(12);
|
||||
}
|
||||
.award-wrap{
|
||||
|
||||
.award-wrap {
|
||||
color: white;
|
||||
.award-total{
|
||||
|
||||
.award-total {
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部信息
|
||||
.info-bottom{
|
||||
.info-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -439,9 +497,12 @@ html, body{
|
||||
display: flex;
|
||||
// justify-content: space-evenly;
|
||||
align-items: center;
|
||||
.f-wrap{
|
||||
|
||||
.f-wrap {
|
||||
margin-top: px2rem(14);
|
||||
.fragment, .award{
|
||||
|
||||
.fragment,
|
||||
.award {
|
||||
width: px2rem(250);
|
||||
height: px2rem(42);
|
||||
background-color: #BD7F38;
|
||||
@@ -454,31 +515,36 @@ html, body{
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
}
|
||||
.avatar{
|
||||
|
||||
.avatar {
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
margin-left: px2rem(42);
|
||||
margin-right: px2rem(20);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.add{
|
||||
|
||||
.add {
|
||||
width: px2rem(41);
|
||||
height: px2rem(41);
|
||||
margin-top: px2rem(-48);
|
||||
margin-left: px2rem(12);
|
||||
}
|
||||
.rank{
|
||||
|
||||
.rank {
|
||||
width: px2rem(170);
|
||||
height: px2rem(54);
|
||||
margin-left: px2rem(44);
|
||||
}
|
||||
}
|
||||
|
||||
// 规则弹窗
|
||||
.shade-mask{
|
||||
.shade-mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -487,7 +553,8 @@ html, body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
.shade-content{
|
||||
|
||||
.shade-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -501,7 +568,8 @@ html, body{
|
||||
color: #B58147;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
main{
|
||||
|
||||
main {
|
||||
position: absolute;
|
||||
top: px2rem(60);
|
||||
width: 100%;
|
||||
@@ -509,9 +577,11 @@ html, body{
|
||||
padding: 0 px2rem(42);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
div{
|
||||
|
||||
div {
|
||||
line-height: 1.2;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
width: px2rem(252);
|
||||
height: px2rem(46);
|
||||
line-height: px2rem(46);
|
||||
@@ -519,15 +589,18 @@ html, body{
|
||||
margin: 0 auto px2rem(22);
|
||||
text-align: center;
|
||||
}
|
||||
.jietu{
|
||||
|
||||
.jietu {
|
||||
width: px2rem(490);
|
||||
height: px2rem(275);
|
||||
margin-top: px2rem(12);
|
||||
margin-bottom: px2rem(32);
|
||||
&.t2{
|
||||
|
||||
&.t2 {
|
||||
height: px2rem(299);
|
||||
}
|
||||
&.t3{
|
||||
|
||||
&.t3 {
|
||||
height: px2rem(301);
|
||||
}
|
||||
}
|
||||
@@ -535,8 +608,9 @@ html, body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 今日排名弹窗
|
||||
.shade-mask-rank{
|
||||
.shade-mask-rank {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -545,7 +619,8 @@ html, body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.6);
|
||||
.shade-content-rank{
|
||||
|
||||
.shade-content-rank {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -553,18 +628,21 @@ html, body{
|
||||
width: px2rem(660);
|
||||
height: px2rem(980);
|
||||
background: white;
|
||||
.rank-top{
|
||||
|
||||
.rank-top {
|
||||
height: px2rem(340);
|
||||
background-image: linear-gradient(#F49C35, #FFDD81);
|
||||
overflow: hidden;
|
||||
.tab-wrap{
|
||||
|
||||
.tab-wrap {
|
||||
font-family: 'pingfang-regular';
|
||||
width: px2rem(460);
|
||||
height: px2rem(70);
|
||||
background-color: rgba($color: #fff, $alpha: .3);
|
||||
border-radius: px2rem(36);
|
||||
margin: px2rem(20) auto px2rem(6);
|
||||
span{
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: px2rem(210);
|
||||
height: px2rem(60);
|
||||
@@ -573,46 +651,55 @@ html, body{
|
||||
font-size: px2rem(30);
|
||||
color: white;
|
||||
margin-top: px2rem(5);
|
||||
&:first-child{
|
||||
|
||||
&:first-child {
|
||||
margin-left: px2rem(14);
|
||||
}
|
||||
}
|
||||
.active{
|
||||
|
||||
.active {
|
||||
background-color: white;
|
||||
color: #F5A03A;
|
||||
border-radius: px2rem(30);
|
||||
}
|
||||
}
|
||||
.topthree-wrap{
|
||||
|
||||
.topthree-wrap {
|
||||
position: relative;
|
||||
.info-wrap{
|
||||
|
||||
.info-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
&:first-child{
|
||||
|
||||
&:first-child {
|
||||
width: px2rem(132);
|
||||
// height: px2rem(175);
|
||||
// margin-top: px2rem(86);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.diamond-num{
|
||||
|
||||
.diamond-num {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.avatar{
|
||||
|
||||
.avatar {
|
||||
width: px2rem(132);
|
||||
height: px2rem(175);
|
||||
margin-bottom: px2rem(20);
|
||||
p{
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../images/first.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
top: px2rem(-136);
|
||||
@@ -622,14 +709,17 @@ html, body{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.nick, .diamond-num{
|
||||
|
||||
.nick,
|
||||
.diamond-num {
|
||||
width: px2rem(360);
|
||||
text-align: center;
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.diamond-num{
|
||||
|
||||
.diamond-num {
|
||||
font-family: 'din-medium';
|
||||
margin: 0;
|
||||
margin-top: px2rem(-20);
|
||||
@@ -641,7 +731,7 @@ html, body{
|
||||
}
|
||||
}
|
||||
|
||||
.other-rank{
|
||||
.other-rank {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -649,14 +739,17 @@ html, body{
|
||||
background-color: white;
|
||||
padding: px2rem(30) px2rem(20) 0;
|
||||
box-sizing: border-box;
|
||||
li{
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40);
|
||||
&:last-child{
|
||||
|
||||
&:last-child {
|
||||
// margin-bottom: px2rem(140);
|
||||
}
|
||||
.index{
|
||||
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: px2rem(30);
|
||||
font-size: px2rem(30);
|
||||
@@ -664,24 +757,28 @@ html, body{
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
.others-info{
|
||||
|
||||
.others-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: px2rem(20);
|
||||
img{
|
||||
|
||||
img {
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(20);
|
||||
}
|
||||
.others-nick{
|
||||
|
||||
.others-nick {
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.others-diamond-num{
|
||||
|
||||
.others-diamond-num {
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
@@ -689,7 +786,7 @@ html, body{
|
||||
}
|
||||
}
|
||||
|
||||
.mine{
|
||||
.mine {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@@ -701,29 +798,34 @@ html, body{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.mine-rank{
|
||||
|
||||
.mine-rank {
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.mine-info{
|
||||
|
||||
.mine-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: px2rem(80);
|
||||
height: px2rem(80);
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(30);
|
||||
margin-right: px2rem(40);
|
||||
}
|
||||
.mine-nick{
|
||||
|
||||
.mine-nick {
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.mine-diamond-num{
|
||||
|
||||
.mine-diamond-num {
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
@@ -731,8 +833,9 @@ html, body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 碎片不足弹窗
|
||||
.shade-mask-fragmentNum{
|
||||
.shade-mask-fragmentNum {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -741,7 +844,8 @@ html, body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.6);
|
||||
.shade-content-fragmentNum{
|
||||
|
||||
.shade-content-fragmentNum {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -754,30 +858,36 @@ html, body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.fragmentNum-title{
|
||||
|
||||
.fragmentNum-title {
|
||||
font-size: px2rem(36);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: px2rem(38);
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
width: px2rem(120);
|
||||
width: px2rem(120);
|
||||
margin-top: px2rem(108);
|
||||
}
|
||||
p{
|
||||
|
||||
p {
|
||||
font-size: px2rem(30);
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-top: px2rem(50);
|
||||
}
|
||||
.fragmentNum-btn-wrap{
|
||||
|
||||
.fragmentNum-btn-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: px2rem(512);
|
||||
height: px2rem(76);
|
||||
margin-top: px2rem(90);
|
||||
.cancel-btn, .confirm-btn{
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
width: px2rem(240);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(76);
|
||||
@@ -788,7 +898,8 @@ html, body{
|
||||
background-color: #EAE5FC;
|
||||
color: #7154EE;
|
||||
}
|
||||
.confirm-btn{
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #735FFE;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -797,7 +908,7 @@ html, body{
|
||||
}
|
||||
}
|
||||
|
||||
.no-in-app{
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -807,3 +918,69 @@ html, body{
|
||||
z-index: 99999;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
@@ -21,6 +22,16 @@
|
||||
<div class="mall" style="display: none;">
|
||||
<img src="./images/mall.png" alt="">
|
||||
</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">
|
||||
<!-- 选择时间 -->
|
||||
@@ -99,7 +110,7 @@
|
||||
<div class="fragment">我的碎片：<span>0</span></div>
|
||||
<div class="award">今日奖励：<span>0</span></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>
|
||||
|
||||
|
||||
@@ -47,6 +47,10 @@ const getUserInfo = (param) => {
|
||||
url: urlPrefix + '/act/luckySea/getUserActInfo',
|
||||
success (res) {
|
||||
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)
|
||||
|
||||
if (res.data.todayReward.toString().length >= 5) {
|
||||
|
||||
@@ -156,6 +156,7 @@ $(function () {
|
||||
giftNameArr[index] = item.giftName;
|
||||
selectSrcArr[index] = item.headwearPic;
|
||||
selectSrc = selectSrcArr[0];
|
||||
giftName = giftNameArr[0];
|
||||
})
|
||||
console.log('giftNameArr', giftNameArr);
|
||||
} else if (res.code == 80002) {
|
||||
@@ -173,11 +174,13 @@ $(function () {
|
||||
$('.tabBox div').click(function () {
|
||||
var index = $(this).index();
|
||||
$(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];
|
||||
giftName = giftNameArr[index];
|
||||
userRemainDay = remainDayArr[index];
|
||||
prodID = prodIDArr[index];
|
||||
$('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
|
||||
})
|
||||
const animation = () => {
|
||||
$('.select-area')
|
||||
|
||||
Reference in New Issue
Block a user