也门统一日活动install
This commit is contained in:
chenruiye
864
view/molistar/activity/2025-YemenUnityDay/css/index.css
Normal file
864
view/molistar/activity/2025-YemenUnityDay/css/index.css
Normal file
@@ -0,0 +1,864 @@
|
|||||||
|
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.4266666667rem;
|
||||||
|
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: 12.4rem;
|
||||||
|
position: relative;
|
||||||
|
background: url(../images/topBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto 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.0533333333rem;
|
||||||
|
height: 2.0533333333rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.9733333333rem;
|
||||||
|
}
|
||||||
|
.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: 3.4rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.page1 .top .top1 .id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top1 .score {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
line-height: 0.3733333333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 4.4266666667rem;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.page1 .top .top1 .score b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top1 .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.3733333333rem;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
.page1 .top .top2 {
|
||||||
|
width: 4.2933333333rem;
|
||||||
|
height: 4.32rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0.5333333333rem;
|
||||||
|
top: 8rem;
|
||||||
|
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: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.48rem;
|
||||||
|
}
|
||||||
|
.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: 2.52rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.page1 .top .top2 .id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.04rem;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top2 .score {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
line-height: 0.3733333333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.4666666667rem;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.page1 .top .top2 .score b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top2 .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.3733333333rem;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
.page1 .top .top3 {
|
||||||
|
width: 4.2933333333rem;
|
||||||
|
height: 4.32rem;
|
||||||
|
position: absolute;
|
||||||
|
right: 0.5333333333rem;
|
||||||
|
top: 8rem;
|
||||||
|
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: 1.6rem;
|
||||||
|
height: 1.6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.48rem;
|
||||||
|
}
|
||||||
|
.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: 2.52rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.page1 .top .top3 .id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.04rem;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top3 .score {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
line-height: 0.3733333333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.4666666667rem;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.page1 .top .top3 .score b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.page1 .top .top3 .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.3733333333rem;
|
||||||
|
height: 0.3733333333rem;
|
||||||
|
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%;
|
||||||
|
height: 1.5466666667rem;
|
||||||
|
background: linear-gradient(0deg, #9F0141, #760231);
|
||||||
|
border-radius: 0.24rem;
|
||||||
|
border: 0.04rem solid #FFF783;
|
||||||
|
margin-bottom: 0.32rem;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 0.32rem 0 0.2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .num {
|
||||||
|
float: left;
|
||||||
|
width: 0.5333333333rem;
|
||||||
|
height: 100%;
|
||||||
|
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.2133333333rem;
|
||||||
|
margin-right: 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;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .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 .content ul li .info p img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.0266666667rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .info span {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .score {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
height: 1.5466666667rem;
|
||||||
|
line-height: 1.5466666667rem;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.3466666667rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
margin: 0.6rem 0.0666666667rem 0 0.0666666667rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.page1 .content ul li .score b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
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;
|
||||||
|
height: 1.7333333333rem;
|
||||||
|
background: linear-gradient(0deg, #9F0141, #760231);
|
||||||
|
border-radius: 0.24rem 0.24rem 0px 0px;
|
||||||
|
border: 0.04rem solid #FFF783;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.52rem 0 0.2rem;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.page1 .my .info span {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.page1 .my .score {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
height: 1.7333333333rem;
|
||||||
|
line-height: 1.7333333333rem;
|
||||||
|
}
|
||||||
|
.page1 .my .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.3466666667rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
margin: 0.6933333333rem 0.0666666667rem 0 0.0666666667rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.page1 .my .score b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.3733333333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 {
|
||||||
|
display: none;
|
||||||
|
margin: -0.5rem auto 0;
|
||||||
|
}
|
||||||
|
.page2 .top {
|
||||||
|
width: 10rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
position: relative;
|
||||||
|
background: url(../images/topBg2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0.7333333333rem auto -0.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.page2 .top .tab {
|
||||||
|
width: 8.64rem;
|
||||||
|
height: 1.1733333333rem;
|
||||||
|
line-height: 1.1733333333rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0.7333333333rem auto 0.32rem;
|
||||||
|
}
|
||||||
|
.page2 .top .tab div {
|
||||||
|
width: 4.3333333333rem;
|
||||||
|
height: 1rem;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.4533333333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
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/contentBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.page2 .content .box {
|
||||||
|
width: 9.0666666667rem;
|
||||||
|
height: 38.96rem;
|
||||||
|
background: url(../images/rewardBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
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: 9.4933333333rem;
|
||||||
|
background: url(../images/ruleBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.rules .rule_in .close {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.9066666667rem;
|
||||||
|
height: 0.9066666667rem;
|
||||||
|
right: 0.1rem;
|
||||||
|
top: 0.0933333333rem;
|
||||||
|
}
|
||||||
|
.rules .rule_in .titles {
|
||||||
|
width: 8.9333333333rem;
|
||||||
|
height: 1.8533333333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.6666666667rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: 0.4266666667rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.8533333333rem;
|
||||||
|
background: url(../images/ruleTitle.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.8533333333rem 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-ar.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.arabic .page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-ar.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.china .header {
|
||||||
|
background: url(../images/header-zh.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.china .page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-zh.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Turkiye .header {
|
||||||
|
background: url(../images/header-tr.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.Turkiye .page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-tr.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
977
view/molistar/activity/2025-YemenUnityDay/css/index.scss
Normal file
977
view/molistar/activity/2025-YemenUnityDay/css/index.scss
Normal file
@@ -0,0 +1,977 @@
|
|||||||
|
@function px2rem($px) {
|
||||||
|
@return $px / 75+rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: #500000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.back {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(44);
|
||||||
|
line-height: px2rem(44);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: px2rem(65);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(38);
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: px2rem(44);
|
||||||
|
height: px2rem(44);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(18);
|
||||||
|
top: px2rem(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(776);
|
||||||
|
background: url(../images/header.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
width: px2rem(670);
|
||||||
|
height: px2rem(56);
|
||||||
|
line-height: px2rem(56);
|
||||||
|
background: url(../images/time_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(26);
|
||||||
|
font-weight: 500;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(284);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule {
|
||||||
|
width: px2rem(110);
|
||||||
|
height: px2rem(54);
|
||||||
|
line-height: px2rem(54);
|
||||||
|
text-indent: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #433402;;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/rule_icon.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: px2rem(416);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.giftBox {
|
||||||
|
position: relative;
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(482);
|
||||||
|
background: url(../images/giftBox.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: px2rem(0) auto px2rem(32);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(0);
|
||||||
|
text-align: center;
|
||||||
|
width: px2rem(563);
|
||||||
|
height: px2rem(139);
|
||||||
|
line-height: px2rem(200);
|
||||||
|
color: #4D0D00;
|
||||||
|
font-size: px2rem(34);
|
||||||
|
font-weight: 600;
|
||||||
|
background: url(../images/title.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: px2rem(610);
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(26);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: px2rem(42);
|
||||||
|
margin: px2rem(195) auto px2rem(15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gift {
|
||||||
|
width: px2rem(610);
|
||||||
|
height: px2rem(200);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: px2rem(200) auto 0;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: px2rem(200);
|
||||||
|
height: px2rem(200);
|
||||||
|
position: relative;
|
||||||
|
background: url(../images/sGiftBox.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: px2rem(160);
|
||||||
|
height: px2rem(160);
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(18);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeBox {
|
||||||
|
// width: px2rem(520);
|
||||||
|
height: px2rem(104);
|
||||||
|
// background: url(../images/timeBox.png) no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
margin: px2rem(15) auto px2rem(32);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(80);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
gap: px2rem(30);
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: px2rem(99);
|
||||||
|
height: px2rem(92);
|
||||||
|
// margin-top: px2rem(11);
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
background: url(../images/timeBox_in.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
// border: px2rem(2) solid #FFF1B2;
|
||||||
|
// background: #700034;
|
||||||
|
// border-radius: px2rem(14);
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(34);
|
||||||
|
font-weight: 500;
|
||||||
|
margin: px2rem(16) auto px2rem(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
display: block;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: px2rem(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page1 {
|
||||||
|
// display: none;
|
||||||
|
margin: px2rem(140) auto 0;
|
||||||
|
.top {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(930);
|
||||||
|
position: relative;
|
||||||
|
background: url(../images/topBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
// overflow: hidden;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width:100%;
|
||||||
|
height: px2rem(75);
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: px2rem(75);
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: px2rem(0) auto px2rem(24);
|
||||||
|
position: absolute;
|
||||||
|
top: -8%;
|
||||||
|
gap: px2rem(20);
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
div {
|
||||||
|
width: px2rem(325);
|
||||||
|
height: px2rem(75);
|
||||||
|
color: #4D0D00;
|
||||||
|
font-size: px2rem(34);
|
||||||
|
font-weight: 800;
|
||||||
|
background: url(../images/tab.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.act {
|
||||||
|
background: url(../images/actTab.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top1 {
|
||||||
|
width: px2rem(600);
|
||||||
|
height: px2rem(380);
|
||||||
|
position: relative;
|
||||||
|
margin: 1rem auto 0;
|
||||||
|
|
||||||
|
.ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(154);
|
||||||
|
height: px2rem(154);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(73);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 35%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: px2rem(36);
|
||||||
|
line-height: px2rem(36);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(255);
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
max-width: 2.6rem;
|
||||||
|
text-align: right;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(30);
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(77);
|
||||||
|
height: px2rem(36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(300);
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(28);
|
||||||
|
line-height: px2rem(28);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(332);
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(28);
|
||||||
|
height: px2rem(28);
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top2 {
|
||||||
|
width: px2rem(322);
|
||||||
|
height: px2rem(324);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(40);
|
||||||
|
top: px2rem(600);
|
||||||
|
margin: 0 auto 0;
|
||||||
|
|
||||||
|
.ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(120);
|
||||||
|
height: px2rem(120);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 83%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: px2rem(36);
|
||||||
|
line-height: px2rem(36);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(189);
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
max-width: 2.6rem;
|
||||||
|
text-align: right;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(30);
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(77);
|
||||||
|
height: px2rem(36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(228);
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(28);
|
||||||
|
line-height: px2rem(28);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(260);
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(28);
|
||||||
|
height: px2rem(28);
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top3 {
|
||||||
|
width: px2rem(322);
|
||||||
|
height: px2rem(324);
|
||||||
|
position: absolute;
|
||||||
|
right: px2rem(40);
|
||||||
|
top: px2rem(600);
|
||||||
|
margin: 0 auto 0;
|
||||||
|
|
||||||
|
.ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(120);
|
||||||
|
height: px2rem(120);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 83%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: px2rem(36);
|
||||||
|
line-height: px2rem(36);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(189);
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
max-width: 2.6rem;
|
||||||
|
text-align: right;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(30);
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(77);
|
||||||
|
height: px2rem(36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.id {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(228);
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(28);
|
||||||
|
line-height: px2rem(28);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(260);
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(28);
|
||||||
|
height: px2rem(28);
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(50);
|
||||||
|
background: url(../images/bottomBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: -0.2rem auto 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
background: url(../images/contentBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: px2rem(660);
|
||||||
|
margin: px2rem(28) auto px2rem(0);
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(116);
|
||||||
|
background: linear-gradient(0deg, #9F0141, #760231);
|
||||||
|
border-radius: px2rem(18);
|
||||||
|
border: px2rem(3) solid #FFF783;
|
||||||
|
margin-bottom: px2rem(24);
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 px2rem(24) 0 px2rem(15);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(40);
|
||||||
|
height: 100%;
|
||||||
|
line-height: px2rem(116);
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: px2rem(27);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(83);
|
||||||
|
height: px2rem(83);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFF783;
|
||||||
|
display: block;
|
||||||
|
margin-top: px2rem(16);
|
||||||
|
margin-right: px2rem(14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(25);
|
||||||
|
|
||||||
|
p {
|
||||||
|
height: px2rem(36);
|
||||||
|
line-height: px2rem(36);
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
|
||||||
|
b {
|
||||||
|
max-width: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(30);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(77);
|
||||||
|
height: px2rem(36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
height: px2rem(116);
|
||||||
|
line-height: px2rem(116);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(26);
|
||||||
|
height: px2rem(27);
|
||||||
|
margin: px2rem(45) px2rem(5) 0 px2rem(5);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
width: px2rem(124);
|
||||||
|
height: px2rem(44);
|
||||||
|
line-height: px2rem(44);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 px2rem(34);
|
||||||
|
margin: 0 auto 0.3rem;
|
||||||
|
color: #FFF783;
|
||||||
|
border: px2rem(2) solid #FFF783;
|
||||||
|
border-radius: px2rem(44);
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(130);
|
||||||
|
background: linear-gradient(0deg, #9F0141, #760231);
|
||||||
|
border-radius: px2rem(18) px2rem(18) 0px 0px;
|
||||||
|
border: px2rem(3) solid #FFF783;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(39) 0 px2rem(15);
|
||||||
|
|
||||||
|
.num {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(40);
|
||||||
|
height: 100%;
|
||||||
|
line-height: px2rem(130);
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: px2rem(27);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(83);
|
||||||
|
height: px2rem(83);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFF783;
|
||||||
|
display: block;
|
||||||
|
margin-top: px2rem(16);
|
||||||
|
margin-right: px2rem(14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(25);
|
||||||
|
|
||||||
|
p {
|
||||||
|
height: px2rem(36);
|
||||||
|
line-height: px2rem(36);
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
|
||||||
|
b {
|
||||||
|
max-width: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(30);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(77);
|
||||||
|
height: px2rem(36);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
height: px2rem(130);
|
||||||
|
line-height: px2rem(130);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(26);
|
||||||
|
height: px2rem(27);
|
||||||
|
margin: px2rem(52) px2rem(5) 0 px2rem(5);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 {
|
||||||
|
display: none;
|
||||||
|
margin: -0.5rem auto 0;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(180);
|
||||||
|
position: relative;
|
||||||
|
background: url(../images/topBg2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: px2rem(55) auto -0.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width: px2rem(648);
|
||||||
|
height: px2rem(88);
|
||||||
|
line-height: px2rem(88);
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: px2rem(55) auto px2rem(24);
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: px2rem(325);
|
||||||
|
height: px2rem(75);
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(34);
|
||||||
|
font-weight: 600;
|
||||||
|
background: url(../images/tab.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.act {
|
||||||
|
background: url(../images/actTab.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(50);
|
||||||
|
background: url(../images/bottomBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: -0.2rem auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: px2rem(750);
|
||||||
|
margin: 0 auto 0;
|
||||||
|
background: url(../images/contentBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: px2rem(680);
|
||||||
|
height: px2rem(2922);
|
||||||
|
background: url(../images/rewardBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0.2rem auto 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.bo {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(52);
|
||||||
|
height: px2rem(52);
|
||||||
|
left: px2rem(141);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bo1 {
|
||||||
|
top: px2rem(744);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bo2 {
|
||||||
|
top: px2rem(1725);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bo3 {
|
||||||
|
top: px2rem(2892);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.rule_in {
|
||||||
|
width: px2rem(750);
|
||||||
|
height: px2rem(712);
|
||||||
|
background: url(../images/ruleBg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(68);
|
||||||
|
right: 0.1rem;
|
||||||
|
top: px2rem(7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titles {
|
||||||
|
width: px2rem(670);
|
||||||
|
height: px2rem(139);
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(50);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: px2rem(139);
|
||||||
|
background: url(../images/ruleTitle.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: px2rem(617);
|
||||||
|
height: 6.2rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: px2rem(42);
|
||||||
|
margin: px2rem(214) auto 0;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomText {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF783;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 400;
|
||||||
|
margin: px2rem(50) auto px2rem(180);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
z-index: 99;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
video {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(68);
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
right: px2rem(70);
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arabic {
|
||||||
|
.header {
|
||||||
|
background: url(../images/header-ar.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-ar.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.china {
|
||||||
|
.header {
|
||||||
|
background: url(../images/header-zh.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-zh.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Turkiye {
|
||||||
|
.header {
|
||||||
|
background: url(../images/header-tr.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .content .box {
|
||||||
|
background: url(../images/rewardBg-tr.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
BIN
view/molistar/activity/2025-YemenUnityDay/images/actTab.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/actTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/bo.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/bo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/bottomBg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/bottomBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/box.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/close.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/contentBg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/contentBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
BIN
view/molistar/activity/2025-YemenUnityDay/images/giftBox.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/giftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-ar.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-ar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-tr.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-zh.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/header-zh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/header.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 659 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/logo.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-ar.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-ar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-tr.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-zh.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg-zh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/ruleBg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/ruleBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/ruleTitle.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/ruleTitle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rule_icon.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/rule_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/sGiftBox.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/sGiftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/tab.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox_in.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/time_bg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/time_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/title.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top1.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top2.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top3.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/topBg.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/topBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 730 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/topBg2.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/topBg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/travel/back.png
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/travel/back.png
Normal file
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-YemenUnityDay/index.html
Normal file
209
view/molistar/activity/2025-YemenUnityDay/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 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>
|
||||||
276
view/molistar/activity/2025-YemenUnityDay/js/index.js
Normal file
276
view/molistar/activity/2025-YemenUnityDay/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: "valentinesDay" },
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
31
view/molistar/activity/2025-YemenUnityDay/local/ar.js
Normal file
31
view/molistar/activity/2025-YemenUnityDay/local/ar.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
// 阿拉伯
|
||||||
|
langAr = {
|
||||||
|
// 模块
|
||||||
|
demoModule: {
|
||||||
|
layerIndex1: `جارٍ التحميل...`,
|
||||||
|
layerIndex2: `نجاح`,
|
||||||
|
layerIndex3: `خطأ في الشبكة`,
|
||||||
|
text1: `عيد الوحدة اليمنية`,
|
||||||
|
text3: `القواعد`,
|
||||||
|
text4:'هدايا المناسبات',
|
||||||
|
text5: `نتمنى للجميع كل التوفيق في هذا العيد المليء بالحب! لقد أنشأنا هدايا عيد حب محدودة الإصدار لجعل يوم عيد الحب أفضل. أرسل هدية عيد الحب واقضِ وقتًا ممتعًا مع من تحب!`,
|
||||||
|
text6: `أيام`,
|
||||||
|
text7: `ساعات`,
|
||||||
|
text8: `دقائق`,
|
||||||
|
text9: `ثواني`,
|
||||||
|
text10: `التصنيف`,
|
||||||
|
text11: `المكافآت`,
|
||||||
|
text12: `هذه الفعالية لا علاقة لها بـ Apple.`,
|
||||||
|
text122: `هذه الفعالية لا علاقة لها بـ Google.`,
|
||||||
|
text133: `القواعد`,
|
||||||
|
text13: `<p>1. أرسل هدايا عيد الحب المحددة خلال فترة الفعالية للمشاركة في التصنيف.</p>
|
||||||
|
<p>2. بعد انتهاء الفعالية، سيتم احتساب أفضل 3 مستخدمين في التصنيف.</p>
|
||||||
|
<p>3. سيحصل أفضل 3 مستخدمين على المكافآت، وسيتم إصدار المكافآت في اليوم التالي لانتهاء الفعالية.</p>
|
||||||
|
<p>4. جميع حقوق تفسير هذه الفعالية تعود إلى المنصة وليس لها أي علاقة بـ Google وApple.</p>`,
|
||||||
|
more: `المزيد`,
|
||||||
|
month: `شهر`,
|
||||||
|
day: `يوم`,
|
||||||
|
waiting: `في انتظار`,
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
28
view/molistar/activity/2025-YemenUnityDay/local/en.js
Normal file
28
view/molistar/activity/2025-YemenUnityDay/local/en.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
langEn = {
|
||||||
|
demoModule: {
|
||||||
|
layerIndex1: `Loading...`,
|
||||||
|
layerIndex2: `Success`,
|
||||||
|
layerIndex3: `Network error`,
|
||||||
|
text1:`Yemen Unity Day`,
|
||||||
|
text3:`Rules`,
|
||||||
|
text4:`Event Gifts`,
|
||||||
|
text5:`Wishing everyone all the best on this holiday of love!We have created limited edition Valentine's Day Gifts to make your Valentine's Day even better. Send a Valentine's Day Gift and spend some quality time with your loved ones!`,
|
||||||
|
text6: `Days`,
|
||||||
|
text7: `Hours`,
|
||||||
|
text8: `Mins`,
|
||||||
|
text9: `Secs`,
|
||||||
|
text10: `Ranking`,
|
||||||
|
text11: `Rewards`,
|
||||||
|
text12: `Event has nothing to do with Apple.`,
|
||||||
|
text122: `Event has nothing to do with Google.`,
|
||||||
|
text133: `Rules`,
|
||||||
|
text13: `<p>1. Send the designated Valentine's Day Gifts during the event period to participate in the ranking.</p>
|
||||||
|
<p>2. After the event, the Top3 users on the ranking will be counted.</p>
|
||||||
|
<p>3. The Top3 users will receive rewards, and the rewards will be issued on the second day after the event.</p>
|
||||||
|
<p>4. All interpretation rights of this event belong to the platform and have nothing to do with Google and Apple.</p>`,
|
||||||
|
more: 'More',
|
||||||
|
month: 'Month',
|
||||||
|
day: 'Day',
|
||||||
|
waiting: 'Waiting',
|
||||||
|
},
|
||||||
|
}
|
||||||
7
view/molistar/activity/2025-YemenUnityDay/local/tr.js
Normal file
7
view/molistar/activity/2025-YemenUnityDay/local/tr.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
langTr = {
|
||||||
|
demoModule: {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
7
view/molistar/activity/2025-YemenUnityDay/local/zh.js
Normal file
7
view/molistar/activity/2025-YemenUnityDay/local/zh.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
// 中文
|
||||||
|
langZh = {
|
||||||
|
// 模塊
|
||||||
|
demoModule: {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user