1.1.0：将深海奇缘改成奇遇森林
This commit is contained in:
Dragon
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -12,23 +12,23 @@
|
||||
|
||||
body {
|
||||
font-family: 'pingfang-medium';
|
||||
background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
||||
background-color: #F43C58;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 10rem;
|
||||
height: 6.66667rem;
|
||||
height: 8.26667rem;
|
||||
background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.buy-area {
|
||||
width: 9.46667rem;
|
||||
height: 14.4rem;
|
||||
width: 9.33333rem;
|
||||
height: 12.37333rem;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 1.06667rem 0.56rem 0 0.8rem;
|
||||
padding: 1.2rem 0.50667rem 0 0.74667rem;
|
||||
background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
|
||||
margin-top: -0.88rem;
|
||||
margin-top: -4rem;
|
||||
}
|
||||
|
||||
.buy-area.bg-long {
|
||||
@@ -38,7 +38,7 @@ body {
|
||||
.buy-area li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.buy-area li.li-bg-long {
|
||||
@@ -46,33 +46,33 @@ body {
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background-color: #92CCFB;
|
||||
width: 1.73333rem;
|
||||
height: 1.73333rem;
|
||||
background-color: #F43C58;
|
||||
border-radius: 0.4rem;
|
||||
margin-right: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info {
|
||||
flex: 1;
|
||||
height: 1.6rem;
|
||||
height: 1.46667rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 0.34667rem;
|
||||
color: #C58138;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-name {
|
||||
font-size: 0.48rem;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@ body {
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-award {
|
||||
color: #FEEF60;
|
||||
color: #ED7B50;
|
||||
}
|
||||
|
||||
.buy-area li .buy-btn {
|
||||
@@ -99,7 +99,7 @@ body {
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 1.62667rem;
|
||||
height: 1.73333rem;
|
||||
background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -112,33 +112,45 @@ body {
|
||||
.bottom .avatar {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
margin: 0 0.26667rem 0 0.53333rem;
|
||||
margin-left: 0.56rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.bottom .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bottom .info-wrap {
|
||||
flex: 1;
|
||||
height: 1.17333rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 0.26667rem;
|
||||
color: white;
|
||||
margin-top: 0.18667rem;
|
||||
}
|
||||
|
||||
.bottom .info-wrap .nick {
|
||||
font-size: 0.37333rem;
|
||||
.bottom .info-wrap .fragment-num, .bottom .info-wrap .diamond-num {
|
||||
width: 3.33333rem;
|
||||
height: 0.56rem;
|
||||
background-color: #BD7F38;
|
||||
border-radius: 0.26667rem;
|
||||
line-height: 0.56rem;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-indent: 0.13333rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.bottom .add {
|
||||
width: 0.54667rem;
|
||||
height: 0.54667rem;
|
||||
margin-top: -0.64rem;
|
||||
margin-right: 0.93333rem;
|
||||
}
|
||||
|
||||
.bottom .recharge {
|
||||
width: 2rem;
|
||||
height: 0.85333rem;
|
||||
margin-right: 0.8rem;
|
||||
width: 1.92rem;
|
||||
height: 0.82667rem;
|
||||
margin-right: 0.98667rem;
|
||||
}
|
||||
|
||||
.bottom .recharge img {
|
||||
|
||||
@@ -20,64 +20,66 @@
|
||||
|
||||
body{
|
||||
font-family: 'pingfang-medium';
|
||||
background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
||||
// background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
||||
background-color: #F43C58;
|
||||
}
|
||||
|
||||
.banner{
|
||||
width: px2rem(750);
|
||||
height: px2rem(500);
|
||||
height: px2rem(620);
|
||||
background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
.buy-area{
|
||||
width: px2rem(710);
|
||||
width: px2rem(700);
|
||||
// height: px2rem(900);
|
||||
height: px2rem(1080);
|
||||
// height: px2rem(1080);
|
||||
height: px2rem(928);
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(80) px2rem(42) 0 px2rem(60);
|
||||
padding: px2rem(90) px2rem(38) 0 px2rem(56);
|
||||
background: url('../images/mall/buy-area.png') no-repeat 0 0/100% 100%;
|
||||
margin-top: px2rem(-66);
|
||||
margin-top: px2rem(-300);
|
||||
&.bg-long{
|
||||
background-image: url('../images/mall/buy-area-long.png');
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40);
|
||||
margin-bottom: px2rem(60);
|
||||
&.li-bg-long{
|
||||
margin-bottom: px2rem(90);
|
||||
}
|
||||
.headwear-pic{
|
||||
width: px2rem(180);
|
||||
height: px2rem(180);
|
||||
background-color: #92CCFB;
|
||||
width: px2rem(130);
|
||||
height: px2rem(130);
|
||||
background-color: #F43C58;
|
||||
border-radius: px2rem(30);
|
||||
margin-right: px2rem(30);
|
||||
margin-right: px2rem(20);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(150);
|
||||
height: px2rem(150);
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
}
|
||||
}
|
||||
.headwear-info{
|
||||
flex: 1;
|
||||
height: px2rem(120);
|
||||
height: px2rem(110);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: px2rem(26);
|
||||
color: #C58138;
|
||||
font-size: px2rem(24);
|
||||
.headwear-name{
|
||||
font-size: px2rem(36);
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
}
|
||||
.headwear-price{
|
||||
margin-bottom: px2rem(-12);
|
||||
}
|
||||
.headwear-award{
|
||||
color: #FEEF60;
|
||||
color: #ED7B50;
|
||||
}
|
||||
}
|
||||
.buy-btn{
|
||||
@@ -95,7 +97,7 @@ body{
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: px2rem(122);
|
||||
height: px2rem(130);
|
||||
background: url('../images/mall/bottom.png') no-repeat 0 0/100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -105,29 +107,40 @@ body{
|
||||
.avatar{
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
margin: 0 px2rem(20) 0 px2rem(40);
|
||||
margin-left: px2rem(42);
|
||||
margin-right: px2rem(20);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.info-wrap{
|
||||
flex: 1;
|
||||
height: px2rem(88);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: px2rem(20);
|
||||
color: white;
|
||||
.nick{
|
||||
font-size: px2rem(28);
|
||||
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(150);
|
||||
height: px2rem(64);
|
||||
margin-right: px2rem(60);
|
||||
width: px2rem(144);
|
||||
height: px2rem(62);
|
||||
margin-right: px2rem(74);
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,163 +1,139 @@
|
||||
@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");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
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");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-regular';
|
||||
font-family: "pingfang-regular";
|
||||
src: url("../../../common/fonts/PingFang-Regular.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'pingfang-bold';
|
||||
font-family: "pingfang-bold";
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-top {
|
||||
height: 6.66667rem;
|
||||
height: 6.6666666667rem;
|
||||
background-image: linear-gradient(#3491F5, #60C7FC);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap {
|
||||
font-family: 'pingfang-regular';
|
||||
width: 5.33333rem;
|
||||
height: 0.93333rem;
|
||||
font-family: "pingfang-regular";
|
||||
width: 5.3333333333rem;
|
||||
height: 0.9333333333rem;
|
||||
background-color: #7ABDF9;
|
||||
border-radius: 0.48rem;
|
||||
margin: 0.48rem auto 0.29333rem;
|
||||
margin: 0.48rem auto 0.2933333333rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap span {
|
||||
display: inline-block;
|
||||
width: 2.53333rem;
|
||||
width: 2.5333333333rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
margin-top: 0.06667rem;
|
||||
margin-top: 0.0666666667rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap span:first-child {
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap .active {
|
||||
background-color: white;
|
||||
color: #3C9BF7;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 2.66667rem;
|
||||
width: 2.6666666667rem;
|
||||
height: 3.2rem;
|
||||
background-image: linear-gradient(#3F9EF7, #52B6FA);
|
||||
margin-top: 1.68rem;
|
||||
border-radius: 0.26667rem 0.26667rem 0 0;
|
||||
border-radius: 0.2666666667rem 0.2666666667rem 0 0;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:first-child {
|
||||
width: 3.2rem;
|
||||
height: 3.73333rem;
|
||||
margin-top: 1.14667rem;
|
||||
height: 3.7333333333rem;
|
||||
margin-top: 1.1466666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) {
|
||||
left: 0.48rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar {
|
||||
width: 1.86667rem;
|
||||
height: 2.53333rem;
|
||||
margin-top: -1.14667rem;
|
||||
width: 1.8666666667rem;
|
||||
height: 2.5333333333rem;
|
||||
margin-top: -1.1466666667rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar p {
|
||||
background-image: url("../images/second.png");
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar img {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
top: -1.97333rem;
|
||||
width: 1.8666666667rem;
|
||||
height: 1.8666666667rem;
|
||||
top: -1.9733333333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) {
|
||||
right: 0.48rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar {
|
||||
width: 1.86667rem;
|
||||
height: 2.53333rem;
|
||||
margin-top: -1.14667rem;
|
||||
width: 1.8666666667rem;
|
||||
height: 2.5333333333rem;
|
||||
margin-top: -1.1466666667rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar p {
|
||||
background-image: url("../images/third.png");
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar img {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
top: -1.97333rem;
|
||||
width: 1.8666666667rem;
|
||||
height: 1.8666666667rem;
|
||||
top: -1.9733333333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar {
|
||||
width: 2.13333rem;
|
||||
height: 2.85333rem;
|
||||
margin-top: -0.93333rem;
|
||||
width: 2.1333333333rem;
|
||||
height: 2.8533333333rem;
|
||||
margin-top: -0.9333333333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar p {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
background: url("../images/first.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar img {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
top: -2.24rem;
|
||||
width: 2.13333rem;
|
||||
height: 2.13333rem;
|
||||
width: 2.1333333333rem;
|
||||
height: 2.1333333333rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .nick, .rank-top .topthree-wrap .info-wrap .diamond-num {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin: 0.21333rem 0;
|
||||
margin: 0.2133333333rem 0;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .diamond-num {
|
||||
font-family: 'din-medium';
|
||||
font-family: "din-medium";
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -166,22 +142,19 @@ html, body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 0.4rem 0.4rem 0 0;
|
||||
margin-top: -0.34667rem;
|
||||
margin-top: -0.3466666667rem;
|
||||
background-color: white;
|
||||
padding: 0.53333rem 0.77333rem 0;
|
||||
padding: 0.5333333333rem 0.7733333333rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.other-rank li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
}
|
||||
|
||||
.other-rank li:last-child {
|
||||
margin-bottom: 1.86667rem;
|
||||
margin-bottom: 1.8666666667rem;
|
||||
}
|
||||
|
||||
.other-rank li .index {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
@@ -189,29 +162,25 @@ html, body {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.other-rank li .others-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.other-rank li .others-info img {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.3333333333rem;
|
||||
height: 1.3333333333rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.26667rem;
|
||||
margin-right: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.other-rank li .others-info .others-nick {
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.other-rank li .others-diamond-num {
|
||||
font-size: 0.34667rem;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
@@ -224,46 +193,40 @@ html, body {
|
||||
width: 100%;
|
||||
height: 1.6rem;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 0 0.77333rem;
|
||||
padding: 0 0.7733333333rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mine .mine-rank {
|
||||
font-size: 0.34667rem;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mine .mine-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mine .mine-info img {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.3333333333rem;
|
||||
height: 1.3333333333rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
margin-right: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.mine .mine-info .mine-nick {
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mine .mine-diamond-num {
|
||||
font-size: 0.34667rem;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -272,3 +235,5 @@ html, body {
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=rank.css.map */
|
||||
|
||||
@@ -246,7 +246,7 @@ html,body{
|
||||
}
|
||||
|
||||
.no-in-app{
|
||||
display: none;
|
||||
// display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -1,149 +1,125 @@
|
||||
@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");
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #233346;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
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");
|
||||
.img {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6rem;
|
||||
height: 4.1333333333rem;
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@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");
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'pingfang-bold';
|
||||
background-color: #50BEF8;
|
||||
}
|
||||
|
||||
ul.record-list {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-top: 0.69333rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item {
|
||||
overflow: hidden;
|
||||
width: 10rem;
|
||||
height: 5.6rem;
|
||||
background: url("../images/record/record-bg.png") no-repeat 0 0/100% 100%;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .time {
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: 0.34667rem;
|
||||
color: white;
|
||||
.img p {
|
||||
text-align: center;
|
||||
margin-top: 0.58667rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
width: 1.3333333333%rem;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: #fff;
|
||||
font-size: 0.2666666667rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award {
|
||||
.record-list {
|
||||
width: 9.2rem;
|
||||
margin: 0.4rem auto;
|
||||
}
|
||||
.record-list li {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%);
|
||||
border-radius: 0.2666666667rem;
|
||||
}
|
||||
.record-list li h3 {
|
||||
width: 100%;
|
||||
height: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.record-list li .goldBox {
|
||||
width: 1.3333333333%rem;
|
||||
height: 0.5866666667rem;
|
||||
line-height: 0.5866666667rem;
|
||||
background: #1B9196;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 9.04rem;
|
||||
height: 0.58667rem;
|
||||
background-color: #1A8AE8;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.2666666667rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award .text {
|
||||
font-size: 0.37333rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-left: 0.32rem;
|
||||
.record-list li .goldBox span {
|
||||
color: #fff;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award .diamond-num {
|
||||
font-family: 'din-medium';
|
||||
font-size: 0.34667rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award img.diamond-pic {
|
||||
width: 0.48rem;
|
||||
height: 0.37333rem;
|
||||
margin: 0 0.34667rem 0 0.10667rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0.66667rem 0 0.8rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item {
|
||||
width: 25%;
|
||||
margin: 0.26667rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active {
|
||||
margin: 0.13333rem 0;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active div {
|
||||
width: 1.06667rem;
|
||||
height: 1.06667rem;
|
||||
background: url("../images/little-bubble-active.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active span {
|
||||
.record-list li .goldBox .gold {
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FEEF60;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item div {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: url("../images/little-bubble.png") no-repeat 0 0/100% 100%;
|
||||
.record-list li .marine_organism {
|
||||
width: 7.4666666667rem;
|
||||
height: 2.1333333333rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item div img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item span {
|
||||
font-size: 0.26667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-left: 0.13333rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .tip {
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: 0.26667rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
ul.record-list .no-record {
|
||||
.record-list li .marine_organism span {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
.record-list li .marine_organism span img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.72rem;
|
||||
height: 0.6266666667rem;
|
||||
display: block;
|
||||
}
|
||||
.record-list li .marine_organism span b {
|
||||
position: absolute;
|
||||
right: -0.1rem;
|
||||
top: 0.3rem;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.2666666667rem;
|
||||
}
|
||||
.record-list li .marine_organism .active {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
position: relative;
|
||||
}
|
||||
.record-list li .marine_organism .active img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.96rem;
|
||||
height: 0.8266666667rem;
|
||||
display: block;
|
||||
}
|
||||
.record-list li .marine_organism .active b {
|
||||
position: absolute;
|
||||
right: -0.1rem;
|
||||
top: 0.3rem;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-stroke: 0.0266666667rem #FF5C7E;
|
||||
text-stroke: 0.0266666667rem #FF5C7E;
|
||||
font-weight: bold;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.record-list li p {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 0.9rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=record.css.map */
|
||||
|
||||
@@ -2,143 +2,137 @@
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@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');
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #233346;
|
||||
}
|
||||
.img{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: px2rem(450, );
|
||||
height: px2rem(310, );
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
p{
|
||||
text-align: center;
|
||||
width: px2rem(100%, );
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: #fff;
|
||||
font-size: px2rem(20, );
|
||||
}
|
||||
}
|
||||
.record-list {
|
||||
width: px2rem(690, );
|
||||
margin: px2rem(30, ) auto;
|
||||
|
||||
@font-face{
|
||||
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');
|
||||
}
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:' ';
|
||||
clear:both;
|
||||
}
|
||||
.clearfix{
|
||||
*zoom:1;//兼容到ie6
|
||||
}
|
||||
|
||||
html,body{
|
||||
font-family: 'pingfang-bold';
|
||||
background-color: #50BEF8;
|
||||
}
|
||||
|
||||
ul.record-list{
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-top: px2rem(52);
|
||||
box-sizing: border-box;
|
||||
li.record-item{
|
||||
overflow: hidden;
|
||||
width: px2rem(750);
|
||||
height: px2rem(420);
|
||||
background: url('../images/record/record-bg.png') no-repeat 0 0/100% 100%;
|
||||
margin-bottom: px2rem(30);
|
||||
.time{
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: px2rem(26);
|
||||
color: white;
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(360, );
|
||||
background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%);
|
||||
border-radius: px2rem(20, );
|
||||
h3 {
|
||||
width: 100%;
|
||||
height: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
text-align: center;
|
||||
margin-top: px2rem(44);
|
||||
margin-bottom: px2rem(16);
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.award{
|
||||
|
||||
.goldBox {
|
||||
width: px2rem(100%, );
|
||||
height: px2rem(44, );
|
||||
line-height: px2rem(44, );
|
||||
background: #1B9196;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: px2rem(678);
|
||||
height: px2rem(44);
|
||||
background-color: #1A8AE8;
|
||||
margin: auto;
|
||||
.text{
|
||||
font-size: px2rem(28);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-left: px2rem(24);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(20, );
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: px2rem(28, );
|
||||
}
|
||||
.diamond-num{
|
||||
font-family: 'din-medium';
|
||||
font-size: px2rem(26);
|
||||
color: white;
|
||||
}
|
||||
img.diamond-pic{
|
||||
width: px2rem(36);
|
||||
height: px2rem(28);
|
||||
margin: 0 px2rem(26) 0 px2rem(8);
|
||||
|
||||
.gold {
|
||||
font-size: px2rem(26, );
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
ul.award-animal{
|
||||
|
||||
.marine_organism {
|
||||
width: px2rem(560, );
|
||||
height: px2rem(160, );
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 px2rem(50) 0 px2rem(60);
|
||||
// margin-left: px2rem(60);
|
||||
li.animal-item{
|
||||
// float: left;
|
||||
width: 25%;
|
||||
margin: px2rem(20) 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.active{
|
||||
margin: px2rem(10) 0;
|
||||
div{
|
||||
width: px2rem(80);
|
||||
height: px2rem(80);
|
||||
background: url('../images/little-bubble-active.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
span{
|
||||
color: #FEEF60;
|
||||
}
|
||||
|
||||
span {
|
||||
width: px2rem(120, );
|
||||
height: px2rem(120, );
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(54, );
|
||||
height: px2rem(47, );
|
||||
display: block;
|
||||
}
|
||||
div{
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
background: url('../images/little-bubble.png') no-repeat 0 0/100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
right: -0.1rem;
|
||||
top: 0.3rem;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(20, );
|
||||
}
|
||||
span{
|
||||
font-size: px2rem(20);
|
||||
}
|
||||
|
||||
.active {
|
||||
width: px2rem(120, );
|
||||
height: px2rem(120, );
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(72, );
|
||||
height: px2rem(62, );
|
||||
display: block;
|
||||
}
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
right: -0.1rem;
|
||||
top: 0.3rem;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-stroke: px2rem(2, ) #FF5C7E;
|
||||
text-stroke: px2rem(2, ) #FF5C7E;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-left: px2rem(10);
|
||||
font-size: px2rem(24, );
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: px2rem(20);
|
||||
color: white;
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: px2rem(20);
|
||||
margin-top: 0.9rem;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.no-record{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
BIN
view/peko/activity/act-ocean/images/add.png
Normal file
BIN
view/peko/activity/act-ocean/images/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 B |
BIN
view/peko/activity/act-ocean/images/banner.png
Normal file
BIN
view/peko/activity/act-ocean/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
view/peko/activity/act-ocean/images/btn-wrap-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/btn-wrap-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.4 KiB |
BIN
view/peko/activity/act-ocean/images/cBut.png
Normal file
BIN
view/peko/activity/act-ocean/images/cBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
view/peko/activity/act-ocean/images/close.png
Normal file
BIN
view/peko/activity/act-ocean/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 8.3 KiB |
BIN
view/peko/activity/act-ocean/images/default-hui.png
Normal file
BIN
view/peko/activity/act-ocean/images/default-hui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 78 KiB |
BIN
view/peko/activity/act-ocean/images/gold.png
Normal file
BIN
view/peko/activity/act-ocean/images/gold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 578 B After Width: | Height: | Size: 452 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 548 B After Width: | Height: | Size: 471 B |
Binary file not shown.
|
Before Width: | Height: | Size: 572 B After Width: | Height: | Size: 491 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
view/peko/activity/act-ocean/images/mrlogo.png
Normal file
BIN
view/peko/activity/act-ocean/images/mrlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
view/peko/activity/act-ocean/images/multiple-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/multiple-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
BIN
view/peko/activity/act-ocean/images/name-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/name-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
BIN
view/peko/activity/act-ocean/images/name-general-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/name-general-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
view/peko/activity/act-ocean/images/null.png
Normal file
BIN
view/peko/activity/act-ocean/images/null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-ocean/images/previous-result-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/previous-result-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 893 B After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
view/peko/activity/act-ocean/images/record/lottery.png
Normal file
BIN
view/peko/activity/act-ocean/images/record/lottery.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.5 KiB |
BIN
view/peko/activity/act-ocean/images/sBut.png
Normal file
BIN
view/peko/activity/act-ocean/images/sBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
BIN
view/peko/activity/act-ocean/images/shelf.png
Normal file
BIN
view/peko/activity/act-ocean/images/shelf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
view/peko/activity/act-ocean/images/t1.png
Normal file
BIN
view/peko/activity/act-ocean/images/t1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/peko/activity/act-ocean/images/t2.png
Normal file
BIN
view/peko/activity/act-ocean/images/t2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
view/peko/activity/act-ocean/images/t3.png
Normal file
BIN
view/peko/activity/act-ocean/images/t3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
view/peko/activity/act-ocean/images/tip.png
Normal file
BIN
view/peko/activity/act-ocean/images/tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
view/peko/activity/act-ocean/images/title-bg.png
Normal file
BIN
view/peko/activity/act-ocean/images/title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 736 B |
Binary file not shown.
@@ -1,85 +1,173 @@
|
||||
<!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>
|
||||
<title>奇遇森林</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<link rel="stylesheet" href="./css/index.css?v=3.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrap no-in-app">
|
||||
<!-- <div class="wrap "> -->
|
||||
<div class="banner"><img src="./images/banner.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="rank"><img src="./images/rank.png" alt=""></div>
|
||||
|
||||
<!-- 特权商城 -->
|
||||
<!-- <div class="mall">
|
||||
<img src="./images/mall.png" alt="">
|
||||
</div> -->
|
||||
<!-- 游戏区域 -->
|
||||
<div class="game-area">
|
||||
<!-- 选择时间 -->
|
||||
<div class="select-time">
|
||||
<div class="count-down">倒計時：<span class="count-down-num"></span><span>S</span></div>
|
||||
<!-- <div class="current-tip">玩法：选择碎片数量→选择食材</div> -->
|
||||
|
||||
<div class="btn-wrap">
|
||||
<div class="active">100金幣</div>
|
||||
<div>1000金幣</div>
|
||||
<div>10000金幣</div>
|
||||
</div>
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="shelf"><img src="./images/shelf.png" alt=""></div>
|
||||
<div class="shelf"><img src="./images/shelf.png" alt=""></div>
|
||||
</div>
|
||||
<!-- 等待结果 -->
|
||||
<div class="wait-time">
|
||||
<div class="count-down">開獎中：<span class="count-down-num"></span><span>S</span></div>
|
||||
<!-- <div class="current-tip">等待結果</div> -->
|
||||
</div>
|
||||
<!-- 开奖展示动画时间 -->
|
||||
<div class="draw-time">
|
||||
<div class="count-down">下一輪：<span class="count-down-num"></span><span>S</span></div>
|
||||
<div class="current-tip">本輪結果：<span class="current-result"></span></div>
|
||||
<!-- 中奖物品展示 -->
|
||||
<div class="draw-pic">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<!-- 用户本轮中奖情况 -->
|
||||
<div class="award-info">
|
||||
<!-- <div class="desc"></div> -->
|
||||
<div class="award-wrap"></div>
|
||||
</div>
|
||||
<!-- 本轮前3名 -->
|
||||
<div class="top-three">
|
||||
<div class="top-three-title">
|
||||
<span class="line"></span>
|
||||
<p class="topthree-desc"></p>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<div class="top-three-list">
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
</div>
|
||||
<div class="top_three">
|
||||
<span class="text">本輪前三名</span>
|
||||
<!-- <img src="./images/close.png" alt=""> -->
|
||||
<span class="img img1">虛位以待</span>
|
||||
<span class="img img2">虛位以待</span>
|
||||
<span class="img img3">虛位以待</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 往轮结果 -->
|
||||
<div class="previous-result">
|
||||
<span>往轮结果</span>
|
||||
<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>
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
<p><img src="" alt=""></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特权商城 -->
|
||||
<div class="mall">
|
||||
<img src="./images/mall.png" alt="">
|
||||
</div>
|
||||
<!-- 游戏区域 -->
|
||||
<div class="game-area">
|
||||
<!-- 选择时间 -->
|
||||
<div class="select-time">
|
||||
<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>
|
||||
</div>
|
||||
<!-- 等待结果 -->
|
||||
<div class="wait-time">
|
||||
<div class="count-down">请等待 <span class="count-down-num">5</span>S</div>
|
||||
</div>
|
||||
<!-- 开奖展示动画时间 -->
|
||||
<div class="draw-time">
|
||||
<div class="count-down">下一轮 <span class="count-down-num">3</span>S</div>
|
||||
<div class="draw-pic">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<!-- 本轮前3名 -->
|
||||
<div class="top-three">
|
||||
<span></span>
|
||||
<div class="top-three-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人信息 -->
|
||||
<div class="info-bottom">
|
||||
<div class="fragment">0</div>
|
||||
<div class="avatar"><img src="./images/logo.png" alt=""></div>
|
||||
<div class="award">0</div>
|
||||
<div class="avatar"><img src="" alt=""></div>
|
||||
<div class="f-wrap">
|
||||
<div class="fragment">用户昵称</div>
|
||||
<div class="award">今日獎勵：<span>0</span></div>
|
||||
</div>
|
||||
<div class="activeBalance">余額：<span></span>金幣 <b>儲值></b></div>
|
||||
<!-- <div class="add"><img src="./images/add.png" alt=""></div> -->
|
||||
|
||||
</div>
|
||||
<!-- 今日排名 -->
|
||||
<div class="rank"><img src="./images/rank.png" alt=""></div>
|
||||
<!-- 规则弹窗 -->
|
||||
<div class="shade-mask">
|
||||
<div class="shade-content">
|
||||
<p>1.用户购买限定头饰即可获赠送特权碎片，参与游戏活动</p>
|
||||
<p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物选择总次数*中奖海洋生物对应倍数*10}的钻石奖励</p>
|
||||
<p>3.该活动赠送给您的特权碎片为参与该活动的虚拟道具，不具任何价值也不能转赠其他用户</p>
|
||||
<p>4.活动结束将关闭页面，剩余碎片将会清空，请留意活动关闭时间</p>
|
||||
<p>5.本活动与 Apple Inc. 无关，最终解释权归平台所有</p>
|
||||
<main>
|
||||
<h3>遊戲規則</h3>
|
||||
<div>
|
||||
<p>1.每次至少選擇1種森林動物，可多次疊加選擇，中獎後可以獲得對應金幣獎勵（中獎森林動物選中數*中獎森林動物對應倍數）</p>
|
||||
<p>2.活動結束將關閉頁面，請留意活動關閉時間。</p>
|
||||
<p>3.本活動與Apple Inc.無關，最終解釋權歸平臺所有。</p>
|
||||
</div>
|
||||
</main>
|
||||
<img class="shade-content-close" src="./images/close.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日排名弹窗 -->
|
||||
<div class="shade-mask-rank">
|
||||
<div class="shade-content-rank">
|
||||
<div class="rank-top">
|
||||
|
||||
<div class="tab-wrap">
|
||||
<span class="diamond-rank active">金幣榜</span>
|
||||
<span class="num-rank">今日歐皇榜</span>
|
||||
</div>
|
||||
|
||||
<div class="topthree-wrap">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="other-rank">
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="mine">
|
||||
<span class="mine-rank"></span>
|
||||
<div class="mine-info">
|
||||
<img src="" alt="">
|
||||
<span class="mine-nick"></span>
|
||||
</div>
|
||||
<span class="mine-diamond-num"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 碎片不足提示弹窗 -->
|
||||
<div class="shade-mask-fragmentNum">
|
||||
<div class="shade-content-fragmentNum">
|
||||
<div class="fragmentNum-title">金幣不足</div>
|
||||
<img src="./images/mall/no-money.png" alt="">
|
||||
<p>當前金幣不足</p>
|
||||
<div class="fragmentNum-btn-wrap">
|
||||
<div class="cancel-btn">取消</div>
|
||||
<div class="confirm-btn">獲取金幣</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +178,7 @@
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<script src="./js/index.js?v=1.111"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,7 @@ const showLoading = () => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content: '加載中...',
|
||||
content: '加载中...',
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
@@ -49,7 +49,7 @@ const getUserInfo = (param) => {
|
||||
}
|
||||
},
|
||||
error(err){
|
||||
toastMsg('網絡錯誤')
|
||||
toastMsg('网络错误')
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -67,7 +67,7 @@ const getListPack = () => {
|
||||
}
|
||||
},
|
||||
error(err){
|
||||
toastMsg('網絡錯誤')
|
||||
toastMsg('网络错误')
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -219,7 +219,7 @@ $(function(){
|
||||
lock = false
|
||||
},
|
||||
error(err){
|
||||
toastMsg('網絡錯誤')
|
||||
toastMsg('网络错误')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -77,6 +77,9 @@ const getListRank = (type, page) => {
|
||||
canRequsetNextPageD = false
|
||||
}
|
||||
rankListD.push(...res.data.rankList)
|
||||
// 底部个人信息只渲染一次 x
|
||||
// if(pageD === 1){
|
||||
// }
|
||||
myInfoD = res.data.myRankInfo
|
||||
renderMyInfo()
|
||||
renderRankList()
|
||||
@@ -91,11 +94,16 @@ const getListRank = (type, page) => {
|
||||
canRequsetNextPageN = false
|
||||
}
|
||||
rankListN.push(...res.data.rankList)
|
||||
// 底部个人信息只渲染一次 x
|
||||
// if(pageN === 1){
|
||||
// }
|
||||
myInfoN = res.data.myRankInfo
|
||||
renderMyInfo()
|
||||
// renderMyInfo()
|
||||
renderRankList()
|
||||
isLockN = true
|
||||
}
|
||||
// isLock = true
|
||||
}else{
|
||||
toastMsg(res.message)
|
||||
}
|
||||
@@ -121,6 +129,9 @@ const renderMyInfo = () => {
|
||||
}
|
||||
$('.mine-info').find('img').attr('src', myInfoD.avatar)
|
||||
$('.mine-info').find('.mine-nick').html(myInfoD.nick)
|
||||
// if(myInfoD.num.toString().length >= 5) {
|
||||
// myInfoD.num = (myInfoD.num/10000).toFixed(2) + 'w'
|
||||
// }
|
||||
let tostr = myInfoD.num.toString()
|
||||
let num
|
||||
if(tostr.length >= 5) {
|
||||
@@ -141,7 +152,7 @@ const renderMyInfo = () => {
|
||||
}
|
||||
$('.mine-info').find('img').attr('src', myInfoN.avatar)
|
||||
$('.mine-info').find('.mine-nick').html(myInfoN.nick)
|
||||
$('.mine-diamond-num').html('猜对' + myInfoN.num + '次')
|
||||
$('.mine-diamond-num').html('猜對' + myInfoN.num + '次')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,7 +166,7 @@ const renderRankList = () => {
|
||||
if(rankListD.length < 3){
|
||||
let len = 3 - rankListD.length
|
||||
let arr = new Array(len).fill({
|
||||
nick: '虚位以待',
|
||||
nick: '虛位以待',
|
||||
avatar: './images/default.png',
|
||||
num: ''
|
||||
})
|
||||
@@ -217,7 +228,7 @@ const renderRankList = () => {
|
||||
if(rankListN.length < 3){
|
||||
let len = 3 - rankListN.length
|
||||
let arr = new Array(len).fill({
|
||||
nick: '虚位以待',
|
||||
nick: '虛位以待',
|
||||
avatar: './images/default.png'
|
||||
})
|
||||
topThreeArr.push(...arr)
|
||||
@@ -226,7 +237,7 @@ const renderRankList = () => {
|
||||
topThreeArr.map((item) => {
|
||||
let num = ''
|
||||
if(item.erbanNo){
|
||||
num = '猜对'+item.num + '次'
|
||||
num = '猜對'+item.num + '次'
|
||||
}
|
||||
topThreeStr += `
|
||||
<div class="info-wrap">
|
||||
@@ -248,7 +259,7 @@ const renderRankList = () => {
|
||||
othersArr.map((item, index) => {
|
||||
let num
|
||||
if(item.erbanNo){
|
||||
num = '猜对'+item.num + '次'
|
||||
num = '猜對'+item.num + '次'
|
||||
}
|
||||
others += `
|
||||
<li>
|
||||
@@ -284,6 +295,7 @@ $(function(){
|
||||
if(type === 1){
|
||||
renderRankList()
|
||||
renderMyInfo()
|
||||
// getListRank(type, pageD)
|
||||
}else{
|
||||
if(clickTabCanNetworkN){
|
||||
getListRank(type, pageN)
|
||||
@@ -301,39 +313,42 @@ $(function(){
|
||||
let scrollTop = $(this).scrollTop();//这是已经卷进去滚动条的的高度
|
||||
let scrollHeight = $('.other-rank')[0].scrollHeight;//这个是other-rank包含滚动条的总高度
|
||||
let ulHeight = $(this).innerHeight();//这个是other-rank的高度
|
||||
console.log(ulHeight,scrollTop, scrollHeight);
|
||||
|
||||
// 安卓可以只触发一次(安卓机型太多，不确定是否所有安卓都能触发一次)，ios会触发多次，ios要加锁, pc端触发不了
|
||||
|
||||
|
||||
//这样距离到底还有一段距离就请求，但是会导致重复请求，所以要加锁限制
|
||||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||||
console.log('到底了');
|
||||
if(type === 1){
|
||||
if(isLockD){
|
||||
isLockD = false
|
||||
pageD++
|
||||
if(pageSize * pageD > 100){
|
||||
toastMsg('没有更多数据啦~')
|
||||
toastMsg('沒有更多數據啦~')
|
||||
}else{
|
||||
if(canRequsetNextPageD){
|
||||
getListRank(type,pageD);
|
||||
}else{
|
||||
toastMsg('没有更多数据啦~')
|
||||
toastMsg('沒有更多數據啦~')
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(scrollTop + ulHeight >= scrollHeight){
|
||||
if(pageSize * pageD > 100){
|
||||
toastMsg('没有更多数据啦~')
|
||||
toastMsg('沒有更多數據啦~')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
// getListRank(type,++pageN);
|
||||
if(isLockN){
|
||||
isLockN = false
|
||||
pageN++
|
||||
if(pageSize * pageN > 100){
|
||||
toastMsg('没有更多数据啦~')
|
||||
toastMsg('沒有更多數據啦~')
|
||||
}else{
|
||||
if(canRequsetNextPageN){
|
||||
getListRank(type,pageN);
|
||||
@@ -344,7 +359,7 @@ $(function(){
|
||||
}else{
|
||||
if(scrollTop + ulHeight >= scrollHeight){
|
||||
if(pageSize * pageN > 100){
|
||||
toastMsg('没有更多数据啦~')
|
||||
toastMsg('沒有更多數據啦~')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,8 +8,8 @@ const showLoading = () => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content: '加載中...',
|
||||
success(e) {
|
||||
content: '加载中...',
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
@@ -40,94 +40,78 @@ const getUserRecord = () => {
|
||||
page,
|
||||
pageSize
|
||||
},
|
||||
success(res){
|
||||
if(res.code === 200){
|
||||
if(res.data.length === pageSize){
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
if (res.data.length === pageSize) {
|
||||
// 能够继续请求下一页
|
||||
canNext = true
|
||||
}else{
|
||||
} else {
|
||||
canNext = false
|
||||
}
|
||||
recordList.push(...res.data)
|
||||
renderRecord()
|
||||
renderRecord(res)
|
||||
isLock = true
|
||||
}else{
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(err){
|
||||
toastMsg('網絡錯誤')
|
||||
error (err) {
|
||||
toastMsg('网络错误')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染游戏记录
|
||||
const renderRecord = () => {
|
||||
if(recordList.length === 0){
|
||||
$('.record-list').html('<li class="no-record">暂无游戏记录</li>')
|
||||
}else{
|
||||
let str = ''
|
||||
recordList.map((item, index) => {
|
||||
let drawId = item.drawId
|
||||
// 渲染li里面的ul
|
||||
let str1 = ''
|
||||
item.results.map((item1, index) => {
|
||||
|
||||
str1 += `
|
||||
<li class="animal-item">
|
||||
<div><img src="${item1.itemUrl}" alt=""></div>
|
||||
<span>+${item1.costPiece}</span>
|
||||
</li>
|
||||
`
|
||||
|
||||
if(item1.itemId === drawId){
|
||||
$('.none').html(str1)
|
||||
$('.none').find('li').eq(index).addClass('active')
|
||||
str1 = $('.none').html()
|
||||
}
|
||||
})
|
||||
|
||||
// 渲染li
|
||||
let text = ''
|
||||
if(item.drawStatus === 1){
|
||||
text = '厉害~猜对了(*^▽^*)'
|
||||
}else{
|
||||
text = '哎呀~猜错了o(╥﹏╥)o'
|
||||
}
|
||||
const renderRecord = (res) => {
|
||||
if (recordList.length === 0) {
|
||||
$('.record-list').hide();
|
||||
$('.img').show();
|
||||
} else {
|
||||
$('.record-list').show();
|
||||
$('.img').hide();
|
||||
var str = '';
|
||||
let str2 = '';
|
||||
let drawId = [];;
|
||||
var results = [];
|
||||
console.log(res.data)
|
||||
res.data.forEach((res, index) => {
|
||||
drawId.push(res.drawId);
|
||||
str += `
|
||||
<li class="record-item">
|
||||
<div class="time">${dateFormat(item.drawTime, "yyyy-MM-dd hh:mm:ss")}</div>
|
||||
<div class="award">
|
||||
<span class="text">游戏奖励：</span>
|
||||
<p>
|
||||
<span class="diamond-num">${item.reward}</span>
|
||||
<img src="./images/record/diamond.png" alt="" class="diamond-pic">
|
||||
</p>
|
||||
</div>
|
||||
<ul class="award-animal clearfix">
|
||||
${str1}
|
||||
</ul>
|
||||
<div class="tip">${text}</div>
|
||||
<li>
|
||||
`
|
||||
})
|
||||
$('.record-list').html(str)
|
||||
<li style="margin-bottom: 0.8rem;">
|
||||
<h3>${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}</h3>
|
||||
<div class="goldBox">
|
||||
<span>遊戲獎勵：</span>
|
||||
<span class="gold">${res.reward}金幣</span>
|
||||
</div>
|
||||
<div class="marine_organism"></div>
|
||||
<p style="display: ${res.drawStatus == 1 ? 'none' : 'block'};" class="fasle">哎呀~猜錯了o(╥﹏╥)o</p>
|
||||
<p style="display: ${res.drawStatus == 1 ? 'block' : 'none'};" class="true">厲害~猜對了୧(๑•̀◡•́๑)૭</p>
|
||||
</li>
|
||||
`
|
||||
results.push(res.results);
|
||||
});
|
||||
$('.record-list').append(str)
|
||||
results.forEach((res, index) => {
|
||||
res.forEach(val => {
|
||||
$('.record-list li').eq(index).children('.marine_organism').append(`<span class='${drawId[index] == val.itemId ? 'active' : ''}'><img src="${val.itemUrl}" alt=""><b>+${val.costPiece}</b></span>`)
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
$(function(){
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(function(){
|
||||
setTimeout(function () {
|
||||
getUserRecord()
|
||||
}, 50)
|
||||
// 监听滚动
|
||||
$('ul').scroll(function(){
|
||||
$('ul').scroll(function () {
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||||
if(isLock){
|
||||
if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
||||
if (isLock) {
|
||||
// 请求下一页
|
||||
if(canNext){
|
||||
if (canNext) {
|
||||
getUserRecord(page++)
|
||||
isLock = false
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="headwear-info">
|
||||
<p class="headwear-name"></p>
|
||||
<p class="headwear-price"><span></span>钻石/天</p>
|
||||
<p class="headwear-award">赠送<span></span>个碎片</p>
|
||||
<p class="headwear-award">赠送<span></span>张门票</p>
|
||||
</div>
|
||||
<div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
|
||||
</li>
|
||||
@@ -27,7 +27,7 @@
|
||||
<div class="headwear-info">
|
||||
<p class="headwear-name"></p>
|
||||
<p class="headwear-price"><span></span>钻石/天</p>
|
||||
<p class="headwear-award">赠送<span></span>个碎片</p>
|
||||
<p class="headwear-award">赠送<span></span>张门票</p>
|
||||
</div>
|
||||
<div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
|
||||
</li>
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="headwear-info">
|
||||
<p class="headwear-name"></p>
|
||||
<p class="headwear-price"><span></span>钻石/天</p>
|
||||
<p class="headwear-award">赠送<span></span>个碎片</p>
|
||||
<p class="headwear-award">赠送<span></span>张门票</p>
|
||||
</div>
|
||||
<div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
|
||||
</li>
|
||||
@@ -45,20 +45,22 @@
|
||||
<div class="headwear-info">
|
||||
<p class="headwear-name"></p>
|
||||
<p class="headwear-price"><span></span>钻石/天</p>
|
||||
<p class="headwear-award">赠送<span></span>个碎片</p>
|
||||
<p class="headwear-award">赠送<span></span>张门票</p>
|
||||
</div>
|
||||
<div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="bottom">
|
||||
<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="diamond-num">我的钻石数量：<span>0</span></p>
|
||||
<div class="fragment-num">我的碎片：<span>0</span></div>
|
||||
<div class="diamond-num">我的钻石：<span>0</span></div>
|
||||
</div>
|
||||
<!-- <div class="add"><img src="./images/add.png" alt=""></div> -->
|
||||
<div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>
|
||||
</div>
|
||||
|
||||
<!-- 购买弹窗 -->
|
||||
<div class="shade-mask-buy">
|
||||
<div class="shade-content-buy">
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="rank-top">
|
||||
|
||||
<div class="tab-wrap">
|
||||
<span class="diamond-rank active">钻石榜</span>
|
||||
<span class="diamond-rank active">金幣榜</span>
|
||||
<span class="num-rank">欧皇榜</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,25 +1,44 @@
|
||||
<!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>
|
||||
<title>遊戲記錄</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/record.css">
|
||||
<link rel="stylesheet" href="./css/record.css?v=1.0">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="record-list">
|
||||
</ul>
|
||||
<ul class="none" style="display: none;"></ul>
|
||||
<ul class="record-list">
|
||||
<!-- <li>
|
||||
<h3>2020-12-21 12:22</h3>
|
||||
<div class="goldBox">
|
||||
<span>游戏奖励：</span>
|
||||
<span class="gold">0金币</span>
|
||||
</div>
|
||||
<div class="marine_organism">
|
||||
<span>
|
||||
<img src="./images/add.png" alt="">
|
||||
<b>+10</b>
|
||||
</span>
|
||||
</div>
|
||||
<p class="fasle">哎呀~猜錯了o(╥﹏╥)o</p>
|
||||
<p class="true">厲害~猜對了୧(๑•̀◡•́๑)૭</p>
|
||||
</li> -->
|
||||
</ul>
|
||||
<div class="img">
|
||||
<p>暫無遊戲記錄</p>
|
||||
</div>
|
||||
<ul class="none" style="display: none;"></ul>
|
||||
<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/record.js"></script>
|
||||
<script src="./js/record.js?v=1.2"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
437
view/peko/activity/act-ocean1/css/index.css
Normal file
437
view/peko/activity/act-ocean1/css/index.css
Normal file
@@ -0,0 +1,437 @@
|
||||
@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: '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';
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url("../images/index-bg.png") no-repeat center/cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap .rule, .wrap .record, .wrap .rank {
|
||||
position: fixed;
|
||||
bottom: 12.8rem;
|
||||
left: 0;
|
||||
width: 1.6rem;
|
||||
height: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .rule img, .wrap .record img, .wrap .rank img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrap .record {
|
||||
bottom: 12.05333rem;
|
||||
}
|
||||
|
||||
.wrap .rank {
|
||||
bottom: 11.36rem;
|
||||
}
|
||||
|
||||
.wrap .previous-result {
|
||||
position: absolute;
|
||||
bottom: 10.72rem;
|
||||
left: 0.24rem;
|
||||
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;
|
||||
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 .mall {
|
||||
position: absolute;
|
||||
bottom: 10.50667rem;
|
||||
right: 0.48rem;
|
||||
width: 2.13333rem;
|
||||
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;
|
||||
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';
|
||||
position: absolute;
|
||||
top: -0.26667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3.68rem;
|
||||
height: 1.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
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;
|
||||
padding: 0.8rem;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time ul li {
|
||||
position: relative;
|
||||
width: 1.73333rem;
|
||||
height: 2rem;
|
||||
margin-top: 0.98667rem;
|
||||
margin-right: 0.34667rem;
|
||||
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;
|
||||
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;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.32rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time ul li .bubble-2s {
|
||||
display: none;
|
||||
width: 1.22667rem;
|
||||
height: 0.74667rem;
|
||||
position: absolute;
|
||||
top: -0.8rem;
|
||||
left: -0.37333rem;
|
||||
background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
|
||||
transform: rotate(-15deg);
|
||||
text-indent: 0.21333rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time ul li .bubble-2s p {
|
||||
font-size: 0.21333rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding-top: 0.24rem;
|
||||
text-align: center;
|
||||
margin-left: -0.26667rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time ul li .select-num {
|
||||
position: absolute;
|
||||
top: 0.26667rem;
|
||||
right: 0.21333rem;
|
||||
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;
|
||||
height: 1.12rem;
|
||||
margin: 0.21333rem auto 0;
|
||||
margin-top: 1.06667rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time .btn-wrap div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.45333rem;
|
||||
height: 1.12rem;
|
||||
background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
|
||||
text-align: center;
|
||||
line-height: 0.8rem;
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time .btn-wrap div img {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .select-time .btn-wrap div span {
|
||||
display: block;
|
||||
margin-bottom: 0.21333rem;
|
||||
font-weight: 600;
|
||||
margin-right: 0.13333rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .wait-time {
|
||||
display: none;
|
||||
width: 9.06667rem;
|
||||
height: 6.66667rem;
|
||||
margin: auto;
|
||||
margin-top: 1.06667rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap .game-area .wait-time .count-down {
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: -1.33333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3.68rem;
|
||||
height: 1.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
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;
|
||||
margin: auto;
|
||||
margin-top: 1.06667rem;
|
||||
}
|
||||
|
||||
.wrap .game-area .draw-time .count-down {
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: -0.26667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3.68rem;
|
||||
height: 1.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
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;
|
||||
bottom: 2.4rem;
|
||||
margin-left: 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap .game-area .draw-time .top-three.no-one {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0.53333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wrap .game-area .draw-time .top-three span {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
.wrap .info-bottom .award {
|
||||
background-image: url("../images/award-today.png");
|
||||
}
|
||||
|
||||
.wrap .info-bottom .avatar {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.wrap .info-bottom .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.wrap .shade-mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.wrap .shade-mask .shade-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
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;
|
||||
}
|
||||
|
||||
.wrap .shade-mask .shade-content p {
|
||||
font-size: 0.42667rem;
|
||||
color: #ED7B50;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
424
view/peko/activity/act-ocean1/css/index.scss
Normal file
424
view/peko/activity/act-ocean1/css/index.scss
Normal file
@@ -0,0 +1,424 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@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: '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';
|
||||
// 海浪svga过长
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wrap{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('../images/index-bg.png') no-repeat center/cover;
|
||||
position: relative;
|
||||
.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);
|
||||
left: px2rem(18);
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: px2rem(30);
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mall{
|
||||
position: absolute;
|
||||
// top: px2rem(400);
|
||||
bottom: px2rem(788);
|
||||
right: px2rem(36);
|
||||
width: px2rem(160);
|
||||
height: px2rem(150);
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.game-area{
|
||||
position: absolute;
|
||||
// top: px2rem(560);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9;
|
||||
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;
|
||||
top: px2rem(-20);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(276);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(76);
|
||||
text-align: center;
|
||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
||||
font-size: px2rem(36);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
span{
|
||||
font-weight: bold;
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
// 海鲜列表
|
||||
ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
padding: px2rem(60);
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
li{
|
||||
position: relative;
|
||||
width: px2rem(130);
|
||||
height: px2rem(150);
|
||||
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);
|
||||
left: px2rem(10);
|
||||
font-size: px2rem(24);
|
||||
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;
|
||||
}
|
||||
.name{
|
||||
position: absolute;
|
||||
bottom: px2rem(10);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(120);
|
||||
text-align: center;
|
||||
font-size: px2rem(24);
|
||||
color: white;
|
||||
}
|
||||
.bubble-2s{
|
||||
display: none;
|
||||
width: px2rem(92);
|
||||
height: px2rem(56);
|
||||
position: absolute;
|
||||
top: px2rem(-60);
|
||||
left: px2rem(-28);
|
||||
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;
|
||||
font-weight: bold;
|
||||
padding-top: px2rem(18);
|
||||
text-align: center;
|
||||
margin-left: px2rem(-20);
|
||||
}
|
||||
}
|
||||
.select-num{
|
||||
// display: none;
|
||||
position: absolute;
|
||||
top: px2rem(20);
|
||||
right: px2rem(16);
|
||||
// width: px2rem(40);
|
||||
// height: px2rem(20);
|
||||
// background-color: yellowgreen;
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
// text-shadow: 1px 1px #FF5C7F, -1px -1px #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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 碎片按钮
|
||||
.btn-wrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: px2rem(620);
|
||||
height: px2rem(84);
|
||||
margin: px2rem(16) auto 0;
|
||||
margin-top: px2rem(80);
|
||||
div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: px2rem(184);
|
||||
height: px2rem(84);
|
||||
background: url('../images/fragment-btn.png') no-repeat 0 0/100% 100%;
|
||||
text-align: center;
|
||||
line-height: px2rem(60);
|
||||
font-size: px2rem(36);
|
||||
color: #1C5484;
|
||||
&.active{
|
||||
background-image: url('../images/fragment-btn-active.png');
|
||||
color: #B33E17;
|
||||
img, span{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: px2rem(36);
|
||||
height: px2rem(36);
|
||||
margin-bottom: px2rem(16);
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
margin-bottom: px2rem(16);
|
||||
font-weight: 600;
|
||||
margin-right: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 等待结果5s
|
||||
.wait-time{
|
||||
display: none;
|
||||
width: px2rem(680);
|
||||
height: px2rem(500);
|
||||
margin: auto;
|
||||
margin-top: px2rem(80);
|
||||
position: relative;
|
||||
.count-down{
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: px2rem(-100);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(276);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(76);
|
||||
text-align: center;
|
||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
||||
font-size: px2rem(36);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
span{
|
||||
font-weight: bold;
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// 开奖时间
|
||||
.draw-time{
|
||||
display: none;
|
||||
width: px2rem(680);
|
||||
height: px2rem(500);
|
||||
margin: auto;
|
||||
margin-top: px2rem(80);
|
||||
.count-down{
|
||||
font-family: 'pingfang-bold';
|
||||
position: absolute;
|
||||
top: px2rem(-20);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: px2rem(276);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(76);
|
||||
text-align: center;
|
||||
background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
|
||||
font-size: px2rem(36);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
span{
|
||||
font-weight: bold;
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
.top-three{
|
||||
position: absolute;
|
||||
left: px2rem(30);
|
||||
bottom: px2rem(180);
|
||||
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%;
|
||||
border: px2rem(2) solid #FEEF60;
|
||||
margin-right: px2rem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.draw-pic{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(144);
|
||||
z-index: 1;
|
||||
width: px2rem(280);
|
||||
height: px2rem(280);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 底部信息
|
||||
.info-bottom{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: px2rem(121);
|
||||
background: url('../images/index-bottom.png') no-repeat 0 0/100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
.fragment, .award{
|
||||
width: px2rem(230);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(66);
|
||||
background: url('../images/fragment-mine.png') no-repeat 0 0/100% 100%;
|
||||
font-size: px2rem(30);
|
||||
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%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 规则弹窗
|
||||
.shade-mask{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
.shade-content{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(576);
|
||||
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);
|
||||
color: #ED7B50;
|
||||
font-weight: bold;
|
||||
margin-bottom: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-in-app{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
315
view/peko/activity/act-ocean1/css/mall.css
Normal file
315
view/peko/activity/act-ocean1/css/mall.css
Normal file
@@ -0,0 +1,315 @@
|
||||
@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");
|
||||
}
|
||||
|
||||
@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");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'pingfang-medium';
|
||||
background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 10rem;
|
||||
height: 6.66667rem;
|
||||
background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.buy-area {
|
||||
width: 9.46667rem;
|
||||
height: 14.4rem;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 1.06667rem 0.56rem 0 0.8rem;
|
||||
background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
|
||||
margin-top: -0.88rem;
|
||||
}
|
||||
|
||||
.buy-area.bg-long {
|
||||
background-image: url("../images/mall/buy-area-long.png");
|
||||
}
|
||||
|
||||
.buy-area li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.buy-area li.li-bg-long {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background-color: #92CCFB;
|
||||
border-radius: 0.4rem;
|
||||
margin-right: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info {
|
||||
flex: 1;
|
||||
height: 1.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-name {
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-price {
|
||||
margin-bottom: -0.16rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-award {
|
||||
color: #FEEF60;
|
||||
}
|
||||
|
||||
.buy-area li .buy-btn {
|
||||
width: 1.78667rem;
|
||||
height: 0.82667rem;
|
||||
}
|
||||
|
||||
.buy-area li .buy-btn img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 1.62667rem;
|
||||
background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom.mb-long {
|
||||
margin-bottom: 0.90667rem;
|
||||
}
|
||||
|
||||
.bottom .avatar {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
margin: 0 0.26667rem 0 0.53333rem;
|
||||
}
|
||||
|
||||
.bottom .avatar img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bottom .info-wrap {
|
||||
flex: 1;
|
||||
height: 1.17333rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 0.26667rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bottom .info-wrap .nick {
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bottom .recharge {
|
||||
width: 2rem;
|
||||
height: 0.85333rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.bottom .recharge img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill-color {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 0.93333rem;
|
||||
background-color: #60acfb;
|
||||
}
|
||||
|
||||
.shade-mask-buy {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 0.32rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin: 0.48rem 0 0.58667rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .title span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num, .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
||||
font-size: 0.4rem;
|
||||
color: #333333;
|
||||
margin-bottom: 0.85333rem;
|
||||
margin-left: 0.64rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num p, .shade-mask-buy .shade-content-buy .buy-day p, .shade-mask-buy .shade-content-buy .buy-price p {
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease, .shade-mask-buy .shade-content-buy .buy-num .increase {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease img, .shade-mask-buy .shade-content-buy .buy-num .increase img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-num input {
|
||||
width: 2.13333rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
background-color: #EAE5FC;
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
margin-right: 0.26667rem;
|
||||
outline: none;
|
||||
caret-color: #7154EE;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 6.82667rem;
|
||||
height: 1.01333rem;
|
||||
margin: 1.2rem auto 0;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel, .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
width: 3.2rem;
|
||||
height: 1.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
background-color: #EAE5FC;
|
||||
font-size: 0.37333rem;
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
border-radius: 0.50667rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.shade-mask-no-money {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 0.32rem;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money .no-money-title {
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: 0.48rem 0 1.44rem;
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money .no-money-pic {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-bottom: 0.66667rem;
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money .no-money-tip {
|
||||
font-size: 0.4rem;
|
||||
font-weight: 550;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money .no-money-recharge {
|
||||
width: 3.2rem;
|
||||
height: 1.01333rem;
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
border-radius: 0.50667rem;
|
||||
line-height: 1.01333rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
286
view/peko/activity/act-ocean1/css/mall.scss
Normal file
286
view/peko/activity/act-ocean1/css/mall.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: 'pingfang-medium';
|
||||
background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.banner{
|
||||
width: px2rem(750);
|
||||
height: px2rem(500);
|
||||
background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
.buy-area{
|
||||
width: px2rem(710);
|
||||
// height: px2rem(900);
|
||||
height: px2rem(1080);
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(80) px2rem(42) 0 px2rem(60);
|
||||
background: url('../images/mall/buy-area.png') no-repeat 0 0/100% 100%;
|
||||
margin-top: px2rem(-66);
|
||||
&.bg-long{
|
||||
background-image: url('../images/mall/buy-area-long.png');
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40);
|
||||
&.li-bg-long{
|
||||
margin-bottom: px2rem(90);
|
||||
}
|
||||
.headwear-pic{
|
||||
width: px2rem(180);
|
||||
height: px2rem(180);
|
||||
background-color: #92CCFB;
|
||||
border-radius: px2rem(30);
|
||||
margin-right: px2rem(30);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(150);
|
||||
height: px2rem(150);
|
||||
}
|
||||
}
|
||||
.headwear-info{
|
||||
flex: 1;
|
||||
height: px2rem(120);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: px2rem(26);
|
||||
.headwear-name{
|
||||
font-size: px2rem(36);
|
||||
font-weight: bold;
|
||||
}
|
||||
.headwear-price{
|
||||
margin-bottom: px2rem(-12);
|
||||
}
|
||||
.headwear-award{
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
.buy-btn{
|
||||
width: px2rem(134);
|
||||
height: px2rem(62);
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: px2rem(122);
|
||||
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: 0 px2rem(20) 0 px2rem(40);
|
||||
img{
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.info-wrap{
|
||||
flex: 1;
|
||||
height: px2rem(88);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: px2rem(20);
|
||||
color: white;
|
||||
.nick{
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.recharge{
|
||||
width: px2rem(150);
|
||||
height: px2rem(64);
|
||||
margin-right: px2rem(60);
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill-color{
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: px2rem(70);
|
||||
background-color:#60acfb;
|
||||
}
|
||||
// 购买弹窗
|
||||
.shade-mask-buy{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
.shade-content-buy{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(600);
|
||||
height: px2rem(600);
|
||||
border-radius: px2rem(24);
|
||||
background-color: white;
|
||||
.title{
|
||||
font-family: 'pingfang-bold';
|
||||
font-size: px2rem(36);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin: px2rem(36) 0 px2rem(44);
|
||||
span{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.buy-num, .buy-day, .buy-price{
|
||||
font-size: px2rem(30);
|
||||
color: #333333;
|
||||
margin-bottom: px2rem(64);
|
||||
margin-left: px2rem(48);
|
||||
p{
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
.buy-num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: px2rem(60);
|
||||
.decrease, .increase{
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
margin-right: px2rem(20);
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
input{
|
||||
width: px2rem(160);
|
||||
height: px2rem(60);
|
||||
border-radius: px2rem(30);
|
||||
background-color: #EAE5FC;
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
margin-right: px2rem(20);
|
||||
outline: none;
|
||||
caret-color: #7154EE;
|
||||
}
|
||||
}
|
||||
.buy-day, .buy-price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.buy-confirm-btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: px2rem(512);
|
||||
height: px2rem(76);
|
||||
margin: px2rem(90) auto 0;
|
||||
.cancel, .confirm{
|
||||
width: px2rem(240);
|
||||
height: px2rem(76);
|
||||
line-height: px2rem(76);
|
||||
background-color: #EAE5FC;
|
||||
font-size: px2rem(28);
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
border-radius: px2rem(38);
|
||||
}
|
||||
.confirm{
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 余额不足弹窗
|
||||
.shade-mask-no-money{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
.shade-content-no-money{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(600);
|
||||
height: px2rem(600);
|
||||
border-radius: px2rem(24);
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.no-money-title{
|
||||
font-size: px2rem(36);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: px2rem(36) 0 px2rem(108);
|
||||
}
|
||||
.no-money-pic{
|
||||
width: px2rem(120);
|
||||
height: px2rem(120);
|
||||
margin-bottom: px2rem(50);
|
||||
}
|
||||
.no-money-tip{
|
||||
font-size: px2rem(30);
|
||||
font-weight: 550;
|
||||
color: #333333;
|
||||
}
|
||||
.no-money-recharge{
|
||||
width: px2rem(240);
|
||||
height: px2rem(76);
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
border-radius: px2rem(38);
|
||||
line-height: px2rem(76);
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: px2rem(90);
|
||||
}
|
||||
}
|
||||
}
|
||||
274
view/peko/activity/act-ocean1/css/rank.css
Normal file
274
view/peko/activity/act-ocean1/css/rank.css
Normal file
@@ -0,0 +1,274 @@
|
||||
@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: '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");
|
||||
}
|
||||
|
||||
@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");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-regular';
|
||||
src: url("../../../common/fonts/PingFang-Regular.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'pingfang-bold';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-top {
|
||||
height: 6.66667rem;
|
||||
background-image: linear-gradient(#3491F5, #60C7FC);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap {
|
||||
font-family: 'pingfang-regular';
|
||||
width: 5.33333rem;
|
||||
height: 0.93333rem;
|
||||
background-color: #7ABDF9;
|
||||
border-radius: 0.48rem;
|
||||
margin: 0.48rem auto 0.29333rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap span {
|
||||
display: inline-block;
|
||||
width: 2.53333rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
margin-top: 0.06667rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap span:first-child {
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
|
||||
.rank-top .tab-wrap .active {
|
||||
background-color: white;
|
||||
color: #3C9BF7;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 2.66667rem;
|
||||
height: 3.2rem;
|
||||
background-image: linear-gradient(#3F9EF7, #52B6FA);
|
||||
margin-top: 1.68rem;
|
||||
border-radius: 0.26667rem 0.26667rem 0 0;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:first-child {
|
||||
width: 3.2rem;
|
||||
height: 3.73333rem;
|
||||
margin-top: 1.14667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) {
|
||||
left: 0.48rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar {
|
||||
width: 1.86667rem;
|
||||
height: 2.53333rem;
|
||||
margin-top: -1.14667rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar p {
|
||||
background-image: url("../images/second.png");
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar img {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
top: -1.97333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) {
|
||||
right: 0.48rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar {
|
||||
width: 1.86667rem;
|
||||
height: 2.53333rem;
|
||||
margin-top: -1.14667rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar p {
|
||||
background-image: url("../images/third.png");
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar img {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
top: -1.97333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar {
|
||||
width: 2.13333rem;
|
||||
height: 2.85333rem;
|
||||
margin-top: -0.93333rem;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar p {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
background: url("../images/first.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .avatar img {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
top: -2.24rem;
|
||||
width: 2.13333rem;
|
||||
height: 2.13333rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .nick, .rank-top .topthree-wrap .info-wrap .diamond-num {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin: 0.21333rem 0;
|
||||
}
|
||||
|
||||
.rank-top .topthree-wrap .info-wrap .diamond-num {
|
||||
font-family: 'din-medium';
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.other-rank {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 0.4rem 0.4rem 0 0;
|
||||
margin-top: -0.34667rem;
|
||||
background-color: white;
|
||||
padding: 0.53333rem 0.77333rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.other-rank li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.other-rank li:last-child {
|
||||
margin-bottom: 1.86667rem;
|
||||
}
|
||||
|
||||
.other-rank li .index {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.other-rank li .others-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.other-rank li .others-info img {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.other-rank li .others-info .others-nick {
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.other-rank li .others-diamond-num {
|
||||
font-size: 0.34667rem;
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
|
||||
.mine {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 1.6rem;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 0 0.77333rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mine .mine-rank {
|
||||
font-size: 0.34667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mine .mine-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mine .mine-info img {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.mine .mine-info .mine-nick {
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mine .mine-diamond-num {
|
||||
font-size: 0.34667rem;
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
257
view/peko/activity/act-ocean1/css/rank.scss
Normal file
257
view/peko/activity/act-ocean1/css/rank.scss
Normal file
@@ -0,0 +1,257 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@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: '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');
|
||||
}
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-regular';
|
||||
src: url('../../../common/fonts/PingFang-Regular.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Regular.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
|
||||
}
|
||||
|
||||
|
||||
html,body{
|
||||
font-family: 'pingfang-bold';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rank-top{
|
||||
height: px2rem(500);
|
||||
background-image: linear-gradient(#3491F5, #60C7FC);
|
||||
overflow: hidden;
|
||||
.tab-wrap{
|
||||
font-family: 'pingfang-regular';
|
||||
width: px2rem(400);
|
||||
height: px2rem(70);
|
||||
background-color: #7ABDF9;
|
||||
border-radius: px2rem(36);
|
||||
margin: px2rem(36) auto px2rem(22);
|
||||
span{
|
||||
display: inline-block;
|
||||
width: px2rem(190);
|
||||
height: px2rem(60);
|
||||
line-height: px2rem(60);
|
||||
text-align: center;
|
||||
font-size: px2rem(30);
|
||||
color: white;
|
||||
margin-top: px2rem(5);
|
||||
&:first-child{
|
||||
margin-left: px2rem(6);
|
||||
}
|
||||
}
|
||||
.active{
|
||||
background-color: white;
|
||||
color: #3C9BF7;
|
||||
border-radius: px2rem(30);
|
||||
}
|
||||
}
|
||||
.topthree-wrap{
|
||||
position: relative;
|
||||
.info-wrap{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: px2rem(200);
|
||||
height: px2rem(240);
|
||||
background-image: linear-gradient(#3F9EF7, #52B6FA);
|
||||
margin-top: px2rem(126);
|
||||
border-radius: px2rem(20) px2rem(20) 0 0;
|
||||
&:first-child{
|
||||
width: px2rem(240);
|
||||
height: px2rem(280);
|
||||
margin-top: px2rem(86);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
}
|
||||
&:nth-child(2){
|
||||
left: px2rem(36);
|
||||
.avatar{
|
||||
width: px2rem(140);
|
||||
height: px2rem(190);
|
||||
margin-top: px2rem(-86);
|
||||
p{
|
||||
background-image: url('../images/second.png');
|
||||
}
|
||||
img{
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
top: px2rem(-148);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
right: px2rem(36);
|
||||
.avatar{
|
||||
width: px2rem(140);
|
||||
height: px2rem(190);
|
||||
margin-top: px2rem(-86);
|
||||
p{
|
||||
background-image: url('../images/third.png');
|
||||
}
|
||||
img{
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
top: px2rem(-148);
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar{
|
||||
width: px2rem(160);
|
||||
height: px2rem(214);
|
||||
margin-top: px2rem(-70);
|
||||
p{
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
background: url('../images/first.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
img{
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
top: px2rem(-168);
|
||||
width: px2rem(160);
|
||||
height: px2rem(160);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.nick, .diamond-num{
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin: px2rem(16) 0;
|
||||
}
|
||||
.diamond-num{
|
||||
font-family: 'din-medium';
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-rank{
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
// height: px2rem(760);
|
||||
border-radius: px2rem(30) px2rem(30) 0 0;
|
||||
margin-top: px2rem(-26);
|
||||
background-color: white;
|
||||
padding: px2rem(40) px2rem(58) 0;
|
||||
box-sizing: border-box;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40);
|
||||
&:last-child{
|
||||
margin-bottom: px2rem(140);
|
||||
}
|
||||
.index{
|
||||
display: inline-block;
|
||||
width: px2rem(30);
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.others-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: px2rem(30);
|
||||
img{
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(20);
|
||||
}
|
||||
.others-nick{
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.others-diamond-num{
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mine{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: px2rem(120);
|
||||
background-color: rgba($color: #000000, $alpha: .8);
|
||||
padding: 0 px2rem(58);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.mine-rank{
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.mine-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(30);
|
||||
margin-right: px2rem(20);
|
||||
}
|
||||
.mine-nick{
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.mine-diamond-num{
|
||||
font-size: px2rem(26);
|
||||
font-weight: bold;
|
||||
color: #ED7B50;
|
||||
}
|
||||
}
|
||||
|
||||
.no-in-app{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
149
view/peko/activity/act-ocean1/css/record.css
Normal file
149
view/peko/activity/act-ocean1/css/record.css
Normal file
@@ -0,0 +1,149 @@
|
||||
@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: '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");
|
||||
}
|
||||
|
||||
@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");
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'pingfang-bold';
|
||||
background-color: #50BEF8;
|
||||
}
|
||||
|
||||
ul.record-list {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-top: 0.69333rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item {
|
||||
overflow: hidden;
|
||||
width: 10rem;
|
||||
height: 5.6rem;
|
||||
background: url("../images/record/record-bg.png") no-repeat 0 0/100% 100%;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .time {
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: 0.34667rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 0.58667rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 9.04rem;
|
||||
height: 0.58667rem;
|
||||
background-color: #1A8AE8;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award .text {
|
||||
font-size: 0.37333rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-left: 0.32rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award .diamond-num {
|
||||
font-family: 'din-medium';
|
||||
font-size: 0.34667rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .award img.diamond-pic {
|
||||
width: 0.48rem;
|
||||
height: 0.37333rem;
|
||||
margin: 0 0.34667rem 0 0.10667rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0.66667rem 0 0.8rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item {
|
||||
width: 25%;
|
||||
margin: 0.26667rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active {
|
||||
margin: 0.13333rem 0;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active div {
|
||||
width: 1.06667rem;
|
||||
height: 1.06667rem;
|
||||
background: url("../images/little-bubble-active.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item.active span {
|
||||
color: #FEEF60;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item div {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: url("../images/little-bubble.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item div img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item ul.award-animal li.animal-item span {
|
||||
font-size: 0.26667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-left: 0.13333rem;
|
||||
}
|
||||
|
||||
ul.record-list li.record-item .tip {
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: 0.26667rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
ul.record-list .no-record {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
144
view/peko/activity/act-ocean1/css/record.scss
Normal file
144
view/peko/activity/act-ocean1/css/record.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@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: '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');
|
||||
}
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:' ';
|
||||
clear:both;
|
||||
}
|
||||
.clearfix{
|
||||
*zoom:1;//兼容到ie6
|
||||
}
|
||||
|
||||
html,body{
|
||||
font-family: 'pingfang-bold';
|
||||
background-color: #50BEF8;
|
||||
}
|
||||
|
||||
ul.record-list{
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-top: px2rem(52);
|
||||
box-sizing: border-box;
|
||||
li.record-item{
|
||||
overflow: hidden;
|
||||
width: px2rem(750);
|
||||
height: px2rem(420);
|
||||
background: url('../images/record/record-bg.png') no-repeat 0 0/100% 100%;
|
||||
margin-bottom: px2rem(30);
|
||||
.time{
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: px2rem(26);
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: px2rem(44);
|
||||
margin-bottom: px2rem(16);
|
||||
}
|
||||
.award{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: px2rem(678);
|
||||
height: px2rem(44);
|
||||
background-color: #1A8AE8;
|
||||
margin: auto;
|
||||
.text{
|
||||
font-size: px2rem(28);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-left: px2rem(24);
|
||||
}
|
||||
.diamond-num{
|
||||
font-family: 'din-medium';
|
||||
font-size: px2rem(26);
|
||||
color: white;
|
||||
}
|
||||
img.diamond-pic{
|
||||
width: px2rem(36);
|
||||
height: px2rem(28);
|
||||
margin: 0 px2rem(26) 0 px2rem(8);
|
||||
}
|
||||
}
|
||||
ul.award-animal{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 px2rem(50) 0 px2rem(60);
|
||||
// margin-left: px2rem(60);
|
||||
li.animal-item{
|
||||
// float: left;
|
||||
width: 25%;
|
||||
margin: px2rem(20) 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.active{
|
||||
margin: px2rem(10) 0;
|
||||
div{
|
||||
width: px2rem(80);
|
||||
height: px2rem(80);
|
||||
background: url('../images/little-bubble-active.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
span{
|
||||
color: #FEEF60;
|
||||
}
|
||||
}
|
||||
div{
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
background: url('../images/little-bubble.png') no-repeat 0 0/100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: px2rem(20);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-left: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
font-family: 'pingfang-medium';
|
||||
font-size: px2rem(20);
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: px2rem(20);
|
||||
}
|
||||
}
|
||||
.no-record{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
BIN
view/peko/activity/act-ocean1/images/bubble-bg.png
Normal file
BIN
view/peko/activity/act-ocean1/images/bubble-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
view/peko/activity/act-ocean1/images/count-down.png
Normal file
BIN
view/peko/activity/act-ocean1/images/count-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
view/peko/activity/act-ocean1/images/default.png
Normal file
BIN
view/peko/activity/act-ocean1/images/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
view/peko/activity/act-ocean1/images/draw.svga
Normal file
BIN
view/peko/activity/act-ocean1/images/draw.svga
Normal file
Binary file not shown.
BIN
view/peko/activity/act-ocean1/images/first.png
Normal file
BIN
view/peko/activity/act-ocean1/images/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
BIN
view/peko/activity/act-ocean1/images/fragment-btn-active.png
Normal file
BIN
view/peko/activity/act-ocean1/images/fragment-btn-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
BIN
view/peko/activity/act-ocean1/images/fragment-btn.png
Normal file
BIN
view/peko/activity/act-ocean1/images/fragment-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
BIN
view/peko/activity/act-ocean1/images/game-area.png
Normal file
BIN
view/peko/activity/act-ocean1/images/game-area.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
BIN
view/peko/activity/act-ocean1/images/index-bottom.png
Normal file
BIN
view/peko/activity/act-ocean1/images/index-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/peko/activity/act-ocean1/images/last-little-bubble.png
Normal file
BIN
view/peko/activity/act-ocean1/images/last-little-bubble.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
|
Before Width: | Height: | Size: 1011 B After Width: | Height: | Size: 1011 B |
BIN
view/peko/activity/act-ocean1/images/little-bubble.png
Normal file
BIN
view/peko/activity/act-ocean1/images/little-bubble.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 582 B |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
BIN
view/peko/activity/act-ocean1/images/mall.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/banner.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/bottom.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/buy-area-long.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/buy-area-long.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/buy-area.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/buy-area.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/buy.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/buy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
view/peko/activity/act-ocean1/images/mall/decrease.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/decrease.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 B |
BIN
view/peko/activity/act-ocean1/images/mall/increase.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/increase.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
BIN
view/peko/activity/act-ocean1/images/mall/no-money.png
Normal file
BIN
view/peko/activity/act-ocean1/images/mall/no-money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user