Compare commits
39 Commits
developmen
...
shortLink
| Author | SHA1 | Date | |
|---|---|---|---|
|
10fa2aa9c2 | ||
|
|
ab0619728a | ||
|
|
b6b1ea70ad | ||
|
|
f63c441ea7 | ||
|
|
6a0a47d423 | ||
|
|
0a3592b669 | ||
|
|
7ec2b9c4ae | ||
|
|
cf479236e5 | ||
|
|
9a4ab4802b | ||
|
|
97bb8532b3 | ||
|
|
1bf8f00b11 | ||
|
|
cffb3b182e | ||
|
|
1369003805 | ||
|
|
cfef7b6d88 | ||
|
|
ebd5ab0ea1 | ||
|
|
9e4755e351 | ||
|
|
c1f4feb337 | ||
|
|
ecff8b6635 | ||
|
|
159bb7f444 | ||
|
|
7b2670e723 | ||
|
|
6f59a1612c | ||
|
|
4ac7c3baf3 | ||
|
|
4aea98054b | ||
|
|
5a5889c937 | ||
|
|
c5301564a9 | ||
|
|
f17f28e2a3 | ||
|
|
d4958bcf86 | ||
|
|
a9156cc000 | ||
|
|
4344da3177 | ||
|
|
b4c396c6bd | ||
|
|
806a4dcf56 | ||
|
|
f3cb28a9e3 | ||
|
|
f9248152d5 | ||
|
|
8d2d25c5a6 | ||
|
|
dbc5ec8f6d | ||
|
|
f778c7279d | ||
|
|
a862a89db2 | ||
|
|
0f01374528 | ||
|
|
487ce8beea |
@@ -1,889 +0,0 @@
|
|||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
background: #1B3021;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0.8666666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 0.5066666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.back img {
|
|
||||||
width: 0.5866666667rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.24rem;
|
|
||||||
top: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
width: 10rem;
|
|
||||||
height: 12.4533333333rem;
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.header .date {
|
|
||||||
width: 8.9333333333rem;
|
|
||||||
height: 0.7466666667rem;
|
|
||||||
line-height: 0.7466666667rem;
|
|
||||||
background: url(../images/time_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 500;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
}
|
|
||||||
.header .rule {
|
|
||||||
width: 1.4666666667rem;
|
|
||||||
height: 0.72rem;
|
|
||||||
line-height: 0.72rem;
|
|
||||||
text-indent: 0.1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #433402;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
background: url(../images/rule_icon.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 6.2666666667rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.giftBox {
|
|
||||||
position: relative;
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0rem auto 0.4266666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.giftBox .title {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0rem;
|
|
||||||
text-align: center;
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
line-height: 2.6666666667rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .content {
|
|
||||||
width: 8.1333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.6rem auto 0.2rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift {
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 2.6666666667rem 0.64rem 0;
|
|
||||||
}
|
|
||||||
.giftBox .gift div {
|
|
||||||
width: 2.6666666667rem;
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/sGiftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .gift div img {
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.24rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift div span {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 1.3866666667rem;
|
|
||||||
margin: 0.2rem auto 0.2933333333rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 1.6rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
overflow: hidden;
|
|
||||||
gap: 0.4rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 10.3733333333rem;
|
|
||||||
}
|
|
||||||
.timeBox div {
|
|
||||||
width: 1.32rem;
|
|
||||||
height: 1.2266666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
background: url(../images/timeBox_in.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.timeBox div span {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0.2133333333rem auto 0.0266666667rem;
|
|
||||||
}
|
|
||||||
.timeBox div b {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-top: 0.0533333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page1 {
|
|
||||||
margin: 1.8666666667rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 13.3333333333rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/topBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
padding: 0.1066666667rem 0 0;
|
|
||||||
}
|
|
||||||
.page1 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0.32rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -8%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 {
|
|
||||||
width: 8rem;
|
|
||||||
height: 5.0666666667rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 1rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 1.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name {
|
|
||||||
width: 35%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.2666666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.88rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 5.3333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .content {
|
|
||||||
width: 10rem;
|
|
||||||
height: auto;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/contentBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page1 .content ul {
|
|
||||||
width: 8.8rem;
|
|
||||||
margin: 0.3733333333rem auto 0rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li {
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(0deg, #9F0141, #760231);
|
|
||||||
margin-bottom: 0.3466666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 0.32rem 0.2533333333rem 0.2rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: url(../images/li_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
line-height: 1.5466666667rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2533333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p b {
|
|
||||||
max-width: 1.9rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content .more {
|
|
||||||
width: 1.6533333333rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 0.4533333333rem;
|
|
||||||
margin: 0 auto 0.3rem;
|
|
||||||
color: #FFF783;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
border-radius: 0.5866666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 10rem;
|
|
||||||
background: #1B3021;
|
|
||||||
border-radius: 0.24rem 0.24rem 0px 0px;
|
|
||||||
border: 0.04rem solid #FFF783;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 0.52rem 0.2rem 0.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .my .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1.7333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .my .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2133333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p b {
|
|
||||||
max-width: 2rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .my .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.page1 .my .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .my .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page2 {
|
|
||||||
display: none;
|
|
||||||
margin: -0.5rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto -0.2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 40%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page2 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .content {
|
|
||||||
width: 10rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/rewardBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .content .box {
|
|
||||||
width: 10rem;
|
|
||||||
height: 29.04rem;
|
|
||||||
margin: 0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.6933333333rem;
|
|
||||||
height: 0.6933333333rem;
|
|
||||||
left: 1.88rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo1 {
|
|
||||||
top: 9.92rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo2 {
|
|
||||||
top: 23rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo3 {
|
|
||||||
top: 38.56rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rules .rule_in {
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.rules .rule_in .close {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
right: 0.2666666667rem;
|
|
||||||
top: -0.08rem;
|
|
||||||
}
|
|
||||||
.rules .rule_in .titles {
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.1066666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 2.6133333333rem;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text {
|
|
||||||
width: 8.2266666667rem;
|
|
||||||
height: 6.2rem;
|
|
||||||
overflow-y: scroll;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.1333333333rem auto 0;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomText {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0.6666666667rem auto 2.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 99;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.video video {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
.video .close {
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
right: 0.9333333333rem;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arabic .header {
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.arabic .page1 .content ul li .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.arabic .page1 .my .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 265 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 993 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 724 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,190 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title class="text1"></title>
|
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
|
||||||
<link rel="stylesheet" href="./css/index.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 頂部返回 -->
|
|
||||||
<div class="back">
|
|
||||||
<img src="./images/travel/back.png" alt="">
|
|
||||||
</div>
|
|
||||||
<!-- 头部 -->
|
|
||||||
<div class="header">
|
|
||||||
<div class="rule text3"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 倒计时 -->
|
|
||||||
<div class="timeBox">
|
|
||||||
<div class="days">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text6"></b>
|
|
||||||
</div>
|
|
||||||
<div class="hours">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text7"></b>
|
|
||||||
</div>
|
|
||||||
<div class="mins">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text8"></b>
|
|
||||||
</div>
|
|
||||||
<div class="secs">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text9"></b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 礼物盒子 -->
|
|
||||||
<div class="giftBox">
|
|
||||||
<div class="title text4"></div>
|
|
||||||
<div class="gift">
|
|
||||||
<div class="gift0">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift1">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift2">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- page1 -->
|
|
||||||
<div class="page1">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="act text10"></div>
|
|
||||||
<div class="text11"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 前三 -->
|
|
||||||
<div class="top1">
|
|
||||||
<img src="./images/top1.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top2">
|
|
||||||
<img src="./images/top2.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top3">
|
|
||||||
<img src="./images/top3.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<ul>
|
|
||||||
<!-- <li>
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
<div class="more">More</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom"></div>
|
|
||||||
<div class="my">
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- page2 -->
|
|
||||||
<div class="page2">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="text10">Ranking</div>
|
|
||||||
<div class="act text11">Rewards</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="box">
|
|
||||||
<!-- <img src="./images/bo.png" alt="" class="bo bo1">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo2">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo3"> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="bottom"></div> -->
|
|
||||||
</div>
|
|
||||||
<div class="bottomText text12"></div>
|
|
||||||
<!-- 规则 -->
|
|
||||||
<div class="rules">
|
|
||||||
<div class="rule_in">
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
<div class="titles text133"></div>
|
|
||||||
<div class="text text13">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
<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/route-constant.js"></script>
|
|
||||||
<script src="../../common/js/svga.min.js"></script>
|
|
||||||
<script src="./local/en.js"></script>
|
|
||||||
<script src="./local/zh.js"></script>
|
|
||||||
<script src="./local/ar.js"></script>
|
|
||||||
<script src="./local/tr.js"></script>
|
|
||||||
<script src="./js/index.js"></script>
|
|
||||||
<script src="../../common/local/langHandler.js"></script>
|
|
||||||
@@ -1,276 +0,0 @@
|
|||||||
let urlPrefix = getUrlPrefix()
|
|
||||||
let browser = checkVersion()
|
|
||||||
let env = EnvCheck();
|
|
||||||
if (env == 'test') {
|
|
||||||
new VConsole();
|
|
||||||
}
|
|
||||||
// 封裝layer消息提醒框
|
|
||||||
let layerIndex
|
|
||||||
var langReplace;
|
|
||||||
var localLang;
|
|
||||||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
|
||||||
layer.open({
|
|
||||||
type: 2,
|
|
||||||
shadeClose: false,
|
|
||||||
content,
|
|
||||||
success(e) {
|
|
||||||
layerIndex = $(e).attr('index')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const hideLoading = (index) => {
|
|
||||||
layer.close(index)
|
|
||||||
}
|
|
||||||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
|
||||||
layer.open({
|
|
||||||
content,
|
|
||||||
time,
|
|
||||||
skin: 'msg'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
var countupTime;//倒计时容器
|
|
||||||
var loadedCount = 0; // 已加載的數據數量
|
|
||||||
var pageSize = 7; // 每次加載的數據數量
|
|
||||||
var notListTo3 = []; // 每次加載的數據數量
|
|
||||||
// 初始化函數
|
|
||||||
$(function () {
|
|
||||||
getInfoFromClient();
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
setTimeout(function () {
|
|
||||||
// 頁面全屏
|
|
||||||
if (browser.app) {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.initShowNav(false)
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 頂部返回事件
|
|
||||||
$('.back img').click(() => {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.closeWebView()
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
langReplace = window.lang.replace;
|
|
||||||
localLang = window.lang;
|
|
||||||
translateFun();
|
|
||||||
getConfig();
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
})
|
|
||||||
// 处理SVGA
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
function loadSVGA(containerId, svgaPath) {
|
|
||||||
var container = document.getElementById(containerId);
|
|
||||||
var player = new SVGA.Player(container);
|
|
||||||
|
|
||||||
var parser = new SVGA.Parser();
|
|
||||||
parser.load(svgaPath, function (videoItem) {
|
|
||||||
player.setVideoItem(videoItem);
|
|
||||||
player.startAnimation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSVGA('ts10', './svga/100.svga');
|
|
||||||
});
|
|
||||||
function translateFun() {
|
|
||||||
var langReplace = window.lang.replace;
|
|
||||||
var localLang = window.lang;
|
|
||||||
$('.text1').html(langReplace(localLang.demoModule.text1));
|
|
||||||
$('.text2').html(langReplace(localLang.demoModule.text2));
|
|
||||||
// $('.text22').html(langReplace(localLang.demoModule.text22));
|
|
||||||
$('.text3').html(langReplace(localLang.demoModule.text3));
|
|
||||||
$('.text4').html(langReplace(localLang.demoModule.text4));
|
|
||||||
$('.text5').html(langReplace(localLang.demoModule.text5));
|
|
||||||
$('.text6').html(langReplace(localLang.demoModule.text6));
|
|
||||||
$('.text7').html(langReplace(localLang.demoModule.text7));
|
|
||||||
$('.text8').html(langReplace(localLang.demoModule.text8));
|
|
||||||
$('.text9').html(langReplace(localLang.demoModule.text9));
|
|
||||||
$('.text10').html(langReplace(localLang.demoModule.text10));
|
|
||||||
$('.text11').html(langReplace(localLang.demoModule.text11));
|
|
||||||
$('.text12').html(langReplace(localLang.demoModule.text12));
|
|
||||||
$('.text13').html(langReplace(localLang.demoModule.text13));
|
|
||||||
$('.text133').html(langReplace(localLang.demoModule.text133));
|
|
||||||
$('.more').html(langReplace(localLang.demoModule.more));
|
|
||||||
if (browser.ios) {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text12))
|
|
||||||
} else {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text122))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 配置接口
|
|
||||||
function getConfig() {
|
|
||||||
showLoading()
|
|
||||||
networkRequest({
|
|
||||||
type: 'get',
|
|
||||||
url: urlPrefix + '/activity/h5/template/rank',
|
|
||||||
data: { actKey: "JordanIndependenceDay" },
|
|
||||||
success(res) {
|
|
||||||
if (res.code === 200) {
|
|
||||||
// 处理日期
|
|
||||||
// var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// $('.header .date .text22').text(`${startTime} - ${endTime}`);
|
|
||||||
// 处理倒计时
|
|
||||||
countup(res.data.endTime - res.timestamp);
|
|
||||||
// 处理限定礼物
|
|
||||||
res.data.gifts.forEach((res, i) => {
|
|
||||||
$(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
|
|
||||||
$(`.giftBox .gift .gift${i} span`).text(res.giftName);
|
|
||||||
})
|
|
||||||
// 处理榜单
|
|
||||||
var listTo3 = res.data.rankList.slice(0, 3);
|
|
||||||
notListTo3 = res.data.rankList.slice(3);
|
|
||||||
// 处理前三
|
|
||||||
if (listTo3.length < 3) {
|
|
||||||
let arr = new Array(3 - listTo3.length).fill({
|
|
||||||
avatar: './images/logo.png',
|
|
||||||
name: langReplace(localLang.demoModule.waiting),
|
|
||||||
erbanNo: null,
|
|
||||||
totalNum: null
|
|
||||||
})
|
|
||||||
listTo3.push(...arr)
|
|
||||||
}
|
|
||||||
listTo3.forEach((res, i) => {
|
|
||||||
$(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
|
|
||||||
$(`.page1 .top .top${i + 1} .name b`).text(res.name);
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
|
|
||||||
$(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
|
|
||||||
if (res.erbanNo == null) {
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .score`).hide();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 非前三
|
|
||||||
loadMore();
|
|
||||||
// 处理自己榜单数据
|
|
||||||
var my = res.data.myRank;
|
|
||||||
$('.page1 .my .tx').attr("src", my.avatar);
|
|
||||||
$('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
|
|
||||||
$('.page1 .my .info p b').text(my.name);
|
|
||||||
$('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
|
|
||||||
$('.page1 .my .info span').text(`ID:${my.erbanNo}`);
|
|
||||||
$('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
|
|
||||||
} else {
|
|
||||||
toastMsg(res.message)
|
|
||||||
}
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
},
|
|
||||||
error(err) {
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 加載數據函數
|
|
||||||
function loadMore() {
|
|
||||||
// 計算加載範圍
|
|
||||||
pageSize = loadedCount == 0 ? 7 : 10;
|
|
||||||
const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
|
|
||||||
let str = '';
|
|
||||||
|
|
||||||
// 拼接 HTML
|
|
||||||
nextItems.forEach(res => {
|
|
||||||
str += `
|
|
||||||
<li>
|
|
||||||
<div class="num">${res.rank}</div>
|
|
||||||
<img src="${res.avatar}" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>${res.name}</b>
|
|
||||||
<img src="${res.userLevelVo.experUrl}" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:${res.erbanNo}</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>${unitProcessingAr(res.totalNum, 2)}</b>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
// 將數據插入到列表中
|
|
||||||
$('.page1 .content ul').append(str);
|
|
||||||
// 更新已加載的數據數量
|
|
||||||
loadedCount += nextItems.length;
|
|
||||||
// 如果數據全部加載完成，隱藏按鈕
|
|
||||||
console.log(loadedCount >= notListTo3.length);
|
|
||||||
console.log(notListTo3.length);
|
|
||||||
if (loadedCount >= notListTo3.length) {
|
|
||||||
$('.page1 .content .more').hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 綁定按鈕點擊事件
|
|
||||||
$('.page1 .content .more').click(function () {
|
|
||||||
loadMore();
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初次加載數據
|
|
||||||
// tab切换
|
|
||||||
$('.page1 .top .tab div,.page2 .top .tab div').click(function () {
|
|
||||||
var i = $(this).index() + 1;
|
|
||||||
$('.page1,.page2').hide();
|
|
||||||
$(`.page${i}`).show();
|
|
||||||
if (i == 1) {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 2.4rem');
|
|
||||||
} else {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 打开规则
|
|
||||||
$('.rule').click(function () {
|
|
||||||
$('.rules').show();
|
|
||||||
bodyScroolFun(true);
|
|
||||||
})
|
|
||||||
// 关闭规则
|
|
||||||
$('.rules .rule_in .close').click(function () {
|
|
||||||
$('.rules').hide();
|
|
||||||
bodyScroolFun(false);
|
|
||||||
})
|
|
||||||
|
|
||||||
// 倒計時
|
|
||||||
function countup(leftTime) {
|
|
||||||
clearTimeout(countupTime)
|
|
||||||
//獲取當前時間
|
|
||||||
// var now = nowTime;
|
|
||||||
var d = 0;
|
|
||||||
var h = 0;
|
|
||||||
var m = 0;
|
|
||||||
var s = 0;
|
|
||||||
//定義變數 d,h,m,s保存倒計時的時間
|
|
||||||
var d, h, m, s;
|
|
||||||
//遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果
|
|
||||||
if (leftTime > 0) {
|
|
||||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
|
||||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
|
||||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
|
||||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
|
||||||
//將倒計時賦值到div中
|
|
||||||
$('.timeBox .days span').text(d);
|
|
||||||
$('.timeBox .hours span').text(h);
|
|
||||||
$('.timeBox .mins span').text(m);
|
|
||||||
$('.timeBox .secs span').text(s);
|
|
||||||
} else {
|
|
||||||
getConfig();
|
|
||||||
}
|
|
||||||
if (leftTime > 0) {
|
|
||||||
leftTime = leftTime - 1000;
|
|
||||||
}
|
|
||||||
countupTime = setTimeout(function () {
|
|
||||||
countup(leftTime);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
//补0操作
|
|
||||||
function getzf(num) {
|
|
||||||
if (parseInt(num) < 10) {
|
|
||||||
num = '0' + num;
|
|
||||||
}
|
|
||||||
return num;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 阿拉伯
|
|
||||||
langAr = {
|
|
||||||
// 模块
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `جارٍ التحميل...`,
|
|
||||||
layerIndex2: `نجاح`,
|
|
||||||
layerIndex3: `خطأ في الشبكة`,
|
|
||||||
text1: `عيد استقلال الأردن`,
|
|
||||||
text3: `القواعد`,
|
|
||||||
text4:'هدايا المناسبات',
|
|
||||||
text6: `أيام`,
|
|
||||||
text7: `ساعات`,
|
|
||||||
text8: `دقائق`,
|
|
||||||
text9: `ثواني`,
|
|
||||||
text10: `التصنيف`,
|
|
||||||
text11: `المكافآت`,
|
|
||||||
text12: `حدث لا علاقة له بشركة آبل`,
|
|
||||||
text122: `حدث غير مرتبط بجوجل`,
|
|
||||||
text133: `القواعد`,
|
|
||||||
text13: `<P>1.خلال فترة الحدث، يمكنك الانضمام إلى الترتيب عن طريق إرسال الدول المعينة.</p>
|
|
||||||
<P>2.في نهاية الحدث، سيحصل أفضل 3 مستخدمين على مكافأة سخية.</p>
|
|
||||||
<P>3.سيتم دفع المكافآت في اليوم التالي لانتهاء الحدث</p>
|
|
||||||
<P>4.لا علاقة للحدث بـ Google/Apple.</p> `,
|
|
||||||
more: `المزيد`,
|
|
||||||
month: `شهر`,
|
|
||||||
day: `يوم`,
|
|
||||||
waiting: `في انتظار`,
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
langEn = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Jordan Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
langTr = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Jordan Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 中文
|
|
||||||
langZh = {
|
|
||||||
// 模塊
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Jordan Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,892 +0,0 @@
|
|||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
background: #500000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0.8666666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 0.5066666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.back img {
|
|
||||||
width: 0.5866666667rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.24rem;
|
|
||||||
top: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
width: 10rem;
|
|
||||||
height: 12.9333333333rem;
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.header .date {
|
|
||||||
width: 8.9333333333rem;
|
|
||||||
height: 0.7466666667rem;
|
|
||||||
line-height: 0.7466666667rem;
|
|
||||||
background: url(../images/time_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 500;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
}
|
|
||||||
.header .rule {
|
|
||||||
width: 1.4666666667rem;
|
|
||||||
height: 0.72rem;
|
|
||||||
line-height: 0.72rem;
|
|
||||||
text-indent: 0.1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #433402;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
background: url(../images/rule_icon.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 6.5333333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.giftBox {
|
|
||||||
position: relative;
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0rem auto 0.4266666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 12rem;
|
|
||||||
}
|
|
||||||
.giftBox .title {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0rem;
|
|
||||||
text-align: center;
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
line-height: 2.6666666667rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .content {
|
|
||||||
width: 8.1333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.6rem auto 0.2rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift {
|
|
||||||
width: 8.1333333333rem;
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 2.6666666667rem auto 0;
|
|
||||||
}
|
|
||||||
.giftBox .gift div {
|
|
||||||
width: 2.6666666667rem;
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/sGiftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .gift div img {
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.24rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift div span {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 1.3866666667rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 1.7333333333rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
overflow: hidden;
|
|
||||||
gap: 0.2rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 10.4rem;
|
|
||||||
}
|
|
||||||
.timeBox div {
|
|
||||||
width: 1.32rem;
|
|
||||||
height: 1.2266666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
background: url(../images/timeBox_in.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.timeBox div span {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0.2133333333rem auto 0.0266666667rem;
|
|
||||||
}
|
|
||||||
.timeBox div b {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-top: 0.0533333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page1 {
|
|
||||||
margin: 7.2rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 13.3333333333rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/topBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
padding: 0.1066666667rem 0 0;
|
|
||||||
}
|
|
||||||
.page1 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0.32rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -8%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 {
|
|
||||||
width: 8rem;
|
|
||||||
height: 5.0666666667rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 1rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 1.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name {
|
|
||||||
width: 35%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.2666666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.88rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 5.3333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .content {
|
|
||||||
width: 10rem;
|
|
||||||
height: auto;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/contentBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page1 .content ul {
|
|
||||||
width: 8.8rem;
|
|
||||||
margin: 0.3733333333rem auto 0rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li {
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(0deg, #9F0141, #760231);
|
|
||||||
margin-bottom: 0.3466666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 0.32rem 0.2533333333rem 0.2rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: url(../images/li_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
line-height: 1.5466666667rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2533333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p b {
|
|
||||||
max-width: 1.9rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content .more {
|
|
||||||
width: 1.6533333333rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 0.4533333333rem;
|
|
||||||
margin: 0 auto 0.3rem;
|
|
||||||
color: #FFF783;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
border-radius: 0.5866666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 10rem;
|
|
||||||
background: #500000;
|
|
||||||
border-radius: 0.24rem 0.24rem 0px 0px;
|
|
||||||
border: 0.04rem solid #FFF783;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 0.52rem 0.2rem 0.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .my .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1.7333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .my .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2133333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p b {
|
|
||||||
max-width: 2rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .my .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.page1 .my .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .my .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page2 {
|
|
||||||
display: none;
|
|
||||||
margin: 5.28rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto -0.2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 40%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page2 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .content {
|
|
||||||
width: 10rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/rewardBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .content .box {
|
|
||||||
width: 10rem;
|
|
||||||
height: 29.04rem;
|
|
||||||
margin: 0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.6933333333rem;
|
|
||||||
height: 0.6933333333rem;
|
|
||||||
left: 1.88rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo1 {
|
|
||||||
top: 9.92rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo2 {
|
|
||||||
top: 23rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo3 {
|
|
||||||
top: 38.56rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rules .rule_in {
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.rules .rule_in .close {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
right: 0.2666666667rem;
|
|
||||||
top: -0.08rem;
|
|
||||||
}
|
|
||||||
.rules .rule_in .titles {
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.1066666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 2.6133333333rem;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text {
|
|
||||||
width: 8.2266666667rem;
|
|
||||||
height: 6.2rem;
|
|
||||||
overflow-y: scroll;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.1333333333rem auto 0;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomText {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0.6666666667rem auto 2.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 99;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.video video {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
.video .close {
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
right: 0.9333333333rem;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arabic .header {
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.arabic .page1 .content ul li .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.arabic .page1 .my .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 730 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,209 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title class="text1"></title>
|
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
|
||||||
<link rel="stylesheet" href="./css/index.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 頂部返回 -->
|
|
||||||
<div class="back">
|
|
||||||
<img src="./images/travel/back.png" alt="">
|
|
||||||
</div>
|
|
||||||
<!-- 头部 -->
|
|
||||||
<div class="header">
|
|
||||||
<div class="rule text3"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 倒计时 -->
|
|
||||||
<div class="timeBox">
|
|
||||||
<div class="days">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text6"></b>
|
|
||||||
</div>
|
|
||||||
<div class="hours">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text7"></b>
|
|
||||||
</div>
|
|
||||||
<div class="mins">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text8"></b>
|
|
||||||
</div>
|
|
||||||
<div class="secs">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text9"></b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 礼物盒子 -->
|
|
||||||
<div class="giftBox">
|
|
||||||
<div class="title text4"></div>
|
|
||||||
<div class="gift">
|
|
||||||
<div class="gift0">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift1">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift2">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- page1 -->
|
|
||||||
<div class="page1">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="act text10"></div>
|
|
||||||
<div class="text11"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 前三 -->
|
|
||||||
<div class="top1">
|
|
||||||
<img src="./images/top1.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top2">
|
|
||||||
<img src="./images/top2.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top3">
|
|
||||||
<img src="./images/top3.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<ul>
|
|
||||||
<!-- <li>
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
<div class="more">More</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom"></div>
|
|
||||||
<div class="my">
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- page2 -->
|
|
||||||
<div class="page2">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="text10">Ranking</div>
|
|
||||||
<div class="act text11">Rewards</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="box">
|
|
||||||
<!-- <img src="./images/bo.png" alt="" class="bo bo1">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo2">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo3"> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="bottom"></div> -->
|
|
||||||
</div>
|
|
||||||
<div class="bottomText text12"></div>
|
|
||||||
<!-- 规则 -->
|
|
||||||
<div class="rules">
|
|
||||||
<div class="rule_in">
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
<div class="titles text133"></div>
|
|
||||||
<div class="text text13">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- MP4 -->
|
|
||||||
<div class="video video1">
|
|
||||||
<video id="zjVideo1" controls>
|
|
||||||
<source src="./mp4/1.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
<div class="video video2">
|
|
||||||
<video id="zjVideo2" controls>
|
|
||||||
<source src="./mp4/2.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
<div class="video video3">
|
|
||||||
<video id="zjVideo3" controls>
|
|
||||||
<source src="./mp4/3.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
<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/route-constant.js"></script>
|
|
||||||
<script src="../../common/js/svga.min.js"></script>
|
|
||||||
<script src="./local/en.js"></script>
|
|
||||||
<script src="./local/zh.js"></script>
|
|
||||||
<script src="./local/ar.js"></script>
|
|
||||||
<script src="./local/tr.js"></script>
|
|
||||||
<script src="./js/index.js"></script>
|
|
||||||
<script src="../../common/local/langHandler.js"></script>
|
|
||||||
@@ -1,276 +0,0 @@
|
|||||||
let urlPrefix = getUrlPrefix()
|
|
||||||
let browser = checkVersion()
|
|
||||||
let env = EnvCheck();
|
|
||||||
if (env == 'test') {
|
|
||||||
new VConsole();
|
|
||||||
}
|
|
||||||
// 封裝layer消息提醒框
|
|
||||||
let layerIndex
|
|
||||||
var langReplace;
|
|
||||||
var localLang;
|
|
||||||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
|
||||||
layer.open({
|
|
||||||
type: 2,
|
|
||||||
shadeClose: false,
|
|
||||||
content,
|
|
||||||
success(e) {
|
|
||||||
layerIndex = $(e).attr('index')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const hideLoading = (index) => {
|
|
||||||
layer.close(index)
|
|
||||||
}
|
|
||||||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
|
||||||
layer.open({
|
|
||||||
content,
|
|
||||||
time,
|
|
||||||
skin: 'msg'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
var countupTime;//倒计时容器
|
|
||||||
var loadedCount = 0; // 已加載的數據數量
|
|
||||||
var pageSize = 7; // 每次加載的數據數量
|
|
||||||
var notListTo3 = []; // 每次加載的數據數量
|
|
||||||
// 初始化函數
|
|
||||||
$(function () {
|
|
||||||
getInfoFromClient();
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
setTimeout(function () {
|
|
||||||
// 頁面全屏
|
|
||||||
if (browser.app) {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.initShowNav(false)
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 頂部返回事件
|
|
||||||
$('.back img').click(() => {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.closeWebView()
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
langReplace = window.lang.replace;
|
|
||||||
localLang = window.lang;
|
|
||||||
translateFun();
|
|
||||||
getConfig();
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
})
|
|
||||||
// 处理SVGA
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
function loadSVGA(containerId, svgaPath) {
|
|
||||||
var container = document.getElementById(containerId);
|
|
||||||
var player = new SVGA.Player(container);
|
|
||||||
|
|
||||||
var parser = new SVGA.Parser();
|
|
||||||
parser.load(svgaPath, function (videoItem) {
|
|
||||||
player.setVideoItem(videoItem);
|
|
||||||
player.startAnimation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSVGA('ts10', './svga/100.svga');
|
|
||||||
});
|
|
||||||
function translateFun() {
|
|
||||||
var langReplace = window.lang.replace;
|
|
||||||
var localLang = window.lang;
|
|
||||||
$('.text1').html(langReplace(localLang.demoModule.text1));
|
|
||||||
$('.text2').html(langReplace(localLang.demoModule.text2));
|
|
||||||
// $('.text22').html(langReplace(localLang.demoModule.text22));
|
|
||||||
$('.text3').html(langReplace(localLang.demoModule.text3));
|
|
||||||
$('.text4').html(langReplace(localLang.demoModule.text4));
|
|
||||||
$('.text5').html(langReplace(localLang.demoModule.text5));
|
|
||||||
$('.text6').html(langReplace(localLang.demoModule.text6));
|
|
||||||
$('.text7').html(langReplace(localLang.demoModule.text7));
|
|
||||||
$('.text8').html(langReplace(localLang.demoModule.text8));
|
|
||||||
$('.text9').html(langReplace(localLang.demoModule.text9));
|
|
||||||
$('.text10').html(langReplace(localLang.demoModule.text10));
|
|
||||||
$('.text11').html(langReplace(localLang.demoModule.text11));
|
|
||||||
$('.text12').html(langReplace(localLang.demoModule.text12));
|
|
||||||
$('.text13').html(langReplace(localLang.demoModule.text13));
|
|
||||||
$('.text133').html(langReplace(localLang.demoModule.text133));
|
|
||||||
$('.more').html(langReplace(localLang.demoModule.more));
|
|
||||||
if (browser.ios) {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text12))
|
|
||||||
} else {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text122))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 配置接口
|
|
||||||
function getConfig() {
|
|
||||||
showLoading()
|
|
||||||
networkRequest({
|
|
||||||
type: 'get',
|
|
||||||
url: urlPrefix + '/activity/h5/template/rank',
|
|
||||||
data: { actKey: "PhilippinesIndependenceDay" },
|
|
||||||
success(res) {
|
|
||||||
if (res.code === 200) {
|
|
||||||
// 处理日期
|
|
||||||
// var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// $('.header .date .text22').text(`${startTime} - ${endTime}`);
|
|
||||||
// 处理倒计时
|
|
||||||
countup(res.data.endTime - res.timestamp);
|
|
||||||
// 处理限定礼物
|
|
||||||
res.data.gifts.forEach((res, i) => {
|
|
||||||
$(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
|
|
||||||
$(`.giftBox .gift .gift${i} span`).text(res.giftName);
|
|
||||||
})
|
|
||||||
// 处理榜单
|
|
||||||
var listTo3 = res.data.rankList.slice(0, 3);
|
|
||||||
notListTo3 = res.data.rankList.slice(3);
|
|
||||||
// 处理前三
|
|
||||||
if (listTo3.length < 3) {
|
|
||||||
let arr = new Array(3 - listTo3.length).fill({
|
|
||||||
avatar: './images/logo.png',
|
|
||||||
name: langReplace(localLang.demoModule.waiting),
|
|
||||||
erbanNo: null,
|
|
||||||
totalNum: null
|
|
||||||
})
|
|
||||||
listTo3.push(...arr)
|
|
||||||
}
|
|
||||||
listTo3.forEach((res, i) => {
|
|
||||||
$(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
|
|
||||||
$(`.page1 .top .top${i + 1} .name b`).text(res.name);
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
|
|
||||||
$(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
|
|
||||||
if (res.erbanNo == null) {
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .score`).hide();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 非前三
|
|
||||||
loadMore();
|
|
||||||
// 处理自己榜单数据
|
|
||||||
var my = res.data.myRank;
|
|
||||||
$('.page1 .my .tx').attr("src", my.avatar);
|
|
||||||
$('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
|
|
||||||
$('.page1 .my .info p b').text(my.name);
|
|
||||||
$('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
|
|
||||||
$('.page1 .my .info span').text(`ID:${my.erbanNo}`);
|
|
||||||
$('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
|
|
||||||
} else {
|
|
||||||
toastMsg(res.message)
|
|
||||||
}
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
},
|
|
||||||
error(err) {
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 加載數據函數
|
|
||||||
function loadMore() {
|
|
||||||
// 計算加載範圍
|
|
||||||
pageSize = loadedCount == 0 ? 7 : 10;
|
|
||||||
const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
|
|
||||||
let str = '';
|
|
||||||
|
|
||||||
// 拼接 HTML
|
|
||||||
nextItems.forEach(res => {
|
|
||||||
str += `
|
|
||||||
<li>
|
|
||||||
<div class="num">${res.rank}</div>
|
|
||||||
<img src="${res.avatar}" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>${res.name}</b>
|
|
||||||
<img src="${res.userLevelVo.experUrl}" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:${res.erbanNo}</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>${unitProcessingAr(res.totalNum, 2)}</b>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
// 將數據插入到列表中
|
|
||||||
$('.page1 .content ul').append(str);
|
|
||||||
// 更新已加載的數據數量
|
|
||||||
loadedCount += nextItems.length;
|
|
||||||
// 如果數據全部加載完成，隱藏按鈕
|
|
||||||
console.log(loadedCount >= notListTo3.length);
|
|
||||||
console.log(notListTo3.length);
|
|
||||||
if (loadedCount >= notListTo3.length) {
|
|
||||||
$('.page1 .content .more').hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 綁定按鈕點擊事件
|
|
||||||
$('.page1 .content .more').click(function () {
|
|
||||||
loadMore();
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初次加載數據
|
|
||||||
// tab切换
|
|
||||||
$('.page1 .top .tab div,.page2 .top .tab div').click(function () {
|
|
||||||
var i = $(this).index() + 1;
|
|
||||||
$('.page1,.page2').hide();
|
|
||||||
$(`.page${i}`).show();
|
|
||||||
if (i == 1) {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 2.4rem');
|
|
||||||
} else {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 打开规则
|
|
||||||
$('.rule').click(function () {
|
|
||||||
$('.rules').show();
|
|
||||||
bodyScroolFun(true);
|
|
||||||
})
|
|
||||||
// 关闭规则
|
|
||||||
$('.rules .rule_in .close').click(function () {
|
|
||||||
$('.rules').hide();
|
|
||||||
bodyScroolFun(false);
|
|
||||||
})
|
|
||||||
|
|
||||||
// 倒計時
|
|
||||||
function countup(leftTime) {
|
|
||||||
clearTimeout(countupTime)
|
|
||||||
//獲取當前時間
|
|
||||||
// var now = nowTime;
|
|
||||||
var d = 0;
|
|
||||||
var h = 0;
|
|
||||||
var m = 0;
|
|
||||||
var s = 0;
|
|
||||||
//定義變數 d,h,m,s保存倒計時的時間
|
|
||||||
var d, h, m, s;
|
|
||||||
//遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果
|
|
||||||
if (leftTime > 0) {
|
|
||||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
|
||||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
|
||||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
|
||||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
|
||||||
//將倒計時賦值到div中
|
|
||||||
$('.timeBox .days span').text(d);
|
|
||||||
$('.timeBox .hours span').text(h);
|
|
||||||
$('.timeBox .mins span').text(m);
|
|
||||||
$('.timeBox .secs span').text(s);
|
|
||||||
} else {
|
|
||||||
getConfig();
|
|
||||||
}
|
|
||||||
if (leftTime > 0) {
|
|
||||||
leftTime = leftTime - 1000;
|
|
||||||
}
|
|
||||||
countupTime = setTimeout(function () {
|
|
||||||
countup(leftTime);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
//补0操作
|
|
||||||
function getzf(num) {
|
|
||||||
if (parseInt(num) < 10) {
|
|
||||||
num = '0' + num;
|
|
||||||
}
|
|
||||||
return num;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 阿拉伯
|
|
||||||
langAr = {
|
|
||||||
// 模块
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `جارٍ التحميل...`,
|
|
||||||
layerIndex2: `نجاح`,
|
|
||||||
layerIndex3: `خطأ في الشبكة`,
|
|
||||||
text1: `عيد الوحدة اليمنية`,
|
|
||||||
text3: `القواعد`,
|
|
||||||
text4:'هدايا المناسبات',
|
|
||||||
text6: `أيام`,
|
|
||||||
text7: `ساعات`,
|
|
||||||
text8: `دقائق`,
|
|
||||||
text9: `ثواني`,
|
|
||||||
text10: `التصنيف`,
|
|
||||||
text11: `المكافآت`,
|
|
||||||
text12: `حدث لا علاقة له بشركة آبل`,
|
|
||||||
text122: `حدث غير مرتبط بجوجل`,
|
|
||||||
text133: `القواعد`,
|
|
||||||
text13: `<P>1.خلال فترة الحدث، يمكنك الانضمام إلى الترتيب عن طريق إرسال الدول المعينة.</p>
|
|
||||||
<P>2.في نهاية الحدث، سيحصل أفضل 3 مستخدمين على مكافأة سخية.</p>
|
|
||||||
<P>3.سيتم دفع المكافآت في اليوم التالي لانتهاء الحدث</p>
|
|
||||||
<P>4.لا علاقة للحدث بـ Google/Apple.</p> `,
|
|
||||||
more: `المزيد`,
|
|
||||||
month: `شهر`,
|
|
||||||
day: `يوم`,
|
|
||||||
waiting: `في انتظار`,
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
langEn = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Philippines Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
langTr = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Philippines Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 中文
|
|
||||||
langZh = {
|
|
||||||
// 模塊
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Philippines Independence Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,887 +0,0 @@
|
|||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
background: #500000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0.8666666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 0.5066666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.back img {
|
|
||||||
width: 0.5866666667rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.24rem;
|
|
||||||
top: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
width: 10rem;
|
|
||||||
height: 10.3466666667rem;
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.header .date {
|
|
||||||
width: 8.9333333333rem;
|
|
||||||
height: 0.7466666667rem;
|
|
||||||
line-height: 0.7466666667rem;
|
|
||||||
background: url(../images/time_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 500;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
}
|
|
||||||
.header .rule {
|
|
||||||
width: 1.4666666667rem;
|
|
||||||
height: 0.72rem;
|
|
||||||
line-height: 0.72rem;
|
|
||||||
text-indent: 0.1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #433402;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
background: url(../images/rule_icon.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 5.5466666667rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.giftBox {
|
|
||||||
position: relative;
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0rem auto 0.4266666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.giftBox .title {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0rem;
|
|
||||||
text-align: center;
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
line-height: 2.6666666667rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .content {
|
|
||||||
width: 8.1333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3466666667rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.6rem auto 0.2rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift {
|
|
||||||
width: 8.1333333333rem;
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 2.6666666667rem auto 0;
|
|
||||||
}
|
|
||||||
.giftBox .gift div {
|
|
||||||
width: 2.6666666667rem;
|
|
||||||
height: 2.6666666667rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/sGiftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.giftBox .gift div img {
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.24rem;
|
|
||||||
}
|
|
||||||
.giftBox .gift div span {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeBox {
|
|
||||||
height: 1.3866666667rem;
|
|
||||||
margin: 0.2rem auto 0.2933333333rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 1.0666666667rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
overflow: hidden;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
.timeBox div {
|
|
||||||
width: 1.32rem;
|
|
||||||
height: 1.2266666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
background: url(../images/timeBox_in.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.timeBox div span {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0.2133333333rem auto 0.0266666667rem;
|
|
||||||
}
|
|
||||||
.timeBox div b {
|
|
||||||
display: block;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-top: 0.0533333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page1 {
|
|
||||||
margin: 1.8666666667rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 13.3333333333rem;
|
|
||||||
position: relative;
|
|
||||||
background: url(../images/topBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
padding: 0.1066666667rem 0 0;
|
|
||||||
}
|
|
||||||
.page1 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0.32rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -8%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 {
|
|
||||||
width: 8rem;
|
|
||||||
height: 5.0666666667rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 1rem auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 1.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name {
|
|
||||||
width: 35%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.2666666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.88rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 5.3333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top1 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top2 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6666666667rem;
|
|
||||||
top: 7.3333333333rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .ts {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .tx {
|
|
||||||
width: 2.3733333333rem;
|
|
||||||
height: 2.3733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.8266666667rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name {
|
|
||||||
width: 83%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 3.7866666667rem;
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name b {
|
|
||||||
max-width: 2.6rem;
|
|
||||||
text-align: right;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .name img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .id {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.3733333333rem;
|
|
||||||
text-align: center;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score {
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 4.9333333333rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
display: flex;
|
|
||||||
z-index: 3;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score b {
|
|
||||||
color: #2D2A00;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .top .top3 .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
.page1 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.page1 .content {
|
|
||||||
width: 10rem;
|
|
||||||
height: auto;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/contentBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page1 .content ul {
|
|
||||||
width: 8.8rem;
|
|
||||||
margin: 0.3733333333rem auto 0rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li {
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(0deg, #9F0141, #760231);
|
|
||||||
margin-bottom: 0.3466666667rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 0.32rem 0.2533333333rem 0.2rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: url(../images/li_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
line-height: 1.5466666667rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2533333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p b {
|
|
||||||
max-width: 1.9rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content ul li .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .content .more {
|
|
||||||
width: 1.6533333333rem;
|
|
||||||
height: 0.5866666667rem;
|
|
||||||
line-height: 0.5866666667rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 0.4533333333rem;
|
|
||||||
margin: 0 auto 0.3rem;
|
|
||||||
color: #FFF783;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
border-radius: 0.5866666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 10rem;
|
|
||||||
background: #500000;
|
|
||||||
border-radius: 0.24rem 0.24rem 0px 0px;
|
|
||||||
border: 0.04rem solid #FFF783;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 0.52rem 0.2rem 0.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page1 .my .num {
|
|
||||||
float: left;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1.7333333333rem;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 0.36rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.page1 .my .tx {
|
|
||||||
float: left;
|
|
||||||
width: 1.1066666667rem;
|
|
||||||
height: 1.1066666667rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.0266666667rem solid #FFF783;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.2133333333rem;
|
|
||||||
margin-right: 0.1866666667rem;
|
|
||||||
margin-left: 0.1866666667rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.3333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p {
|
|
||||||
height: 0.48rem;
|
|
||||||
line-height: 0.48rem;
|
|
||||||
margin-bottom: 0.1333333333rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info p b {
|
|
||||||
max-width: 2rem;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page1 .my .info p img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.0266666667rem;
|
|
||||||
height: 0.48rem;
|
|
||||||
margin: 0 0.08rem;
|
|
||||||
}
|
|
||||||
.page1 .my .info span {
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page1 .my .score {
|
|
||||||
display: flex;
|
|
||||||
height: 0.88rem;
|
|
||||||
line-height: 0.88rem;
|
|
||||||
background: url(../images/score_bg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 0.1333333333rem;
|
|
||||||
min-width: 2.4rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.page1 .my .score img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.4266666667rem;
|
|
||||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.page1 .my .score b {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
color: #2D2A00;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page2 {
|
|
||||||
display: none;
|
|
||||||
margin: -0.5rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .top {
|
|
||||||
width: 10rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto -0.2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .top .tab {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0rem auto 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 40%;
|
|
||||||
gap: 0.2666666667rem;
|
|
||||||
padding: 0 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.page2 .top .tab div {
|
|
||||||
width: 4.3333333333rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: url(../images/tab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .top .tab .act {
|
|
||||||
background: url(../images/actTab.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.page2 .bottom {
|
|
||||||
width: 10rem;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
background: url(../images/bottomBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: -0.2rem auto 0;
|
|
||||||
}
|
|
||||||
.page2 .content {
|
|
||||||
width: 10rem;
|
|
||||||
margin: 0 auto 0;
|
|
||||||
background: url(../images/rewardBg.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.page2 .content .box {
|
|
||||||
width: 10rem;
|
|
||||||
height: 29.04rem;
|
|
||||||
margin: 0.2rem auto 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.6933333333rem;
|
|
||||||
height: 0.6933333333rem;
|
|
||||||
left: 1.88rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo1 {
|
|
||||||
top: 9.92rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo2 {
|
|
||||||
top: 23rem;
|
|
||||||
}
|
|
||||||
.page2 .content .box .bo3 {
|
|
||||||
top: 38.56rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rules .rule_in {
|
|
||||||
width: 10rem;
|
|
||||||
height: 6.4266666667rem;
|
|
||||||
background: url(../images/giftBox.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.rules .rule_in .close {
|
|
||||||
position: absolute;
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
right: 0.2666666667rem;
|
|
||||||
top: -0.08rem;
|
|
||||||
}
|
|
||||||
.rules .rule_in .titles {
|
|
||||||
width: 7.5066666667rem;
|
|
||||||
height: 1.8533333333rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
top: 0.1066666667rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #4D0D00;
|
|
||||||
font-size: 0.4533333333rem;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 2.6133333333rem;
|
|
||||||
background: url(../images/title.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text {
|
|
||||||
width: 8.2266666667rem;
|
|
||||||
height: 6.2rem;
|
|
||||||
overflow-y: scroll;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 0.56rem;
|
|
||||||
margin: 2.1333333333rem auto 0;
|
|
||||||
}
|
|
||||||
.rules .rule_in .text::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomText {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFF783;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0.6666666667rem auto 2.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 99;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.video video {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
.video .close {
|
|
||||||
width: 0.9066666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 10%;
|
|
||||||
right: 0.9333333333rem;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arabic .header {
|
|
||||||
background: url(../images/header.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.arabic .page1 .content ul li .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.arabic .page1 .my .score {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 730 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,209 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title class="text1"></title>
|
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
|
||||||
<link rel="stylesheet" href="./css/index.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 頂部返回 -->
|
|
||||||
<div class="back">
|
|
||||||
<img src="./images/travel/back.png" alt="">
|
|
||||||
</div>
|
|
||||||
<!-- 头部 -->
|
|
||||||
<div class="header">
|
|
||||||
<div class="rule text3"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 倒计时 -->
|
|
||||||
<div class="timeBox">
|
|
||||||
<div class="days">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text6"></b>
|
|
||||||
</div>
|
|
||||||
<div class="hours">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text7"></b>
|
|
||||||
</div>
|
|
||||||
<div class="mins">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text8"></b>
|
|
||||||
</div>
|
|
||||||
<div class="secs">
|
|
||||||
<span>00</span>
|
|
||||||
<b class="text9"></b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 礼物盒子 -->
|
|
||||||
<div class="giftBox">
|
|
||||||
<div class="title text4"></div>
|
|
||||||
<div class="gift">
|
|
||||||
<div class="gift0">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift1">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
<div class="gift2">
|
|
||||||
<img src="./images/logo.png" alt="">
|
|
||||||
<span>Name</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- page1 -->
|
|
||||||
<div class="page1">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="act text10"></div>
|
|
||||||
<div class="text11"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 前三 -->
|
|
||||||
<div class="top1">
|
|
||||||
<img src="./images/top1.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top2">
|
|
||||||
<img src="./images/top2.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top3">
|
|
||||||
<img src="./images/top3.png" alt="" class="ts">
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="name">
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</div>
|
|
||||||
<div class="id">ID:0</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<ul>
|
|
||||||
<!-- <li>
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
<div class="more">More</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom"></div>
|
|
||||||
<div class="my">
|
|
||||||
<div class="num">04</div>
|
|
||||||
<img src="./images/logo.png" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>名字</b>
|
|
||||||
<img src="" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:1234567</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>0K</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- page2 -->
|
|
||||||
<div class="page2">
|
|
||||||
<div class="top">
|
|
||||||
<!-- 切换 -->
|
|
||||||
<div class="tab">
|
|
||||||
<div class="text10">Ranking</div>
|
|
||||||
<div class="act text11">Rewards</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="box">
|
|
||||||
<!-- <img src="./images/bo.png" alt="" class="bo bo1">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo2">
|
|
||||||
<img src="./images/bo.png" alt="" class="bo bo3"> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="bottom"></div> -->
|
|
||||||
</div>
|
|
||||||
<div class="bottomText text12"></div>
|
|
||||||
<!-- 规则 -->
|
|
||||||
<div class="rules">
|
|
||||||
<div class="rule_in">
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
<div class="titles text133"></div>
|
|
||||||
<div class="text text13">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- MP4 -->
|
|
||||||
<div class="video video1">
|
|
||||||
<video id="zjVideo1" controls>
|
|
||||||
<source src="./mp4/1.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
<div class="video video2">
|
|
||||||
<video id="zjVideo2" controls>
|
|
||||||
<source src="./mp4/2.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
<div class="video video3">
|
|
||||||
<video id="zjVideo3" controls>
|
|
||||||
<source src="./mp4/3.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<img src="./images/close.png" alt="" class="close">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
<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/route-constant.js"></script>
|
|
||||||
<script src="../../common/js/svga.min.js"></script>
|
|
||||||
<script src="./local/en.js"></script>
|
|
||||||
<script src="./local/zh.js"></script>
|
|
||||||
<script src="./local/ar.js"></script>
|
|
||||||
<script src="./local/tr.js"></script>
|
|
||||||
<script src="./js/index.js"></script>
|
|
||||||
<script src="../../common/local/langHandler.js"></script>
|
|
||||||
@@ -1,276 +0,0 @@
|
|||||||
let urlPrefix = getUrlPrefix()
|
|
||||||
let browser = checkVersion()
|
|
||||||
let env = EnvCheck();
|
|
||||||
if (env == 'test') {
|
|
||||||
new VConsole();
|
|
||||||
}
|
|
||||||
// 封裝layer消息提醒框
|
|
||||||
let layerIndex
|
|
||||||
var langReplace;
|
|
||||||
var localLang;
|
|
||||||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
|
||||||
layer.open({
|
|
||||||
type: 2,
|
|
||||||
shadeClose: false,
|
|
||||||
content,
|
|
||||||
success(e) {
|
|
||||||
layerIndex = $(e).attr('index')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const hideLoading = (index) => {
|
|
||||||
layer.close(index)
|
|
||||||
}
|
|
||||||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
|
||||||
layer.open({
|
|
||||||
content,
|
|
||||||
time,
|
|
||||||
skin: 'msg'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
var countupTime;//倒计时容器
|
|
||||||
var loadedCount = 0; // 已加載的數據數量
|
|
||||||
var pageSize = 7; // 每次加載的數據數量
|
|
||||||
var notListTo3 = []; // 每次加載的數據數量
|
|
||||||
// 初始化函數
|
|
||||||
$(function () {
|
|
||||||
getInfoFromClient();
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
setTimeout(function () {
|
|
||||||
// 頁面全屏
|
|
||||||
if (browser.app) {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.initShowNav(false)
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 頂部返回事件
|
|
||||||
$('.back img').click(() => {
|
|
||||||
if (browser.android) {
|
|
||||||
window.androidJsObj.closeWebView()
|
|
||||||
} else {
|
|
||||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
||||||
langReplace = window.lang.replace;
|
|
||||||
localLang = window.lang;
|
|
||||||
translateFun();
|
|
||||||
getConfig();
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
})
|
|
||||||
// 处理SVGA
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
function loadSVGA(containerId, svgaPath) {
|
|
||||||
var container = document.getElementById(containerId);
|
|
||||||
var player = new SVGA.Player(container);
|
|
||||||
|
|
||||||
var parser = new SVGA.Parser();
|
|
||||||
parser.load(svgaPath, function (videoItem) {
|
|
||||||
player.setVideoItem(videoItem);
|
|
||||||
player.startAnimation();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSVGA('ts10', './svga/100.svga');
|
|
||||||
});
|
|
||||||
function translateFun() {
|
|
||||||
var langReplace = window.lang.replace;
|
|
||||||
var localLang = window.lang;
|
|
||||||
$('.text1').html(langReplace(localLang.demoModule.text1));
|
|
||||||
$('.text2').html(langReplace(localLang.demoModule.text2));
|
|
||||||
// $('.text22').html(langReplace(localLang.demoModule.text22));
|
|
||||||
$('.text3').html(langReplace(localLang.demoModule.text3));
|
|
||||||
$('.text4').html(langReplace(localLang.demoModule.text4));
|
|
||||||
$('.text5').html(langReplace(localLang.demoModule.text5));
|
|
||||||
$('.text6').html(langReplace(localLang.demoModule.text6));
|
|
||||||
$('.text7').html(langReplace(localLang.demoModule.text7));
|
|
||||||
$('.text8').html(langReplace(localLang.demoModule.text8));
|
|
||||||
$('.text9').html(langReplace(localLang.demoModule.text9));
|
|
||||||
$('.text10').html(langReplace(localLang.demoModule.text10));
|
|
||||||
$('.text11').html(langReplace(localLang.demoModule.text11));
|
|
||||||
$('.text12').html(langReplace(localLang.demoModule.text12));
|
|
||||||
$('.text13').html(langReplace(localLang.demoModule.text13));
|
|
||||||
$('.text133').html(langReplace(localLang.demoModule.text133));
|
|
||||||
$('.more').html(langReplace(localLang.demoModule.more));
|
|
||||||
if (browser.ios) {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text12))
|
|
||||||
} else {
|
|
||||||
$('.bottomText').text(langReplace(localLang.demoModule.text122))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 配置接口
|
|
||||||
function getConfig() {
|
|
||||||
showLoading()
|
|
||||||
networkRequest({
|
|
||||||
type: 'get',
|
|
||||||
url: urlPrefix + '/activity/h5/template/rank',
|
|
||||||
data: { actKey: "YemenUnityDay" },
|
|
||||||
success(res) {
|
|
||||||
if (res.code === 200) {
|
|
||||||
// 处理日期
|
|
||||||
// var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
|
||||||
// $('.header .date .text22').text(`${startTime} - ${endTime}`);
|
|
||||||
// 处理倒计时
|
|
||||||
countup(res.data.endTime - res.timestamp);
|
|
||||||
// 处理限定礼物
|
|
||||||
res.data.gifts.forEach((res, i) => {
|
|
||||||
$(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
|
|
||||||
$(`.giftBox .gift .gift${i} span`).text(res.giftName);
|
|
||||||
})
|
|
||||||
// 处理榜单
|
|
||||||
var listTo3 = res.data.rankList.slice(0, 3);
|
|
||||||
notListTo3 = res.data.rankList.slice(3);
|
|
||||||
// 处理前三
|
|
||||||
if (listTo3.length < 3) {
|
|
||||||
let arr = new Array(3 - listTo3.length).fill({
|
|
||||||
avatar: './images/logo.png',
|
|
||||||
name: langReplace(localLang.demoModule.waiting),
|
|
||||||
erbanNo: null,
|
|
||||||
totalNum: null
|
|
||||||
})
|
|
||||||
listTo3.push(...arr)
|
|
||||||
}
|
|
||||||
listTo3.forEach((res, i) => {
|
|
||||||
$(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
|
|
||||||
$(`.page1 .top .top${i + 1} .name b`).text(res.name);
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
|
|
||||||
$(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
|
|
||||||
if (res.erbanNo == null) {
|
|
||||||
$(`.page1 .top .top${i + 1} .name img`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .id`).hide();
|
|
||||||
$(`.page1 .top .top${i + 1} .score`).hide();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 非前三
|
|
||||||
loadMore();
|
|
||||||
// 处理自己榜单数据
|
|
||||||
var my = res.data.myRank;
|
|
||||||
$('.page1 .my .tx').attr("src", my.avatar);
|
|
||||||
$('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
|
|
||||||
$('.page1 .my .info p b').text(my.name);
|
|
||||||
$('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
|
|
||||||
$('.page1 .my .info span').text(`ID:${my.erbanNo}`);
|
|
||||||
$('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
|
|
||||||
} else {
|
|
||||||
toastMsg(res.message)
|
|
||||||
}
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
},
|
|
||||||
error(err) {
|
|
||||||
hideLoading(layerIndex)
|
|
||||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 加載數據函數
|
|
||||||
function loadMore() {
|
|
||||||
// 計算加載範圍
|
|
||||||
pageSize = loadedCount == 0 ? 7 : 10;
|
|
||||||
const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
|
|
||||||
let str = '';
|
|
||||||
|
|
||||||
// 拼接 HTML
|
|
||||||
nextItems.forEach(res => {
|
|
||||||
str += `
|
|
||||||
<li>
|
|
||||||
<div class="num">${res.rank}</div>
|
|
||||||
<img src="${res.avatar}" alt="" class="tx">
|
|
||||||
<div class="info">
|
|
||||||
<p>
|
|
||||||
<b>${res.name}</b>
|
|
||||||
<img src="${res.userLevelVo.experUrl}" alt="" class="icon">
|
|
||||||
</p>
|
|
||||||
<span>ID:${res.erbanNo}</span>
|
|
||||||
</div>
|
|
||||||
<div class="score">
|
|
||||||
<img src="./images/box.png" alt="">
|
|
||||||
<b>${unitProcessingAr(res.totalNum, 2)}</b>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
// 將數據插入到列表中
|
|
||||||
$('.page1 .content ul').append(str);
|
|
||||||
// 更新已加載的數據數量
|
|
||||||
loadedCount += nextItems.length;
|
|
||||||
// 如果數據全部加載完成，隱藏按鈕
|
|
||||||
console.log(loadedCount >= notListTo3.length);
|
|
||||||
console.log(notListTo3.length);
|
|
||||||
if (loadedCount >= notListTo3.length) {
|
|
||||||
$('.page1 .content .more').hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 綁定按鈕點擊事件
|
|
||||||
$('.page1 .content .more').click(function () {
|
|
||||||
loadMore();
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初次加載數據
|
|
||||||
// tab切换
|
|
||||||
$('.page1 .top .tab div,.page2 .top .tab div').click(function () {
|
|
||||||
var i = $(this).index() + 1;
|
|
||||||
$('.page1,.page2').hide();
|
|
||||||
$(`.page${i}`).show();
|
|
||||||
if (i == 1) {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 2.4rem');
|
|
||||||
} else {
|
|
||||||
$('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 打开规则
|
|
||||||
$('.rule').click(function () {
|
|
||||||
$('.rules').show();
|
|
||||||
bodyScroolFun(true);
|
|
||||||
})
|
|
||||||
// 关闭规则
|
|
||||||
$('.rules .rule_in .close').click(function () {
|
|
||||||
$('.rules').hide();
|
|
||||||
bodyScroolFun(false);
|
|
||||||
})
|
|
||||||
|
|
||||||
// 倒計時
|
|
||||||
function countup(leftTime) {
|
|
||||||
clearTimeout(countupTime)
|
|
||||||
//獲取當前時間
|
|
||||||
// var now = nowTime;
|
|
||||||
var d = 0;
|
|
||||||
var h = 0;
|
|
||||||
var m = 0;
|
|
||||||
var s = 0;
|
|
||||||
//定義變數 d,h,m,s保存倒計時的時間
|
|
||||||
var d, h, m, s;
|
|
||||||
//遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果
|
|
||||||
if (leftTime > 0) {
|
|
||||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
|
||||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
|
||||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
|
||||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
|
||||||
//將倒計時賦值到div中
|
|
||||||
$('.timeBox .days span').text(d);
|
|
||||||
$('.timeBox .hours span').text(h);
|
|
||||||
$('.timeBox .mins span').text(m);
|
|
||||||
$('.timeBox .secs span').text(s);
|
|
||||||
} else {
|
|
||||||
getConfig();
|
|
||||||
}
|
|
||||||
if (leftTime > 0) {
|
|
||||||
leftTime = leftTime - 1000;
|
|
||||||
}
|
|
||||||
countupTime = setTimeout(function () {
|
|
||||||
countup(leftTime);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
//补0操作
|
|
||||||
function getzf(num) {
|
|
||||||
if (parseInt(num) < 10) {
|
|
||||||
num = '0' + num;
|
|
||||||
}
|
|
||||||
return num;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 阿拉伯
|
|
||||||
langAr = {
|
|
||||||
// 模块
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `جارٍ التحميل...`,
|
|
||||||
layerIndex2: `نجاح`,
|
|
||||||
layerIndex3: `خطأ في الشبكة`,
|
|
||||||
text1: `عيد الوحدة اليمنية`,
|
|
||||||
text3: `القواعد`,
|
|
||||||
text4:'هدايا المناسبات',
|
|
||||||
text6: `أيام`,
|
|
||||||
text7: `ساعات`,
|
|
||||||
text8: `دقائق`,
|
|
||||||
text9: `ثواني`,
|
|
||||||
text10: `التصنيف`,
|
|
||||||
text11: `المكافآت`,
|
|
||||||
text12: `حدث لا علاقة له بشركة آبل`,
|
|
||||||
text122: `حدث غير مرتبط بجوجل`,
|
|
||||||
text133: `القواعد`,
|
|
||||||
text13: `<P>1.خلال فترة الحدث، يمكنك الانضمام إلى الترتيب عن طريق إرسال الدول المعينة.</p>
|
|
||||||
<P>2.في نهاية الحدث، سيحصل أفضل 3 مستخدمين على مكافأة سخية.</p>
|
|
||||||
<P>3.سيتم دفع المكافآت في اليوم التالي لانتهاء الحدث</p>
|
|
||||||
<P>4.لا علاقة للحدث بـ Google/Apple.</p> `,
|
|
||||||
more: `المزيد`,
|
|
||||||
month: `شهر`,
|
|
||||||
day: `يوم`,
|
|
||||||
waiting: `في انتظار`,
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
langEn = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Yemen Unity Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
langTr = {
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Yemen Unity Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// 中文
|
|
||||||
langZh = {
|
|
||||||
// 模塊
|
|
||||||
demoModule: {
|
|
||||||
layerIndex1: `Loading...`,
|
|
||||||
layerIndex2: `Success`,
|
|
||||||
layerIndex3: `Network error`,
|
|
||||||
text1:`Yemen Unity Day`,
|
|
||||||
text3:`Rules`,
|
|
||||||
text4:`Event Gifts`,
|
|
||||||
text6: `Days`,
|
|
||||||
text7: `Hours`,
|
|
||||||
text8: `Mins`,
|
|
||||||
text9: `Secs`,
|
|
||||||
text10: `Ranking`,
|
|
||||||
text11: `Rewards`,
|
|
||||||
text12: `Event not related to Apple.`,
|
|
||||||
text122: `Event not related to Google.`,
|
|
||||||
text133: `Rules`,
|
|
||||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
|
||||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
|
||||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
|
||||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
|
||||||
more: 'More',
|
|
||||||
month: 'Month',
|
|
||||||
day: 'Day',
|
|
||||||
waiting: 'Waiting',
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user