新增元旦活动
This commit is contained in:
dragon
871
view/molistar/activity/2024-newYear/css/index.css
Normal file
871
view/molistar/activity/2024-newYear/css/index.css
Normal file
@@ -0,0 +1,871 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2B001F;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0.86667rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 0.58667rem;
|
||||
height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 14.4rem;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header .date {
|
||||
width: 8.93333rem;
|
||||
height: 0.74667rem;
|
||||
line-height: 0.74667rem;
|
||||
background: url(../images/time_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4.90667rem;
|
||||
}
|
||||
|
||||
.header .rule {
|
||||
width: 1.46667rem;
|
||||
height: 0.72rem;
|
||||
line-height: 0.72rem;
|
||||
text-indent: 0.1rem;
|
||||
text-align: center;
|
||||
color: #433402;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
background: url(../images/rule_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 6.34667rem;
|
||||
}
|
||||
|
||||
.giftBox {
|
||||
position: relative;
|
||||
width: 10rem;
|
||||
height: 8.82667rem;
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -1.33333rem auto 0.42667rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.giftBox .title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.05333rem;
|
||||
text-align: center;
|
||||
width: 7.50667rem;
|
||||
height: 1.85333rem;
|
||||
line-height: 2.66667rem;
|
||||
color: #3C2800;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.giftBox .content {
|
||||
width: 8.13333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.56rem;
|
||||
margin: 2.45333rem auto 0.4rem;
|
||||
}
|
||||
|
||||
.giftBox .gift {
|
||||
width: 8.13333rem;
|
||||
height: 2.66667rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.giftBox .gift div {
|
||||
width: 2.66667rem;
|
||||
height: 2.66667rem;
|
||||
position: relative;
|
||||
background: url(../images/sGiftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.giftBox .gift div img {
|
||||
width: 1.90667rem;
|
||||
height: 1.90667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.64rem;
|
||||
}
|
||||
|
||||
.giftBox .gift div span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.53333rem;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
width: 9.14667rem;
|
||||
height: 1.41333rem;
|
||||
background: url(../images/timeBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0.42667rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.56rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeBox div {
|
||||
width: 1.2rem;
|
||||
height: 1.09333rem;
|
||||
margin-top: 0.14667rem;
|
||||
box-sizing: border-box;
|
||||
border: 0.02667rem solid #FFF1B2;
|
||||
background: #700034;
|
||||
border-radius: 0.18667rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeBox div span {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: 0.45333rem;
|
||||
font-weight: 500;
|
||||
margin: 0.13333rem auto 0.02667rem;
|
||||
}
|
||||
|
||||
.timeBox div b {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top {
|
||||
width: 10rem;
|
||||
height: 11.2rem;
|
||||
position: relative;
|
||||
background: url(../images/topBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.page1 .top .tab {
|
||||
width: 8.64rem;
|
||||
height: 1.17333rem;
|
||||
line-height: 1.17333rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0.32rem;
|
||||
}
|
||||
|
||||
.page1 .top .tab div {
|
||||
width: 4.10667rem;
|
||||
height: 1.17333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.45333rem;
|
||||
font-weight: 600;
|
||||
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.06667rem;
|
||||
position: relative;
|
||||
margin: 0 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.05333rem;
|
||||
height: 2.05333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.97333rem;
|
||||
}
|
||||
|
||||
.page1 .top .top1 .name {
|
||||
width: 100%;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 3.4rem;
|
||||
left: 0;
|
||||
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.02667rem;
|
||||
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.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top1 .score {
|
||||
width: 100%;
|
||||
height: 0.37333rem;
|
||||
line-height: 0.37333rem;
|
||||
position: absolute;
|
||||
top: 4.42667rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page1 .top .top1 .score b {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top1 .score img {
|
||||
display: inline-block;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.page1 .top .top2 {
|
||||
width: 4.29333rem;
|
||||
height: 4.32rem;
|
||||
position: absolute;
|
||||
left: 0.53333rem;
|
||||
top: 6.93333rem;
|
||||
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: 100%;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 2.52rem;
|
||||
left: 0;
|
||||
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.02667rem;
|
||||
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.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top2 .score {
|
||||
width: 100%;
|
||||
height: 0.37333rem;
|
||||
line-height: 0.37333rem;
|
||||
position: absolute;
|
||||
top: 3.46667rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page1 .top .top2 .score b {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top2 .score img {
|
||||
display: inline-block;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.page1 .top .top3 {
|
||||
width: 4.29333rem;
|
||||
height: 4.32rem;
|
||||
position: absolute;
|
||||
right: 0.53333rem;
|
||||
top: 6.93333rem;
|
||||
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: 100%;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 2.52rem;
|
||||
left: 0;
|
||||
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.02667rem;
|
||||
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.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top3 .score {
|
||||
width: 100%;
|
||||
height: 0.37333rem;
|
||||
line-height: 0.37333rem;
|
||||
position: absolute;
|
||||
top: 3.46667rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page1 .top .top3 .score b {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page1 .top .top3 .score img {
|
||||
display: inline-block;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.page1 .bottom {
|
||||
width: 10rem;
|
||||
height: 0.66667rem;
|
||||
background: url(../images/bottomBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.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.37333rem auto 0rem;
|
||||
}
|
||||
|
||||
.page1 .content ul li {
|
||||
width: 100%;
|
||||
height: 1.54667rem;
|
||||
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.53333rem;
|
||||
height: 100%;
|
||||
line-height: 1.54667rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
margin-right: 0.36rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page1 .content ul li .tx {
|
||||
float: left;
|
||||
width: 1.10667rem;
|
||||
height: 1.10667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.02667rem solid #FFF783;
|
||||
display: block;
|
||||
margin-top: 0.21333rem;
|
||||
margin-right: 0.18667rem;
|
||||
}
|
||||
|
||||
.page1 .content ul li .info {
|
||||
float: left;
|
||||
margin-top: 0.33333rem;
|
||||
}
|
||||
|
||||
.page1 .content ul li .info p {
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.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.02667rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
|
||||
.page1 .content ul li .info span {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page1 .content ul li .score {
|
||||
display: flex;
|
||||
float: right;
|
||||
height: 1.54667rem;
|
||||
line-height: 1.54667rem;
|
||||
}
|
||||
|
||||
.page1 .content ul li .score img {
|
||||
display: inline-block;
|
||||
width: 0.34667rem;
|
||||
height: 0.36rem;
|
||||
margin: 0.6rem 0.06667rem 0 0.06667rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page1 .content ul li .score b {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page1 .content .more {
|
||||
width: 1.65333rem;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
text-align: center;
|
||||
padding: 0 0.45333rem;
|
||||
margin: 0 auto 0rem;
|
||||
color: #FFF783;
|
||||
border: 0.02667rem solid #FFF783;
|
||||
border-radius: 0.58667rem;
|
||||
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.73333rem;
|
||||
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.53333rem;
|
||||
height: 100%;
|
||||
line-height: 1.73333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
margin-right: 0.36rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page1 .my .tx {
|
||||
float: left;
|
||||
width: 1.10667rem;
|
||||
height: 1.10667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.02667rem solid #FFF783;
|
||||
display: block;
|
||||
margin-top: 0.21333rem;
|
||||
margin-right: 0.18667rem;
|
||||
}
|
||||
|
||||
.page1 .my .info {
|
||||
float: left;
|
||||
margin-top: 0.33333rem;
|
||||
}
|
||||
|
||||
.page1 .my .info p {
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.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.02667rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
|
||||
.page1 .my .info span {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page1 .my .score {
|
||||
display: flex;
|
||||
float: right;
|
||||
height: 1.73333rem;
|
||||
line-height: 1.73333rem;
|
||||
}
|
||||
|
||||
.page1 .my .score img {
|
||||
display: inline-block;
|
||||
width: 0.34667rem;
|
||||
height: 0.36rem;
|
||||
margin: 0.69333rem 0.06667rem 0 0.06667rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page1 .my .score b {
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page2 .top {
|
||||
width: 10rem;
|
||||
height: 2.16rem;
|
||||
position: relative;
|
||||
background: url(../images/topBg2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.page2 .top .tab {
|
||||
width: 8.64rem;
|
||||
height: 1.17333rem;
|
||||
line-height: 1.17333rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0.32rem;
|
||||
}
|
||||
|
||||
.page2 .top .tab div {
|
||||
width: 4.10667rem;
|
||||
height: 1.17333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.45333rem;
|
||||
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.66667rem;
|
||||
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%;
|
||||
}
|
||||
|
||||
.page2 .content .box {
|
||||
width: 9.06667rem;
|
||||
height: 42.21333rem;
|
||||
background: url(../images/rewardBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.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: 8.82667rem;
|
||||
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.90667rem;
|
||||
height: 0.90667rem;
|
||||
right: 0rem;
|
||||
top: 0.09333rem;
|
||||
}
|
||||
|
||||
.rules .rule_in .titles {
|
||||
width: 7.50667rem;
|
||||
height: 1.85333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.05333rem;
|
||||
text-align: center;
|
||||
color: #3C2800;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.66667rem;
|
||||
background: url(../images/ruleTitle.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rules .rule_in .text {
|
||||
width: 8.22667rem;
|
||||
height: 5.9rem;
|
||||
overflow-y: scroll;
|
||||
color: #FFF783;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.56rem;
|
||||
margin: 2.49333rem 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.66667rem auto 2.4rem;
|
||||
}
|
||||
|
||||
.arabic .header {
|
||||
background: url(../images/header-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.china .header {
|
||||
background: url(../images/header-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Turkiye .header {
|
||||
background: url(../images/header-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
885
view/molistar/activity/2024-newYear/css/index.scss
Normal file
885
view/molistar/activity/2024-newYear/css/index.scss
Normal file
@@ -0,0 +1,885 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2B001F;
|
||||
}
|
||||
|
||||
.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(1080);
|
||||
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(368);
|
||||
}
|
||||
|
||||
.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(476);
|
||||
}
|
||||
}
|
||||
|
||||
.giftBox {
|
||||
position: relative;
|
||||
width: px2rem(750);
|
||||
height: px2rem(662);
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: px2rem(-100) auto px2rem(32);
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(4);
|
||||
text-align: center;
|
||||
width: px2rem(563);
|
||||
height: px2rem(139);
|
||||
line-height: px2rem(200);
|
||||
color: #3C2800;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: px2rem(610);
|
||||
color: #FFF783;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 400;
|
||||
line-height: px2rem(42);
|
||||
margin: px2rem(184) auto px2rem(30);
|
||||
}
|
||||
|
||||
.gift {
|
||||
width: px2rem(610);
|
||||
height: px2rem(200);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 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(143);
|
||||
height: px2rem(143);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(48);
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
width: px2rem(686);
|
||||
height: px2rem(106);
|
||||
background: url(../images/timeBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto px2rem(32);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(117);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
width: px2rem(90);
|
||||
height: px2rem(82);
|
||||
margin-top: px2rem(11);
|
||||
box-sizing: border-box;
|
||||
border: px2rem(2) solid #FFF1B2;
|
||||
background: #700034;
|
||||
border-radius: px2rem(14);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: px2rem(34);
|
||||
font-weight: 500;
|
||||
margin: px2rem(10) auto px2rem(2);
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page1 {
|
||||
// display: none;
|
||||
|
||||
.top {
|
||||
width: px2rem(750);
|
||||
height: px2rem(840);
|
||||
position: relative;
|
||||
background: url(../images/topBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
|
||||
.tab {
|
||||
width: px2rem(648);
|
||||
height: px2rem(88);
|
||||
line-height: px2rem(88);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto px2rem(24);
|
||||
|
||||
div {
|
||||
width: px2rem(308);
|
||||
height: px2rem(88);
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.top1 {
|
||||
width: px2rem(600);
|
||||
height: px2rem(380);
|
||||
position: relative;
|
||||
margin: 0 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: 100%;
|
||||
height: px2rem(36);
|
||||
line-height: px2rem(36);
|
||||
position: absolute;
|
||||
top: px2rem(255);
|
||||
left: 0;
|
||||
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(520);
|
||||
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: 100%;
|
||||
height: px2rem(36);
|
||||
line-height: px2rem(36);
|
||||
position: absolute;
|
||||
top: px2rem(189);
|
||||
left: 0;
|
||||
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(520);
|
||||
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: 100%;
|
||||
height: px2rem(36);
|
||||
line-height: px2rem(36);
|
||||
position: absolute;
|
||||
top: px2rem(189);
|
||||
left: 0;
|
||||
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 auto 0;
|
||||
}
|
||||
|
||||
.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 px2rem(0);
|
||||
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;
|
||||
|
||||
.top {
|
||||
width: px2rem(750);
|
||||
height: px2rem(162);
|
||||
position: relative;
|
||||
background: url(../images/topBg2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
|
||||
.tab {
|
||||
width: px2rem(648);
|
||||
height: px2rem(88);
|
||||
line-height: px2rem(88);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto px2rem(24);
|
||||
|
||||
div {
|
||||
width: px2rem(308);
|
||||
height: px2rem(88);
|
||||
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%;
|
||||
|
||||
.box {
|
||||
width: px2rem(680);
|
||||
height: px2rem(3166);
|
||||
background: url(../images/rewardBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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(662);
|
||||
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: px2rem(0);
|
||||
top: px2rem(7);
|
||||
}
|
||||
|
||||
.titles {
|
||||
width: px2rem(563);
|
||||
height: px2rem(139);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(4);
|
||||
text-align: center;
|
||||
color: #3C2800;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
line-height: px2rem(200);
|
||||
background: url(../images/ruleTitle.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: px2rem(617);
|
||||
height: 5.9rem;
|
||||
overflow-y: scroll;
|
||||
color: #FFF783;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 400;
|
||||
line-height: px2rem(42);
|
||||
margin: px2rem(187) 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);
|
||||
}
|
||||
|
||||
.arabic {
|
||||
.header {
|
||||
background: url(../images/header-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.china {
|
||||
.header {
|
||||
background: url(../images/header-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Turkiye {
|
||||
.header {
|
||||
background: url(../images/header-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
BIN
view/molistar/activity/2024-newYear/images/actTab.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/actTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/molistar/activity/2024-newYear/images/bottomBg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/bottomBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
view/molistar/activity/2024-newYear/images/box.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
view/molistar/activity/2024-newYear/images/close.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
view/molistar/activity/2024-newYear/images/contentBg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/contentBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
BIN
view/molistar/activity/2024-newYear/images/giftBox.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/giftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
view/molistar/activity/2024-newYear/images/header-ar.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/header-ar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
view/molistar/activity/2024-newYear/images/header-tr.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/header-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
view/molistar/activity/2024-newYear/images/header-zh.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/header-zh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
view/molistar/activity/2024-newYear/images/header.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
view/molistar/activity/2024-newYear/images/logo.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
view/molistar/activity/2024-newYear/images/rewardBg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/rewardBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
view/molistar/activity/2024-newYear/images/ruleBg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/ruleBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
view/molistar/activity/2024-newYear/images/ruleTitle.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/ruleTitle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
view/molistar/activity/2024-newYear/images/rule_icon.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/rule_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
view/molistar/activity/2024-newYear/images/sGiftBox.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/sGiftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/molistar/activity/2024-newYear/images/tab.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/molistar/activity/2024-newYear/images/timeBox.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/timeBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/molistar/activity/2024-newYear/images/time_bg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/time_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
view/molistar/activity/2024-newYear/images/title.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
view/molistar/activity/2024-newYear/images/top1.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
view/molistar/activity/2024-newYear/images/top2.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2024-newYear/images/top3.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2024-newYear/images/topBg.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/topBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
view/molistar/activity/2024-newYear/images/topBg2.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/topBg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
view/molistar/activity/2024-newYear/images/travel/back.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/activity/2024-newYear/images/travel/backB.png
Normal file
BIN
view/molistar/activity/2024-newYear/images/travel/backB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
181
view/molistar/activity/2024-newYear/index.html
Normal file
181
view/molistar/activity/2024-newYear/index.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!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="header">
|
||||
<div class="date"><b class="text2"></b> <span class="text22"></span></div>
|
||||
<div class="rule text3"></div>
|
||||
</div>
|
||||
<!-- 礼物盒子 -->
|
||||
<div class="giftBox">
|
||||
<div class="title text4"></div>
|
||||
<div class="content text5"></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>
|
||||
<!-- 倒计时 -->
|
||||
<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>
|
||||
<!-- 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"></div>
|
||||
</div>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
<div class="bottomText text12"></div>
|
||||
<!-- 规则 -->
|
||||
<div class="rules">
|
||||
<div class="rule_in">
|
||||
<img src="./images/close.png" alt="" class="close">
|
||||
<div class="titles text133"></div>
|
||||
<div class="text text13">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
||||
275
view/molistar/activity/2024-newYear/js/index.js
Normal file
275
view/molistar/activity/2024-newYear/js/index.js
Normal file
@@ -0,0 +1,275 @@
|
||||
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;
|
||||
if (browser.ios) {
|
||||
$('.bottomText').text(langReplace(localLang.demoModule.text12))
|
||||
} else {
|
||||
$('.bottomText').text(langReplace(localLang.demoModule.text122))
|
||||
}
|
||||
$('.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));
|
||||
}
|
||||
// 配置接口
|
||||
function getConfig() {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/activity/h5/template/rank',
|
||||
data: { actKey: "newYearDay" },
|
||||
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: '虚位以待',
|
||||
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 .top1${i + 1} .name img`).text(res.experUrl);
|
||||
$(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
|
||||
$(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum));
|
||||
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').text("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').text(my.experUrl);
|
||||
$('.page1 .my .info span').text(`ID:${my.erbanNo}`);
|
||||
$('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 1));
|
||||
} 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.experUrl}" alt="" class="icon">
|
||||
</p>
|
||||
<span>ID:${res.erbanNo}</span>
|
||||
</div>
|
||||
<div class="score">
|
||||
<img src="./images/box.png" alt="">
|
||||
<b>${unitProcessingAr(res.totalNum)}</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;
|
||||
}
|
||||
28
view/molistar/activity/2024-newYear/local/ar.js
Normal file
28
view/molistar/activity/2024-newYear/local/ar.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: `جاري التحميل...`,
|
||||
layerIndex2: `نجاح`,
|
||||
layerIndex3: `خطأ في الشبكة`,
|
||||
text1: 'رأس السنة الجديدة',
|
||||
text2: 'وقت الحدث:',
|
||||
text22: '31 ديسمبر - 7 يناير',
|
||||
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: 'يوم ',
|
||||
}
|
||||
}
|
||||
32
view/molistar/activity/2024-newYear/local/en.js
Normal file
32
view/molistar/activity/2024-newYear/local/en.js
Normal file
@@ -0,0 +1,32 @@
|
||||
langEn = {
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1: `New Year`,
|
||||
text2: `Event Time:`,
|
||||
text22: `December 31st - January 7th`,
|
||||
text3: `Rule`,
|
||||
text4: `New Year Gifts`,
|
||||
text5: `A new year is about to begin, let’s send out New Year gifts to celebrate the New Year
|
||||
together! Let’s welcome the arrival of the New Year together!`,
|
||||
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 New Year 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',
|
||||
},
|
||||
}
|
||||
26
view/molistar/activity/2024-newYear/local/tr.js
Normal file
26
view/molistar/activity/2024-newYear/local/tr.js
Normal file
@@ -0,0 +1,26 @@
|
||||
langTr = {
|
||||
demoModule: {
|
||||
layerIndex1: `Yükleniyor...`,
|
||||
layerIndex2: `Başarı`,
|
||||
layerIndex3: `Ağ hatası`,
|
||||
text1: 'رأس السنة الجديدة',
|
||||
text2: 'وقت الحدث:',
|
||||
text22: '31 ديسمبر - 7 يناير',
|
||||
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: 'Daha',
|
||||
month: 'Ay',
|
||||
day: 'Gün',
|
||||
}
|
||||
}
|
||||
28
view/molistar/activity/2024-newYear/local/zh.js
Normal file
28
view/molistar/activity/2024-newYear/local/zh.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: `加载中...`,
|
||||
layerIndex2: `成功`,
|
||||
layerIndex3: `网络错误`,
|
||||
text1: '新年',
|
||||
text2: '活動時間:',
|
||||
text22: '12月31日 - 1月7日',
|
||||
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: '日',
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user