印尼独立日
This commit is contained in:
@@ -0,0 +1,892 @@
|
||||
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.4rem;
|
||||
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;
|
||||
}
|
||||
1003
view/molistar/activity/2025-IndonesiaIndependenceDay/css/index.scss
Normal file
1003
view/molistar/activity/2025-IndonesiaIndependenceDay/css/index.scss
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 730 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
209
view/molistar/activity/2025-IndonesiaIndependenceDay/index.html
Normal file
209
view/molistar/activity/2025-IndonesiaIndependenceDay/index.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></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>
|
||||
276
view/molistar/activity/2025-IndonesiaIndependenceDay/js/index.js
Normal file
276
view/molistar/activity/2025-IndonesiaIndependenceDay/js/index.js
Normal file
@@ -0,0 +1,276 @@
|
||||
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: "IndonesianIndependenceDay" },
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
// 阿拉伯
|
||||
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: `في انتظار`,
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
langEn = {
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Egyptian Revolution 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',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
langTr = {
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Egyptian Revolution 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',
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Egyptian Revolution 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',
|
||||
},
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user