Compare commits
64 Commits
shortLink
...
lyckyNumbe
Author | SHA1 | Date | |
---|---|---|---|
![]() |
cbe48d4608 | ||
![]() |
d6c149a33d | ||
![]() |
9f82f0bcb3 | ||
![]() |
39854a7fd1 | ||
![]() |
db7d1872cc | ||
![]() |
efd11182bb | ||
![]() |
7d39f9638e | ||
![]() |
d535c34ceb | ||
![]() |
e6594ee2d8 | ||
![]() |
e421eea056 | ||
![]() |
8c23569a25 | ||
![]() |
d0fba01592 | ||
![]() |
29a5199db6 | ||
![]() |
56a8a45c6b | ||
![]() |
98d7cae3a2 | ||
![]() |
86f746e3a6 | ||
![]() |
0bad51d3bb | ||
![]() |
e395b420a4 | ||
![]() |
aa4f9aae2d | ||
![]() |
543e8bffc3 | ||
![]() |
ca308a49a9 | ||
![]() |
40b23c15e7 | ||
![]() |
c2e1314a0a | ||
![]() |
17e3e33fa2 | ||
![]() |
d6740d078b | ||
![]() |
441958379f | ||
![]() |
953bc4955b | ||
![]() |
90a8060cd6 | ||
![]() |
14a7b1b39c | ||
![]() |
8e6a97dcce | ||
![]() |
de197e0e3c | ||
![]() |
f206d05a3e | ||
![]() |
fa56b24396 | ||
![]() |
17ad548037 | ||
![]() |
9b10192c4f | ||
![]() |
f41093bd3a | ||
![]() |
27eadc4b6c | ||
![]() |
8e83c0e874 | ||
![]() |
6e302c78b1 | ||
![]() |
c6882e3833 | ||
![]() |
7020ed3e9a | ||
![]() |
fd10061fe1 | ||
![]() |
cd0fb0636c | ||
![]() |
52da7dfe51 | ||
![]() |
577b21d32d | ||
![]() |
5ffb9e4e5b | ||
![]() |
9775e19fad | ||
![]() |
ea58682b91 | ||
![]() |
87133760c0 | ||
![]() |
8c0fa3eb5a | ||
![]() |
fe8af5f8a1 | ||
![]() |
420efcec1f | ||
![]() |
435d792b3b | ||
![]() |
0de82d1a12 | ||
![]() |
f90d332029 | ||
![]() |
27fa1eea6b | ||
![]() |
5cd7dbbb34 | ||
![]() |
3bbc90c92a | ||
![]() |
111487ff43 | ||
![]() |
cbd42d4da0 | ||
![]() |
f3fe251bc6 | ||
![]() |
23e5578134 | ||
![]() |
0afa711b37 | ||
![]() |
31439c6034 |
887
view/molistar/activity/2025-YemenUnityDay/css/index.css
Normal file
@@ -0,0 +1,887 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #500000;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.5866666667rem;
|
||||
line-height: 0.5866666667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0.8666666667rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
.back img {
|
||||
width: 0.5866666667rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 10.3466666667rem;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.header .date {
|
||||
width: 8.9333333333rem;
|
||||
height: 0.7466666667rem;
|
||||
line-height: 0.7466666667rem;
|
||||
background: url(../images/time_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.7866666667rem;
|
||||
}
|
||||
.header .rule {
|
||||
width: 1.4666666667rem;
|
||||
height: 0.72rem;
|
||||
line-height: 0.72rem;
|
||||
text-indent: 0.1rem;
|
||||
text-align: center;
|
||||
color: #433402;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 500;
|
||||
background: url(../images/rule_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5.5466666667rem;
|
||||
}
|
||||
|
||||
.giftBox {
|
||||
position: relative;
|
||||
width: 10rem;
|
||||
height: 6.4266666667rem;
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0rem auto 0.4266666667rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.giftBox .title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0rem;
|
||||
text-align: center;
|
||||
width: 7.5066666667rem;
|
||||
height: 1.8533333333rem;
|
||||
line-height: 2.6666666667rem;
|
||||
color: #4D0D00;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: 600;
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.giftBox .content {
|
||||
width: 8.1333333333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.56rem;
|
||||
margin: 2.6rem auto 0.2rem;
|
||||
}
|
||||
.giftBox .gift {
|
||||
width: 8.1333333333rem;
|
||||
height: 2.6666666667rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 2.6666666667rem auto 0;
|
||||
}
|
||||
.giftBox .gift div {
|
||||
width: 2.6666666667rem;
|
||||
height: 2.6666666667rem;
|
||||
position: relative;
|
||||
background: url(../images/sGiftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.giftBox .gift div img {
|
||||
width: 2.1333333333rem;
|
||||
height: 2.1333333333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.24rem;
|
||||
}
|
||||
.giftBox .gift div span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
height: 1.3866666667rem;
|
||||
margin: 0.2rem auto 0.2933333333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.0666666667rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.timeBox div {
|
||||
width: 1.32rem;
|
||||
height: 1.2266666667rem;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: url(../images/timeBox_in.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.timeBox div span {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: 500;
|
||||
margin: 0.2133333333rem auto 0.0266666667rem;
|
||||
}
|
||||
.timeBox div b {
|
||||
display: block;
|
||||
color: #FFF783;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 400;
|
||||
margin-top: 0.0533333333rem;
|
||||
}
|
||||
|
||||
.page1 {
|
||||
margin: 1.8666666667rem auto 0;
|
||||
}
|
||||
.page1 .top {
|
||||
width: 10rem;
|
||||
height: 13.3333333333rem;
|
||||
position: relative;
|
||||
background: url(../images/topBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
padding: 0.1066666667rem 0 0;
|
||||
}
|
||||
.page1 .top .tab {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0rem auto 0.32rem;
|
||||
position: absolute;
|
||||
top: -8%;
|
||||
gap: 0.2666666667rem;
|
||||
padding: 0 0.5333333333rem;
|
||||
}
|
||||
.page1 .top .tab div {
|
||||
width: 4.3333333333rem;
|
||||
height: 1rem;
|
||||
color: #4D0D00;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: 800;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page1 .top .tab .act {
|
||||
background: url(../images/actTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page1 .top .top1 {
|
||||
width: 8rem;
|
||||
height: 5.0666666667rem;
|
||||
position: relative;
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
.page1 .top .top1 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.page1 .top .top1 .tx {
|
||||
width: 2.3733333333rem;
|
||||
height: 2.3733333333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.3333333333rem;
|
||||
}
|
||||
.page1 .top .top1 .name {
|
||||
width: 35%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 4.2666666667rem;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.page1 .top .top1 .name b {
|
||||
max-width: 2.6rem;
|
||||
text-align: right;
|
||||
color: #FFF783;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.page1 .top .top1 .name img {
|
||||
display: inline-block;
|
||||
width: 1.0266666667rem;
|
||||
height: 0.48rem;
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
.page1 .top .top1 .id {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 4.88rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.page1 .top .top1 .score {
|
||||
height: 0.88rem;
|
||||
line-height: 0.88rem;
|
||||
position: absolute;
|
||||
top: 5.3333333333rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url(../images/score_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0.1333333333rem;
|
||||
min-width: 2.4rem;
|
||||
}
|
||||
.page1 .top .top1 .score b {
|
||||
color: #2D2A00;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .top .top1 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.4266666667rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.page1 .top .top2 {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
left: 0.6666666667rem;
|
||||
top: 7.3333333333rem;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
.page1 .top .top2 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.page1 .top .top2 .tx {
|
||||
width: 2.3733333333rem;
|
||||
height: 2.3733333333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.8266666667rem;
|
||||
}
|
||||
.page1 .top .top2 .name {
|
||||
width: 83%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 3.7866666667rem;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.page1 .top .top2 .name b {
|
||||
max-width: 2.6rem;
|
||||
text-align: right;
|
||||
color: #FFF783;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.page1 .top .top2 .name img {
|
||||
display: inline-block;
|
||||
width: 1.0266666667rem;
|
||||
height: 0.48rem;
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
.page1 .top .top2 .id {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 4.3733333333rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.page1 .top .top2 .score {
|
||||
height: 0.88rem;
|
||||
line-height: 0.88rem;
|
||||
position: absolute;
|
||||
top: 4.9333333333rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url(../images/score_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0.1333333333rem;
|
||||
min-width: 2.4rem;
|
||||
}
|
||||
.page1 .top .top2 .score b {
|
||||
color: #2D2A00;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .top .top2 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.4266666667rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.page1 .top .top3 {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
right: 0.6666666667rem;
|
||||
top: 7.3333333333rem;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
.page1 .top .top3 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.page1 .top .top3 .tx {
|
||||
width: 2.3733333333rem;
|
||||
height: 2.3733333333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.8266666667rem;
|
||||
}
|
||||
.page1 .top .top3 .name {
|
||||
width: 83%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 3.7866666667rem;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.page1 .top .top3 .name b {
|
||||
max-width: 2.6rem;
|
||||
text-align: right;
|
||||
color: #FFF783;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.page1 .top .top3 .name img {
|
||||
display: inline-block;
|
||||
width: 1.0266666667rem;
|
||||
height: 0.48rem;
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
.page1 .top .top3 .id {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 4.3733333333rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.page1 .top .top3 .score {
|
||||
height: 0.88rem;
|
||||
line-height: 0.88rem;
|
||||
position: absolute;
|
||||
top: 4.9333333333rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url(../images/score_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0.1333333333rem;
|
||||
min-width: 2.4rem;
|
||||
}
|
||||
.page1 .top .top3 .score b {
|
||||
color: #2D2A00;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .top .top3 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.4266666667rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.page1 .bottom {
|
||||
width: 10rem;
|
||||
height: 0.6666666667rem;
|
||||
background: url(../images/bottomBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -0.2rem auto 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.page1 .content {
|
||||
width: 10rem;
|
||||
height: auto;
|
||||
margin: 0 auto 0;
|
||||
background: url(../images/contentBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page1 .content ul {
|
||||
width: 8.8rem;
|
||||
margin: 0.3733333333rem auto 0rem;
|
||||
}
|
||||
.page1 .content ul li {
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, #9F0141, #760231);
|
||||
margin-bottom: 0.3466666667rem;
|
||||
overflow: hidden;
|
||||
padding: 0 0.32rem 0.2533333333rem 0.2rem;
|
||||
box-sizing: border-box;
|
||||
background: url(../images/li_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page1 .content ul li .num {
|
||||
float: left;
|
||||
width: 0.5333333333rem;
|
||||
line-height: 1.5466666667rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.4266666667rem;
|
||||
font-weight: 600;
|
||||
margin-right: 0.36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page1 .content ul li .tx {
|
||||
float: left;
|
||||
width: 1.1066666667rem;
|
||||
height: 1.1066666667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.0266666667rem solid #FFF783;
|
||||
display: block;
|
||||
margin-top: 0.2533333333rem;
|
||||
margin-right: 0.1866666667rem;
|
||||
margin-left: 0.1866666667rem;
|
||||
}
|
||||
.page1 .content ul li .info {
|
||||
float: left;
|
||||
margin-top: 0.3333333333rem;
|
||||
}
|
||||
.page1 .content ul li .info p {
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.1333333333rem;
|
||||
display: flex;
|
||||
}
|
||||
.page1 .content ul li .info p b {
|
||||
max-width: 1.9rem;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF783;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .content ul li .info p img {
|
||||
display: inline-block;
|
||||
width: 1.0266666667rem;
|
||||
height: 0.48rem;
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
.page1 .content ul li .info span {
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
.page1 .content ul li .score {
|
||||
display: flex;
|
||||
height: 0.88rem;
|
||||
line-height: 0.88rem;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: url(../images/score_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0.1333333333rem;
|
||||
min-width: 2.4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.page1 .content ul li .score img {
|
||||
display: inline-block;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.4266666667rem;
|
||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.page1 .content ul li .score b {
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #2D2A00;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.page1 .content .more {
|
||||
width: 1.6533333333rem;
|
||||
height: 0.5866666667rem;
|
||||
line-height: 0.5866666667rem;
|
||||
text-align: center;
|
||||
padding: 0 0.4533333333rem;
|
||||
margin: 0 auto 0.3rem;
|
||||
color: #FFF783;
|
||||
border: 0.0266666667rem solid #FFF783;
|
||||
border-radius: 0.5866666667rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .my {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
background: #500000;
|
||||
border-radius: 0.24rem 0.24rem 0px 0px;
|
||||
border: 0.04rem solid #FFF783;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.52rem 0.2rem 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page1 .my .num {
|
||||
float: left;
|
||||
width: 0.5333333333rem;
|
||||
height: 100%;
|
||||
line-height: 1.7333333333rem;
|
||||
color: #FFF783;
|
||||
font-size: 0.4266666667rem;
|
||||
font-weight: 600;
|
||||
margin-right: 0.36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page1 .my .tx {
|
||||
float: left;
|
||||
width: 1.1066666667rem;
|
||||
height: 1.1066666667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.0266666667rem solid #FFF783;
|
||||
display: block;
|
||||
margin-top: 0.2133333333rem;
|
||||
margin-right: 0.1866666667rem;
|
||||
margin-left: 0.1866666667rem;
|
||||
}
|
||||
.page1 .my .info {
|
||||
float: left;
|
||||
margin-top: 0.3333333333rem;
|
||||
}
|
||||
.page1 .my .info p {
|
||||
height: 0.48rem;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.1333333333rem;
|
||||
}
|
||||
.page1 .my .info p b {
|
||||
max-width: 2rem;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF783;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page1 .my .info p img {
|
||||
display: inline-block;
|
||||
width: 1.0266666667rem;
|
||||
height: 0.48rem;
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
.page1 .my .info span {
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
.page1 .my .score {
|
||||
display: flex;
|
||||
height: 0.88rem;
|
||||
line-height: 0.88rem;
|
||||
background: url(../images/score_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 0.1333333333rem;
|
||||
min-width: 2.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
.page1 .my .score img {
|
||||
display: inline-block;
|
||||
width: 0.4266666667rem;
|
||||
height: 0.4266666667rem;
|
||||
margin: 0 0.0666666667rem 0 0.0666666667rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.page1 .my .score b {
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #2D2A00;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page2 {
|
||||
display: none;
|
||||
margin: -0.5rem auto 0;
|
||||
}
|
||||
.page2 .top {
|
||||
width: 10rem;
|
||||
height: 2.1333333333rem;
|
||||
position: relative;
|
||||
margin: 0 auto -0.2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page2 .top .tab {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0rem auto 0;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
gap: 0.2666666667rem;
|
||||
padding: 0 0.5333333333rem;
|
||||
}
|
||||
.page2 .top .tab div {
|
||||
width: 4.3333333333rem;
|
||||
height: 1rem;
|
||||
color: #4D0D00;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: 800;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page2 .top .tab .act {
|
||||
background: url(../images/actTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page2 .bottom {
|
||||
width: 10rem;
|
||||
height: 0.6666666667rem;
|
||||
background: url(../images/bottomBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -0.2rem auto 0;
|
||||
}
|
||||
.page2 .content {
|
||||
width: 10rem;
|
||||
margin: 0 auto 0;
|
||||
background: url(../images/rewardBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page2 .content .box {
|
||||
width: 10rem;
|
||||
height: 29.04rem;
|
||||
margin: 0.2rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.page2 .content .box .bo {
|
||||
position: absolute;
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
left: 1.88rem;
|
||||
}
|
||||
.page2 .content .box .bo1 {
|
||||
top: 9.92rem;
|
||||
}
|
||||
.page2 .content .box .bo2 {
|
||||
top: 23rem;
|
||||
}
|
||||
.page2 .content .box .bo3 {
|
||||
top: 38.56rem;
|
||||
}
|
||||
|
||||
.rules {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
}
|
||||
.rules .rule_in {
|
||||
width: 10rem;
|
||||
height: 6.4266666667rem;
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.rules .rule_in .close {
|
||||
position: absolute;
|
||||
width: 0.9066666667rem;
|
||||
height: 0.9066666667rem;
|
||||
right: 0.2666666667rem;
|
||||
top: -0.08rem;
|
||||
}
|
||||
.rules .rule_in .titles {
|
||||
width: 7.5066666667rem;
|
||||
height: 1.8533333333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.1066666667rem;
|
||||
text-align: center;
|
||||
color: #4D0D00;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.6133333333rem;
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rules .rule_in .text {
|
||||
width: 8.2266666667rem;
|
||||
height: 6.2rem;
|
||||
overflow-y: scroll;
|
||||
color: #FFF783;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.56rem;
|
||||
margin: 2.1333333333rem auto 0;
|
||||
}
|
||||
.rules .rule_in .text::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottomText {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFF783;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 400;
|
||||
margin: 0.6666666667rem auto 2.4rem;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
.video video {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 65%;
|
||||
}
|
||||
.video .close {
|
||||
width: 0.9066666667rem;
|
||||
height: 0.9066666667rem;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
right: 0.9333333333rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.arabic .header {
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.arabic .page1 .content ul li .score {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
.arabic .page1 .my .score {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
1001
view/molistar/activity/2025-YemenUnityDay/css/index.scss
Normal file
BIN
view/molistar/activity/2025-YemenUnityDay/images/actTab.png
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/bo.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/bottomBg.png
Normal file
After Width: | Height: | Size: 8.1 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/box.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/close.png
Normal file
After Width: | Height: | Size: 3.6 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/contentBg.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/giftBox.png
Normal file
After Width: | Height: | Size: 276 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/header.png
Normal file
After Width: | Height: | Size: 662 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/li_bg.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/logo.png
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rewardBg.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/ruleTitle.png
Normal file
After Width: | Height: | Size: 247 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/rule_icon.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/sGiftBox.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/score_bg.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/tab.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/timeBox_in.png
Normal file
After Width: | Height: | Size: 6.5 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/time_bg.png
Normal file
After Width: | Height: | Size: 89 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/title.png
Normal file
After Width: | Height: | Size: 63 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top1.png
Normal file
After Width: | Height: | Size: 207 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top2.png
Normal file
After Width: | Height: | Size: 96 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/top3.png
Normal file
After Width: | Height: | Size: 96 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/topBg.png
Normal file
After Width: | Height: | Size: 730 KiB |
BIN
view/molistar/activity/2025-YemenUnityDay/images/travel/back.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.9 KiB |
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
@@ -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: "YemenUnityDay" },
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
// 处理日期
|
||||
// var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
||||
// var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
|
||||
// $('.header .date .text22').text(`${startTime} - ${endTime}`);
|
||||
// 处理倒计时
|
||||
countup(res.data.endTime - res.timestamp);
|
||||
// 处理限定礼物
|
||||
res.data.gifts.forEach((res, i) => {
|
||||
$(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
|
||||
$(`.giftBox .gift .gift${i} span`).text(res.giftName);
|
||||
})
|
||||
// 处理榜单
|
||||
var listTo3 = res.data.rankList.slice(0, 3);
|
||||
notListTo3 = res.data.rankList.slice(3);
|
||||
// 处理前三
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
name: langReplace(localLang.demoModule.waiting),
|
||||
erbanNo: null,
|
||||
totalNum: null
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
}
|
||||
listTo3.forEach((res, i) => {
|
||||
$(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.page1 .top .top${i + 1} .name b`).text(res.name);
|
||||
$(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
|
||||
$(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
|
||||
$(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
|
||||
if (res.erbanNo == null) {
|
||||
$(`.page1 .top .top${i + 1} .name img`).hide();
|
||||
$(`.page1 .top .top${i + 1} .id`).hide();
|
||||
$(`.page1 .top .top${i + 1} .score`).hide();
|
||||
}
|
||||
})
|
||||
// 非前三
|
||||
loadMore();
|
||||
// 处理自己榜单数据
|
||||
var my = res.data.myRank;
|
||||
$('.page1 .my .tx').attr("src", my.avatar);
|
||||
$('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
|
||||
$('.page1 .my .info p b').text(my.name);
|
||||
$('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
|
||||
$('.page1 .my .info span').text(`ID:${my.erbanNo}`);
|
||||
$('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 加載數據函數
|
||||
function loadMore() {
|
||||
// 計算加載範圍
|
||||
pageSize = loadedCount == 0 ? 7 : 10;
|
||||
const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
|
||||
let str = '';
|
||||
|
||||
// 拼接 HTML
|
||||
nextItems.forEach(res => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="num">${res.rank}</div>
|
||||
<img src="${res.avatar}" alt="" class="tx">
|
||||
<div class="info">
|
||||
<p>
|
||||
<b>${res.name}</b>
|
||||
<img src="${res.userLevelVo.experUrl}" alt="" class="icon">
|
||||
</p>
|
||||
<span>ID:${res.erbanNo}</span>
|
||||
</div>
|
||||
<div class="score">
|
||||
<img src="./images/box.png" alt="">
|
||||
<b>${unitProcessingAr(res.totalNum, 2)}</b>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
// 將數據插入到列表中
|
||||
$('.page1 .content ul').append(str);
|
||||
// 更新已加載的數據數量
|
||||
loadedCount += nextItems.length;
|
||||
// 如果數據全部加載完成,隱藏按鈕
|
||||
console.log(loadedCount >= notListTo3.length);
|
||||
console.log(notListTo3.length);
|
||||
if (loadedCount >= notListTo3.length) {
|
||||
$('.page1 .content .more').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// 綁定按鈕點擊事件
|
||||
$('.page1 .content .more').click(function () {
|
||||
loadMore();
|
||||
})
|
||||
|
||||
// 初次加載數據
|
||||
// tab切换
|
||||
$('.page1 .top .tab div,.page2 .top .tab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$('.page1,.page2').hide();
|
||||
$(`.page${i}`).show();
|
||||
if (i == 1) {
|
||||
$('.bottomText').css('margin', '0.66667rem auto 2.4rem');
|
||||
} else {
|
||||
$('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
|
||||
}
|
||||
})
|
||||
// 打开规则
|
||||
$('.rule').click(function () {
|
||||
$('.rules').show();
|
||||
bodyScroolFun(true);
|
||||
})
|
||||
// 关闭规则
|
||||
$('.rules .rule_in .close').click(function () {
|
||||
$('.rules').hide();
|
||||
bodyScroolFun(false);
|
||||
})
|
||||
|
||||
// 倒計時
|
||||
function countup(leftTime) {
|
||||
clearTimeout(countupTime)
|
||||
//獲取當前時間
|
||||
// var now = nowTime;
|
||||
var d = 0;
|
||||
var h = 0;
|
||||
var m = 0;
|
||||
var s = 0;
|
||||
//定義變數 d,h,m,s保存倒計時的時間
|
||||
var d, h, m, s;
|
||||
//遞歸每秒調⽤countTime⽅法,顯⽰動態時間效果
|
||||
if (leftTime > 0) {
|
||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||||
//將倒計時賦值到div中
|
||||
$('.timeBox .days span').text(d);
|
||||
$('.timeBox .hours span').text(h);
|
||||
$('.timeBox .mins span').text(m);
|
||||
$('.timeBox .secs span').text(s);
|
||||
} else {
|
||||
getConfig();
|
||||
}
|
||||
if (leftTime > 0) {
|
||||
leftTime = leftTime - 1000;
|
||||
}
|
||||
countupTime = setTimeout(function () {
|
||||
countup(leftTime);
|
||||
}, 1000);
|
||||
}
|
||||
//补0操作
|
||||
function getzf(num) {
|
||||
if (parseInt(num) < 10) {
|
||||
num = '0' + num;
|
||||
}
|
||||
return num;
|
||||
}
|
||||
|
30
view/molistar/activity/2025-YemenUnityDay/local/ar.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: `جارٍ التحميل...`,
|
||||
layerIndex2: `نجاح`,
|
||||
layerIndex3: `خطأ في الشبكة`,
|
||||
text1: `عيد الوحدة اليمنية`,
|
||||
text3: `القواعد`,
|
||||
text4:'هدايا المناسبات',
|
||||
text6: `أيام`,
|
||||
text7: `ساعات`,
|
||||
text8: `دقائق`,
|
||||
text9: `ثواني`,
|
||||
text10: `التصنيف`,
|
||||
text11: `المكافآت`,
|
||||
text12: `حدث لا علاقة له بشركة آبل`,
|
||||
text122: `حدث غير مرتبط بجوجل`,
|
||||
text133: `القواعد`,
|
||||
text13: `<P>1.خلال فترة الحدث، يمكنك الانضمام إلى الترتيب عن طريق إرسال الدول المعينة.</p>
|
||||
<P>2.في نهاية الحدث، سيحصل أفضل 3 مستخدمين على مكافأة سخية.</p>
|
||||
<P>3.سيتم دفع المكافآت في اليوم التالي لانتهاء الحدث</p>
|
||||
<P>4.لا علاقة للحدث بـ Google/Apple.</p> `,
|
||||
more: `المزيد`,
|
||||
month: `شهر`,
|
||||
day: `يوم`,
|
||||
waiting: `في انتظار`,
|
||||
}
|
||||
|
||||
}
|
27
view/molistar/activity/2025-YemenUnityDay/local/en.js
Normal file
@@ -0,0 +1,27 @@
|
||||
langEn = {
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Yemen Unity Day`,
|
||||
text3:`Rules`,
|
||||
text4:`Event Gifts`,
|
||||
text6: `Days`,
|
||||
text7: `Hours`,
|
||||
text8: `Mins`,
|
||||
text9: `Secs`,
|
||||
text10: `Ranking`,
|
||||
text11: `Rewards`,
|
||||
text12: `Event not related to Apple.`,
|
||||
text122: `Event not related to Google.`,
|
||||
text133: `Rules`,
|
||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
||||
more: 'More',
|
||||
month: 'Month',
|
||||
day: 'Day',
|
||||
waiting: 'Waiting',
|
||||
},
|
||||
}
|
29
view/molistar/activity/2025-YemenUnityDay/local/tr.js
Normal file
@@ -0,0 +1,29 @@
|
||||
langTr = {
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Yemen Unity Day`,
|
||||
text3:`Rules`,
|
||||
text4:`Event Gifts`,
|
||||
text6: `Days`,
|
||||
text7: `Hours`,
|
||||
text8: `Mins`,
|
||||
text9: `Secs`,
|
||||
text10: `Ranking`,
|
||||
text11: `Rewards`,
|
||||
text12: `Event not related to Apple.`,
|
||||
text122: `Event not related to Google.`,
|
||||
text133: `Rules`,
|
||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
||||
more: 'More',
|
||||
month: 'Month',
|
||||
day: 'Day',
|
||||
waiting: 'Waiting',
|
||||
},
|
||||
|
||||
|
||||
}
|
30
view/molistar/activity/2025-YemenUnityDay/local/zh.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
layerIndex2: `Success`,
|
||||
layerIndex3: `Network error`,
|
||||
text1:`Yemen Unity Day`,
|
||||
text3:`Rules`,
|
||||
text4:`Event Gifts`,
|
||||
text6: `Days`,
|
||||
text7: `Hours`,
|
||||
text8: `Mins`,
|
||||
text9: `Secs`,
|
||||
text10: `Ranking`,
|
||||
text11: `Rewards`,
|
||||
text12: `Event not related to Apple.`,
|
||||
text122: `Event not related to Google.`,
|
||||
text133: `Rules`,
|
||||
text13: `<p>1.During the event period, you can join the ranking by sending the designated countries.</p>
|
||||
<p>2.At the end of the event, the Top3 users will receive a generous reward.</p>
|
||||
<p>3.Rewards will be paid out the day after the event ends</p>
|
||||
<p>4.Event has nothing to do with Google/Apple.</p>`,
|
||||
more: 'More',
|
||||
month: 'Month',
|
||||
day: 'Day',
|
||||
waiting: 'Waiting',
|
||||
},
|
||||
|
||||
}
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 26 KiB |
673
view/molistar/activity/luckyNumbers/css/index.css
Normal file
@@ -0,0 +1,673 @@
|
||||
@charset "UTF-8";
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.5866666667rem;
|
||||
line-height: 0.5866666667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 1.4666666667rem;
|
||||
padding-bottom: 0.2933333333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
}
|
||||
.back img {
|
||||
width: 0.5866666667rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
}
|
||||
|
||||
.top_bg {
|
||||
background-image: url("../images/top_bg.png");
|
||||
background-size: 100% 100%;
|
||||
height: 14.3066666667rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.top_bg .countdown_box {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 24%;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.top_bg .countdown_box .time_kuang {
|
||||
position: relative;
|
||||
}
|
||||
.top_bg .countdown_box .time_kuang img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
.top_bg .countdown_box .time_kuang .time_text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5866666667rem;
|
||||
color: #FDF565;
|
||||
line-height: 1.2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.2533333333rem;
|
||||
}
|
||||
.top_bg .countdown_box .time_kuang .time_type {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
text-align: center;
|
||||
margin-top: 0.1333333333rem;
|
||||
}
|
||||
.top_bg .tip_chang {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
}
|
||||
.top_bg .tip_chang .tip_txt {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
.top_bg .conis_bg {
|
||||
position: absolute;
|
||||
top: 76%;
|
||||
padding: 0 1.3333333333rem;
|
||||
}
|
||||
.top_bg .conis_bg .conis_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
.top_bg .conis_bg .conis_txt .num {
|
||||
font-size: 0.7466666667rem;
|
||||
margin: 0 0.1066666667rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.top_bg .conis_bg .conis_txt img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
}
|
||||
.top_bg .rules {
|
||||
background-image: url("../images/rules.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: 1.52rem;
|
||||
height: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0.2666666667rem;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.describe_box {
|
||||
background-image: url("../images/shuoming_kuang.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.describe_box .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
padding: 0.7466666667rem 0.9333333333rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reward_wrap {
|
||||
background-image: url("../images/reward_kuang.png");
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding: 0.6666666667rem 0.9333333333rem;
|
||||
margin: 0.4266666667rem 0.2rem 0;
|
||||
}
|
||||
.reward_wrap .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.48rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
.reward_wrap .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.reward_wrap img {
|
||||
width: 5.9866666667rem;
|
||||
height: 2.5866666667rem;
|
||||
margin-top: 0.3466666667rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
background-image: url("../images/xysz_bg1.png");
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1.0666666667rem;
|
||||
margin: 0.4533333333rem 0.1866666667rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.fortunate_number .tip_chang {
|
||||
background-image: url("../images/tip_chang.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.fortunate_number .tip_chang .tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
padding: 0.2666666667rem;
|
||||
text-align: center;
|
||||
}
|
||||
.fortunate_number .today_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
margin-top: 0.6666666667rem;
|
||||
text-align: center;
|
||||
}
|
||||
.fortunate_number .num_show {
|
||||
background-image: url("../images/num_jiqi.png");
|
||||
background-size: 100% 100%;
|
||||
width: 5.2266666667rem;
|
||||
height: 2.88rem;
|
||||
margin: 0.32rem auto 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt .no_animation,
|
||||
.fortunate_number .num_show .right_txt .no_animation {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 1.7333333333rem;
|
||||
color: #FFF783;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: 0.04rem #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt .animation_box,
|
||||
.fortunate_number .num_show .right_txt .animation_box {
|
||||
display: none;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt .animation_box .txt_container,
|
||||
.fortunate_number .num_show .right_txt .animation_box .txt_container {
|
||||
animation: scrollUpDown 2s linear infinite; /* 线性无限循环 */
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt .animation_box .txt_container .txt,
|
||||
.fortunate_number .num_show .right_txt .animation_box .txt_container .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 1.7333333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: 0.04rem #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 1.3333333333rem 0;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt {
|
||||
position: absolute;
|
||||
top: 0.7733333333rem;
|
||||
left: 1.0933333333rem;
|
||||
}
|
||||
.fortunate_number .num_show .right_txt {
|
||||
position: absolute;
|
||||
top: 0.7733333333rem;
|
||||
right: 1.0666666667rem;
|
||||
}
|
||||
@keyframes scrollUpDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-33%);
|
||||
}
|
||||
}
|
||||
.fortunate_number .history_btn {
|
||||
background-image: url("../images/rules.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: 1.52rem;
|
||||
height: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0.2666666667rem;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
right: 0.1866666667rem;
|
||||
}
|
||||
|
||||
.fortunate_bottom {
|
||||
background-image: url("../images/xysz_bg2.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 0 0.1866666667rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.9333333333rem;
|
||||
}
|
||||
.fortunate_bottom .participate_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5333333333rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5333333333rem 0;
|
||||
margin: 0 1.8666666667rem;
|
||||
}
|
||||
.fortunate_bottom .participate_btn img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
margin: 0 0.1066666667rem;
|
||||
}
|
||||
.fortunate_bottom .participate_btn span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.fortunate_bottom .my_number {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.1866666667rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
padding: 0.24rem 0.3466666667rem;
|
||||
margin: 0.2133333333rem 0.5333333333rem;
|
||||
}
|
||||
.fortunate_bottom .my_history {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
text-decoration-line: underline;
|
||||
margin-top: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup_sumbit {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
/* 确保弹窗在最顶层 */
|
||||
}
|
||||
.popup_sumbit .popup_content {
|
||||
background-image: url("../images/popup_bg.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 9.6rem;
|
||||
padding: 0.8rem 0 0.5333333333rem;
|
||||
}
|
||||
.popup_sumbit .popup_content .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
}
|
||||
.popup_sumbit .popup_content .my_number {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 0.1866666667rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
padding: 0.24rem 0.3466666667rem;
|
||||
margin: 0.2133333333rem 0.5333333333rem;
|
||||
}
|
||||
.popup_sumbit .popup_content .number_selector {
|
||||
background-image: url("../images/select_bg.png");
|
||||
background-size: 100% 100%;
|
||||
width: 4.56rem;
|
||||
height: 2.9333333333rem;
|
||||
margin: 0.2666666667rem auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.0666666667rem;
|
||||
}
|
||||
.popup_sumbit .popup_content .number_selector .swiper {
|
||||
height: 2.6666666667rem;
|
||||
}
|
||||
.popup_sumbit .popup_content .number_selector .swiper-slide-active,
|
||||
.popup_sumbit .popup_content .number_selector .swiper-slide-prev,
|
||||
.popup_sumbit .popup_content .number_selector .swiper-slide-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.popup_sumbit .popup_content .number_selector .swiper-slide {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 1.2266666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.8rem;
|
||||
text-stroke: 0.04rem #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 0%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: 0.04rem #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.popup_sumbit .popup_content .sumbit_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5333333333rem;
|
||||
color: #5D2600;
|
||||
line-height: 0.48rem;
|
||||
padding: 0.4rem 1.0666666667rem;
|
||||
margin: 0rem 2.6666666667rem;
|
||||
text-align: center;
|
||||
}
|
||||
.popup_sumbit .popup_content .tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #FFF784;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
margin-top: 0.1866666667rem;
|
||||
padding-bottom: 0.2666666667rem;
|
||||
}
|
||||
.popup_sumbit .popup_content .close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
}
|
||||
.popup_sumbit .popup_content .close_btn img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.popup_history {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
/* 确保弹窗在最顶层 */
|
||||
}
|
||||
.popup_history .popup_content {
|
||||
background-image: url("../images/popup_bg.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 9.6rem;
|
||||
padding: 0.8rem 0 0.5333333333rem;
|
||||
height: 9.2rem;
|
||||
}
|
||||
.popup_history .popup_content .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
}
|
||||
.popup_history .popup_content .tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.5066666667rem;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
}
|
||||
.popup_history .popup_content .close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
}
|
||||
.popup_history .popup_content .close_btn img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.popup_history .popup_content .history_list {
|
||||
height: 7.7333333333rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.popup_history .popup_content .history_list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.24rem;
|
||||
padding: 0.4666666667rem 0.4rem;
|
||||
margin: 0.2666666667rem 0.9333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .left .Fortunate_Number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.5066666667rem;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .left .time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.5066666667rem;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .right {
|
||||
background-image: url("../images/num_jiqi.png");
|
||||
background-size: 100% 100%;
|
||||
width: 2.2666666667rem;
|
||||
height: 1.24rem;
|
||||
position: relative;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .right .left_txt,
|
||||
.popup_history .popup_content .history_list .history_box .right .right_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.7466666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.24rem;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: 0.04rem #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .right .left_txt {
|
||||
position: absolute;
|
||||
top: 0.4666666667rem;
|
||||
left: 0.4533333333rem;
|
||||
}
|
||||
.popup_history .popup_content .history_list .history_box .right .right_txt {
|
||||
position: absolute;
|
||||
top: 0.4666666667rem;
|
||||
right: 0.4533333333rem;
|
||||
}
|
||||
|
||||
.popup_rule {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
/* 确保弹窗在最顶层 */
|
||||
}
|
||||
.popup_rule .popup_content {
|
||||
background-image: url("../images/popup_bg.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 9.6rem;
|
||||
padding: 0.8rem 0 0.5333333333rem;
|
||||
height: 9.2rem;
|
||||
}
|
||||
.popup_rule .popup_content .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
}
|
||||
.popup_rule .popup_content .detail_txt {
|
||||
height: 7.7333333333rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.popup_rule .popup_content .detail_txt::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.popup_rule .popup_content .detail_txt .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
margin: 0 0.8rem;
|
||||
}
|
||||
.popup_rule .popup_content .close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
}
|
||||
.popup_rule .popup_content .close_btn img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.popup_congratulations {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
/* 确保弹窗在最顶层 */
|
||||
}
|
||||
.popup_congratulations .popup_content {
|
||||
background-image: url("../images/popup_bg.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 9.6rem;
|
||||
padding: 0.8rem 0 0.5333333333rem;
|
||||
}
|
||||
.popup_congratulations .popup_content .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
}
|
||||
.popup_congratulations .popup_content .detail_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.5066666667rem;
|
||||
text-align: center;
|
||||
margin: 0.6266666667rem 0.8rem;
|
||||
}
|
||||
.popup_congratulations .popup_content .go_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5333333333rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.4rem 1.3333333333rem;
|
||||
margin: 0.48rem 2.6666666667rem;
|
||||
}
|
||||
.popup_congratulations .popup_content .close_btn {
|
||||
position: absolute;
|
||||
top: -15%;
|
||||
right: 2%;
|
||||
}
|
||||
.popup_congratulations .popup_content .close_btn img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.arabic .top_bg {
|
||||
background-image: url("../images/top_bg-ar.png");
|
||||
}
|
779
view/molistar/activity/luckyNumbers/css/index.scss
Normal file
@@ -0,0 +1,779 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: px2rem(110);
|
||||
padding-bottom: px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
|
||||
img {
|
||||
width: px2rem(44);
|
||||
height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
// top: px2rem(0);
|
||||
}
|
||||
}
|
||||
|
||||
.top_bg {
|
||||
background-image: url("../images/top_bg.png");
|
||||
background-size: 100% 100%;
|
||||
height: px2rem(1073);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.countdown_box {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 24%;
|
||||
display: flex;
|
||||
gap: px2rem(60);
|
||||
|
||||
.time_kuang {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: px2rem(90);
|
||||
height: px2rem(90);
|
||||
}
|
||||
|
||||
.time_text {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(44);
|
||||
color: #FDF565;
|
||||
line-height: px2rem(90);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: px2rem(19)
|
||||
}
|
||||
|
||||
.time_type {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
text-align: center;
|
||||
margin-top: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip_chang {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
|
||||
.tip_txt {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.conis_bg {
|
||||
position: absolute;
|
||||
top: 76%;
|
||||
padding: 0 px2rem(100);
|
||||
|
||||
.conis_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(30);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
font-size: px2rem(56);
|
||||
margin: 0 px2rem(8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rules {
|
||||
background-image: url('../images/rules.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: px2rem(114);
|
||||
height: px2rem(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: px2rem(20);
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.describe_box {
|
||||
background-image: url('../images/shuoming_kuang.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(56) px2rem(70);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.reward_wrap {
|
||||
background-image: url('../images/reward_kuang.png');
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding: px2rem(50) px2rem(70);
|
||||
margin: px2rem(32) px2rem(15) 0;
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(36);
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
margin-top: px2rem(30);
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(449);
|
||||
height: px2rem(194);
|
||||
margin-top: px2rem(26);
|
||||
margin-bottom: px2rem(30);
|
||||
}
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
background-image: url('../images/xysz_bg1.png');
|
||||
background-size: 100% 100%;
|
||||
padding-top: px2rem(80);
|
||||
margin: px2rem(34) px2rem(14) 0;
|
||||
position: relative;
|
||||
|
||||
.tip_chang {
|
||||
background-image: url('../images/tip_chang.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
padding: px2rem(20);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.today_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
margin-top: px2rem(50);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.num_show {
|
||||
background-image: url('../images/num_jiqi.png');
|
||||
background-size: 100% 100%;
|
||||
width: px2rem(392);
|
||||
height: px2rem(216);
|
||||
margin: px2rem(24) auto 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.left_txt,
|
||||
.right_txt {
|
||||
|
||||
.no_animation{
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(130);
|
||||
color: #FFF783;
|
||||
// line-height: px2rem(42);
|
||||
// text-stroke: px2rem(3) #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: px2rem(3) #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.animation_box{
|
||||
display: none;
|
||||
|
||||
.txt_container{
|
||||
animation: scrollUpDown 2s linear infinite; /* 线性无限循环 */
|
||||
animation-play-state: paused;
|
||||
.txt{
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(130);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
// text-stroke: px2rem(3) #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: px2rem(3) #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: px2rem(100) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.left_txt {
|
||||
position: absolute;
|
||||
top: px2rem(58);
|
||||
left: px2rem(82);
|
||||
}
|
||||
|
||||
.right_txt {
|
||||
position: absolute;
|
||||
top: px2rem(58);
|
||||
right: px2rem(80);
|
||||
}
|
||||
|
||||
@keyframes scrollUpDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-33%);
|
||||
}
|
||||
}
|
||||
|
||||
// .left_txt,
|
||||
// .right_txt {
|
||||
// animation: scrollUpDown 0.5s linear infinite;;
|
||||
// animation-play-state: paused;
|
||||
// /* 默认暂停 */
|
||||
// }
|
||||
}
|
||||
|
||||
.history_btn {
|
||||
background-image: url('../images/rules.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: px2rem(114);
|
||||
height: px2rem(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: px2rem(20);
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
right: px2rem(14);
|
||||
}
|
||||
}
|
||||
|
||||
.fortunate_bottom {
|
||||
background-image: url('../images/xysz_bg2.png');
|
||||
background-size: 100% 100%;
|
||||
margin: 0 px2rem(14);
|
||||
padding-top: px2rem(30);
|
||||
padding-bottom: px2rem(70);
|
||||
|
||||
.participate_btn {
|
||||
background-image: url('../images/participate_btn.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(40);
|
||||
color: #5D2600;
|
||||
// line-height: px2rem(36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(40) 0;
|
||||
margin: 0 px2rem(140);
|
||||
|
||||
img {
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
margin: 0 px2rem(8);
|
||||
}
|
||||
span{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.my_number {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: px2rem(14);
|
||||
// opacity: 0.8;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(18) px2rem(26);
|
||||
margin: px2rem(16) px2rem(40);
|
||||
}
|
||||
|
||||
.my_history {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
text-decoration-line: underline;
|
||||
margin-top: px2rem(30);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_sumbit {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
|
||||
/* 确保弹窗在最顶层 */
|
||||
.popup_content {
|
||||
background-image: url('../images/popup_bg.png');
|
||||
background-size: 100% 100%;
|
||||
// margin: 0 px2rem(14);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(720);
|
||||
padding: px2rem(60) 0 px2rem(40);
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my_number {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: px2rem(14);
|
||||
// opacity: 0.8;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(18) px2rem(26);
|
||||
margin: px2rem(16) px2rem(40);
|
||||
}
|
||||
|
||||
.number_selector {
|
||||
background-image: url('../images/select_bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: px2rem(342);
|
||||
height: px2rem(220);
|
||||
margin: px2rem(20) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: px2rem(80);
|
||||
|
||||
.swiper {
|
||||
height: px2rem(200);
|
||||
}
|
||||
|
||||
.swiper-slide-active,
|
||||
.swiper-slide-prev,
|
||||
.swiper-slide-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(92);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(60);
|
||||
text-stroke: px2rem(3) #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 0%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: px2rem(3) #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sumbit_btn {
|
||||
background-image: url('../images/participate_btn.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(40);
|
||||
color: #5D2600;
|
||||
line-height: px2rem(36);
|
||||
padding: px2rem(30) px2rem(80);
|
||||
margin: px2rem(0) px2rem(200);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #FFF784;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
margin-top: px2rem(14);
|
||||
padding-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
|
||||
img {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_history {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
|
||||
/* 确保弹窗在最顶层 */
|
||||
.popup_content {
|
||||
background-image: url('../images/popup_bg.png');
|
||||
background-size: 100% 100%;
|
||||
// margin: 0 px2rem(14);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(720);
|
||||
padding: px2rem(60) 0 px2rem(40);
|
||||
height: px2rem(690);
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(38);
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
|
||||
img {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
}
|
||||
|
||||
.history_list {
|
||||
height: px2rem(580);
|
||||
overflow-y: auto; // 超出高度时可滚动
|
||||
scrollbar-width: none; // 隐藏滚动条(Firefox)
|
||||
-ms-overflow-style: none; // 隐藏滚动条(IE 10+)
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
// 隐藏滚动条(Chrome, Safari, Opera)
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history_box {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: px2rem(18);
|
||||
padding: px2rem(35) px2rem(30);
|
||||
margin: px2rem(20) px2rem(70);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
.Fortunate_Number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(38);
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(38);
|
||||
margin-top: px2rem(20);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
background-image: url('../images/num_jiqi.png');
|
||||
background-size: 100% 100%;
|
||||
width: px2rem(170);
|
||||
height: px2rem(93);
|
||||
position: relative;
|
||||
|
||||
.left_txt,
|
||||
.right_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(56);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(18);
|
||||
// text-stroke: px2rem(3) #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: px2rem(3) #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.left_txt {
|
||||
position: absolute;
|
||||
top: px2rem(35);
|
||||
left: px2rem(34);
|
||||
}
|
||||
|
||||
.right_txt {
|
||||
position: absolute;
|
||||
top: px2rem(35);
|
||||
right: px2rem(34);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_rule {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
|
||||
/* 确保弹窗在最顶层 */
|
||||
.popup_content {
|
||||
background-image: url('../images/popup_bg.png');
|
||||
background-size: 100% 100%;
|
||||
// margin: 0 px2rem(14);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(720);
|
||||
padding: px2rem(60) 0 px2rem(40);
|
||||
height: px2rem(690);
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
margin-bottom: px2rem(40);
|
||||
}
|
||||
|
||||
.detail_txt {
|
||||
height: px2rem(580);
|
||||
overflow-y: auto; // 超出高度时可滚动
|
||||
scrollbar-width: none; // 隐藏滚动条(Firefox)
|
||||
-ms-overflow-style: none; // 隐藏滚动条(IE 10+)
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
// 隐藏滚动条(Chrome, Safari, Opera)
|
||||
display: none;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
margin: 0 px2rem(60);
|
||||
}
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
position: absolute;
|
||||
top: -12%;
|
||||
right: 2%;
|
||||
|
||||
img {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_congratulations {
|
||||
display: none;
|
||||
/* 初始状态下隐藏弹窗 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
|
||||
/* 确保弹窗在最顶层 */
|
||||
.popup_content {
|
||||
background-image: url('../images/popup_bg.png');
|
||||
background-size: 100% 100%;
|
||||
// margin: 0 px2rem(14);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(720);
|
||||
padding: px2rem(60) 0 px2rem(40);
|
||||
// height: px2rem(457);
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
margin-bottom: px2rem(40);
|
||||
}
|
||||
|
||||
.detail_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(38);
|
||||
text-align: center;
|
||||
margin: px2rem(47) px2rem(60);
|
||||
}
|
||||
|
||||
.go_btn {
|
||||
background-image: url('../images/participate_btn.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(40);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(30) px2rem(100);
|
||||
margin: px2rem(36) px2rem(200);
|
||||
}
|
||||
|
||||
|
||||
.close_btn {
|
||||
position: absolute;
|
||||
top: -15%;
|
||||
right: 2%;
|
||||
|
||||
img {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arabic{
|
||||
.top_bg {
|
||||
background-image: url("../images/top_bg-ar.png");
|
||||
}
|
||||
}
|
143
view/molistar/activity/luckyNumbers/css/myHistory.css
Normal file
@@ -0,0 +1,143 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 1.4666666667rem;
|
||||
padding-bottom: 0.2933333333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
background: #160900;
|
||||
}
|
||||
.back img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
}
|
||||
.back p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.content_list {
|
||||
margin: 2.6666666667rem 0.1866666667rem 0;
|
||||
}
|
||||
.content_list .content_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.04rem solid #FFE96E;
|
||||
padding: 0.5333333333rem 0.3466666667rem 0.2666666667rem;
|
||||
margin-top: 0.4rem;
|
||||
position: relative;
|
||||
}
|
||||
.content_list .content_box .Expired {
|
||||
position: absolute;
|
||||
background: #757575;
|
||||
border-radius: 0px 0.36rem 0px 0.36rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.1066666667rem 0.2933333333rem;
|
||||
top: 0;
|
||||
right: 0.0266666667rem;
|
||||
}
|
||||
.content_list .content_box .felx_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .fortunate_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF784;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .fortunate_number .number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.6666666667rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.content_list .content_box .felx_box .Receive_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.32rem 0.4266666667rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .view_results {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content_list .content_box .felx_box .view_results img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
.content_list .content_box .my_number {
|
||||
background: #000000;
|
||||
border-radius: 0.1866666667rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
margin-top: 0.3733333333rem;
|
||||
padding: 0.24rem 0.2933333333rem;
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.arabic .content_list .content_box .felx_box .view_results img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.arabic .content_list .content_box .Expired {
|
||||
left: 0.0266666667rem;
|
||||
display: flex;
|
||||
right: auto;
|
||||
border-radius: 0.36rem 0 0.36rem 0;
|
||||
}
|
168
view/molistar/activity/luckyNumbers/css/myHistory.scss
Normal file
@@ -0,0 +1,168 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(42);
|
||||
line-height: px2rem(42);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: px2rem(110);
|
||||
padding-bottom: px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
background: #160900;
|
||||
|
||||
img {
|
||||
width: px2rem(42);
|
||||
height: px2rem(42);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
}
|
||||
}
|
||||
|
||||
.content_list {
|
||||
margin: px2rem(200) px2rem(14) 0;
|
||||
|
||||
.content_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: px2rem(30);
|
||||
border: px2rem(3) solid #FFE96E;
|
||||
padding: px2rem(40) px2rem(26) px2rem(20);
|
||||
margin-top: px2rem(30);
|
||||
position: relative;
|
||||
|
||||
.Expired {
|
||||
position: absolute;
|
||||
background: #757575;
|
||||
border-radius: 0px px2rem(27) 0px px2rem(27);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(26);
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(8) px2rem(22);
|
||||
top: 0;
|
||||
right: px2rem(2);
|
||||
}
|
||||
|
||||
.felx_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
.time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF784;
|
||||
margin-top: px2rem(20);
|
||||
|
||||
.number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(50);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Receive_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(28);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(24) px2rem(32);
|
||||
}
|
||||
|
||||
.view_results {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_number {
|
||||
background: #000000;
|
||||
border-radius: px2rem(14);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
margin-top: px2rem(28);
|
||||
padding: px2rem(18) px2rem(22);
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: #000000;
|
||||
}
|
||||
.arabic{
|
||||
.content_list .content_box .felx_box .view_results img{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.content_list .content_box .Expired{
|
||||
left: px2rem(2);
|
||||
display: flex;
|
||||
right: auto;
|
||||
border-radius: px2rem(27) 0 px2rem(27) 0;
|
||||
}
|
||||
}
|
199
view/molistar/activity/luckyNumbers/css/resultsView.css
Normal file
@@ -0,0 +1,199 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 1.4666666667rem;
|
||||
padding-bottom: 0.2933333333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
}
|
||||
.back img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
}
|
||||
.back p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.top_img {
|
||||
position: relative;
|
||||
}
|
||||
.top_img img {
|
||||
width: 100%;
|
||||
}
|
||||
.top_img .conis_bg {
|
||||
background: url("../images/conis_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.7466666667rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.56rem 0;
|
||||
margin: 0 1.3333333333rem;
|
||||
position: absolute;
|
||||
bottom: -3%;
|
||||
width: 7.28rem;
|
||||
}
|
||||
.top_img .conis_bg .jackpot {
|
||||
font-weight: 600;
|
||||
}
|
||||
.top_img .conis_bg img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
margin-left: 0.1333333333rem;
|
||||
}
|
||||
|
||||
.Received_Successful {
|
||||
margin-top: 0.5066666667rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Put_wallet {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.receiverList {
|
||||
margin: 0.6133333333rem 0.2133333333rem 0;
|
||||
}
|
||||
.receiverList .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.receiverList .title img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
margin: 0 0.1066666667rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.04rem solid #FFE96E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.2666666667rem 0.3333333333rem;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .avatar img {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info {
|
||||
margin: 0 0.2933333333rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info .name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info .name .nick {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info .name .charmUrl,
|
||||
.receiverList .receiver_content .receiver_box .info .name .experUrl {
|
||||
width: 0.8rem;
|
||||
height: 0.3733333333rem;
|
||||
margin-left: 0.0666666667rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info .id {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
opacity: 0.5;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .info .date {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
opacity: 0.5;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .jackpot {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .jackpot .num {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5333333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
.receiverList .receiver_content .receiver_box .jackpot img {
|
||||
width: 0.5066666667rem;
|
||||
height: 0.5066666667rem;
|
||||
margin: 0 0.1066666667rem;
|
||||
}
|
||||
|
||||
.Only_data_30 {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #FFF784;
|
||||
line-height: 0.5066666667rem;
|
||||
opacity: 0.5;
|
||||
margin-top: 0.4933333333rem;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.No_one_pool {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
text-align: center;
|
||||
margin: 5.3333333333rem 0.6666666667rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arabic .receiverList .receiver_content .receiver_box .jackpot {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
242
view/molistar/activity/luckyNumbers/css/resultsView.scss
Normal file
@@ -0,0 +1,242 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(42);
|
||||
line-height: px2rem(42);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: px2rem(110);
|
||||
padding-bottom: px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
// background: #160900;
|
||||
|
||||
img {
|
||||
width: px2rem(42);
|
||||
height: px2rem(42);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
}
|
||||
}
|
||||
|
||||
// .top_bg{
|
||||
// position: fixed;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
.top_img {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.conis_bg {
|
||||
background: url("../images/conis_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(56);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(42) 0;
|
||||
margin: 0 px2rem(100);
|
||||
position: absolute;
|
||||
bottom: -3%;
|
||||
width: px2rem(546);
|
||||
|
||||
.jackpot {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
margin-left: px2rem(10);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Received_Successful {
|
||||
margin-top: px2rem(38);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(30);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Put_wallet {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
margin-top: px2rem(20);
|
||||
}
|
||||
|
||||
.receiverList {
|
||||
margin: px2rem(46) px2rem(16) 0;
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
margin: 0 px2rem(8);
|
||||
}
|
||||
}
|
||||
|
||||
.receiver_content {
|
||||
.receiver_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: px2rem(30);
|
||||
border: px2rem(3) solid #FFE96E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: px2rem(20) px2rem(25);
|
||||
margin-top: px2rem(20);
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
width: px2rem(120);
|
||||
height: px2rem(120);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 0 px2rem(22);
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nick {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(30);
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.charmUrl,
|
||||
.experUrl {
|
||||
width: px2rem(60);
|
||||
height: px2rem(28);
|
||||
margin-left: px2rem(5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.id {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
opacity: 0.5;
|
||||
margin-top: px2rem(15);
|
||||
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
opacity: 0.5;
|
||||
margin-top: px2rem(15);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.jackpot {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(40);
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(38);
|
||||
height: px2rem(38);
|
||||
margin: 0 px2rem(8);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Only_data_30 {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #FFF784;
|
||||
line-height: px2rem(38);
|
||||
opacity: 0.5;
|
||||
margin-top: px2rem(37);
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.No_one_pool {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
text-align: center;
|
||||
margin: px2rem(400) px2rem(50);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arabic {
|
||||
.receiverList .receiver_content .receiver_box .jackpot {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
13
view/molistar/activity/luckyNumbers/css/swiper-bundle.min.css
vendored
Normal file
BIN
view/molistar/activity/luckyNumbers/images/close_btn.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
view/molistar/activity/luckyNumbers/images/coins.png
Normal file
After Width: | Height: | Size: 6.5 KiB |
BIN
view/molistar/activity/luckyNumbers/images/conis_bg.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
view/molistar/activity/luckyNumbers/images/conis_bg_guoqi.png
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
view/molistar/activity/luckyNumbers/images/jinbibx.png
Normal file
After Width: | Height: | Size: 384 KiB |
BIN
view/molistar/activity/luckyNumbers/images/jinbibx_guoqi.png
Normal file
After Width: | Height: | Size: 352 KiB |
BIN
view/molistar/activity/luckyNumbers/images/num_jiqi.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
view/molistar/activity/luckyNumbers/images/participate_btn.png
Normal file
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 14 KiB |
BIN
view/molistar/activity/luckyNumbers/images/popup_bg.png
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
view/molistar/activity/luckyNumbers/images/results_right.png
Normal file
After Width: | Height: | Size: 1002 B |
BIN
view/molistar/activity/luckyNumbers/images/reward_content.png
Normal file
After Width: | Height: | Size: 95 KiB |
BIN
view/molistar/activity/luckyNumbers/images/reward_kuang.png
Normal file
After Width: | Height: | Size: 259 KiB |
BIN
view/molistar/activity/luckyNumbers/images/rules.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
view/molistar/activity/luckyNumbers/images/select_bg.png
Normal file
After Width: | Height: | Size: 3.0 KiB |
BIN
view/molistar/activity/luckyNumbers/images/shuoming_kuang.png
Normal file
After Width: | Height: | Size: 139 KiB |
BIN
view/molistar/activity/luckyNumbers/images/time_kuang.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
BIN
view/molistar/activity/luckyNumbers/images/tip_chang.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
view/molistar/activity/luckyNumbers/images/top_bg-ar.png
Normal file
After Width: | Height: | Size: 891 KiB |
BIN
view/molistar/activity/luckyNumbers/images/top_bg.png
Normal file
After Width: | Height: | Size: 875 KiB |
BIN
view/molistar/activity/luckyNumbers/images/travel/back.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/activity/luckyNumbers/images/travel/backB.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.2 KiB |
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg1.png
Normal file
After Width: | Height: | Size: 268 KiB |
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg2.png
Normal file
After Width: | Height: | Size: 19 KiB |
283
view/molistar/activity/luckyNumbers/index.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css" />
|
||||
<link rel="stylesheet" href="css/index.css?v=1.1" />
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/back.png" alt="" />
|
||||
</div>
|
||||
<div class="top_bg">
|
||||
<div class="countdown_box">
|
||||
<div class="time_kuang">
|
||||
<img src="./images/time_kuang.png" alt="" />
|
||||
<div class="time_text" id="hours">00</div>
|
||||
<div class="time_type Hours">Hours</div>
|
||||
</div>
|
||||
<div class="time_kuang">
|
||||
<img src="./images/time_kuang.png" alt="" />
|
||||
<div class="time_text" id="minutes">00</div>
|
||||
<div class="time_type Mins">Mins</div>
|
||||
</div>
|
||||
<div class="time_kuang">
|
||||
<img src="./images/time_kuang.png" alt="" />
|
||||
<div class="time_text" id="seconds">00</div>
|
||||
<div class="time_type Secs">Secs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip_chang">
|
||||
<img src="./images/tip_chang.png" alt="" />
|
||||
<div class="tip_txt">
|
||||
<span class="Number_participants">Number of participants today</span>
|
||||
<span class="playerNum">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conis_bg">
|
||||
<img src="./images/conis_bg.png" alt="" />
|
||||
<div class="conis_txt">
|
||||
<span class="Share">Share</span> <span class="num">0</span>
|
||||
<img src="./images/coins.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rules">rules</div>
|
||||
</div>
|
||||
<div class="describe_box">
|
||||
<p class="txt">
|
||||
Enter a number between 01-99 and if it matches a Molistar number, you
|
||||
can share the coin pool!
|
||||
</p>
|
||||
</div>
|
||||
<div class="reward_wrap">
|
||||
<div class="title Rewards">Rewards</div>
|
||||
<div class="txt">
|
||||
Participate to share Coins and get Fortunate Medals.
|
||||
</div>
|
||||
<img src="./images/reward_content.png" alt="" />
|
||||
</div>
|
||||
<div class="fortunate_number">
|
||||
<div class="tip_chang">
|
||||
<div class="tip_txt">
|
||||
<span class="Deadline_for_participation"
|
||||
>Deadline for participation</span
|
||||
>
|
||||
<span class="countdown_txt"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="today_number Today_Fortunate_Number">
|
||||
Today Fortunate Number
|
||||
</div>
|
||||
<div class="num_show">
|
||||
<div class="left_txt">
|
||||
<div class="no_animation">*</div>
|
||||
<div class="animation_box">
|
||||
<div class="txt_container">
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_txt">
|
||||
<div class="no_animation">*</div>
|
||||
<div class="animation_box">
|
||||
<div class="txt_container">
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
<div class="txt">*</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history_btn">History</div>
|
||||
</div>
|
||||
<div class="fortunate_bottom">
|
||||
<div class="participate_btn">
|
||||
<span class="num">1000</span>
|
||||
<img src="./images/coins.png" alt="" />
|
||||
<span class="txt Participate">Participate</span>
|
||||
</div>
|
||||
<div class="my_number">
|
||||
<span class="My_Participate_Number">My Participate Number</span> :
|
||||
<span class="numberList"></span>
|
||||
</div>
|
||||
<div class="my_history">My history</div>
|
||||
</div>
|
||||
|
||||
<div class="popup_sumbit">
|
||||
<div class="popup_content">
|
||||
<div class="title My_Fortunate_Numbers">My Fortunate Numbers</div>
|
||||
<div class="my_number">
|
||||
<span class="My_Participate_Number">My Participate Number</span> :
|
||||
<span class="numberList"></span>
|
||||
</div>
|
||||
<div class="number_selector">
|
||||
<div class="left_number">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">0</div>
|
||||
<div class="swiper-slide">1</div>
|
||||
<div class="swiper-slide">2</div>
|
||||
<div class="swiper-slide">3</div>
|
||||
<div class="swiper-slide">4</div>
|
||||
<div class="swiper-slide">5</div>
|
||||
<div class="swiper-slide">6</div>
|
||||
<div class="swiper-slide">7</div>
|
||||
<div class="swiper-slide">8</div>
|
||||
<div class="swiper-slide">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_number">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">0</div>
|
||||
<div class="swiper-slide">1</div>
|
||||
<div class="swiper-slide">2</div>
|
||||
<div class="swiper-slide">3</div>
|
||||
<div class="swiper-slide">4</div>
|
||||
<div class="swiper-slide">5</div>
|
||||
<div class="swiper-slide">6</div>
|
||||
<div class="swiper-slide">7</div>
|
||||
<div class="swiper-slide">8</div>
|
||||
<div class="swiper-slide">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sumbit_btn">Submit</div>
|
||||
<div class="tip_txt Each_submission">
|
||||
Each submission costs 1000 coins
|
||||
</div>
|
||||
<div class="close_btn">
|
||||
<img src="./images/close_btn.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup_history">
|
||||
<div class="popup_content">
|
||||
<div class="title History_Numbers">
|
||||
History Molistar Fortunate Numbers
|
||||
</div>
|
||||
<div class="history_list">
|
||||
<!-- <div class="history_box">
|
||||
<div class="left">
|
||||
<div class="Fortunate_Number">Fortunate Number</div>
|
||||
<div class="time">2025-04-30 21:00</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="left_txt">9</div>
|
||||
<div class="right_txt">9</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="tip_txt Only_data">Only show last 15 days data</div>
|
||||
<div class="close_btn">
|
||||
<img src="./images/close_btn.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup_rule">
|
||||
<div class="popup_content">
|
||||
<div class="title rules">Rules</div>
|
||||
<div class="detail_txt">
|
||||
<div class="rules_detail1 txt"></div>
|
||||
<div class="rules_detail2 txt"></div>
|
||||
<div class="rules_detail3 txt"></div>
|
||||
<div class="rules_detail4 txt"></div>
|
||||
<div class="rules_detail5 txt"></div>
|
||||
<div class="rules_detail6 txt"></div>
|
||||
</div>
|
||||
<div class="close_btn">
|
||||
<img src="./images/close_btn.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup_congratulations">
|
||||
<div class="popup_content">
|
||||
<div class="title Congratulations">Congratulations</div>
|
||||
<div class="detail_txt">
|
||||
Congratulations on becoming the lucky one in the
|
||||
<span class="date"></span> issue. Go and receive the reward now!
|
||||
</div>
|
||||
<div class="go_btn">Go</div>
|
||||
<div class="close_btn">
|
||||
<img src="./images/close_btn.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./local/tr.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/index.js?v=1.0"></script>
|
||||
<script src="./js/swiper-bundle.min.js"></script>
|
443
view/molistar/activity/luckyNumbers/js/index.js
Normal file
@@ -0,0 +1,443 @@
|
||||
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'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(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();
|
||||
getData();
|
||||
swiperFun();
|
||||
getListHistoryRound();
|
||||
|
||||
}, 100)
|
||||
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.describe_box .txt').html(langReplace(localLang.demoModule.describe_txt));
|
||||
$('.reward_wrap .txt').html(langReplace(localLang.demoModule.reward_txt));
|
||||
$('.conis_bg .conis_txt .Share').html(langReplace(localLang.demoModule.Share));
|
||||
$('.popup_container .popup_content .My_Fortunate_Numbers').html(langReplace(localLang.demoModule.My_Fortunate_Numbers));
|
||||
$('.sumbit_btn').html(langReplace(localLang.demoModule.Submit));
|
||||
$('.Deadline_for_participation').html(langReplace(localLang.demoModule.Deadline_for_participation));
|
||||
$('.Today_Fortunate_Number').html(langReplace(localLang.demoModule.Today_Fortunate_Number));
|
||||
$('.Participate').html(langReplace(localLang.demoModule.Participate));
|
||||
$('.My_Participate_Number').html(langReplace(localLang.demoModule.My_Participate_Number));
|
||||
$('.Each_submission').html(langReplace(localLang.demoModule.Each_submission));
|
||||
$('.History_Numbers').html(langReplace(localLang.demoModule.History_Numbers));
|
||||
$('.rules_detail1').html(langReplace(localLang.demoModule.rules_detail1));
|
||||
$('.rules_detail2').html(langReplace(localLang.demoModule.rules_detail2));
|
||||
$('.rules_detail3').html(langReplace(localLang.demoModule.rules_detail3));
|
||||
$('.rules_detail4').html(langReplace(localLang.demoModule.rules_detail4));
|
||||
$('.rules_detail5').html(langReplace(localLang.demoModule.rules_detail5));
|
||||
$('.rules_detail6').html(langReplace(localLang.demoModule.rules_detail6));
|
||||
$('.Only_data').html(langReplace(localLang.demoModule.Only_data));
|
||||
$('.my_history').html(langReplace(localLang.demoModule.My_history));
|
||||
$('.Number_participants').html(langReplace(localLang.demoModule.Number_participants));
|
||||
$('.Rewards').html(langReplace(localLang.demoModule.Rewards));
|
||||
$('.top_bg .rules').html(langReplace(localLang.demoModule.Rules));
|
||||
$('.popup_rule .popup_content .title').html(langReplace(localLang.demoModule.Rules));
|
||||
$('.fortunate_number .history_btn').html(langReplace(localLang.demoModule.History));
|
||||
$('.Hours').html(langReplace(localLang.demoModule.Hours));
|
||||
$('.Mins').html(langReplace(localLang.demoModule.Mins));
|
||||
$('.Secs').html(langReplace(localLang.demoModule.Secs));
|
||||
$('.Congratulations').html(langReplace(localLang.demoModule.Congratulations));
|
||||
|
||||
|
||||
}
|
||||
var totalSeconds;
|
||||
|
||||
function getData() {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "GET",
|
||||
url: urlPrefix + "/luckyNumber/getRound",
|
||||
data: {
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.fortunate_bottom .participate_btn .num').text(res.data.price)
|
||||
$('.fortunate_bottom .participate_btn').attr("status", res.data.status)
|
||||
$('.conis_bg .conis_txt .num').text(res.data.jackpot)
|
||||
$('.tip_chang .tip_txt .playerNum').text(res.data.playerNum)
|
||||
// 不可投入状态包括开奖状态跟停止等待状态
|
||||
if (res.data.status == 1 || res.data.status == 2) {
|
||||
$('.fortunate_bottom .participate_btn').css('background-image', "url('./images/participate_btn_huise.png')");
|
||||
}
|
||||
// 开奖状态
|
||||
if(res.data.status == 2){
|
||||
$('.fortunate_number .tip_chang .tip_txt').html(langReplace(localLang.demoModule.Fortunate_published));
|
||||
|
||||
let str = `
|
||||
<div class="tip_txt">
|
||||
<span class="playerNum">${res.data.luckyPlayerNumber}</span>
|
||||
<span class="Number_participants">${langReplace(localLang.demoModule.people_sharing)}</span>
|
||||
</div>
|
||||
`
|
||||
$('.top_bg .tip_chang .tip_txt').html(str)
|
||||
}
|
||||
// 补零- 自己投的幸运数字
|
||||
res.data.numberList.forEach((item,index) => {
|
||||
if (String(item).length == 1) {
|
||||
res.data.numberList[index] = '0' + item;
|
||||
}
|
||||
})
|
||||
|
||||
// 幸运数字个位数情况
|
||||
if (res.data.luckyNumber) {
|
||||
if (String(res.data.luckyNumber).length == 1) {
|
||||
res.data.luckyNumber = '0' + res.data.luckyNumber
|
||||
}
|
||||
// 如果中奖了则数字高亮
|
||||
let numStr = '';
|
||||
res.data.numberList.forEach((item, index) => {
|
||||
if (item == res.data.luckyNumber) {
|
||||
numStr += ` <span style="color:#FFFFFF">${item}</span>`
|
||||
} else {
|
||||
numStr += ` <span>${item}</span> `
|
||||
}
|
||||
if (index < res.data.numberList.length - 1) {
|
||||
numStr += '、';
|
||||
}
|
||||
})
|
||||
$('.my_number .numberList').html(numStr)
|
||||
|
||||
} else {
|
||||
$('.my_number .numberList').text(res.data.numberList.join(' 、'))
|
||||
}
|
||||
totalSeconds = res.data.countDownSecond;
|
||||
// // 初始化时分秒显示
|
||||
const initialTime = formatTime(totalSeconds);
|
||||
updateCountdownDisplay(initialTime);
|
||||
pauseCountdown();
|
||||
// 倒计时不为0时 开始倒计时
|
||||
if (totalSeconds != 0) {
|
||||
localStorage.setItem("displayStatus", JSON.stringify(false));
|
||||
// 开始倒计时
|
||||
startCountdown();
|
||||
} else {
|
||||
let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
|
||||
// 不为true执行下面 有一次滚动动画 ,true只会渲染数字
|
||||
if (!displayStatus) {
|
||||
// 开启滚动动画
|
||||
startAnimation()
|
||||
setTimeout(() => {
|
||||
// 关闭数字滚动动画
|
||||
pauseAnimation(res.data);
|
||||
// 渲染幸运数字
|
||||
$('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
|
||||
$('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
|
||||
$('.fortunate_number .num_show .left_txt').css({top: '0.38rem',left: '1rem'})
|
||||
$('.fortunate_number .num_show .right_txt').css({top: '0.38rem',right:'1rem'})
|
||||
}, 3000);
|
||||
} else {
|
||||
// 渲染幸运数字
|
||||
$('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
|
||||
$('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
|
||||
$('.fortunate_number .num_show .left_txt').css({top: '0.38rem',left: '1rem'})
|
||||
$('.fortunate_number .num_show .right_txt').css({top: '0.38rem',right:'1rem'})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
})
|
||||
}
|
||||
// 数字滚动动画
|
||||
function startAnimation() {
|
||||
$('.fortunate_number .num_show .left_txt .animation_box').show();
|
||||
$('.fortunate_number .num_show .right_txt .animation_box').show();
|
||||
$('.fortunate_number .num_show .left_txt .no_animation').hide();
|
||||
$('.fortunate_number .num_show .right_txt .no_animation').hide();
|
||||
$('.fortunate_number .num_show .left_txt .txt_container').css('animation-play-state', 'running');
|
||||
$('.fortunate_number .num_show .right_txt .txt_container').css('animation-play-state', 'running');
|
||||
}
|
||||
// 关闭数字滚动动画
|
||||
function pauseAnimation(obj) {
|
||||
$('.fortunate_number .num_show .left_txt .animation_box').hide();
|
||||
$('.fortunate_number .num_show .right_txt .animation_box').hide();
|
||||
$('.fortunate_number .num_show .left_txt .no_animation').show();
|
||||
$('.fortunate_number .num_show .right_txt .no_animation').show();
|
||||
$('.fortunate_number .num_show .left_txt .txt_container').css('animation-play-state', 'paused');
|
||||
$('.fortunate_number .num_show .right_txt .txt_container').css('animation-play-state', 'paused');
|
||||
// 如果中奖了,弹窗
|
||||
if (obj.numberList.includes(obj.luckyNumber)) {
|
||||
let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
|
||||
// 为true不执行下面
|
||||
if (displayStatus) return
|
||||
console.log('中奖了弹窗');
|
||||
// 展示弹窗
|
||||
$('.popup_congratulations').show();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'hidden');
|
||||
$('.popup_congratulations .popup_content .detail_txt ').text(langReplace(localLang.demoModule.Congratulations_txt(obj.date)))
|
||||
|
||||
localStorage.setItem("displayStatus", JSON.stringify(true));
|
||||
} else {
|
||||
localStorage.setItem("displayStatus", JSON.stringify(true));
|
||||
}
|
||||
}
|
||||
// 历史轮次
|
||||
function getListHistoryRound() {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "POST",
|
||||
url: urlPrefix + "/luckyNumber/listHistoryRound",
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.popup_history .popup_content .history_list .history_box').remove();
|
||||
let arr = res.data
|
||||
let str = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (String(arr[i].luckyNumber).length == 1) {
|
||||
arr[i].luckyNumber = '0' + arr[i].luckyNumber
|
||||
}
|
||||
str += `
|
||||
<div class="history_box">
|
||||
<div class="left">
|
||||
<div class="Fortunate_Number">${langReplace(localLang.demoModule.Fortunate_Number)}</div>
|
||||
<div class="time">${arr[i].endTime}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="left_txt">${String(arr[i].luckyNumber).substring(0, 1)}</div>
|
||||
<div class="right_txt">${String(arr[i].luckyNumber).substring(1, 2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
$('.popup_history .popup_content .history_list').append(str)
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
})
|
||||
}
|
||||
// 将总秒数换算成时分秒
|
||||
function formatTime(totalSeconds) {
|
||||
const hours = Math.floor(totalSeconds / 60 / 60 % 24);
|
||||
const minutes = Math.floor(totalSeconds / 60 % 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
// 格式化为两位数
|
||||
return {
|
||||
hours: String(hours).padStart(2, '0'),
|
||||
minutes: String(minutes).padStart(2, '0'),
|
||||
seconds: String(seconds).padStart(2, '0')
|
||||
};
|
||||
}
|
||||
// 更新页面上的时分秒显示
|
||||
function updateCountdownDisplay(time) {
|
||||
$('#hours').text(time.hours);
|
||||
$('#minutes').text(time.minutes);
|
||||
$('#seconds').text(time.seconds);
|
||||
$('.countdown_txt').text(time.hours + ':' + time.minutes + ':' + time.seconds)
|
||||
}
|
||||
var countdownInterval;
|
||||
// 倒计时函数
|
||||
function startCountdown() {
|
||||
countdownInterval = setInterval(() => {
|
||||
if (totalSeconds == 0) {
|
||||
clearInterval(countdownInterval);
|
||||
// 倒计时结束,可以在这里执行其他操作
|
||||
// 开启滚动动画
|
||||
startAnimation()
|
||||
pauseCountdown();
|
||||
setTimeout(() => {
|
||||
getData();
|
||||
}, 3000);
|
||||
console.log('Countdown ended!');
|
||||
return;
|
||||
}
|
||||
// 换算时分秒
|
||||
const time = formatTime(totalSeconds);
|
||||
// 更新页面显示
|
||||
updateCountdownDisplay(time);
|
||||
|
||||
// 总秒数减 1
|
||||
totalSeconds--;
|
||||
}, 1000);
|
||||
}
|
||||
// 清除计时器
|
||||
function pauseCountdown() {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
// 监听页面显示事件
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
pauseCountdown();
|
||||
} else {
|
||||
// 重新请求接口获取最新的倒计时数据
|
||||
pauseCountdown();
|
||||
getData();
|
||||
}
|
||||
});
|
||||
// 投入-打开弹窗
|
||||
$('.fortunate_bottom .participate_btn').click(function () {
|
||||
let status = $(this).attr('status');
|
||||
if (status == 1 || status == 2) return
|
||||
$('.popup_sumbit').show();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'hidden');
|
||||
});
|
||||
// 关闭投入弹窗
|
||||
$('.popup_sumbit .popup_content .close_btn').click(function () {
|
||||
$('.popup_sumbit').hide();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'auto');
|
||||
});
|
||||
// 提交选择的幸运数字
|
||||
$('.popup_sumbit .popup_content .sumbit_btn').click(function () {
|
||||
let number = String(leftNumber) + String(rightNumber);
|
||||
submitLuckyNumber(number)
|
||||
});
|
||||
// 提交
|
||||
function submitLuckyNumber(number) {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "POST",
|
||||
url: urlPrefix + "/luckyNumber/input",
|
||||
data: {
|
||||
number
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
getData()
|
||||
toastMsg(langReplace(localLang.demoModule.Submit_sussessful))
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
})
|
||||
}
|
||||
// 打开历史轮次
|
||||
$('.fortunate_number .history_btn').click(function () {
|
||||
$('.popup_history').show();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'hidden');
|
||||
});
|
||||
// 关闭历史轮次
|
||||
$('.popup_history .popup_content .close_btn').click(function () {
|
||||
$('.popup_history').hide();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'auto');
|
||||
});
|
||||
// 打开规则
|
||||
$('.top_bg .rules').click(function () {
|
||||
$('.popup_rule').show();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'hidden');
|
||||
});
|
||||
// 关闭规则
|
||||
$('.popup_rule .popup_content .close_btn').click(function () {
|
||||
$('.popup_rule').hide();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'auto');
|
||||
});
|
||||
// 关闭中奖弹窗
|
||||
$('.popup_congratulations .popup_content .close_btn').click(function () {
|
||||
$('.popup_congratulations').hide();
|
||||
// 阻止背景滚动
|
||||
$('body').css('overflow', 'auto');
|
||||
});
|
||||
// 跳转我的历史
|
||||
$('.popup_congratulations .popup_content .go_btn').click(function () {
|
||||
window.location.href = `./myHistory.html`
|
||||
return
|
||||
});
|
||||
$('.my_history').click(function () {
|
||||
window.location.href = `./myHistory.html`
|
||||
return
|
||||
})
|
||||
var leftNumber = 0;
|
||||
var rightNumber = 0;
|
||||
function swiperFun() {
|
||||
var leftSwiper = new Swiper('.left_number .swiper', {
|
||||
direction: "vertical",
|
||||
// loop: true,
|
||||
slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
|
||||
spaceBetween: -50, // 幻灯片之间的间距(负值表示重叠)
|
||||
centeredSlides: true, // 中心化幻灯片
|
||||
on: {
|
||||
slideChange: function () {
|
||||
leftNumber = this.activeIndex;
|
||||
}
|
||||
}
|
||||
})
|
||||
var rightSwiper = new Swiper('.right_number .swiper', {
|
||||
direction: "vertical",
|
||||
// loop: true,
|
||||
slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
|
||||
spaceBetween: -50, // 幻灯片之间的间距(负值表示重叠)
|
||||
centeredSlides: true, // 中心化幻灯片
|
||||
on: {
|
||||
slideChange: function () {
|
||||
rightNumber = this.activeIndex;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
156
view/molistar/activity/luckyNumbers/js/myHistory.js
Normal file
@@ -0,0 +1,156 @@
|
||||
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'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(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(() => {
|
||||
window.history.back();
|
||||
})
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
getData();
|
||||
}, 100)
|
||||
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.page_title').html(langReplace(localLang.demoModule.My_history));
|
||||
}
|
||||
function getData() {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "POST",
|
||||
url: urlPrefix + "/luckyNumber/listHistoryInput",
|
||||
data: {
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
let str = '';
|
||||
res.data.forEach((item, index) => {
|
||||
if (String(item.luckyNumber).length == 1) {
|
||||
item.luckyNumber = '0' + item.luckyNumber
|
||||
}
|
||||
let numStr = ''
|
||||
item.numberList.forEach((itemTwo, indexTwo) => {
|
||||
if (String(itemTwo).length == 1) {
|
||||
itemTwo = '0' + itemTwo
|
||||
}
|
||||
if (item.luckyNumber == itemTwo) {
|
||||
numStr += ` <span style="color:#FFFFFF">${itemTwo}</span>`
|
||||
} else {
|
||||
numStr += ` <span>${itemTwo}</span> `
|
||||
}
|
||||
// 只有不是最后一个元素时才加顿号
|
||||
if (indexTwo < item.numberList.length - 1) {
|
||||
numStr += '、';
|
||||
}
|
||||
})
|
||||
str += `
|
||||
<div class="content_box">
|
||||
<div class="Expired" style="display:${item.status == -1 ? 'block' : 'none'}" >${langReplace(localLang.demoModule.Expired)}</div>
|
||||
<div class="felx_box">
|
||||
<div class="left">
|
||||
<div class="time">${item.endTime}</div>
|
||||
<div class="fortunate_number">
|
||||
${langReplace(localLang.demoModule.Fortunate_Number)}: <span class="number">${item.luckyNumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" Receive_btn" style="display:${item.status == 1 ? 'block' : 'none'}" date="${item.date}">${langReplace(localLang.demoModule.Receive_Coins)}</div>
|
||||
<div class="view_results" style="display:${item.status != 1 ? 'block' : 'none'}" date="${item.date}">${langReplace(localLang.demoModule.View_Results)} <img src="./images/results_right.png" alt="" ></div>
|
||||
|
||||
</div>
|
||||
<div class="my_number">${langReplace(localLang.demoModule.My_Participate_Number)}: ${numStr} </div>
|
||||
</div>
|
||||
`
|
||||
|
||||
});
|
||||
$('.content_list').append(str)
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
})
|
||||
}
|
||||
function getJackpot(date) {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "POST",
|
||||
url: urlPrefix + "/luckyNumber/getJackpot",
|
||||
data: {
|
||||
date
|
||||
},
|
||||
success: function (res) {
|
||||
hideLoading(layerIndex);
|
||||
if (res.code == 200) {
|
||||
$('#myVideo').show();
|
||||
$('#myVideo')[0].play()
|
||||
$('#myVideo').on('ended', function () {
|
||||
window.location.href = './resultsView.html?date=' + date
|
||||
return
|
||||
})
|
||||
}
|
||||
},
|
||||
error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
})
|
||||
}
|
||||
// 点击领取奖励
|
||||
$(document).on('click', '.Receive_btn', function () {
|
||||
let date = $(this).attr('date');
|
||||
getJackpot(date);
|
||||
})
|
||||
$(document).on('click', '.view_results', function () {
|
||||
let date = $(this).attr('date');
|
||||
console.log(date)
|
||||
window.location.href = './resultsView.html?date=' + date
|
||||
return
|
||||
})
|
160
view/molistar/activity/luckyNumbers/js/resultsView.js
Normal file
@@ -0,0 +1,160 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
var urlData = getQueryString();
|
||||
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'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(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(() => {
|
||||
window.history.back();
|
||||
})
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
getData();
|
||||
}, 100)
|
||||
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.Received_Successful').html(langReplace(localLang.demoModule.Received_Successful));
|
||||
$('.Put_wallet').html(langReplace(localLang.demoModule.Put_wallet));
|
||||
$('.already_claimed').html(langReplace(localLang.demoModule.already_claimed));
|
||||
$('.Only_data_30').html(langReplace(localLang.demoModule.Only_data_30));
|
||||
|
||||
|
||||
}
|
||||
function getData() {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: "GET",
|
||||
url: urlPrefix + "/luckyNumber/getHistoryRoundDetail",
|
||||
data: { date: urlData.date },
|
||||
success: function (res) {
|
||||
hideLoading(layerIndex);
|
||||
if (res.code == 200) {
|
||||
$('.page_title').text(res.data.date + ' ' + langReplace(localLang.demoModule.Fortunate))
|
||||
// 计算总奖池数
|
||||
let totalJackpot = 0;
|
||||
if(res.data.receiverList){
|
||||
totalJackpot = res.data.receiverList.reduce((sum, item) => {
|
||||
return sum + (item.jackpot || 0); // 加上当前项的 jackpot
|
||||
}, 0);
|
||||
}
|
||||
if (res.data.status == 0) {
|
||||
// 没中奖
|
||||
if(!res.data.receiverList){
|
||||
// 都没人没中奖
|
||||
$('.one_pool').hide()
|
||||
$('.No_one_pool').show()
|
||||
}else{
|
||||
// 有人中奖 自己没中奖
|
||||
$('.one_pool').show()
|
||||
$('.No_one_pool').hide()
|
||||
$('.top_img').hide();
|
||||
$('.Received_Successful').hide();
|
||||
$('.Put_wallet').hide();
|
||||
$('.receiverList').css('margin-top', '2.6rem')
|
||||
$('.receiverList .title .num').text(totalJackpot)
|
||||
}
|
||||
|
||||
} else if (res.data.status == 1) {
|
||||
// 自己中奖的已领取
|
||||
$('.one_pool').show()
|
||||
$('.No_one_pool').hide()
|
||||
$('.receiverList .title .num').text(totalJackpot)
|
||||
$('.top_img .conis_bg .jackpot').text(res.data.jackpot)
|
||||
} else if (res.data.status == -1) {
|
||||
// 自己中奖的已过期
|
||||
$('.one_pool').show()
|
||||
$('.No_one_pool').hide()
|
||||
$('.receiverList .title .num').text(totalJackpot)
|
||||
$('.top_img .topImg').attr('src', './images/jinbibx_guoqi.png')
|
||||
$('.top_img .conis_bg').css({
|
||||
'background-image': "url('./images/conis_bg_guoqi.png')",
|
||||
'color': '#292419'
|
||||
})
|
||||
$('.top_img .conis_bg .jackpot').text(res.data.jackpot)
|
||||
$('.Received_Successful').text(langReplace(localLang.demoModule.Coins_expired))
|
||||
$('.Put_wallet').text(langReplace(localLang.demoModule.Remember_time))
|
||||
|
||||
}
|
||||
|
||||
if(res.data.receiverList){
|
||||
let str = '';
|
||||
res.data.receiverList.forEach(item => {
|
||||
str += `
|
||||
<div class="receiver_box">
|
||||
<div class="avatar">
|
||||
<img src="${item.avatar}" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<span class="nick">${item.nick}</span>
|
||||
<img src="${item.userLevelVo.experUrl}" alt="" class="experUrl">
|
||||
<img src="${item.userLevelVo.charmUrl}" alt="" class="charmUrl">
|
||||
</div>
|
||||
<div class="id">ID: <span class="erbanNo">${item.erbanNo}</span> </div>
|
||||
<div class="date">${item.receiveTime}</div>
|
||||
</div>
|
||||
<div class="jackpot">
|
||||
<div class="num">${item.jackpot}</div>
|
||||
<img src="./images/coins.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
$('.receiverList .receiver_content').append(str)
|
||||
$('.Only_data_30').show()
|
||||
}
|
||||
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
}, error: function (res) {
|
||||
console.log(res, "报错啦");
|
||||
hideLoading(layerIndex);
|
||||
canNext = true
|
||||
},
|
||||
})
|
||||
}
|
14
view/molistar/activity/luckyNumbers/js/swiper-bundle.min.js
vendored
Normal file
53
view/molistar/activity/luckyNumbers/local/ar.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: "جارٍ التحميل...",
|
||||
describe_txt:'أدخل رقماً بين 00-99، وإذا كان مطابقاً لرقم مولستار، يمكنك مشاركة مجموعة العملات المعدنية!',
|
||||
reward_txt:'شارك لمشاركة العملات المعدنية واحصل على ميداليات الحظ.',
|
||||
Share:'شارك',
|
||||
My_Fortunate_Numbers:'أرقامي المحظوظة',
|
||||
Submit:'إرسال',
|
||||
Participate:'يشارك',
|
||||
Today_Fortunate_Number:'رقم الحظ اليوم',
|
||||
My_Participate_Number:'رقم مشاركتي',
|
||||
Deadline_for_participation:'الموعد النهائي للمشاركة',
|
||||
Submit_sussessful:'تم الإرسال بنجاح',
|
||||
Each_submission:'كل إرسال يكلف 1000 قطعة نقدية',
|
||||
History_Numbers:'تاريخ أرقام الحظ الخاصة بي',
|
||||
Only_data:'عرض بيانات آخر 15 يوماً فقط',
|
||||
Fortunate_Number:'رقم محظوظ',
|
||||
rules_detail1:'1 كل يوم في الساعة 23:30، سيقوم مولي بتوليد رقم حظ عشوائيًا (00-99).',
|
||||
rules_detail2:'2 طريقة المشاركة: يمكنك إرسال عدة أرقام (00-99) للمشاركة في النشاط، عدد المرات غير محدود؛ كل مشاركة تحتاج إلى استهلاك 1000 قطعة نقدية.',
|
||||
rules_detail3:'3 قواعد التجمع: 5٪ (50 قطعة نقدية) سيتم خصم 5٪ (50 قطعة نقدية) كرسوم مناولة لكل عملية إرسال وسيتم إدخال الـ 950 قطعة نقدية المتبقية في تجمع الحظ في اليوم؛ إذا لم يفز أحد بالجائزة في نفس اليوم، فسيتم تجميع التجمع في اليوم التالي.',
|
||||
rules_detail4:'4 قواعد الفوز: إذا كان الرقم الذي ترسله هو نفسه رقم الحظ في اليوم، فسيتم توزيع مجموع الجوائز بما يتناسب مع عدد مرات الفوز.',
|
||||
rules_detail5:'5 الحصول على المكافآت يدوياً: بعد الفوز بالجائزة، عليك أن تجمع العملات المعدنية يدويًا خلال اليوم التالي، وسيتم اعتباره بمثابة ترك تلقائي بعد ذلك.',
|
||||
rules_detail6:'6 هذا النشاط لا علاقة له بـ Google / Apple.',
|
||||
My_history:'تاريخي',
|
||||
Number_participants:'عدد المشاركين في مجموعة الجوائز: ',
|
||||
people_sharing:'شخص يشاركون في مجموعة الجوائز اليوم',
|
||||
Reward:'المكافأة',
|
||||
Fortunate_published:'تم نشر الرقم المحظوظ',
|
||||
Receive_Coins:'استلام العملات المعدنية',
|
||||
View_Results:'عرض النتائج',
|
||||
Expired:'منتهية الصلاحية',
|
||||
Fortunate:'محظوظ',
|
||||
Coins_expired:'انتهت صلاحية العملات المعدنية',
|
||||
Remember_time:'تذكر أن تجمعها في المرة القادمة',
|
||||
already_claimed:'مجموع الأسعار',
|
||||
Only_data_30:'عرض بيانات آخر 30 يوماً فقط',
|
||||
No_one_pool:'لم يشارك أحد في مجموعة الجوائز هذه',
|
||||
Received_Successful:'تم الاستلام بنجاح',
|
||||
Put_wallet:'ضعها في محفظتك',
|
||||
Rules:'القواعد',
|
||||
History:'تاريخ',
|
||||
Rewards:'المكافأة',
|
||||
Hours: `ساعات`,
|
||||
Mins: `دقائق`,
|
||||
Secs: `ثواني`,
|
||||
Congratulations:'تهانينا',
|
||||
Congratulations_txt:function (date) {
|
||||
return `تهانينا على فوزك بالعدد ${date} . انطلق واحصل على الجائزة الآن!`;
|
||||
},
|
||||
}
|
||||
}
|
53
view/molistar/activity/luckyNumbers/local/en.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: `Loading...`,
|
||||
describe_txt:'Enter a number between 00-99 and if it matches a Molistar number, you can share the coin pool!',
|
||||
reward_txt:'Participate to share Coins and get Fortunate Medals.',
|
||||
Share:'Share',
|
||||
My_Fortunate_Numbers:'My Fortunate Numbers',
|
||||
Submit:'Submit',
|
||||
Participate:'Participate',
|
||||
Today_Fortunate_Number:'Today Fortunate Number ',
|
||||
My_Participate_Number:'My Participate Number',
|
||||
Deadline_for_participation:'Deadline for participation',
|
||||
Submit_sussessful:'Submit sussessful',
|
||||
Each_submission:'Each submission costs 1000 coins',
|
||||
History_Numbers:'History Molistar Fortunate Numbers',
|
||||
Only_data:'Only show last 15 days data',
|
||||
Fortunate_Number:'Fortunate Number',
|
||||
rules_detail1:'1 Every day at 23:30, Moli will randomly generate a lucky number (00-99).',
|
||||
rules_detail2:'2 Participation method: You can submit multiple numbers (00-99) to participate in the activity, the number of times is not limited; each submission needs to consume 1000 coins.',
|
||||
rules_detail3:'3 Pool Rules: 5% (50 coins) will be deducted as handling fee for each submission, and the remaining 950 coins will be entered into the lucky pool of the day; if no one wins the prize on the same day, the pool will be accumulated to the next day.',
|
||||
rules_detail4:'4 Winning Rules: If the number you submit is the same as the lucky number of the day, the prize pool will be distributed in proportion to the number of times you win.',
|
||||
rules_detail5:'5 Manually Get Rewards: After winning the prize, you need to collect the coins manually within the next day, and it will be regarded as automatic abandonment after that.',
|
||||
rules_detail6:'6 This activity has nothing to do with Google/Apple.',
|
||||
My_history:'My history',
|
||||
Number_participants:'Number of participants in the prize pool:',
|
||||
people_sharing:'people sharing the prize pool today',
|
||||
Reward:'Reward',
|
||||
Fortunate_published:'Fortunate number has been published',
|
||||
Receive_Coins:'Receive Coins',
|
||||
View_Results:'View Results',
|
||||
Expired:'Expired',
|
||||
Fortunate:'Fortunate',
|
||||
Coins_expired:'Coins has expired',
|
||||
Remember_time:'Remember to collect it next time',
|
||||
already_claimed:'Total Price Pool',
|
||||
Only_data_30:'Only show last 30 days data',
|
||||
No_one_pool:'No one has shared this prize pool',
|
||||
Received_Successful:'Received Successful',
|
||||
Put_wallet:'Put in your wallet',
|
||||
Rules:'Rules',
|
||||
History:'History',
|
||||
Rewards:'Reward',
|
||||
Hours: `Hours`,
|
||||
Mins: `Mins`,
|
||||
Secs: `Secs`,
|
||||
Congratulations:'Congratulations',
|
||||
Congratulations_txt:function (date) {
|
||||
return `Congratulations on becoming the lucky one in the ${date}th issue. Go and receive the reward now!`;
|
||||
},
|
||||
}
|
||||
}
|
53
view/molistar/activity/luckyNumbers/local/tr.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// 英文
|
||||
langTr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: "Yükleniyor...",
|
||||
describe_txt:'00-99 arasında bir sayı girin ve bir Molistar numarasıyla eşleşirse, jeton havuzunu paylaşabilirsiniz!',
|
||||
reward_txt:'Madeni Paraları paylaşmak ve Şans Madalyaları kazanmak için katılın.',
|
||||
Share:'Paylaş',
|
||||
My_Fortunate_Numbers:'Şanslı Numaralarım',
|
||||
Submit:'Gönder',
|
||||
Participate:'Katılmak',
|
||||
Today_Fortunate_Number:'Bugün Şanslı Sayı',
|
||||
My_Participate_Number:'Katılımcı Numaram',
|
||||
Deadline_for_participation:'Katılım için son tarih',
|
||||
Submit_sussessful:'Gönderme başarılı',
|
||||
Each_submission:'Her gönderim 1000 jetona mal olur',
|
||||
History_Numbers:'Tarih Molistar Şanslı Sayılar',
|
||||
Only_data:'Yalnızca son 15 günlük verileri göster',
|
||||
Fortunate_Number:'Şanslı sayı',
|
||||
rules_detail1:`1 Her gün saat 23:30'da Moli rastgele bir şanslı sayı (00-99) üretecektir.`,
|
||||
rules_detail2:'2 Katılım yöntemi: Etkinliğe katılmak için birden fazla sayı (00-99) gönderebilirsiniz, sayı sınırlı değildir; her gönderimin 1000 jeton tüketmesi gerekir.',
|
||||
rules_detail3:'3 Havuz Kuralları: Her gönderim için %5 (50 jeton) işlem ücreti olarak kesilecek ve kalan 950 jeton günün şans havuzuna girilecektir; aynı gün kimse ödülü kazanmazsa, havuz bir sonraki güne biriktirilecektir.',
|
||||
rules_detail4:'4 Kazanma Kuralı: Gönderdiğiniz sayı günün şanslı sayısı ile aynı ise, ödül havuzu kazanma sayınızla orantılı olarak dağıtılacaktır.',
|
||||
rules_detail5:'5 Ödülleri Manuel Olarak Alın: Ödülü kazandıktan sonra, ertesi gün içinde paraları manuel olarak toplamanız gerekir ve bundan sonra otomatik terk olarak kabul edilir.',
|
||||
rules_detail6:'6 Bu etkinliğin Google/Apple ile hiçbir ilgisi yoktur.',
|
||||
My_history:'Benim tarihim',
|
||||
Number_participants:'Ödül havuzuna katılanların sayısı: ',
|
||||
people_sharing:'Bugün ödül havuzunu paylaşan',
|
||||
Reward:'Ödül',
|
||||
Fortunate_published:'Şanslı sayı yayınlandı',
|
||||
Receive_Coins:'Madeni Para Alın',
|
||||
View_Results:'Sonuçları Görüntüle',
|
||||
Expired:'Süresi doldu',
|
||||
Fortunate:'Şanslı',
|
||||
Coins_expired:'Madeni paraların süresi doldu',
|
||||
Remember_time:'Bir dahaki sefere toplamayı unutmayın',
|
||||
already_claimed:'Toplam Fiyat Havuzu',
|
||||
Only_data_30:'Yalnızca son 30 günlük verileri göster',
|
||||
No_one_pool:'Kimse bu ödül havuzunu paylaşmadı',
|
||||
Received_Successful:'Başarılı Alındı',
|
||||
Put_wallet:'Cüzdanına koy',
|
||||
Rules:'Kurallar',
|
||||
History:'Tarih',
|
||||
Rewards:'Ödül',
|
||||
Hours: `Hours`,
|
||||
Mins: `Mins`,
|
||||
Secs: `Secs`,
|
||||
Congratulations:'Tebrikler',
|
||||
Congratulations_txt:function (date) {
|
||||
return `${date}. sayıda şanslı kişi olduğunuz için tebrikler. Hemen gidip ödülü alın!`;
|
||||
},
|
||||
}
|
||||
}
|
54
view/molistar/activity/luckyNumbers/local/zh.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: "加载中...",
|
||||
describe_txt:'輸入 00-99 之間的數字,若與 Molistar 的數字相符,即可分享硬幣池中的硬幣!',
|
||||
reward_txt:'參與分享金幣並獲得幸運獎牌。',
|
||||
Share:'分享',
|
||||
My_Fortunate_Numbers:'我的幸運號碼',
|
||||
Submit:'提交',
|
||||
Participate:'參與',
|
||||
Today_Fortunate_Number:'今天幸運數字',
|
||||
My_Participate_Number:'我參與的數字',
|
||||
Deadline_for_participation:'參賽截止日期',
|
||||
Submit_sussessful:'提交成功',
|
||||
Each_submission:'每次提交需要 1000 金幣',
|
||||
History_Numbers:'歷史 Molistar 幸運數字',
|
||||
Only_data:'只顯示最近15天的數據',
|
||||
Fortunate_Number:'幸運數字',
|
||||
rules_detail1:'1 每天23:30,Moli將隨機產生一個幸運號碼(00-99)。',
|
||||
rules_detail2:'2 參與方式: 可提交多個數字(00-99)參加活動,次數不限;每次提交需消耗1000金幣。',
|
||||
rules_detail3:'3 遊戲池規則: 每次提交扣除5%(50個硬幣)作為手續費,餘下的950個硬幣進入當天幸運池;若當天無人中獎,幸運池累積至次日。',
|
||||
rules_detail4:'4 中獎規則: 如果您提交的數字與當天的幸運數字相同,則獎池將按照中獎次數的比例進行分配。',
|
||||
rules_detail5:'5 手動取得獎勵: 中獎後需在次日內手動領取獎金,逾期視為自動放棄。',
|
||||
rules_detail6:'6 本活動與Google/Apple無關。',
|
||||
My_history:'我的歷史',
|
||||
Number_participants:'參與獎金池人數:',
|
||||
people_sharing:'人參與分享獎池',
|
||||
Reward:'獎勵',
|
||||
Fortunate_published:'幸運數字已開',
|
||||
Receive_Coins:'接收硬幣',
|
||||
View_Results:'檢視結果',
|
||||
Expired:'過期',
|
||||
Fortunate:'幸運',
|
||||
Coins_expired:'硬幣已過期',
|
||||
Remember_time:'下次記得領取',
|
||||
already_claimed:'总奖池',
|
||||
Only_data_30:'只顯示最近30天的數據',
|
||||
No_one_pool:'無人分享此獎金池',
|
||||
Received_Successful:'接收成功',
|
||||
Put_wallet:'放入錢包',
|
||||
Rules:'活動規則',
|
||||
History:'歷史',
|
||||
Rewards:'獎勵',
|
||||
Hours: `Hours`,
|
||||
Mins: `Mins`,
|
||||
Secs: `Secs`,
|
||||
Congratulations:'恭喜',
|
||||
Congratulations_txt:function (date) {
|
||||
return `恭喜您成为${date}期的幸运儿。快去领取奖励吧!`;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
BIN
view/molistar/activity/luckyNumbers/mp4/Receive.mp4
Normal file
71
view/molistar/activity/luckyNumbers/myHistory.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css" />
|
||||
<link rel="stylesheet" href="css/myHistory.css?v=1.1" />
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/yellow_back.png" alt="" />
|
||||
<p class="page_title">My history</p>
|
||||
</div>
|
||||
<div class="content_list">
|
||||
<!-- <div class="content_box">
|
||||
<div class="felx_box">
|
||||
<div class="left">
|
||||
<div class="time">2025-04-30 21:00</div>
|
||||
<div class="fortunate_number">
|
||||
Fortunate Number: <span class="number">99</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" Receive_btn">Receive Coins</div>
|
||||
</div>
|
||||
<div class="my_number">My Participate Number: 54、36、21、30、54、36、21</div>
|
||||
</div>
|
||||
|
||||
<div class="content_box">
|
||||
<div class="felx_box">
|
||||
<div class="left">
|
||||
<div class="time">2025-04-30 21:00</div>
|
||||
<div class="fortunate_number">
|
||||
Fortunate Number: <span class="number">99</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view_results">View Results <img src="./images/results_right.png" alt=""></div>
|
||||
</div>
|
||||
<div class="my_number">My Participate Number: 54、36、21、30、54、36、21</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<video id="myVideo" src="./mp4/Receive.mp4" controls style="display:none;">
|
||||
</video>
|
||||
|
||||
</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="../../common/local/langHandler.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/myHistory.js?v=1.0"></script>
|
77
view/molistar/activity/luckyNumbers/resultsView.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css" />
|
||||
<link rel="stylesheet" href="css/resultsView.css?v=1.1" />
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/yellow_back.png" alt="" />
|
||||
<p class="page_title"></p>
|
||||
</div>
|
||||
|
||||
<div class="one_pool">
|
||||
|
||||
<div class="top_img">
|
||||
<img src="./images/jinbibx.png" alt="" class="topImg"/>
|
||||
<div class="conis_bg">
|
||||
<span class="jackpot">0</span>
|
||||
<img src="./images/coins.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Received_Successful">Received Successful</div>
|
||||
<div class="Put_wallet">Put in your wallet</div>
|
||||
|
||||
<div class="receiverList">
|
||||
<div class="title"> <span class="already_claimed">Price Pool Total</span> <img src="./images/coins.png" alt=""> <span class="num">0</span> </div>
|
||||
<div class="receiver_content">
|
||||
<!-- <div class="receiver_box">
|
||||
<div class="avatar">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<span class="nick"></span>
|
||||
<img src="" alt="" class="experUrl">
|
||||
<img src="" alt="" class="charmUrl">
|
||||
</div>
|
||||
<div class="id">ID: <span class="erbanNo"></span> </div>
|
||||
<div class="date"></div>
|
||||
</div>
|
||||
<div class="jackpot">
|
||||
<div class="num"></div>
|
||||
<img src="./images/coins.png" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="Only_data_30">Only show last 30 days data</div>
|
||||
</div>
|
||||
<div class="No_one_pool">No one has shared this prize pool</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="../../common/local/langHandler.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/resultsView.js?v=1.0"></script>
|
@@ -310,7 +310,7 @@
|
||||
<div class="rewardImg">
|
||||
<div class="ts" id="txTop10000"></div>
|
||||
<img src="./images/bo.png" alt="" class="bo">
|
||||
<img src="./images/why.png" alt="" class="why">
|
||||
<img src="./images/why.png" alt="" class="why" id="recharge10000_why">
|
||||
<img src="./images/why.png" alt="" class="why why2">
|
||||
</div>
|
||||
<!-- 前三标题 -->
|
||||
|
@@ -241,7 +241,7 @@ $('.recharge10000 .content .rewardImg .why2').click(function () {
|
||||
bodyScroolFun(true);
|
||||
})
|
||||
// 打开10000座驾弹窗
|
||||
$('.recharge10000 .content .rewardImg .why').click(function () {
|
||||
$('.recharge10000 .content .rewardImg #recharge10000_why').click(function () {
|
||||
$('.pub .pub_in .centent').addClass('myRechargeTextWhy');
|
||||
$('.pub .pub_in .title').html(langReplace(localLang.demoModule.carTitle));
|
||||
$('.pub .pub_in .centent').html(langReplace(localLang.demoModule.carText));
|
||||
|
340
view/molistar/activity/shortLink/css/index.css
Normal file
@@ -0,0 +1,340 @@
|
||||
@charset "UTF-8";
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #E01F3F;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
.header .headerImg {
|
||||
width: 100%;
|
||||
}
|
||||
.header .info {
|
||||
background-image: url("../images/touxiang.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 0.4266666667rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0.08rem 0;
|
||||
}
|
||||
.header .info span {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #000000;
|
||||
}
|
||||
.header .info img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.16rem;
|
||||
}
|
||||
|
||||
.zh_content {
|
||||
padding-bottom: 2.6666666667rem;
|
||||
position: absolute;
|
||||
top: 5.3333333333rem;
|
||||
}
|
||||
|
||||
.wai_content {
|
||||
position: absolute;
|
||||
top: 5.2rem;
|
||||
}
|
||||
|
||||
.game_boxwrap {
|
||||
margin: 0 0.4rem;
|
||||
position: relative;
|
||||
}
|
||||
.game_boxwrap .gameImg {
|
||||
width: 100%;
|
||||
}
|
||||
.game_boxwrap .wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: 0.4266666667rem;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.game_boxwrap .wrap .game_item {
|
||||
background: linear-gradient(0deg, #FFFCED, #FEF3BD);
|
||||
border-radius: 0.3466666667rem;
|
||||
border: 0.0266666667rem solid #FFAB6B;
|
||||
margin: 0.2666666667rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.game_boxwrap .wrap .swiper {
|
||||
height: 2.6666666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.game_boxwrap .wrap .swiper .swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content {
|
||||
margin: 0.2666666667rem 0.2666666667rem 0.2666666667rem 0.4rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .info {
|
||||
text-align: center;
|
||||
overflow: visible;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .info img {
|
||||
width: 1.0666666667rem;
|
||||
height: 1.0666666667rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .info .name {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #381600;
|
||||
margin-top: 0.1066666667rem;
|
||||
width: 0.9066666667rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .right .win {
|
||||
width: 1.3333333333rem;
|
||||
height: 0.5333333333rem;
|
||||
margin: 0 0.2133333333rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .right .game_link {
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .right .coins {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.6666666667rem;
|
||||
color: #D9000A;
|
||||
margin: 0 0.2133333333rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .flex_box .right .coins_img img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
}
|
||||
.game_boxwrap .wrap .game_content .tip {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
color: #A7A493;
|
||||
text-align: center;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.gift_boxwrap {
|
||||
margin: 0 0.4rem;
|
||||
position: relative;
|
||||
margin-top: 11.3333333333rem;
|
||||
}
|
||||
.gift_boxwrap .giftImg {
|
||||
width: 100%;
|
||||
}
|
||||
.gift_boxwrap .wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: 0.4266666667rem;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
}
|
||||
.gift_boxwrap .wrap .swiper {
|
||||
height: 2.6666666667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.gift_boxwrap .wrap .swiper .swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content {
|
||||
position: relative;
|
||||
transition: top 1s ease-in-out;
|
||||
will-change: transform;
|
||||
margin-top: 0.3466666667rem;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .flex_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0.64rem;
|
||||
left: 0.4rem;
|
||||
z-index: 99;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .flex_box .left img {
|
||||
width: 1.1733333333rem;
|
||||
height: 1.1733333333rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .flex_box .right {
|
||||
margin-left: 0.2666666667rem;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .flex_box .right .txt,
|
||||
.gift_boxwrap .wrap .gift_content .flex_box .right .txt2 {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .flex_box .right .txt2 {
|
||||
margin-top: 0.1333333333rem;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .yuan_box {
|
||||
position: absolute;
|
||||
left: 6.6666666667rem;
|
||||
bottom: -0.1333333333rem;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .yuan_box .gift_yuan {
|
||||
width: 2.4533333333rem;
|
||||
position: relative;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt .yuan_num {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.48rem;
|
||||
color: #FDF565;
|
||||
}
|
||||
.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt .yuan_coins {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.32rem;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wealth_boxwrap {
|
||||
margin: 0 0.4rem;
|
||||
position: relative;
|
||||
margin-top: 5.3333333333rem;
|
||||
}
|
||||
.wealth_boxwrap .wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: 0.4266666667rem;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
}
|
||||
.wealth_boxwrap .wrap .wealth_content {
|
||||
padding-top: 0.3466666667rem;
|
||||
}
|
||||
|
||||
.invite_boxwrap {
|
||||
margin: 5.3333333333rem 0.4rem;
|
||||
position: relative;
|
||||
}
|
||||
.invite_boxwrap .wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: 0.4266666667rem;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
.invite_boxwrap .wrap .invite_content {
|
||||
padding: 0.4533333333rem 0.2933333333rem;
|
||||
}
|
||||
.invite_boxwrap .wrap .invite_content .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.4rem;
|
||||
color: #381600;
|
||||
line-height: 0.64rem;
|
||||
}
|
||||
.invite_boxwrap .wrap .invite_content #txt9,
|
||||
.invite_boxwrap .wrap .invite_content #txt11 {
|
||||
color: #D9000A;
|
||||
box-shadow: 0 -0.2133333333rem 0 #FFDF6F inset;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bottom_boxwrap {
|
||||
background: linear-gradient(0deg, #FFE4A2, #FFE755);
|
||||
border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 0 0.4rem;
|
||||
z-index: 99;
|
||||
}
|
||||
.bottom_boxwrap .logo img {
|
||||
width: 1.4133333333rem;
|
||||
height: 1.4133333333rem;
|
||||
}
|
||||
.bottom_boxwrap .detail {
|
||||
margin-left: 0.2666666667rem;
|
||||
}
|
||||
.bottom_boxwrap .detail .title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #381600;
|
||||
}
|
||||
.bottom_boxwrap .detail .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #381600;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.bottom_boxwrap .detail .txt img {
|
||||
width: 0.3466666667rem;
|
||||
height: 0.3466666667rem;
|
||||
}
|
||||
.bottom_boxwrap .open {
|
||||
background-image: url("../images/btn.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* 居中 */
|
||||
width: 3.1466666667rem;
|
||||
height: 2.1333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0.24rem;
|
||||
margin-left: auto;
|
||||
margin-right: 0.1333333333rem;
|
||||
}
|
||||
.bottom_boxwrap .open .txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #A7A493;
|
||||
padding: 0.4266666667rem 0.2933333333rem;
|
||||
}
|
||||
.txt_bottom div {
|
||||
margin-bottom: 0.1333333333rem;
|
||||
}
|
435
view/molistar/activity/shortLink/css/index.scss
Normal file
@@ -0,0 +1,435 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #E01F3F;
|
||||
// padding: 0 px2rem(30);
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
|
||||
.headerImg {
|
||||
width: 100%;
|
||||
// height: px2rem(458);
|
||||
}
|
||||
|
||||
.info {
|
||||
background-image: url('../images/touxiang.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: px2rem(32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(90);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: px2rem(6) 0;
|
||||
|
||||
span {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(26);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
img {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zh_content {
|
||||
padding-bottom: px2rem(200);
|
||||
position: absolute;
|
||||
top: px2rem(400);
|
||||
}
|
||||
.wai_content{
|
||||
position: absolute;
|
||||
top: px2rem(390);
|
||||
}
|
||||
|
||||
.game_boxwrap {
|
||||
margin: 0 px2rem(30);
|
||||
position: relative;
|
||||
|
||||
// height: px2rem(500);
|
||||
.gameImg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: px2rem(32);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
// width: px2rem(690);
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.game_item {
|
||||
background: linear-gradient(0deg, #FFFCED, #FEF3BD);
|
||||
border-radius: px2rem(26);
|
||||
border: px2rem(2) solid #FFAB6B;
|
||||
margin: px2rem(20);
|
||||
margin-bottom: 0;
|
||||
// height: px2rem(198);
|
||||
// /* 设置一个固定高度 */
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: px2rem(200);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.game_content {
|
||||
|
||||
margin: px2rem(20) px2rem(20) px2rem(20) px2rem(30);
|
||||
|
||||
.flex_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
overflow: visible;
|
||||
img {
|
||||
width: px2rem(80);
|
||||
height: px2rem(80);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #381600;
|
||||
margin-top: px2rem(8);
|
||||
width: px2rem(68);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.win {
|
||||
width: px2rem(100);
|
||||
height: px2rem(40);
|
||||
margin: 0 px2rem(16);
|
||||
}
|
||||
|
||||
.game_link {
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
}
|
||||
|
||||
.coins {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(50);
|
||||
color: #D9000A;
|
||||
margin: 0 px2rem(16);
|
||||
}
|
||||
.coins_img{
|
||||
img{
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(24);
|
||||
color: #A7A493;
|
||||
text-align: center;
|
||||
margin-top: px2rem(20);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gift_boxwrap {
|
||||
margin: 0 px2rem(30);
|
||||
position: relative;
|
||||
margin-top: px2rem(850);
|
||||
|
||||
.giftImg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: px2rem(32);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
// width: px2rem(690);
|
||||
|
||||
#gift_item {
|
||||
// height: px2rem(200);
|
||||
// /* 设置一个固定高度 */
|
||||
// overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: px2rem(200);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gift_content {
|
||||
// margin-top: px2rem(30);
|
||||
position: relative;
|
||||
transition: top 1s ease-in-out;
|
||||
will-change: transform;
|
||||
// transition: transform 1s ease;
|
||||
// transform: translateY(0);
|
||||
margin-top: px2rem(26);
|
||||
|
||||
.flex_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: px2rem(48);
|
||||
left: px2rem(30);
|
||||
z-index: 99;
|
||||
|
||||
.left {
|
||||
img {
|
||||
width: px2rem(88);
|
||||
height: px2rem(88);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: px2rem(20);
|
||||
|
||||
.txt,
|
||||
.txt2 {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.txt2 {
|
||||
margin-top: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gift_chang {}
|
||||
|
||||
|
||||
.yuan_box {
|
||||
position: absolute;
|
||||
left: px2rem(500);
|
||||
bottom: px2rem(-10);
|
||||
|
||||
.gift_yuan {
|
||||
width: px2rem(184);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.yuan_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.yuan_num {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(36);
|
||||
color: #FDF565;
|
||||
}
|
||||
|
||||
.yuan_coins {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(24);
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wealth_boxwrap {
|
||||
margin: 0 px2rem(30);
|
||||
position: relative;
|
||||
margin-top: px2rem(400);
|
||||
|
||||
.wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: px2rem(32);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
|
||||
.wealth_content {
|
||||
padding-top: px2rem(26);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite_boxwrap {
|
||||
margin: px2rem(400) px2rem(30);
|
||||
position: relative;
|
||||
|
||||
.wrap {
|
||||
background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
|
||||
border-radius: px2rem(32);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
|
||||
.invite_content {
|
||||
padding: px2rem(34) px2rem(22);
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(30);
|
||||
color: #381600;
|
||||
line-height: px2rem(48);
|
||||
}
|
||||
|
||||
#txt9,
|
||||
#txt11 {
|
||||
color: #D9000A;
|
||||
box-shadow: 0 px2rem(-16) 0 #FFDF6F inset;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
// #txt9 ,#txt11::after{
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// height: 0.2rem;
|
||||
// background-color: red;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_boxwrap {
|
||||
background: linear-gradient(0deg, #FFE4A2, #FFE755);
|
||||
border-radius: px2rem(32) px2rem(32) 0px 0px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 0 px2rem(30);
|
||||
z-index: 99;
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: px2rem(106);
|
||||
height: px2rem(106);
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-left: px2rem(20);
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #381600;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #381600;
|
||||
margin-top: px2rem(20);
|
||||
|
||||
img {
|
||||
width: px2rem(26);
|
||||
height: px2rem(26);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.open {
|
||||
background-image: url('../images/btn.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* 居中 */
|
||||
width: px2rem(236);
|
||||
height: px2rem(160);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: px2rem(18);
|
||||
margin-left: auto;
|
||||
margin-right: px2rem(10);
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #A7A493;
|
||||
padding: px2rem(32) px2rem(22);
|
||||
|
||||
div {
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
}
|
13
view/molistar/activity/shortLink/css/swiper-bundle.min.css
vendored
Normal file
BIN
view/molistar/activity/shortLink/images/btn.png
Normal file
After Width: | Height: | Size: 7.3 KiB |
BIN
view/molistar/activity/shortLink/images/caifu-ar.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
view/molistar/activity/shortLink/images/caifu-en.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
view/molistar/activity/shortLink/images/caifu-tr.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
view/molistar/activity/shortLink/images/fuzhi.png
Normal file
After Width: | Height: | Size: 519 B |
BIN
view/molistar/activity/shortLink/images/game-ar.png
Normal file
After Width: | Height: | Size: 66 KiB |