也门统一日活动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