新增2022新年活动
This commit is contained in:
qf
800
view/peko/activity/act-newYear-2022/css/index.css
Normal file
800
view/peko/activity/act-newYear-2022/css/index.css
Normal file
@@ -0,0 +1,800 @@
|
||||
@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 {
|
||||
background: linear-gradient(180deg, #FB88A9 0%, #FFBECE 61%);
|
||||
}
|
||||
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.wrap .banner {
|
||||
width: 100%;
|
||||
}
|
||||
.wrap .rule {
|
||||
width: 1.44rem;
|
||||
height: 0.6933333333rem;
|
||||
position: absolute;
|
||||
top: 3.6933333333rem;
|
||||
right: 0;
|
||||
}
|
||||
.wrap .record {
|
||||
width: 1.44rem;
|
||||
height: 0.6933333333rem;
|
||||
position: absolute;
|
||||
top: 4.56rem;
|
||||
right: 0;
|
||||
}
|
||||
.wrap .gift-box-wrap {
|
||||
width: 9.2rem;
|
||||
height: 17.0133333333rem;
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -0.3rem auto 0.5333333333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrap .gift-box-wrap .tips {
|
||||
font-size: 0.2933333333rem;
|
||||
color: #3D001F;
|
||||
margin-top: 1.5733333333rem;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .gift-box-wrap .wishTab {
|
||||
width: 8rem;
|
||||
height: 1.1733333333rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.5866666667rem;
|
||||
margin: 0.4533333333rem auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.wrap .gift-box-wrap .wishTab .item {
|
||||
flex: 1;
|
||||
height: 1.1733333333rem;
|
||||
line-height: 1.1733333333rem;
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
color: #BB4A56;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wrap .gift-box-wrap .wishTab .item1_act {
|
||||
width: 4rem;
|
||||
height: 1.1733333333rem;
|
||||
background: url(../images/tab_wish1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .gift-box-wrap .wishTab .item2_act {
|
||||
width: 4rem;
|
||||
height: 1.1733333333rem;
|
||||
background: url(../images/tab_wish2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .gift-box-wrap .gift-box {
|
||||
width: 8.2666666667rem;
|
||||
height: 5.3333333333rem;
|
||||
margin: 0.3333333333rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.wrap .gift-box-wrap .gift-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.wrap .gift-box-wrap .gift-box .svga1 {
|
||||
display: none;
|
||||
width: 8.2666666667rem;
|
||||
height: 5.3333333333rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.wrap .gift-box-wrap .gift-box .svga2 {
|
||||
display: none;
|
||||
width: 8.2666666667rem;
|
||||
height: 5.3333333333rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.wrap .gift-box-wrap .but {
|
||||
width: 2.4533333333rem;
|
||||
height: 0.5866666667rem;
|
||||
border-radius: 0.2933333333rem;
|
||||
background: #FFE1F2;
|
||||
margin: 0.24rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.wrap .gift-box-wrap .but input {
|
||||
border: 0;
|
||||
width: 1rem;
|
||||
height: 0.5866666667rem;
|
||||
background: #FFE1F2;
|
||||
color: #FF5662;
|
||||
font-size: 0.32rem;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .gift-box-wrap .but img {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
}
|
||||
.wrap .gift-box-wrap .but .add {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.wrap .gift-box-wrap .but .cut {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.wrap .gift-box-wrap .wish {
|
||||
width: 4.9333333333rem;
|
||||
height: 1.2533333333rem;
|
||||
margin: 0.2666666667rem auto 0;
|
||||
}
|
||||
.wrap .gift-box-wrap .award {
|
||||
width: 8.32rem;
|
||||
height: 4rem;
|
||||
margin: 0.48rem auto 0;
|
||||
}
|
||||
.wrap .rank-wrap {
|
||||
width: 9.2rem;
|
||||
height: 22.7066666667rem;
|
||||
background: url(../images/rankBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 1.5333333333rem;
|
||||
position: relative;
|
||||
}
|
||||
.wrap .rank-wrap .rankTab {
|
||||
width: 7.3866666667rem;
|
||||
height: 1.1733333333rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.5866666667rem;
|
||||
position: absolute;
|
||||
top: 0.5866666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.wrap .rank-wrap .rankTab .tab {
|
||||
flex: 1;
|
||||
height: 1.1733333333rem;
|
||||
line-height: 1.1733333333rem;
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
color: #BB4A56;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wrap .rank-wrap .rankTab .tab1_act {
|
||||
width: 4rem;
|
||||
height: 1.1733333333rem;
|
||||
background: url(../images/wish1Rank.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .rank-wrap .rankTab .tab2_act {
|
||||
width: 4rem;
|
||||
height: 1.1733333333rem;
|
||||
background: url(../images/wish2Rank.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.wrap .rank-wrap .reward {
|
||||
width: 0.84rem;
|
||||
height: 1.2266666667rem;
|
||||
position: absolute;
|
||||
top: 2.1066666667rem;
|
||||
right: 0.24rem;
|
||||
}
|
||||
.wrap .rank-wrap .dateTab {
|
||||
width: 3.9333333333rem;
|
||||
height: 0.8rem;
|
||||
position: absolute;
|
||||
top: 2.3066666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
}
|
||||
.wrap .rank-wrap .dateTab .day,
|
||||
.wrap .rank-wrap .dateTab .total {
|
||||
width: 1.9333333333rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no1 {
|
||||
width: 2.5333333333rem;
|
||||
height: 4.5333333333rem;
|
||||
position: relative;
|
||||
top: 3.76rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list .no1 .tx {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.2rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no1 .txBox {
|
||||
width: 2.5333333333rem;
|
||||
height: 2.7866666667rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.wrap .rank-wrap .list .no1 .nick {
|
||||
width: 100%;
|
||||
height: 1.12rem;
|
||||
background: url(../images/nick1.png) no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
bottom: 0.4266666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.32rem;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 1.12rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no1 .score {
|
||||
width: 100%;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list .no2,
|
||||
.wrap .rank-wrap .list .no3 {
|
||||
width: 2.5333333333rem;
|
||||
height: 4.0533333333rem;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
left: 0.55rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no2 .tx,
|
||||
.wrap .rank-wrap .list .no3 .tx {
|
||||
width: 1.76rem;
|
||||
height: 1.76rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list .no2 .txBox,
|
||||
.wrap .rank-wrap .list .no3 .txBox {
|
||||
width: 2.0933333333rem;
|
||||
height: 2.28rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list .no2 .nick,
|
||||
.wrap .rank-wrap .list .no3 .nick {
|
||||
width: 100%;
|
||||
height: 1.12rem;
|
||||
background: url(../images/nick2.png) no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
bottom: 0.4266666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.32rem;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 1.12rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no2 .score,
|
||||
.wrap .rank-wrap .list .no3 .score {
|
||||
width: 100%;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list .no3 {
|
||||
left: 6.13rem;
|
||||
top: -4rem;
|
||||
}
|
||||
.wrap .rank-wrap .list .no3 .nick {
|
||||
background: url(../images/nick3.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.wrap .rank-wrap .list ul {
|
||||
width: 8.56rem;
|
||||
position: absolute;
|
||||
top: 9.1rem;
|
||||
bottom: 1.0666666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.wrap .rank-wrap .list ul li {
|
||||
width: 100%;
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
background-color: #FFF7F9;
|
||||
border-radius: 0.16rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: #AD4868;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .rank-wrap .list ul li .num {
|
||||
float: left;
|
||||
margin-left: 0.2666666667rem;
|
||||
width: 0.5333333333rem;
|
||||
font-size: 0.48rem;
|
||||
color: #AD4868;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .rank-wrap .list ul li .tx {
|
||||
float: left;
|
||||
margin-left: 0.3333333333rem;
|
||||
margin-top: 0.24rem;
|
||||
width: 1.0933333333rem;
|
||||
height: 1.0933333333rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ff7abc;
|
||||
}
|
||||
.wrap .rank-wrap .list ul li .nick {
|
||||
float: left;
|
||||
margin-left: 0.24rem;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #AD4868;
|
||||
}
|
||||
.wrap .rank-wrap .list ul li .score {
|
||||
float: right;
|
||||
margin-right: 0.3333333333rem;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #AD4868;
|
||||
}
|
||||
.wrap .rank-wrap .myRank {
|
||||
width: 9.2rem;
|
||||
height: 1.84rem;
|
||||
line-height: 1.84rem;
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.85rem;
|
||||
}
|
||||
.wrap .rank-wrap .myRank .num {
|
||||
float: left;
|
||||
margin-left: 0.2666666667rem;
|
||||
font-size: 0.2933333333rem;
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap .rank-wrap .myRank .tx {
|
||||
float: left;
|
||||
margin-left: 0.3333333333rem;
|
||||
margin-top: 0.24rem;
|
||||
width: 1.0933333333rem;
|
||||
height: 1.0933333333rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ff7abc;
|
||||
}
|
||||
.wrap .rank-wrap .myRank .nick {
|
||||
float: left;
|
||||
margin-left: 0.24rem;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #AD4868;
|
||||
}
|
||||
.wrap .rank-wrap .myRank .score {
|
||||
float: right;
|
||||
margin-right: 0.3333333333rem;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #AD4868;
|
||||
}
|
||||
|
||||
.gx {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.gx .gx_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 10.52rem;
|
||||
background: url(../images/gx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.gx .gx_in .close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.gx .gx_in .box {
|
||||
width: 96%;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.gx .gx_in .box li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.gx .gx_in .box li .bg {
|
||||
width: 2.2133333333rem;
|
||||
height: 2.2133333333rem;
|
||||
background: url(../images/gxBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
.gx .gx_in .box li .bg img {
|
||||
width: 1.6666666667rem;
|
||||
height: 1.6666666667rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.gx .gx_in .box li span, .gx .gx_in .box li p {
|
||||
color: #7E0033;
|
||||
font-size: 0.2933333333rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.gx .gx_in .sure {
|
||||
width: 3.36rem;
|
||||
height: 1.28rem;
|
||||
position: absolute;
|
||||
bottom: 2.2666666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.gx .gx_in .tips {
|
||||
width: 100%;
|
||||
color: #7E0033;
|
||||
font-size: 0.2933333333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.gxs {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.gxs .gxs_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 10.52rem;
|
||||
background: url(../images/gx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.gxs .gxs_in .close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.gxs .gxs_in .box {
|
||||
width: 96%;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.gxs .gxs_in .box li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.gxs .gxs_in .box li .bg {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
background: url(../images/gxBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
.gxs .gxs_in .box li .bg img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.gxs .gxs_in .box li span, .gxs .gxs_in .box li p {
|
||||
color: #7E0033;
|
||||
font-size: 0.2933333333rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.gxs .gxs_in .sure {
|
||||
width: 3.36rem;
|
||||
height: 1.28rem;
|
||||
position: absolute;
|
||||
bottom: 2.2666666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.gxs .gxs_in .tips {
|
||||
width: 100%;
|
||||
color: #7E0033;
|
||||
font-size: 0.2933333333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.recordBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.recordBox .record_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 9.3066666667rem;
|
||||
background: url(../images/record.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.recordBox .record_in .close {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.recordBox .record_in p {
|
||||
width: 60%;
|
||||
height: 1.2rem;
|
||||
position: absolute;
|
||||
top: 1.8133333333rem;
|
||||
left: 46%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.recordBox .record_in p span {
|
||||
color: #3D001F;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
.recordBox .record_in ul {
|
||||
width: 100%;
|
||||
height: 5.2rem;
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: scroll;
|
||||
}
|
||||
.recordBox .record_in ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
.recordBox .record_in ul li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.recordBox .record_in ul li b {
|
||||
color: #7E0033;
|
||||
font-size: 0.3466666667rem;
|
||||
margin-bottom: 0.2666666667rem;
|
||||
}
|
||||
.recordBox .record_in .tips {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #590F35;
|
||||
font-size: 0.2933333333rem;
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.ruleBox .rule_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 9.68rem;
|
||||
background: url(../images/rule.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ruleBox .rule_in .close {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.rewardBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.rewardBox .reward_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 13.5333333333rem;
|
||||
background: url(../images/rewardBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rewardBox .reward_in .close {
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
right: 0;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.rewardBox .reward_in .rewardTab {
|
||||
width: 6.5066666667rem;
|
||||
height: 1.0133333333rem;
|
||||
border-radius: 0.5066666667rem;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.rewardBox .reward_in .rewardTab .tab {
|
||||
flex: 1;
|
||||
height: 1.0133333333rem;
|
||||
line-height: 1.0133333333rem;
|
||||
text-align: center;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #CA5987;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rewardBox .reward_in .rewardTab .tab1_act {
|
||||
width: 3.2533333333rem;
|
||||
height: 1.0133333333rem;
|
||||
background: url(../images/wishBox1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rewardBox .reward_in .rewardTab .tab2_act {
|
||||
width: 3.2533333333rem;
|
||||
height: 1.0133333333rem;
|
||||
background: url(../images/wishBox2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tishiBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
.tishiBox .tishi_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8.0266666667rem;
|
||||
height: 5.6666666667rem;
|
||||
background: url(../images/tipsBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.tishiBox .tishi_in .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7E0033;
|
||||
font-size: 0.3466666667rem;
|
||||
position: absolute;
|
||||
top: 2.3733333333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.tishiBox .tishi_in .recharge {
|
||||
width: 3.3866666667rem;
|
||||
height: 1.28rem;
|
||||
position: absolute;
|
||||
bottom: 1.04rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.tishiBox .tishi_in .close {
|
||||
position: absolute;
|
||||
top: 0.2666666667rem;
|
||||
right: 0.2666666667rem;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
910
view/peko/activity/act-newYear-2022/css/index.scss
Normal file
910
view/peko/activity/act-newYear-2022/css/index.scss
Normal file
@@ -0,0 +1,910 @@
|
||||
@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 {
|
||||
// background: #FFBECE;
|
||||
background: linear-gradient(180deg, #FB88A9 0%, #FFBECE 61%);
|
||||
}
|
||||
|
||||
.no-in-app {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99999;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: linear-gradient(180deg, #FB88A9 0%, #FFBECE 61%);
|
||||
position: relative;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: px2rem(108, );
|
||||
height: px2rem(52, );
|
||||
position: absolute;
|
||||
top: px2rem(277, );
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.record {
|
||||
width: px2rem(108, );
|
||||
height: px2rem(52, );
|
||||
position: absolute;
|
||||
top: px2rem(342, );
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.gift-box-wrap {
|
||||
width: px2rem(690, );
|
||||
height: px2rem(1276, );
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -0.3rem auto px2rem(40, );
|
||||
overflow: hidden;
|
||||
|
||||
.tips {
|
||||
font-size: px2rem(22, );
|
||||
color: #3D001F;
|
||||
margin-top: px2rem(118, );
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wishTab {
|
||||
width: px2rem(600, );
|
||||
height: px2rem(88, );
|
||||
background: #FFFFFF;
|
||||
border-radius: px2rem(44, );
|
||||
margin: px2rem(34, ) auto 0;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
height: px2rem(88, );
|
||||
line-height: px2rem(88, );
|
||||
text-align: center;
|
||||
font-size: px2rem(30, );
|
||||
color: #BB4A56;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item1_act {
|
||||
width: px2rem(300, );
|
||||
height: px2rem(88, );
|
||||
background: url(../images/tab_wish1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.item2_act {
|
||||
width: px2rem(300, );
|
||||
height: px2rem(88, );
|
||||
background: url(../images/tab_wish2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gift-box {
|
||||
width: px2rem(620, );
|
||||
height: px2rem(400, );
|
||||
margin: px2rem(25, ) auto 0;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svga1 {
|
||||
display: none;
|
||||
width: px2rem(620, );
|
||||
height: px2rem(400, );
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
.svga2 {
|
||||
display: none;
|
||||
width: px2rem(620, );
|
||||
height: px2rem(400, );
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(184, );
|
||||
height: px2rem(44, );
|
||||
border-radius: px2rem(22, );
|
||||
background: #FFE1F2;
|
||||
margin: px2rem(18, ) auto 0;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
width: 1rem;
|
||||
height: px2rem(44, );
|
||||
background: #FFE1F2;
|
||||
color: #FF5662;
|
||||
font-size: px2rem(24, );
|
||||
outline: none; //隐藏边框
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(45, );
|
||||
height: px2rem(45, );
|
||||
}
|
||||
|
||||
.add {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cut {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wish {
|
||||
width: px2rem(370, );
|
||||
height: px2rem(94, );
|
||||
margin: px2rem(20, ) auto 0;
|
||||
}
|
||||
|
||||
.award {
|
||||
width: px2rem(624, );
|
||||
height: px2rem(300, );
|
||||
margin: px2rem(36, ) auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-wrap {
|
||||
width: px2rem(690, );
|
||||
height: px2rem(1703, );
|
||||
background: url(../images/rankBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto px2rem(115, );
|
||||
position: relative;
|
||||
|
||||
.rankTab {
|
||||
width: px2rem(554, );
|
||||
height: px2rem(88, );
|
||||
background: #FFFFFF;
|
||||
border-radius: px2rem(44, );
|
||||
position: absolute;
|
||||
top: px2rem(44, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
height: px2rem(88, );
|
||||
line-height: px2rem(88, );
|
||||
text-align: center;
|
||||
font-size: px2rem(30, );
|
||||
color: #BB4A56;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab1_act {
|
||||
width: px2rem(300, );
|
||||
height: px2rem(88, );
|
||||
background: url(../images/wish1Rank.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab2_act {
|
||||
width: px2rem(300, );
|
||||
height: px2rem(88, );
|
||||
background: url(../images/wish2Rank.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.reward {
|
||||
width: px2rem(63, );
|
||||
height: px2rem(92, );
|
||||
position: absolute;
|
||||
top: px2rem(158, );
|
||||
right: px2rem(18, );
|
||||
}
|
||||
|
||||
.dateTab {
|
||||
width: px2rem(295, );
|
||||
height: px2rem(60, );
|
||||
position: absolute;
|
||||
top: px2rem(173, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
|
||||
.day,
|
||||
.total {
|
||||
width: px2rem(145, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.no1 {
|
||||
width: px2rem(190, );
|
||||
height: px2rem(340, );
|
||||
position: relative;
|
||||
top: px2rem(282, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.tx {
|
||||
width: px2rem(165, );
|
||||
height: px2rem(165, );
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.2rem;
|
||||
}
|
||||
|
||||
.txBox {
|
||||
width: px2rem(190, );
|
||||
height: px2rem(209, );
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
height: px2rem(84, );
|
||||
background: url(../images/nick1.png) no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
bottom: px2rem(32, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: px2rem(24, );
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: px2rem(84, );
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
font-size: px2rem(20, );
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.no2,
|
||||
.no3 {
|
||||
width: px2rem(190, );
|
||||
height: px2rem(304, );
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
left: 0.55rem;
|
||||
|
||||
.tx {
|
||||
width: px2rem(132, );
|
||||
height: px2rem(132, );
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.txBox {
|
||||
width: px2rem(157, );
|
||||
height: px2rem(171, );
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
height: px2rem(84, );
|
||||
background: url(../images/nick2.png) no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
bottom: px2rem(32, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: px2rem(24, );
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: px2rem(84, );
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
font-size: px2rem(20, );
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
left: 6.13rem;
|
||||
top: -4rem;
|
||||
|
||||
.nick {
|
||||
background: url(../images/nick3.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(642, );
|
||||
// height: px2rem(930, );
|
||||
// background-color: purple;
|
||||
position: absolute;
|
||||
top: 9.1rem;
|
||||
bottom: px2rem(80, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(120, );
|
||||
line-height: px2rem(120, );
|
||||
background-color: #FFF7F9;
|
||||
border-radius: px2rem(12, );
|
||||
margin-bottom: px2rem(15, );
|
||||
|
||||
color: #AD4868;
|
||||
font-size: px2rem(26, );
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
float: left;
|
||||
margin-left: px2rem(20, );
|
||||
width: px2rem(40, );
|
||||
font-size: px2rem(36, );
|
||||
color: #AD4868;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tx {
|
||||
float: left;
|
||||
margin-left: px2rem(25, );
|
||||
margin-top: px2rem(18, );
|
||||
width: px2rem(82, );
|
||||
height: px2rem(82, );
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ff7abc;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: left;
|
||||
margin-left: px2rem(18, );
|
||||
font-size: px2rem(26, );
|
||||
color: #AD4868;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
margin-right: px2rem(25, );
|
||||
font-size: px2rem(20, );
|
||||
color: #AD4868;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myRank {
|
||||
width: px2rem(690, );
|
||||
height: px2rem(138, );
|
||||
line-height: px2rem(138, );
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.85rem;
|
||||
|
||||
.num {
|
||||
float: left;
|
||||
margin-left: px2rem(20, );
|
||||
font-size: px2rem(22, );
|
||||
color: #AD4868;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tx {
|
||||
float: left;
|
||||
margin-left: px2rem(25, );
|
||||
margin-top: px2rem(18, );
|
||||
width: px2rem(82, );
|
||||
height: px2rem(82, );
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ff7abc;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: left;
|
||||
margin-left: px2rem(18, );
|
||||
font-size: px2rem(26, );
|
||||
color: #AD4868;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
margin-right: px2rem(25, );
|
||||
font-size: px2rem(20, );
|
||||
color: #AD4868;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gx {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.gx_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(789, );
|
||||
background: url(../images/gx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 96%;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.bg {
|
||||
width: px2rem(166, );
|
||||
height: px2rem(166, );
|
||||
// width: 1.6rem;
|
||||
// height: 1.6rem;
|
||||
background: url(../images/gxBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: px2rem(125, );
|
||||
height: px2rem(125, );
|
||||
// width: 1.2rem;
|
||||
// height: 1.2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
span,p {
|
||||
color: #7E0033;
|
||||
font-size: px2rem(22, );
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sure {
|
||||
width: px2rem(252, );
|
||||
height: px2rem(96, );
|
||||
position: absolute;
|
||||
bottom: px2rem(170, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.tips {
|
||||
width: 100%;
|
||||
color: #7E0033;
|
||||
font-size: px2rem(22, );
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(90, );
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.gxs {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.gxs_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(789, );
|
||||
background: url(../images/gx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 96%;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.bg {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
background: url(../images/gxBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
span,p {
|
||||
color: #7E0033;
|
||||
font-size: px2rem(22, );
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sure {
|
||||
width: px2rem(252, );
|
||||
height: px2rem(96, );
|
||||
position: absolute;
|
||||
bottom: px2rem(170, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.tips {
|
||||
width: 100%;
|
||||
color: #7E0033;
|
||||
font-size: px2rem(22, );
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(90, );
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.recordBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.record_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(698, );
|
||||
background: url(../images/record.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
|
||||
p {
|
||||
// width: px2rem(540, );
|
||||
width: 60%;
|
||||
height: px2rem(90, );
|
||||
position: absolute;
|
||||
top: px2rem(136, );
|
||||
left: 46%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #3D001F;
|
||||
font-size: px2rem(28, );
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
// width: px2rem(540, );
|
||||
width: 100%;
|
||||
height: 5.2rem;
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
b {
|
||||
color: #7E0033;
|
||||
font-size: px2rem(26, );
|
||||
margin-bottom: px2rem(20, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #590F35;
|
||||
font-size: px2rem(22, );
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.rule_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(726, );
|
||||
background: url(../images/rule.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewardBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.reward_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(1015, );
|
||||
background: url(../images/rewardBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -0.9rem;
|
||||
right: 0;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
|
||||
.rewardTab {
|
||||
width: px2rem(488, );
|
||||
height: px2rem(76, );
|
||||
border-radius: px2rem(38, );
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: px2rem(45, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
height: px2rem(76, );
|
||||
line-height: px2rem(76, );
|
||||
text-align: center;
|
||||
font-size: px2rem(28, );
|
||||
color: #CA5987;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab1_act {
|
||||
width: px2rem(244, );
|
||||
height: px2rem(76, );
|
||||
background: url(../images/wishBox1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab2_act {
|
||||
width: px2rem(244, );
|
||||
height: px2rem(76, );
|
||||
background: url(../images/wishBox2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tishiBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.tishi_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(602, );
|
||||
height: px2rem(425, );
|
||||
background: url(../images/tipsBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7E0033;
|
||||
font-size: px2rem(26, );
|
||||
position: absolute;
|
||||
top: px2rem(178, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.recharge {
|
||||
width: px2rem(254, );
|
||||
height: px2rem(96, );
|
||||
position: absolute;
|
||||
bottom: px2rem(78, );
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: px2rem(20, );
|
||||
right: px2rem(20, );
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/peko/activity/act-newYear-2022/images/btn_add.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_charge.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_charge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_cut.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_cut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_record.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_reward.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_reward.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_rule.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_rule.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
view/peko/activity/act-newYear-2022/images/btn_sure.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/btn_sure.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
view/peko/activity/act-newYear-2022/images/close.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1004 B |
BIN
view/peko/activity/act-newYear-2022/images/gift1.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/gift1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
view/peko/activity/act-newYear-2022/images/gift2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/gift2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
view/peko/activity/act-newYear-2022/images/giftBg.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/giftBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
view/peko/activity/act-newYear-2022/images/giftBg.svga
Normal file
BIN
view/peko/activity/act-newYear-2022/images/giftBg.svga
Normal file
Binary file not shown.
BIN
view/peko/activity/act-newYear-2022/images/giftBg2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/giftBg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
view/peko/activity/act-newYear-2022/images/giftBg2.svga
Normal file
BIN
view/peko/activity/act-newYear-2022/images/giftBg2.svga
Normal file
Binary file not shown.
BIN
view/peko/activity/act-newYear-2022/images/giftBox.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/giftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
view/peko/activity/act-newYear-2022/images/gx.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/gx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
view/peko/activity/act-newYear-2022/images/gxBox.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/gxBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
view/peko/activity/act-newYear-2022/images/logo.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
view/peko/activity/act-newYear-2022/images/main.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
BIN
view/peko/activity/act-newYear-2022/images/my.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
view/peko/activity/act-newYear-2022/images/nick1.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/nick1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-newYear-2022/images/nick2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/nick2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/peko/activity/act-newYear-2022/images/nick3.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/nick3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
view/peko/activity/act-newYear-2022/images/no1.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/peko/activity/act-newYear-2022/images/no2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/peko/activity/act-newYear-2022/images/no3.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/peko/activity/act-newYear-2022/images/rankBg.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/rankBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
view/peko/activity/act-newYear-2022/images/record.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
view/peko/activity/act-newYear-2022/images/rewardBg.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/rewardBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
view/peko/activity/act-newYear-2022/images/rule.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/rule.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_day.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_day.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_day_act.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_day_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_total.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_total.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_total_act.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_total_act.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_wish1.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_wish1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tab_wish2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tab_wish2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
view/peko/activity/act-newYear-2022/images/tipsBg.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/tipsBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wish1Btn.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wish1Btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wish1Rank.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wish1Rank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wish2Btn.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wish2Btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wish2Rank.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wish2Rank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wishBox1.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wishBox1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/peko/activity/act-newYear-2022/images/wishBox2.png
Normal file
BIN
view/peko/activity/act-newYear-2022/images/wishBox2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
191
view/peko/activity/act-newYear-2022/index.html
Normal file
191
view/peko/activity/act-newYear-2022/index.html
Normal file
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>燃放烟花 许愿新年</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrap no-in-app">
|
||||
<!-- 主视觉 -->
|
||||
<div class="banner"><img src="./images/main.png" alt=""></div>
|
||||
<div class="rule"><img src="./images/btn_rule.png" alt=""></div>
|
||||
<div class="record"><img src="./images/btn_record.png" alt=""></div>
|
||||
<!-- 烟花礼盒 -->
|
||||
<div class="gift-box-wrap">
|
||||
<div class="tips">點燃許願/心願煙花，即可獲得活動限定禮物</div>
|
||||
<div class="wishTab">
|
||||
<div class="item item1_act"></div>
|
||||
<div class="item">心願煙花</div>
|
||||
</div>
|
||||
<div class="gift-box">
|
||||
<img src="./images/giftBg.png" alt="">
|
||||
<div class="svga1"></div>
|
||||
<div class="svga2"></div>
|
||||
</div>
|
||||
<div class="but">
|
||||
<input type="number" value="1" maxlength="999"
|
||||
onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))">
|
||||
<img src="./images/btn_add.png" class="add" alt="">
|
||||
<img src="./images/btn_cut.png" class="cut" alt="">
|
||||
</div>
|
||||
<!-- 许愿按钮 -->
|
||||
<div class="wish">
|
||||
<img src="./images/wish1Btn.png" alt="">
|
||||
</div>
|
||||
<!-- 礼盒奖励 -->
|
||||
<div class="award">
|
||||
<img src="./images/gift1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 榜单 -->
|
||||
<div class="rank-wrap">
|
||||
<div class="rankTab">
|
||||
<div class="tab tab1_act"></div>
|
||||
<div class="tab">心願榜</div>
|
||||
</div>
|
||||
<!-- 奖励 -->
|
||||
<img src="./images/btn_reward.png" class="reward" alt="">
|
||||
<!-- 日榜总榜 -->
|
||||
<div class="dateTab">
|
||||
<img class="day" src="./images/tab_day_act.png" alt="">
|
||||
<img class="total" src="./images/tab_total.png" alt="">
|
||||
</div>
|
||||
<!-- 榜单列表 -->
|
||||
<div class="list">
|
||||
<div class="no no1">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no1.png" class="txBox" alt="">
|
||||
<div class="nick">虛位以待</div>
|
||||
<div class="score">許願值:<b></b></div>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no2.png" class="txBox" alt="">
|
||||
<div class="nick">虛位以待</div>
|
||||
<div class="score">許願值:<b></b></div>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<img src="./images/no3.png" class="txBox" alt="">
|
||||
<div class="nick">虛位以待</div>
|
||||
<div class="score">許願值:<b></b></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="num">4</div>
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<div class="nick">用戶暱稱暱稱...</div>
|
||||
<div class="score">許願值:<b></b></div>
|
||||
</li>
|
||||
<li>等你來上榜~</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="myRank">
|
||||
<div class="num">未上榜</div>
|
||||
<img src="./images/logo.png" class="tx" alt="">
|
||||
<div class="nick">用戶暱稱暱稱...</div>
|
||||
<div class="score">許願值:<b>0</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 恭喜获得弹窗1,2 -->
|
||||
<div class="gx">
|
||||
<div class="gx_in">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
<ul class="box">
|
||||
<!-- <li>
|
||||
<div class="bg">
|
||||
<img src="./images/logo.png" alt="">
|
||||
</div>
|
||||
<span>星星煙花</span>
|
||||
<p>*10</p>
|
||||
</li> -->
|
||||
|
||||
</ul>
|
||||
<img src="./images/btn_sure.png" class="sure" alt="">
|
||||
<div class="tips">禮物將自動發送到背包中，快去送給小夥伴吧~</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 恭喜获得弹窗3,4 -->
|
||||
<div class="gxs">
|
||||
<div class="gxs_in">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
<ul class="box">
|
||||
<!-- <li>
|
||||
<div class="bg">
|
||||
<img src="./images/logo.png" alt="">
|
||||
</div>
|
||||
<span>星星煙花</span>
|
||||
<p>*10</p>
|
||||
</li> -->
|
||||
</ul>
|
||||
<img src="./images/btn_sure.png" class="sure" alt="">
|
||||
<div class="tips">禮物將自動發送到背包中，快去送給小夥伴吧~</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 我的獎勵弹窗 -->
|
||||
<div class="recordBox">
|
||||
<div class="record_in">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
<p>
|
||||
<span>獎勵</span>
|
||||
<span>時間</span>
|
||||
</p>
|
||||
<ul class="box">
|
||||
<!-- <li>
|
||||
<b>星星煙花*<i>1</i></b>
|
||||
<b>2022.08.31 <e>23:23:23</e></b>
|
||||
</li>
|
||||
<li>
|
||||
<b>仙女棒*<i>99</i></b>
|
||||
<b>2022.08.31 <e>23:23:23</e></b>
|
||||
</li> -->
|
||||
|
||||
</ul>
|
||||
<div class="tips">暫無更多獎勵記錄~</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 规则弹窗 -->
|
||||
<div class="ruleBox">
|
||||
<div class="rule_in">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 榜單獎勵 -->
|
||||
<div class="rewardBox">
|
||||
<div class="reward_in">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
<div class="rewardTab">
|
||||
<div class="tab tab1_act"></div>
|
||||
<div class="tab">心願榜</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 温馨提示 -->
|
||||
<div class="tishiBox">
|
||||
<div class="tishi_in">
|
||||
<div class="title">鉆石不足，請充值後再來點燃煙花吧~</div>
|
||||
<img src="./images/btn_charge.png" class="recharge" alt="">
|
||||
<img src="./images/close.png" class="close" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
546
view/peko/activity/act-newYear-2022/js/index.js
Normal file
546
view/peko/activity/act-newYear-2022/js/index.js
Normal file
@@ -0,0 +1,546 @@
|
||||
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
|
||||
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg',
|
||||
offset: 'b'
|
||||
})
|
||||
}
|
||||
|
||||
if (!browser.app) {//
|
||||
toastMsg('請在app內打開！');
|
||||
} else {
|
||||
$('.wrap').removeClass('no-in-app')
|
||||
}
|
||||
|
||||
var fireworks = 1 //1==许愿烟花 2==心愿烟花
|
||||
var nowTime = new Date().getTime()
|
||||
var endTime
|
||||
var fireworksPrice1 = ''
|
||||
var fireworksPrice2 = ''
|
||||
|
||||
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(function () {
|
||||
getInit()
|
||||
getRank(1)
|
||||
}, 100)
|
||||
})
|
||||
|
||||
// 播放svg
|
||||
function svgaFun() {
|
||||
player1 = new SVGA.Player('.svga1');
|
||||
parser1 = new SVGA.Parser('.svga1');
|
||||
parser1.load('./images/giftBg.svga', function (videoItem) {
|
||||
player1.loops = 1;
|
||||
player1.clearsAfterStop = false;
|
||||
player1.setVideoItem(videoItem);
|
||||
player1.startAnimation();
|
||||
player1.setContentMode('AspectFill')
|
||||
player1.onFinished(() => {
|
||||
$('.svga1').hide()
|
||||
})
|
||||
})
|
||||
}
|
||||
function svgaFun2() {
|
||||
player1 = new SVGA.Player('.svga2');
|
||||
parser1 = new SVGA.Parser('.svga2');
|
||||
parser1.load('./images/giftBg2.svga', function (videoItem) {
|
||||
player1.loops = 1;
|
||||
player1.clearsAfterStop = false;
|
||||
player1.setVideoItem(videoItem);
|
||||
player1.startAnimation();
|
||||
player1.setContentMode('AspectFill')
|
||||
player1.onFinished(() => {
|
||||
$('.svga2').hide()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 获取初始化配置
|
||||
function getInit() {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/newYearFirework/getConfig',
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
endTime = res.data.endTime;
|
||||
fireworksPrice1 = res.data.fireworks[1].price;
|
||||
fireworksPrice2 = res.data.fireworks[2].price;
|
||||
if (nowTime >= res.data.endTime) {
|
||||
$('.gift-box-wrap .wish').css('filter', 'grayscale(0.8)')
|
||||
}
|
||||
|
||||
hideLoading(layerIndex)
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
hideLoading(layerIndex)
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获奖记录接口
|
||||
function getConvertRecord() {
|
||||
scrollBool = false;
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/newYearFirework/listRewardRecord',
|
||||
// data: { page, pageSize: 10 },
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
if (res.data.length > 0) {
|
||||
// page++;
|
||||
var str = ``;
|
||||
res.data.forEach((res, i) => {
|
||||
str += `
|
||||
<li>
|
||||
<b>${res.giftName}*<i>${res.totalNum}</i></b>
|
||||
<b>${dateFormat(res.lastTimestamp, "yyyy.MM.dd")} <e>${dateFormat(res.lastTimestamp, "hh:mm:ss")}</e></b>
|
||||
</li>
|
||||
`
|
||||
});
|
||||
console.log(str);
|
||||
$('.recordBox .record_in .box').append(str);
|
||||
// $('.recordBox .record_in .tips').show();
|
||||
scrollBool = true;
|
||||
} else {
|
||||
scrollBool = false;
|
||||
$('.recordBox .record_in .tips').show();
|
||||
}
|
||||
$('.recordBox').show();
|
||||
hideLoading(layerIndex)
|
||||
} else {
|
||||
scrollBool = true;
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
scrollBool = true;
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 烟花开奖接口
|
||||
function openFireworks(type, num) {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/act/newYearFirework/draw',
|
||||
data: { type, num },
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
var list = ''
|
||||
res.data.forEach(item => {
|
||||
list += `
|
||||
<li>
|
||||
<div class="bg">
|
||||
<img src="${item.giftUrl}" alt="">
|
||||
</div>
|
||||
<span>${item.giftName}</span>
|
||||
<p>*${item.num}</p>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
if (res.data.length <= 2) {
|
||||
$('.gx .gx_in ul').append(list)
|
||||
$('.gx').show()
|
||||
} else {
|
||||
$('.gxs .gxs_in ul').append(list)
|
||||
$('.gxs').show()
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
} else if (res.code = 2104) {
|
||||
$('.tishiBox').show()
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
hideLoading(layerIndex)
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 榜单接口
|
||||
// type(1=许愿榜日榜、2=许愿榜总榜、3=心愿榜日榜、4=心愿榜周榜)
|
||||
function getRank(type) {
|
||||
$('.rank-wrap .list ul li').remove();
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/act/newYearFirework/getRank',
|
||||
data: { type },
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
let value = type == 1 ? '許願值' : type == 2 ? '許願值' : '心願值'
|
||||
// 前三
|
||||
var top3 = res.data.rankList.slice(0, 3);
|
||||
var notTop3 = res.data.rankList.slice(3);
|
||||
if (top3.length < 3) {
|
||||
let arr = new Array(3 - top3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: '虚位以待',
|
||||
score: ""
|
||||
})
|
||||
top3.push(...arr)
|
||||
}
|
||||
top3.forEach((res, index) => {
|
||||
$(`.rank-wrap .list .no${index + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.rank-wrap .list .no${index + 1} .tx`).attr('uid', res.uid);
|
||||
$(`.rank-wrap .list .no${index + 1} .nick`).html(res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick);
|
||||
$(`.rank-wrap .list .no${index + 1} .score`).html(`${value + ':'}${res.score > 10000 ? (Math.floor(res.score / 1000) / 10).toFixed(1) + 'w' : res.score}`);
|
||||
});
|
||||
// 非前三
|
||||
let str = ``;
|
||||
notTop3.forEach((res, i) => {
|
||||
str += `
|
||||
<li uid="${res.uid}">
|
||||
<div class="num">${res.ranking}</div>
|
||||
<img src="${res.avatar}" class="tx" alt="">
|
||||
<div class="nick">${res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick}</div>
|
||||
<div class="score">${value}:<b>${unitProcessing(res.score, 10000, 1, 'w')}</b></div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.rank-wrap .list ul').append(str);
|
||||
|
||||
if (notTop3.length < 7) {
|
||||
$('.rank-wrap .list ul li').eq(notTop3.length - 1).after(`<li>等你來上榜~</li>`)
|
||||
}
|
||||
if (notTop3.length == 0) {
|
||||
$('.rank-wrap .list ul').append(`<li>等你來上榜~</li>`)
|
||||
}
|
||||
|
||||
// 自己排名
|
||||
$('.rank-wrap .myRank num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
|
||||
$('.rank-wrap .myRank .tx').attr('src', res.data.meRank.avatar);
|
||||
$('.rank-wrap .myRank .nick').text(res.data.meRank.nick.length > 5 ? res.data.meRank.nick.slice(0, 5) + '...' : res.data.meRank.nick)
|
||||
$('.rank-wrap .myRank .score').html(`${value + ':'}${res.data.meRank.score > 10000 ? (Math.floor(res.data.meRank.score / 1000) / 10).toFixed(1) + 'w' : res.data.meRank.score}`);
|
||||
hideLoading(layerIndex)
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
hideLoading(layerIndex)
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 埋点接口
|
||||
// event（pay_click=点击去充值、pages_click=看别人主页）
|
||||
function sendLog(event) {
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/act/newYearFirework/log',
|
||||
data: { event: event },
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
console.log(res);
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击跳转个人主页
|
||||
$('.rank-wrap .list .no').click(function () {
|
||||
let uid = $(this).find('.tx').attr('uid')
|
||||
if (uid) {
|
||||
openPerson(uid)
|
||||
}
|
||||
})
|
||||
$('.rank-wrap .list ul').on('click', 'li', function () {
|
||||
let uid = $(this).attr('uid')
|
||||
if (uid) {
|
||||
openPerson(uid)
|
||||
}
|
||||
})
|
||||
|
||||
// 投入+
|
||||
$('.gift-box-wrap .but .add').click(function () {
|
||||
let val = $('.gift-box-wrap .but input').val();
|
||||
if (val >= 999) {
|
||||
toastMsg('最多可輸入999')
|
||||
$('.gift-box-wrap .but input').val(parseInt(999))
|
||||
} else {
|
||||
$('.gift-box-wrap .but input').val(parseInt(val) + 1)
|
||||
}
|
||||
})
|
||||
// 投入-
|
||||
$('.gift-box-wrap .but .cut').click(function () {
|
||||
let val = $('.gift-box-wrap .but input').val();
|
||||
if (val <= 1) {
|
||||
toastMsg('至少投入1')
|
||||
$('.gift-box-wrap .but input').val(parseInt(1))
|
||||
} else {
|
||||
$('.gift-box-wrap .but input').val(parseInt(val) - 1)
|
||||
}
|
||||
})
|
||||
// 監聽輸入框
|
||||
$('.gift-box-wrap .but').on('input', 'input', function () {
|
||||
if ($(this).val() >= 999) {
|
||||
toastMsg('最多可輸入999')
|
||||
$('.gift-box-wrap .but input').val(parseInt(999))
|
||||
} else if ($(this).val() <= 1) {
|
||||
toastMsg('至少投入1')
|
||||
$('.gift-box-wrap .but input').val(parseInt(1))
|
||||
}
|
||||
})
|
||||
|
||||
// 许愿按钮
|
||||
$('.gift-box-wrap .wish').click(function () {
|
||||
if (nowTime >= endTime) {
|
||||
toastMsg('活动已结束~')
|
||||
} else {
|
||||
let num = $('.gift-box-wrap .but input').val()
|
||||
if (num == 0) {
|
||||
toastMsg('至少投入1')
|
||||
return
|
||||
}
|
||||
if (fireworks == 1) {
|
||||
$('.svga1').show()
|
||||
svgaFun()
|
||||
setTimeout(() => {
|
||||
openFireworks(1, num)
|
||||
}, 1000);
|
||||
} else {
|
||||
$('.svga2').show()
|
||||
svgaFun2()
|
||||
setTimeout(() => {
|
||||
openFireworks(2, num)
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// 礼盒切换
|
||||
$('.gift-box-wrap .wishTab .item').click(function () {
|
||||
let index = $(this).index();
|
||||
if (index == 0) {
|
||||
$(this).addClass('item1_act').siblings().removeClass('item2_act')
|
||||
$(this).html('').siblings().html('心願煙花')
|
||||
$('.gift-box-wrap .wish img').attr('src', './images/wish1Btn.png')
|
||||
$('.gift-box-wrap .gift-box img').attr('src', './images/giftBg.png')
|
||||
$('.gift-box-wrap .award img').attr('src', './images/gift1.png')
|
||||
fireworks = 1;
|
||||
|
||||
} else {
|
||||
$(this).addClass('item2_act').siblings().removeClass('item1_act')
|
||||
$(this).html('').siblings().html('許願煙花')
|
||||
$('.gift-box-wrap .wish img').attr('src', './images/wish2Btn.png')
|
||||
$('.gift-box-wrap .gift-box img').attr('src', './images/giftBg2.png')
|
||||
$('.gift-box-wrap .award img').attr('src', './images/gift2.png')
|
||||
fireworks = 2;
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// 榜单切换
|
||||
var thisRank = 'rank1'
|
||||
$('.rank-wrap .rankTab .tab').click(function () {
|
||||
let index = $(this).index();
|
||||
if (index == 0) {
|
||||
$(this).addClass('tab1_act').siblings().removeClass('tab2_act')
|
||||
$(this).html('').siblings().html('心願榜')
|
||||
$('.rank-wrap .dateTab img').eq(0).attr('src', './images/tab_day_act.png')
|
||||
$('.rank-wrap .dateTab img').eq(1).attr('src', './images/tab_total.png')
|
||||
getRank(1)
|
||||
thisRank = 'rank1'
|
||||
} else {
|
||||
$(this).addClass('tab2_act').siblings().removeClass('tab1_act')
|
||||
$(this).html('').siblings().html('許願榜')
|
||||
$('.rank-wrap .dateTab img').eq(0).attr('src', './images/tab_day_act.png')
|
||||
$('.rank-wrap .dateTab img').eq(1).attr('src', './images/tab_total.png')
|
||||
getRank(3)
|
||||
thisRank = 'rank2'
|
||||
}
|
||||
})
|
||||
// 日榜总榜切换
|
||||
$('.rank-wrap .dateTab img').click(function () {
|
||||
let index = $(this).index();
|
||||
if (index == 0) {
|
||||
$(this).attr('src', './images/tab_day_act.png')
|
||||
$(this).siblings().attr('src', './images/tab_total.png')
|
||||
if (thisRank == 'rank1') {
|
||||
getRank(1)
|
||||
} else {
|
||||
getRank(3)
|
||||
}
|
||||
} else {
|
||||
$(this).attr('src', './images/tab_total_act.png')
|
||||
$(this).siblings().attr('src', './images/tab_day.png')
|
||||
if (thisRank == 'rank1') {
|
||||
getRank(2)
|
||||
} else {
|
||||
getRank(4)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 榜单彈窗切换
|
||||
$('.rewardBox .rewardTab .tab').click(function () {
|
||||
let index = $(this).index();
|
||||
if (index == 0) {
|
||||
$(this).addClass('tab1_act').siblings().removeClass('tab2_act')
|
||||
$(this).html('').siblings().html('心願榜')
|
||||
} else {
|
||||
$(this).addClass('tab2_act').siblings().removeClass('tab1_act')
|
||||
$(this).html('').siblings().html('許願榜')
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// 规则弹窗
|
||||
$('.rule').click(function () {
|
||||
bodyScroolFun(true)
|
||||
$('.ruleBox').show();
|
||||
})
|
||||
$('.ruleBox .close').click(function () {
|
||||
bodyScroolFun(false)
|
||||
$('.ruleBox').hide();
|
||||
})
|
||||
|
||||
// 关闭恭喜获得弹窗
|
||||
$('.gx .gx_in .sure,.close').click(function () {
|
||||
$('.gx .gx_in ul li').remove()
|
||||
$('.gx').hide()
|
||||
})
|
||||
$('.gxs .gxs_in .sure,.close').click(function () {
|
||||
$('.gxs .gxs_in ul li').remove()
|
||||
$('.gxs').hide()
|
||||
})
|
||||
// 我的獎勵
|
||||
$('.record').click(function () {
|
||||
bodyScroolFun(true)
|
||||
// page = 0;
|
||||
// page++
|
||||
$('.recordBox .record_in .box li').remove();
|
||||
getConvertRecord();
|
||||
// $('.recordBox').show();
|
||||
})
|
||||
$('.recordBox .close').click(function () {
|
||||
bodyScroolFun(false)
|
||||
$('.recordBox').hide();
|
||||
})
|
||||
var scrollBool = true;
|
||||
// 获奖记录监听滚动
|
||||
// $('.recordBox .recordBox_in .box').scroll(function () {
|
||||
// let scrollTop = $(this).scrollTop()
|
||||
// let scrollHeight = $('.recordBox .recordBox_in .box')[0].scrollHeight
|
||||
// let ulHeight = $(this).innerHeight()
|
||||
// if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
||||
// if (scrollBool) {
|
||||
// page++;
|
||||
// getConvertRecord(page);
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// 榜單獎勵
|
||||
$('.rank-wrap .reward').click(function () {
|
||||
bodyScroolFun(true)
|
||||
$('.rewardBox').show();
|
||||
})
|
||||
$('.rewardBox .close').click(function () {
|
||||
bodyScroolFun(false)
|
||||
$('.rewardBox').hide();
|
||||
})
|
||||
|
||||
// 溫馨提示
|
||||
$('.tishiBox .close').click(function () {
|
||||
bodyScroolFun(false)
|
||||
$('.tishiBox').hide();
|
||||
})
|
||||
|
||||
// 去充值(pay_click=点击去充值埋点)
|
||||
$('.tishiBox').on('click', '.recharge', function () {
|
||||
if (browser.app) {
|
||||
if (browser.android) {
|
||||
let channel = pubInfo.deviceInfo.channel;
|
||||
console.log(pubInfo.deviceInfo);
|
||||
if (channel == "google") {
|
||||
sendLog('pay_click')
|
||||
window.androidJsObj.openChargePage();
|
||||
} else {
|
||||
sendLog('pay_click')
|
||||
window.androidJsObj.openChargePage();
|
||||
}
|
||||
} else if (browser.ios) {
|
||||
sendLog('pay_click')
|
||||
window.webkit.messageHandlers.chargePayClickPage.postMessage();
|
||||
}
|
||||
} else {
|
||||
toastMsg('請在app內打開')
|
||||
}
|
||||
})
|
||||
|
||||
//跳转个人主页 （pages_click=看别人主页埋点）
|
||||
function openPerson(uid) {
|
||||
if (browser.app) {
|
||||
if (browser.ios) {
|
||||
sendLog('pages_click')
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
sendLog('pages_click')
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
toastMsg('請在app內打開')
|
||||
}
|
||||
}
|
||||
|
||||
// 控制body是否可以滑动
|
||||
function bodyScroolFun(bool) {
|
||||
if (bool) {
|
||||
$('body').css('overflow', 'hidden');
|
||||
} else {
|
||||
$('body').css('overflow', 'auto');
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user