Compare commits
23 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
8ffc89e22c | ||
![]() |
aac6a9b4d3 | ||
![]() |
b694db22ef | ||
![]() |
b6f276a862 | ||
![]() |
7e76f15a03 | ||
![]() |
a10b2f2918 | ||
![]() |
d6861af5a8 | ||
![]() |
5f86a2d8bc | ||
![]() |
9311cd9740 | ||
![]() |
5aafa4b884 | ||
![]() |
b72afa268a | ||
![]() |
c9d75cc5e6 | ||
![]() |
faaa55dc68 | ||
![]() |
bb4ef6ae11 | ||
![]() |
b82260f07d | ||
![]() |
19470db242 | ||
![]() |
f046ab2875 | ||
![]() |
6f7e4ed194 | ||
![]() |
01e4ec47aa | ||
![]() |
3239ed337c | ||
![]() |
340964fd65 | ||
![]() |
5c6e78ea50 | ||
![]() |
a1ad39eec6 |
378
view/molistar/activity/annualReport/css/index.css
Normal file
@@ -0,0 +1,378 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 1.2rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 0.58667rem;
|
||||
height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.back p {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.h5 .pagesBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all .5s;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img1.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page1 .title {
|
||||
width: 10rem;
|
||||
height: 1.73333rem;
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2.64rem auto 0.36rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page1 p {
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
width: 8.45333rem;
|
||||
margin: 0 auto 0;
|
||||
line-height: 0.64rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page1 .but {
|
||||
width: 6.85333rem;
|
||||
height: 1.57333rem;
|
||||
line-height: 1.57333rem;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: 600;
|
||||
background: url(../images/but.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 1.98667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img2.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 .tx {
|
||||
width: 2.34667rem;
|
||||
height: 2.4rem;
|
||||
border: 0.06667rem solid #FFF36D;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
margin: 1.89333rem auto 0.18667rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 .name {
|
||||
width: 8.33333rem;
|
||||
margin: 0 auto 0.29333rem;
|
||||
text-align: center;
|
||||
color: #FFF36D;
|
||||
font-size: 0.48rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 .id {
|
||||
width: 8.33333rem;
|
||||
margin: 0 auto 0.56rem;
|
||||
text-align: center;
|
||||
color: #FFF36D;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.65333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page2 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img3.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.56rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page3 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.64rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page3 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img4.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.32rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page4 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.66667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page4 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img5.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.32rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page5 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.66667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page5 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img6.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 4.90667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 .txl {
|
||||
position: absolute;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 50%;
|
||||
border: 0.05333rem solid #FFF36D;
|
||||
top: 2.01333rem;
|
||||
left: 0.68rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 .love {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
position: absolute;
|
||||
top: 2.54667rem;
|
||||
left: 2.44rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 .txr {
|
||||
position: absolute;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 50%;
|
||||
border: 0.05333rem solid #FFF36D;
|
||||
top: 2.01333rem;
|
||||
left: 3.14667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.74667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page6 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page7 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img7.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.32rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page7 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.74667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page7 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page8 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img8.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.32rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page8 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.70667rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page8 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page9 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img9.png) no-repeat center;
|
||||
background-size: 10rem 100%;
|
||||
padding-top: 2.32rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page9 p {
|
||||
width: 8.33333rem;
|
||||
color: #fff;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.64rem;
|
||||
margin: 0 auto 0.65333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .page9 p b {
|
||||
color: #FFF36D;
|
||||
font-size: 0.53333rem;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .pages {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h5 .pagesBox .pages .more {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.65333rem;
|
||||
}
|
||||
|
||||
.china .h5 .pagesBox .page1 .title {
|
||||
background: url(../images/title-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Turkiye .h5 .pagesBox .page1 .title {
|
||||
background: url(../images/title-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.arabic .h5 .pagesBox .page1 .title {
|
||||
background: url(../images/title-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
395
view/molistar/activity/annualReport/css/index.scss
Normal file
@@ -0,0 +1,395 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: px2rem(90);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
|
||||
img {
|
||||
width: px2rem(44);
|
||||
height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.h5 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// background: rgba(0, 0, 0, .6);
|
||||
|
||||
.pagesBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
transition: all .5s;
|
||||
transform: translateY(-0%);
|
||||
|
||||
.page1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img1.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
|
||||
.title {
|
||||
width: px2rem(750);
|
||||
height: px2rem(130);
|
||||
background: url(../images/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: px2rem(198) auto px2rem(27);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
width: px2rem(634);
|
||||
margin: 0 auto 0;
|
||||
line-height: px2rem(48);
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(514);
|
||||
height: px2rem(118);
|
||||
line-height: px2rem(118);
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: px2rem(38);
|
||||
font-weight: 600;
|
||||
background: url(../images/but.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(149);
|
||||
}
|
||||
}
|
||||
|
||||
.page2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img2.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
|
||||
.tx {
|
||||
width: px2rem(176);
|
||||
height: px2rem(180);
|
||||
border: px2rem(5) solid #FFF36D;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
margin: px2rem(142) auto px2rem(14);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: px2rem(625);
|
||||
margin: 0 auto px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(36);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.id {
|
||||
width: px2rem(625);
|
||||
margin: 0 auto px2rem(42);
|
||||
text-align: center;
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(49);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img3.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(192);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(48);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img4.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(174);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(50);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img5.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(174);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(50);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page6 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img6.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(368);
|
||||
|
||||
.txl {
|
||||
position: absolute;
|
||||
width: px2rem(180);
|
||||
height: px2rem(180);
|
||||
border-radius: 50%;
|
||||
border: px2rem(4) solid #FFF36D;
|
||||
top: px2rem(151);
|
||||
left: px2rem(51);
|
||||
}
|
||||
|
||||
.love {
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
position: absolute;
|
||||
top: px2rem(191);
|
||||
left: px2rem(183);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.txr {
|
||||
position: absolute;
|
||||
width: px2rem(180);
|
||||
height: px2rem(180);
|
||||
border-radius: 50%;
|
||||
border: px2rem(4) solid #FFF36D;
|
||||
top: px2rem(151);
|
||||
left: px2rem(236);
|
||||
}
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(56);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page7 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img7.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(174);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(56);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page8 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img8.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(174);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(53);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page9 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: url(../images/img9.png) no-repeat center;
|
||||
background-size: px2rem(750) 100%;
|
||||
padding-top: px2rem(174);
|
||||
|
||||
p {
|
||||
width: px2rem(625);
|
||||
color: #fff;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 500;
|
||||
line-height: px2rem(48);
|
||||
margin: 0 auto px2rem(49);
|
||||
|
||||
b {
|
||||
color: #FFF36D;
|
||||
font-size: px2rem(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pages {
|
||||
box-sizing: border-box;
|
||||
|
||||
.more {
|
||||
width: px2rem(60);
|
||||
height: px2rem(60);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(49);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.china {
|
||||
.h5 .pagesBox .page1 .title{
|
||||
background: url(../images/title-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Turkiye {
|
||||
.h5 .pagesBox .page1 {
|
||||
.title {
|
||||
background: url(../images/title-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arabic {
|
||||
.h5 .pagesBox .page1 {
|
||||
.title {
|
||||
background: url(../images/title-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
BIN
view/molistar/activity/annualReport/images/but.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
view/molistar/activity/annualReport/images/img1.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
view/molistar/activity/annualReport/images/img2.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
view/molistar/activity/annualReport/images/img3.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
view/molistar/activity/annualReport/images/img4.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
view/molistar/activity/annualReport/images/img5.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
view/molistar/activity/annualReport/images/img6.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
view/molistar/activity/annualReport/images/img7.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
view/molistar/activity/annualReport/images/img8.png
Normal file
After Width: | Height: | Size: 1.7 MiB |
BIN
view/molistar/activity/annualReport/images/img9.png
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
view/molistar/activity/annualReport/images/love.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
view/molistar/activity/annualReport/images/more.png
Normal file
After Width: | Height: | Size: 684 B |
BIN
view/molistar/activity/annualReport/images/title-ar.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
view/molistar/activity/annualReport/images/title-tr.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
view/molistar/activity/annualReport/images/title-zh.png
Normal file
After Width: | Height: | Size: 33 KiB |
BIN
view/molistar/activity/annualReport/images/title.png
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
view/molistar/activity/annualReport/images/travel/back.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/activity/annualReport/images/travel/backB.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
36
view/molistar/activity/annualReport/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title class="title"></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/back.png" alt="">
|
||||
</div>
|
||||
<div class="h5">
|
||||
<div class="pagesBox text1">
|
||||
|
||||
</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="./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>
|
146
view/molistar/activity/annualReport/js/index.js
Normal file
@@ -0,0 +1,146 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
var length;
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
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)
|
||||
}
|
||||
})
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
get();
|
||||
}, 100)
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.title').html(langReplace(localLang.demoModule.title));
|
||||
$('.text1').html(langReplace(localLang.demoModule.text1));
|
||||
|
||||
// 監聽滑動事件
|
||||
let startY
|
||||
length = $('.h5 .pages').length - 1;//
|
||||
var index = 0;
|
||||
var touchLength = 100;
|
||||
$('body .h5').on('touchstart', function (e) {
|
||||
startY = e.touches[0].pageY
|
||||
})
|
||||
$('body .h5').on('touchend', function (e) {
|
||||
let endY = e.originalEvent.changedTouches[0].pageY
|
||||
// 上滑
|
||||
if (startY - endY >= 50) {
|
||||
if (index > length - 1) {
|
||||
return;
|
||||
} else {
|
||||
index = index + 1;
|
||||
$('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
|
||||
// animatedImplementFun(index);
|
||||
}
|
||||
}
|
||||
//下滑
|
||||
else if (endY - startY >= 50) {
|
||||
if (index > 0) {
|
||||
index = index - 1;
|
||||
$('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
|
||||
// animatedImplementFun(index);
|
||||
}
|
||||
}
|
||||
})
|
||||
$('.h5 .pagesBox').on('click', '.page1 .but', function () {
|
||||
index = index + 1;
|
||||
$('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
|
||||
})
|
||||
}
|
||||
// 接口
|
||||
function get() {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/user/yearReport/get',
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
$('.h5 .pagesBox .page2 .tx').attr('src', res.data.me.avatar);
|
||||
$('.h5 .pagesBox .page2 .name').text(res.data.me.nick);
|
||||
$('.h5 .pagesBox .page2 .id').text('ID:' + res.data.me.erbanNo);
|
||||
$('.h5 .pagesBox .page2 p b').text(res.data.createTime);
|
||||
$('.h5 .pagesBox .page3 p b').text(res.data.createDays);
|
||||
$('.h5 .pagesBox .page4 p .b1').text(res.data.experienceValue);
|
||||
$('.h5 .pagesBox .page4 p .b2').text(res.data.experienceTitle);
|
||||
$('.h5 .pagesBox .page4 p .b3').text(res.data.createDays);
|
||||
$('.h5 .pagesBox .page5 p .b1').text(res.data.charmValue);
|
||||
$('.h5 .pagesBox .page5 p .b2').text(res.data.charmTitle);
|
||||
$('.h5 .pagesBox .page7 p .b1').text(res.data.giftWallCount);
|
||||
$('.h5 .pagesBox .page7 p .b2').text(res.data.giftName);
|
||||
// cp
|
||||
if (res.data.cp) {
|
||||
$(`.h5 .pagesBox .page6 p .b1`).text(res.data.cpCreateTime)
|
||||
$(`.h5 .pagesBox .page6 p .b2`).text(res.data.cp.nick)
|
||||
$(`.h5 .pagesBox .page6 p .b3`).text(res.data.cpCreateDays)
|
||||
$('.h5 .pagesBox .page6 .txl').attr('src', res.data.me.avatar);
|
||||
$('.h5 .pagesBox .page6 .txr').attr('src', res.data.cp.avatar);
|
||||
} else {
|
||||
$('.h5 .pagesBox .page6').hide();
|
||||
length = length - 1;
|
||||
}
|
||||
// 转赠金币
|
||||
if (res.data.giveDiamond) {
|
||||
$('.h5 .pagesBox .page8 p .b1').text(res.data.giveDiamond);
|
||||
} else {
|
||||
$('.h5 .pagesBox .page8').hide();
|
||||
length = length - 1;
|
||||
}
|
||||
console.log(length);
|
||||
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||||
}
|
||||
})
|
||||
}
|
81
view/molistar/activity/annualReport/local/ar.js
Normal file
@@ -0,0 +1,81 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: 'جار التحميل...',
|
||||
layerIndex2: 'تم الانتهاء من العملية',
|
||||
layerIndex3: 'خطأ في الشبكة، يرجى الخروج وإعادة الدخول',
|
||||
title: 'التقرير السنوي',
|
||||
text1: `
|
||||
<!-- الصفحة 1 -->
|
||||
<div class="pages page1" id="img1">
|
||||
<div class="title"></div>
|
||||
<p class="p1">
|
||||
في عالم الإنترنت الواسع، أنت مثل نجم ساطع. هنا، لا نرى فقط ضوءك، بل نشعر أيضًا بالفرح الذي تجلبه - أنت جزء لا غنى عنه من Molistar.
|
||||
</p>
|
||||
<div class="but">انقر لتوليد</div>
|
||||
</div>
|
||||
<!-- الصفحة 2 -->
|
||||
<div class="pages page2" id="img2">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">الاسم</div>
|
||||
<div class="id">ID: 0</div>
|
||||
<p><b>2024-11-23</b> هو أول يوم لك في Molistar.</p>
|
||||
<p>منذ ذلك اليوم، جربنا الكثير معًا: تكوين صداقات جديدة، الدردشة عن الحياة، وتحدي متعة الألعاب معًا.</p>
|
||||
<p>كل لحظة نسجت رابطًا لا ينفصم بيننا.</p>
|
||||
</div>
|
||||
<!-- الصفحة 3 -->
|
||||
<div class="pages page3" id="img3">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>لقد قضيت <b>0</b> أيام مليئة بالضحك في Molistar.</p>
|
||||
<p>مشاركتك النشطة تجعل الغرفة مليئة بالحيوية، كل محادثة حيوية ومثيرة، وكل لعبة مليئة بالضحك.</p>
|
||||
<p>بفضلك، أصبح هذا المكان أكثر جمالًا.</p>
|
||||
</div>
|
||||
<!-- الصفحة 4 -->
|
||||
<div class="pages page4" id="img4">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>في رحلة هذا العام، أرسلت <b class="b1">0</b> عملات، وهو ما يجعلك مستحقًا بكل جدارة <b class="b2">محرّك الثروة.</b></p>
|
||||
<p>كل نقطة تجربة هي شهادة على عملك الشاق، وكل ترقية تسجل تقدمك.</p>
|
||||
<p>من دخولك إلى المنصة لأول مرة اليوم، اجتهادك.</p>
|
||||
</div>
|
||||
<!-- الصفحة 5 -->
|
||||
<div class="pages page5" id="img5">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>في هذا العام، جمعت <b class="b1">0</b> نقاط تجربة سحرية.</p>
|
||||
<p>كل نقطة هي أفضل دليل على عملك الشاق وموهبتك.</p>
|
||||
<p>مبروك لك على كونك أفضل <b class="b2">بالا بالا</b> على منصتنا!!!</p>
|
||||
</div>
|
||||
<!-- الصفحة 6 -->
|
||||
<div class="pages page6" id="img6">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="txl">
|
||||
<img src="./images/love.png" alt="" class="love">
|
||||
<img src="./images/logo.png" alt="" class="txr">
|
||||
<p>لقد استلمت هدية CP المحددة في <b class="b1">2024-11-23 00:00:00</b>.</p>
|
||||
<p>من تلك اللحظة، أصبحت أنت و <b class="b2">مومو</b> ثنائيًا رائعًا.</p>
|
||||
<p>حتى الآن، كانت علاقتكما دافئة لمدة <b class="b3">0</b> أيام.</p>
|
||||
<p>نتمنى لكما طريق حب مشرق دائمًا واستمرار كتابة فصول أكثر جمالًا!</p>
|
||||
</div>
|
||||
<!-- الصفحة 7 -->
|
||||
<div class="pages page7" id="img7">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>هذا العام، لم تكسب فقط ذكريات جميلة لا تعد ولا تحصى في Molistar، بل أظهرت أيضًا حماسك ودعمك بإضاءة <b class="b1">0</b> هدايا.</p>
|
||||
<p>هديةك المفضلة هي <b class="b2">مومو</b></p>
|
||||
<p>هذه الهدية الخاصة هي ليست فقط انعكاسًا فريدًا لذوقك، بل أيضًا جسرًا مهمًا للتواصل مع المستخدمين الآخرين.</p>
|
||||
</div>
|
||||
<!-- الصفحة 8 -->
|
||||
<div class="pages page8" id="img8">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>في 2024، كنت وكيل الشحن المحترم لدينا، وقد حولت إجمالي <b class="b1">0</b> عملات.</p>
|
||||
<p>شكرًا لجهودك في العام الماضي.</p>
|
||||
</div>
|
||||
<!-- الصفحة 9 -->
|
||||
<div class="pages page9" id="img9">
|
||||
<p>الآن، دعنا نتقدم إلى 2025 يدًا بيد، نواصل كتابة قصصنا الخاصة، ونخلق المزيد من الذكريات التي لا تُنسى.</p>
|
||||
<p>نتمنى أن يكون كل يوم في المستقبل أكثر إشراقًا بفضل وجود بعضنا البعض!</p>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
|
||||
}
|
87
view/molistar/activity/annualReport/local/en.js
Normal file
@@ -0,0 +1,87 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: 'Loading...',
|
||||
layerIndex2: 'Operation completed',
|
||||
layerIndex3: 'Network error, please exit and re-enter',
|
||||
title:'Annual Report',
|
||||
text1: `
|
||||
<!-- 頁面1 -->
|
||||
<div class="pages page1" id="img1">
|
||||
<div class="title"></div>
|
||||
<p class="p1">
|
||||
In the vast online world, you are like a shining star.Here, we not only see your light, but also
|
||||
feel the joy you bring - you are an indispensable part of Molistar.
|
||||
</p>
|
||||
<div class="but">Click Generate</div>
|
||||
</div>
|
||||
<!-- 頁面2 -->
|
||||
<div class="pages page2" id="img2">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">名称</div>
|
||||
<div class="id">ID:0</div>
|
||||
<p><b>2024-11-23</b> is your first day at Molistar.</p>
|
||||
<p>Since that day, we have experienced a lot together: making new friends, chatting about life, and
|
||||
challenging the fun of games together.</p>
|
||||
<p>Every moment has woven an inseparable bond between us.</p>
|
||||
</div>
|
||||
<!-- 頁面3 -->
|
||||
<div class="pages page3" id="img3">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>You have spent <b>0</b> days full of laughter at Molistar.</p>
|
||||
<p>Your active participation makes the room full of vitality, every conversation is so lively and
|
||||
interesting, and every game is full of laughter.</p>
|
||||
<p>Because of you, this place has become more beautiful.</p>
|
||||
</div>
|
||||
<!-- 頁面4 -->
|
||||
<div class="pages page4" id="img4">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>In this year's journey, you have sent <b class="b1">0</b> coins, which is well deserved <b class="b2">Wealth Germinator.</b>.
|
||||
</p>
|
||||
<p>Every experience point is a testimony to your hard work, and every upgrade records your progress.</p>
|
||||
<p>From entering the platform for the first time today, your persistence </p>
|
||||
</div>
|
||||
<!-- 頁面5 -->
|
||||
<div class="pages page5" id="img5">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>In this year, you have accumulated <b class="b1">0</b> charm experience points. </p>
|
||||
<p>Every point is the best proof of your hard work and talent. </p>
|
||||
<p>Congratulations on becoming the best <b class="b2">巴拉巴拉</b> on our platform!!!</p>
|
||||
</div>
|
||||
<!-- 頁面6 -->
|
||||
<div class="pages page6" id="img6">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="txl">
|
||||
<img src="./images/love.png" alt="" class="love">
|
||||
<img src="./images/logo.png" alt="" class="txr">
|
||||
<p>You received the designated CP gift on <b class="b1">2024-11-23 00:00:00</b>.</p>
|
||||
<p>From that moment on, you and <b class="b2">momo</b> became an enviable CP.</p>
|
||||
<p>So far, your relationship has been warm for <b class="b3">0</b> days.</p>
|
||||
<p>May your love path always be full of sunshine and continue to write more beautiful chapters!</p>
|
||||
</div>
|
||||
<!-- 頁面7 -->
|
||||
<div class="pages page7" id="img7">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>This year, you not only gained countless beautiful memories in Molistar, but also showed your
|
||||
enthusiasm and support by lighting up <b class="b1">0</b> gifts.</p>
|
||||
<p>Your favorite gift is <b class="b2">momo</b></p>
|
||||
<p>This special gift is not only a unique reflection of your taste, but also an important bridge for you
|
||||
to communicate with other users.</p>
|
||||
</div>
|
||||
<!-- 頁面8 -->
|
||||
<div class="pages page8" id="img8">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>In 2024, you were our valued recharge agent, and you have transferred a total of <b class="b1">0</b> coins.</p>
|
||||
<p>Thank you for your efforts in the past year.</p>
|
||||
</div>
|
||||
<!-- 頁面9 -->
|
||||
<div class="pages page9" id="img9">
|
||||
<p>Now, let us move forward to 2025 hand in hand, continue to write our own stories, and create more
|
||||
unforgettable memories.</p>
|
||||
<p>May every day in the future be brighter because of each other's existence!</p>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
}
|
83
view/molistar/activity/annualReport/local/tr.js
Normal file
@@ -0,0 +1,83 @@
|
||||
// 土耳其
|
||||
langTr = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: "Yükleniyor...",
|
||||
layerIndex2: "İşlem tamamlandı",
|
||||
layerIndex3: "Ağ hatası, lütfen çıkın ve tekrar girin",
|
||||
title: "Yıllık Rapor",
|
||||
text1: `
|
||||
<!-- Sayfa 1 -->
|
||||
<div class="pages page1" id="img1">
|
||||
<div class="title"></div>
|
||||
<p class="p1">
|
||||
Geniş çevrimiçi dünyada, sen parlayan bir yıldız gibisin. Burada, sadece ışığını görmekle kalmıyor,
|
||||
aynı zamanda getirdiğin mutluluğu da hissediyoruz - sen Molistar'ın vazgeçilmez bir parçasısın.
|
||||
</p>
|
||||
<div class="but">Oluşturmayı Tıkla</div>
|
||||
</div>
|
||||
<!-- Sayfa 2 -->
|
||||
<div class="pages page2" id="img2">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">Ad</div>
|
||||
<div class="id">ID:0</div>
|
||||
<p><b>2024-11-23</b> senin Molistar'daki ilk günündü.</p>
|
||||
<p>O günden itibaren birlikte çok şey deneyimledik: yeni arkadaşlar edinmek, hayat hakkında sohbetler yapmak ve oyunların eğlencesine birlikte meydan okumak.</p>
|
||||
<p>Her an, aramızda ayrılmaz bir bağ ördü.</p>
|
||||
</div>
|
||||
<!-- Sayfa 3 -->
|
||||
<div class="pages page3" id="img3">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>Molistar'da <b>0</b> gün kahkahalarla geçirdin.</p>
|
||||
<p>Aktif katılımın, odayı canlı tutuyor, her sohbet çok hareketli ve eğlenceli, her oyun kahkahalarla dolu.</p>
|
||||
<p>Sadece senin yüzünden, bu yer daha güzel oldu.</p>
|
||||
</div>
|
||||
<!-- Sayfa 4 -->
|
||||
<div class="pages page4" id="img4">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>Bu yılki yolculuğunda, <b class="b1">0</b> coin gönderdin, bu da seni <b class="b2">Zenginlik Tohumcusu</b> yaptı.</p>
|
||||
<p>Her deneyim puanı, sıkı çalışmanın bir kanıtıdır ve her yükselme, ilerlemeni kaydeder.</p>
|
||||
<p>Bugün ilk kez platforma katıldığından beri, azmin sayesinde...</p>
|
||||
</div>
|
||||
<!-- Sayfa 5 -->
|
||||
<div class="pages page5" id="img5">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>Bu yıl, toplamda <b class="b1">0</b> çekicilik deneyim puanı biriktirdin.</p>
|
||||
<p>Her puan, sıkı çalışmanın ve yeteneğinin en iyi kanıtıdır.</p>
|
||||
<p>Platformumuzda en iyi <b class="b2">巴拉巴拉</b> olduğun için tebrikler!!!</p>
|
||||
</div>
|
||||
<!-- Sayfa 6 -->
|
||||
<div class="pages page6" id="img6">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="txl">
|
||||
<img src="./images/love.png" alt="" class="love">
|
||||
<img src="./images/logo.png" alt="" class="txr">
|
||||
<p>2024-11-23 00:00:00 tarihinde belirlenen CP hediyesini aldın.</p>
|
||||
<p>O andan itibaren, <b class="b2">momo</b> ile kıskanılacak bir CP oldunuz.</p>
|
||||
<p>Şu ana kadar ilişkiniz <b class="b3">0</b> gün boyunca sıcak bir şekilde devam etti.</p>
|
||||
<p>Sevgi yolculuğunuzun her zaman güneşle dolu olmasını ve daha güzel bölümler yazmanızı dilerim!</p>
|
||||
</div>
|
||||
<!-- Sayfa 7 -->
|
||||
<div class="pages page7" id="img7">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>Bu yıl, sadece Molistar'da sayısız güzel anı biriktirmekle kalmadın, aynı zamanda <b class="b1">0</b> hediyeyi ışıklandırarak heyecanını ve desteğini gösterdin.</p>
|
||||
<p>En sevdiğin hediye <b class="b2">momo</b></p>
|
||||
<p>Bu özel hediye, sadece zevkinin eşsiz bir yansıması olmakla kalmaz, aynı zamanda diğer kullanıcılarla iletişim kurman için önemli bir köprüdür.</p>
|
||||
</div>
|
||||
<!-- Sayfa 8 -->
|
||||
<div class="pages page8" id="img8">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>2024 yılında, değerli bir yükleme ajanı oldun ve toplamda <b class="b1">0</b> coin transfer ettin.</p>
|
||||
<p>Geçen yılki çabaların için teşekkür ederiz.</p>
|
||||
</div>
|
||||
<!-- Sayfa 9 -->
|
||||
<div class="pages page9" id="img9">
|
||||
<p>Şimdi, 2025'e el birliğiyle ilerleyelim, kendi hikayelerimizi yazmaya devam edelim ve daha unutulmaz anılar yaratalım.</p>
|
||||
<p>Gelecekteki her gün, birbirimizin varlığı sayesinde daha parlak olsun!</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
}
|
81
view/molistar/activity/annualReport/local/zh.js
Normal file
@@ -0,0 +1,81 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: '載入中...',
|
||||
layerIndex2: '操作完成',
|
||||
layerIndex3: '網絡錯誤,請退出並重新進入',
|
||||
title: '年度報告',
|
||||
text1: `
|
||||
<!-- 頁面1 -->
|
||||
<div class="pages page1" id="img1">
|
||||
<div class="title"></div>
|
||||
<p class="p1">
|
||||
在廣闊的網絡世界中,你就像一顆閃亮的星星。在這裡,我們不僅看到了你的光芒,也感受到了你帶來的快樂——你是Molistar中不可或缺的一部分。
|
||||
</p>
|
||||
<div class="but">點擊生成</div>
|
||||
</div>
|
||||
<!-- 頁面2 -->
|
||||
<div class="pages page2" id="img2">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">名稱</div>
|
||||
<div class="id">ID: 0</div>
|
||||
<p><b>2024-11-23</b> 是你在Molistar的第一天。</p>
|
||||
<p>從那天起,我們一起經歷了很多:結交新朋友,談論生活,並一起挑戰遊戲的樂趣。</p>
|
||||
<p>每一刻都編織了一條無法分割的紐帶。</p>
|
||||
</div>
|
||||
<!-- 頁面3 -->
|
||||
<div class="pages page3" id="img3">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>你在Molistar度過了<b>0</b>天充滿笑聲的時光。</p>
|
||||
<p>你的積極參與讓房間充滿了活力,每次對話都那麼生動有趣,每場遊戲都充滿了歡笑。</p>
|
||||
<p>因為有你,這個地方變得更加美麗。</p>
|
||||
</div>
|
||||
<!-- 頁面4 -->
|
||||
<div class="pages page4" id="img4">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>在這一年的旅程中,你送出了<b class="b1">0</b>個幣,當之無愧是<b class="b2">財富播種者。</b></p>
|
||||
<p>每一個經驗值都是你努力的見證,每一次升級都記錄了你的進步。</p>
|
||||
<p>從今天第一次進入平台起,你的堅持。</p>
|
||||
</div>
|
||||
<!-- 頁面5 -->
|
||||
<div class="pages page5" id="img5">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>在這一年裡,你累積了<b class="b1">0</b>點魅力經驗值。</p>
|
||||
<p>每一點都是你努力和才華的最佳證明。</p>
|
||||
<p>恭喜你成為我們平台上最棒的<b class="b2">巴拉巴拉</b>!!!</p>
|
||||
</div>
|
||||
<!-- 頁面6 -->
|
||||
<div class="pages page6" id="img6">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<img src="./images/logo.png" alt="" class="txl">
|
||||
<img src="./images/love.png" alt="" class="love">
|
||||
<img src="./images/logo.png" alt="" class="txr">
|
||||
<p>你在<b class="b1">2024-11-23 00:00:00</b>收到了指定的CP禮物。</p>
|
||||
<p>從那一刻起,你和<b class="b2">momo</b>成為了令人羨慕的CP。</p>
|
||||
<p>到目前為止,你們的關係已經保持了<b class="b3">0</b>天。</p>
|
||||
<p>願你們的愛情之路永遠充滿陽光,繼續書寫更多美好的篇章!</p>
|
||||
</div>
|
||||
<!-- 頁面7 -->
|
||||
<div class="pages page7" id="img7">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>今年,你在Molistar中不僅獲得了無數美好的回憶,還通過點亮<b class="b1">0</b>個禮物展示了你的熱情和支持。</p>
|
||||
<p>你最喜歡的禮物是<b class="b2">momo</b></p>
|
||||
<p>這份特殊的禮物不僅是你品味的獨特體現,還是你與其他用戶溝通的重要橋樑。</p>
|
||||
</div>
|
||||
<!-- 頁面8 -->
|
||||
<div class="pages page8" id="img8">
|
||||
<img src="./images/more.png" alt="" class="more">
|
||||
<p>在2024年,你是我們尊敬的充值代理,並且你總共轉帳了<b class="b1">0</b>個幣。</p>
|
||||
<p>感謝你在過去一年的努力。</p>
|
||||
</div>
|
||||
<!-- 頁面9 -->
|
||||
<div class="pages page9" id="img9">
|
||||
<p>現在,讓我們手牽手向2025年邁進,繼續書寫我們的故事,創造更多難忘的回憶。</p>
|
||||
<p>願未來的每一天都因為彼此的存在而更加光明!</p>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
|
||||
}
|
@@ -34,7 +34,7 @@ function initLocalLang() {
|
||||
window.lang.code = 'id'
|
||||
window.lang.defaults = false
|
||||
} else if (lang === 'tr' || window.location.href.match('=tr')) {
|
||||
if (window.location.href.match('roomLevel') || window.location.href.match('rechargeNew') || window.location.href.match('2024-newYear') || window.location.href.match('guild-ar') || window.location.href.match('2024-invitationFission') || window.location.href.match('inform') || window.location.href.match('superId') || window.location.href.match('newWeekStar') || window.location.href.match('home') || window.location.href.match('pay')) {
|
||||
if (window.location.href.match('newRank') || window.location.href.match('roomLevel') || window.location.href.match('rechargeNew') || window.location.href.match('2024-newYear') || window.location.href.match('guild-ar') || window.location.href.match('2024-invitationFission') || window.location.href.match('inform') || window.location.href.match('superId') || window.location.href.match('newWeekStar') || window.location.href.match('home') || window.location.href.match('pay')) {
|
||||
// 土耳其
|
||||
console.log("langHandler" + '土耳其')
|
||||
window.lang = langTr
|
||||
|
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.d1c2b68dc5139c43e9ebe1829075d68c.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.f8cc02553244364f2c4b.js></script><script type=text/javascript src=./static/js/vendor.ef63a6e67767f10f7bb6.js></script><script type=text/javascript src=./static/js/app.d54d862a2d7e9c963263.js></script></body></html>
|
||||
<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.10c895b5758e9983fe14f37279a40de6.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.ec0a7344145e64a70dff.js></script><script type=text/javascript src=./static/js/vendor.ef63a6e67767f10f7bb6.js></script><script type=text/javascript src=./static/js/app.d54d862a2d7e9c963263.js></script></body></html>
|
@@ -1,2 +1,2 @@
|
||||
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,i,u,d=0,b=[];d<r.length;d++)i=r[d],t[i]&&b.push(t[i][0]),t[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);b.length;)b.shift()();if(c)for(d=0;d<c.length;d++)u=o(o.s=c[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"870a31b2b5a5125962ab",1:"f7fd3566ec61ced38fe8",2:"48bde5b1f5f3eaa3c75f",3:"00bcf5022e7d98b672a2",4:"c9d5b75efaa28b779e79",5:"93d874959b80a4ee1da1",6:"de3228ef1e13c7d6649c",7:"a1746a1c89c587b75f6f",8:"67319477a4c5ac59b510",9:"cf187b6df4a386b203eb",10:"f6e85397f46b6b94d58d",11:"a5e798e367bdaa3003e9",12:"b8ac2b08a54dd44dc799"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
|
||||
//# sourceMappingURL=manifest.f8cc02553244364f2c4b.js.map
|
||||
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,i,u,d=0,b=[];d<r.length;d++)i=r[d],t[i]&&b.push(t[i][0]),t[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);b.length;)b.shift()();if(c)for(d=0;d<c.length;d++)u=o(o.s=c[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"870a31b2b5a5125962ab",1:"cfae085c8ebaaa759b24",2:"4eed7dde0e78f0a7578d",3:"00bcf5022e7d98b672a2",4:"c9d5b75efaa28b779e79",5:"93d874959b80a4ee1da1",6:"de3228ef1e13c7d6649c",7:"a1746a1c89c587b75f6f",8:"67319477a4c5ac59b510",9:"cf187b6df4a386b203eb",10:"f6e85397f46b6b94d58d",11:"a5e798e367bdaa3003e9",12:"b8ac2b08a54dd44dc799"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
|
||||
//# sourceMappingURL=manifest.ec0a7344145e64a70dff.js.map
|
@@ -1,7 +1,8 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
background: #1C0E04;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
@@ -10,7 +11,7 @@ body {
|
||||
line-height: 0.58667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0.86667rem;
|
||||
top: 1.2rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.50667rem;
|
||||
@@ -24,33 +25,83 @@ body {
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.back p {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.newText1 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
transition: all 0.5s;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.newText11 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 11.70667rem;
|
||||
height: 17rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header .tabBox {
|
||||
width: 7.6rem;
|
||||
height: 0.46667rem;
|
||||
line-height: 0.46667rem;
|
||||
width: 10rem;
|
||||
height: 1.12rem;
|
||||
line-height: 1.12rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 1.52rem;
|
||||
top: 2.17333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.14667rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .tabBox div {
|
||||
position: relative;
|
||||
width: 1.32rem;
|
||||
color: #C3BEBA;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 400;
|
||||
width: 2.32rem;
|
||||
height: 1.12rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header .tabBox div span {
|
||||
@@ -66,8 +117,10 @@ body {
|
||||
}
|
||||
|
||||
.header .tabBox .act {
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: url(../images/tabAct.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .tabBox .act span {
|
||||
@@ -76,48 +129,80 @@ body {
|
||||
|
||||
.header .sTab {
|
||||
position: absolute;
|
||||
width: 6.13333rem;
|
||||
height: 0.74667rem;
|
||||
top: 2.77333rem;
|
||||
min-width: 4.8rem;
|
||||
height: 0.73333rem;
|
||||
top: 3.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0.74667rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.header .sTab div {
|
||||
width: 3.06667rem;
|
||||
min-width: 2.26667rem;
|
||||
height: 0.74667rem;
|
||||
line-height: 0.74667rem;
|
||||
border-radius: 0.74667rem;
|
||||
color: #DBD6CF;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 400;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header .sTab .act {
|
||||
color: #6D6D6D;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
background: url(../images/butAct.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .monthlyRewards {
|
||||
width: 3.46667rem;
|
||||
height: 3.86667rem;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 3.69333rem;
|
||||
right: -0.5rem;
|
||||
background: url(../images/Rewards_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .monthlyRewards p {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 2.69333rem;
|
||||
}
|
||||
|
||||
.header .monthlyRewards b {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 3.08rem;
|
||||
}
|
||||
|
||||
.header .top {
|
||||
width: 9.61333rem;
|
||||
height: 4.02667rem;
|
||||
width: 10rem;
|
||||
height: 11.78667rem;
|
||||
position: absolute;
|
||||
top: 7.86667rem;
|
||||
top: 4.50667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .top .top1 {
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
width: 7.4rem;
|
||||
height: 4.01333rem;
|
||||
width: 10rem;
|
||||
height: 6.66667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@@ -132,27 +217,29 @@ body {
|
||||
}
|
||||
|
||||
.header .top .top1 .tx {
|
||||
width: 2.34667rem;
|
||||
height: 2.58667rem;
|
||||
width: 2.77333rem;
|
||||
height: 2.74667rem;
|
||||
position: absolute;
|
||||
top: 0.93333rem;
|
||||
top: 1.89333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top1 .nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -1.46667rem;
|
||||
top: 4.61333rem;
|
||||
z-index: 3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header .top .top1 .fist {
|
||||
@@ -161,34 +248,44 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -2.88rem;
|
||||
top: 4.8rem;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .top .top1 .score {
|
||||
width: 100%;
|
||||
height: 0.42667rem;
|
||||
line-height: 0.42667rem;
|
||||
color: #fff;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -2.26667rem;
|
||||
top: 4.8rem;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .top .top1 .score img {
|
||||
display: inline-block;
|
||||
width: 0.45333rem;
|
||||
height: 0.45333rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header .top .top1 .score span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header .top .top2 {
|
||||
position: absolute;
|
||||
top: -1.52rem;
|
||||
width: 2.82667rem;
|
||||
height: 3.04rem;
|
||||
left: 0.44rem;
|
||||
top: 6.66667rem;
|
||||
width: 5rem;
|
||||
height: 5.12rem;
|
||||
left: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -202,55 +299,61 @@ body {
|
||||
}
|
||||
|
||||
.header .top .top2 .tx {
|
||||
width: 1.78667rem;
|
||||
height: 1.78667rem;
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
position: absolute;
|
||||
top: 0.88rem;
|
||||
top: 1.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top2 .nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -0.68rem;
|
||||
top: 3.01333rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top2 .score {
|
||||
width: 100%;
|
||||
height: 0.42667rem;
|
||||
line-height: 0.42667rem;
|
||||
color: #fff;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -1.33333rem;
|
||||
top: 3.38667rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top2 .score img {
|
||||
display: inline-block;
|
||||
width: 0.45333rem;
|
||||
height: 0.45333rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header .top .top3 {
|
||||
position: absolute;
|
||||
top: -1.52rem;
|
||||
width: 2.82667rem;
|
||||
height: 3.04rem;
|
||||
right: 0.44rem;
|
||||
top: 6.66667rem;
|
||||
width: 5rem;
|
||||
height: 5.12rem;
|
||||
right: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -264,99 +367,93 @@ body {
|
||||
}
|
||||
|
||||
.header .top .top3 .tx {
|
||||
width: 1.78667rem;
|
||||
height: 1.78667rem;
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
position: absolute;
|
||||
top: 0.88rem;
|
||||
top: 1.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top3 .nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -0.68rem;
|
||||
top: 3.01333rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top3 .score {
|
||||
width: 100%;
|
||||
height: 0.42667rem;
|
||||
line-height: 0.42667rem;
|
||||
color: #fff;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -1.33333rem;
|
||||
top: 3.38667rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top3 .score img {
|
||||
display: inline-block;
|
||||
width: 0.45333rem;
|
||||
height: 0.45333rem;
|
||||
}
|
||||
|
||||
.header .tops1 {
|
||||
background: url(../images/bg1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .tops2 {
|
||||
background: url(../images/bg2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .tops3 {
|
||||
background: url(../images/bg3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .tops4 {
|
||||
background: url(../images/bg4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header1 {
|
||||
background: url(../images/header1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header2 {
|
||||
background: url(../images/header2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header3 {
|
||||
background: url(../images/header3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header3 .top .top1 .tx,
|
||||
.header3 .top .top2 .tx,
|
||||
.header3 .top .top3 .tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.header4 {
|
||||
background: url(../images/header4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header4 .top .top1 .tx,
|
||||
.header4 .top .top2 .tx,
|
||||
.header4 .top .top3 .tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 10rem;
|
||||
height: 12.16rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: -0.6rem auto 2.04rem;
|
||||
border-radius: 0.72rem 0.72rem 0px 0px;
|
||||
margin: 0rem auto 2.04rem;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.50667rem;
|
||||
padding: 0.50667rem 0.45333rem 0 0.45333rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@@ -366,162 +463,197 @@ ul::-webkit-scrollbar {
|
||||
|
||||
ul li {
|
||||
width: 100%;
|
||||
height: 1.33333rem;
|
||||
margin-bottom: 0.74667rem;
|
||||
height: 2rem;
|
||||
margin-bottom: 0.4rem;
|
||||
background: url(../images/li.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li .seqNo {
|
||||
width: 0.66667rem;
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
width: 0.88rem;
|
||||
height: 1.05333rem;
|
||||
line-height: 1.05333rem;
|
||||
text-align: center;
|
||||
color: #15132B;
|
||||
margin-right: 0.49333rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
color: #000;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: -0.10667rem;
|
||||
left: 0.82667rem;
|
||||
background: url(../images/num.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
ul li .tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.28rem;
|
||||
margin-left: 1.94667rem;
|
||||
margin-right: 0.24rem;
|
||||
margin-top: 0.41333rem;
|
||||
border: 0.02667rem solid #FFF8C2;
|
||||
}
|
||||
|
||||
ul li .nick {
|
||||
width: 2.5rem;
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul li .score {
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
float: right;
|
||||
color: #333333;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin-right: 1.17333rem;
|
||||
}
|
||||
|
||||
ul li .score img {
|
||||
display: inline-block;
|
||||
width: 0.42667rem;
|
||||
height: 0.42667rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul li .score span {
|
||||
ul li .score span,
|
||||
ul li .score b {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ul1 {
|
||||
background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
|
||||
}
|
||||
|
||||
.ul2 {
|
||||
background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
|
||||
}
|
||||
|
||||
.ul3 {
|
||||
background: linear-gradient(180deg, #FABBBB -57%, #FEF9F9 90%);
|
||||
}
|
||||
|
||||
.ul4 {
|
||||
background: linear-gradient(180deg, #FFC6F5 -57%, #F9F7F9 90%);
|
||||
margin-bottom: 0;
|
||||
.ul3 li .tx,
|
||||
.ul4 li .tx {
|
||||
border-radius: 0.24rem;
|
||||
}
|
||||
|
||||
.my {
|
||||
width: 10rem;
|
||||
height: 2.04rem;
|
||||
height: 2rem;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
background: url(../images/myBg.png) no-repeat;
|
||||
background: url(../images/myLi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
left: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.my .box {
|
||||
width: 100%;
|
||||
height: 1.33333rem;
|
||||
margin-top: 0.46667rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.4rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my .box .seqNo {
|
||||
width: 0.66667rem;
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
width: 0.88rem;
|
||||
height: 1.05333rem;
|
||||
line-height: 1.05333rem;
|
||||
text-align: center;
|
||||
color: #15132B;
|
||||
margin-right: 0.49333rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
color: #000;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: -0.10667rem;
|
||||
left: 0.82667rem;
|
||||
background: url(../images/num.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.my .box .tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.28rem;
|
||||
margin-left: 1.94667rem;
|
||||
margin-right: 0.24rem;
|
||||
margin-top: 0.41333rem;
|
||||
}
|
||||
|
||||
.my .box .nick {
|
||||
width: 2.5rem;
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.my .box .score {
|
||||
height: 1.33333rem;
|
||||
line-height: 1.33333rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
float: right;
|
||||
color: #333333;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin-right: 1.17333rem;
|
||||
}
|
||||
|
||||
.my .box .score img {
|
||||
display: inline-block;
|
||||
width: 0.42667rem;
|
||||
height: 0.42667rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my .box .score span {
|
||||
.my .box .score span,
|
||||
.my .box .score b {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.arabic .header .tabBox {
|
||||
width: 90%;
|
||||
.arabic ul li .seqNo {
|
||||
left: auto;
|
||||
right: 0.82667rem;
|
||||
}
|
||||
|
||||
.arabic .header .tabBox div {
|
||||
width: 1.9rem;
|
||||
font-size: 0.33333rem;
|
||||
white-space: nowrap;
|
||||
.arabic ul li .tx {
|
||||
float: right;
|
||||
margin-left: 0.24rem;
|
||||
margin-right: 1.94667rem;
|
||||
}
|
||||
|
||||
.english .header .tabBox {
|
||||
width: 90%;
|
||||
.arabic ul li .nick {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.english .header .tabBox div {
|
||||
font-size: 0.34667rem;
|
||||
white-space: nowrap;
|
||||
width: 1.7rem;
|
||||
.arabic ul li .score {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: 1.17333rem;
|
||||
}
|
||||
|
||||
.arabic .my .box .seqNo {
|
||||
left: auto;
|
||||
right: 0.82667rem;
|
||||
}
|
||||
|
||||
.arabic .my .box .tx {
|
||||
float: right;
|
||||
margin-left: 0.24rem;
|
||||
margin-right: 1.94667rem;
|
||||
}
|
||||
|
||||
.arabic .my .box .nick {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.arabic .my .box .score {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: 1.17333rem;
|
||||
}
|
||||
|
@@ -5,7 +5,8 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
background: #1C0E04;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
@@ -14,7 +15,7 @@ body {
|
||||
line-height: px2rem(44);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: px2rem(65);
|
||||
top: px2rem(90);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
@@ -27,32 +28,86 @@ body {
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.newText1 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
// background: rgba(0, 0, 0, .8);
|
||||
background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
transition: all 0.5s;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.newText11 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
// background:rgba(0, 0, 0, .65);
|
||||
// background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(750);
|
||||
height: px2rem(878);
|
||||
// height: px2rem(1229);
|
||||
height: 17rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
.tabBox {
|
||||
width: px2rem(570);
|
||||
height: px2rem(35);
|
||||
line-height: px2rem(35);
|
||||
width: px2rem(750);
|
||||
height: px2rem(84);
|
||||
line-height: px2rem(84);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: px2rem(114);
|
||||
top: px2rem(163);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(11);
|
||||
z-index: 2;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
width: px2rem(99);
|
||||
color: #C3BEBA;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 400;
|
||||
width: px2rem(174);
|
||||
height: px2rem(84);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
width: px2rem(37);
|
||||
@@ -68,8 +123,10 @@ body {
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: url(../images/tabAct.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
@@ -79,47 +136,82 @@ body {
|
||||
|
||||
.sTab {
|
||||
position: absolute;
|
||||
width: px2rem(460);
|
||||
height: px2rem(56);
|
||||
top: px2rem(208);
|
||||
// min-width: px2rem(510);
|
||||
min-width: 4.8rem;
|
||||
height: px2rem(55);
|
||||
top: px2rem(270);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, .4);
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: px2rem(56);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
z-index: 4;
|
||||
|
||||
div {
|
||||
width: px2rem(230);
|
||||
min-width: px2rem(170);
|
||||
height: px2rem(56);
|
||||
line-height: px2rem(56);
|
||||
border-radius: px2rem(56);
|
||||
color: #DBD6CF;
|
||||
font-size: px2rem(30);
|
||||
font-weight: 400;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #6D6D6D;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
background: url(../images/butAct.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.monthlyRewards {
|
||||
width: px2rem(260);
|
||||
height: px2rem(290);
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: px2rem(277);
|
||||
right: -0.5rem;
|
||||
background: url(../images/Rewards_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: px2rem(202);
|
||||
}
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 3.08rem;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
width: px2rem(721);
|
||||
height: px2rem(302);
|
||||
width: px2rem(750);
|
||||
height: px2rem(884);
|
||||
position: absolute;
|
||||
top: px2rem(590);
|
||||
top: px2rem(338);
|
||||
// top: 8.3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.top1 {
|
||||
position: absolute;
|
||||
top: px2rem(-300);
|
||||
width: px2rem(555);
|
||||
height: px2rem(301);
|
||||
// top: px2rem(-300);
|
||||
width: px2rem(750);
|
||||
height: px2rem(500);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@@ -133,27 +225,29 @@ body {
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(176);
|
||||
height: px2rem(194);
|
||||
width: px2rem(208);
|
||||
height: px2rem(206);
|
||||
position: absolute;
|
||||
top: px2rem(70);
|
||||
top: px2rem(142);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-110);
|
||||
top: px2rem(346);
|
||||
z-index: 3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fist {
|
||||
@@ -162,36 +256,47 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-216);
|
||||
top: px2rem(360);
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(32);
|
||||
line-height: px2rem(32);
|
||||
color: #fff;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-170);
|
||||
top: px2rem(360);
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(34);
|
||||
height: px2rem(34);
|
||||
// margin-top: -0.04rem;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top2 {
|
||||
position: absolute;
|
||||
top: px2rem(-114);
|
||||
width: px2rem(212);
|
||||
height: px2rem(228);
|
||||
left: px2rem(33);
|
||||
top: px2rem(500);
|
||||
width: px2rem(375);
|
||||
height: px2rem(384);
|
||||
left: px2rem(0);
|
||||
z-index: 2;
|
||||
// display: none;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
@@ -203,58 +308,64 @@ body {
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(134);
|
||||
height: px2rem(134);
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
position: absolute;
|
||||
top: px2rem(66);
|
||||
top: px2rem(92);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-51);
|
||||
top: px2rem(226);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(32);
|
||||
line-height: px2rem(32);
|
||||
color: #fff;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-100);
|
||||
top: px2rem(254);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(34);
|
||||
height: px2rem(34);
|
||||
// margin-top: -0.04rem;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top3 {
|
||||
position: absolute;
|
||||
top: px2rem(-114);
|
||||
width: px2rem(212);
|
||||
height: px2rem(228);
|
||||
right: px2rem(33);
|
||||
top: px2rem(500);
|
||||
width: px2rem(375);
|
||||
height: px2rem(384);
|
||||
right: px2rem(0);
|
||||
z-index: 2;
|
||||
// display: none;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
@@ -266,103 +377,127 @@ body {
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(134);
|
||||
height: px2rem(134);
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
position: absolute;
|
||||
top: px2rem(66);
|
||||
top: px2rem(92);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-51);
|
||||
top: px2rem(226);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(32);
|
||||
line-height: px2rem(32);
|
||||
color: #fff;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-100);
|
||||
top: px2rem(254);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(34);
|
||||
height: px2rem(34);
|
||||
// margin-top: -0.04rem;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tops1 {
|
||||
background: url(../images/bg1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .tops1 {
|
||||
// background: url(../images/bg1.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.tops2 {
|
||||
background: url(../images/bg2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .tops2 {
|
||||
// background: url(../images/bg2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.tops3 {
|
||||
background: url(../images/bg3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .tops3 {
|
||||
// background: url(../images/bg3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.tops4 {
|
||||
background: url(../images/bg4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .tops4 {
|
||||
// background: url(../images/bg4.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
.header1 {
|
||||
background: url(../images/header1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% px2rem(1070);
|
||||
}
|
||||
|
||||
.header2 {
|
||||
background: url(../images/header2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% px2rem(1070);
|
||||
}
|
||||
|
||||
.header3 {
|
||||
background: url(../images/header3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% px2rem(1070);
|
||||
|
||||
.top {
|
||||
|
||||
.top1,
|
||||
.top2,
|
||||
.top3 {
|
||||
.tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header4 {
|
||||
background: url(../images/header4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% px2rem(1070);
|
||||
|
||||
.top {
|
||||
|
||||
.top1,
|
||||
.top2,
|
||||
.top3 {
|
||||
.tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(750);
|
||||
height: px2rem(912);
|
||||
// height: px2rem(912);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: px2rem(-45) auto px2rem(153);
|
||||
border-radius: px2rem(54) px2rem(54) 0px 0px;
|
||||
margin: px2rem(0) auto px2rem(153);
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(38);
|
||||
padding: px2rem(38) px2rem(34) 0 px2rem(34);
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@@ -371,143 +506,168 @@ ul {
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(100);
|
||||
margin-bottom: px2rem(56);
|
||||
height: px2rem(150);
|
||||
margin-bottom: px2rem(30);
|
||||
background: url(../images/li.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.seqNo {
|
||||
width: px2rem(50);
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
width: px2rem(66);
|
||||
height: px2rem(79);
|
||||
line-height: px2rem(79);
|
||||
text-align: center;
|
||||
color: #15132B;
|
||||
margin-right: px2rem(37);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
color: #000;
|
||||
font-size: px2rem(38);
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: px2rem(-8);
|
||||
left: px2rem(62);
|
||||
background: url(../images/num.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
width: px2rem(90);
|
||||
height: px2rem(90);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(21);
|
||||
margin-left: px2rem(146);
|
||||
margin-right: px2rem(18);
|
||||
margin-top: px2rem(31);
|
||||
border: px2rem(2) solid #FFF8C2;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 2.5rem;
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
height: px2rem(150);
|
||||
line-height: px2rem(150);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.score {
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
height: px2rem(150);
|
||||
line-height: px2rem(150);
|
||||
float: right;
|
||||
color: #333333;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin-right: px2rem(88);
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(32);
|
||||
height: px2rem(32);
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
vertical-align: middle;
|
||||
// margin-top: -0.1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
span,
|
||||
b {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ul1 {
|
||||
background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
|
||||
}
|
||||
// .ul1 {
|
||||
// background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
|
||||
// }
|
||||
|
||||
.ul2 {
|
||||
background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
|
||||
}
|
||||
|
||||
.ul3 {
|
||||
background: linear-gradient(180deg, #FABBBB -57%, #FEF9F9 90%);
|
||||
}
|
||||
// .ul2 {
|
||||
// background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
|
||||
// }
|
||||
|
||||
.ul3,
|
||||
.ul4 {
|
||||
background: linear-gradient(180deg, #FFC6F5 -57%, #F9F7F9 90%);
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
.tx {
|
||||
border-radius: px2rem(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my {
|
||||
width: px2rem(750);
|
||||
height: px2rem(153);
|
||||
height: px2rem(150);
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
background: url(../images/myBg.png) no-repeat;
|
||||
background: url(../images/myLi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
left: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: px2rem(100);
|
||||
margin-top: px2rem(35);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(30);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.seqNo {
|
||||
width: px2rem(50);
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
width: px2rem(66);
|
||||
height: px2rem(79);
|
||||
line-height: px2rem(79);
|
||||
text-align: center;
|
||||
color: #15132B;
|
||||
margin-right: px2rem(37);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
color: #000;
|
||||
font-size: px2rem(38);
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: px2rem(-8);
|
||||
left: px2rem(62);
|
||||
background: url(../images/num.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: px2rem(100);
|
||||
height: px2rem(100);
|
||||
width: px2rem(90);
|
||||
height: px2rem(90);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(21);
|
||||
margin-left: px2rem(146);
|
||||
margin-right: px2rem(18);
|
||||
margin-top: px2rem(31);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 2.5rem;
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
height: px2rem(150);
|
||||
line-height: px2rem(150);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.score {
|
||||
height: px2rem(100);
|
||||
line-height: px2rem(100);
|
||||
height: px2rem(150);
|
||||
line-height: px2rem(150);
|
||||
float: right;
|
||||
color: #333333;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin-right: px2rem(88);
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(32);
|
||||
height: px2rem(32);
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
vertical-align: middle;
|
||||
// margin-top: -0.1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
span,
|
||||
b {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -515,25 +675,49 @@ ul {
|
||||
}
|
||||
|
||||
.arabic {
|
||||
.header .tabBox {
|
||||
width: 90%;
|
||||
ul li {
|
||||
.seqNo {
|
||||
left: auto;
|
||||
right: 0.82667rem;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 1.9rem;
|
||||
font-size: px2rem(25);
|
||||
white-space: nowrap;
|
||||
.tx {
|
||||
float: right;
|
||||
margin-left: 0.24rem;
|
||||
margin-right: 1.94667rem;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: 1.17333rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.english {
|
||||
.my .box {
|
||||
.seqNo {
|
||||
left: auto;
|
||||
right: 0.82667rem;
|
||||
}
|
||||
|
||||
.header .tabBox {
|
||||
width: 90%;
|
||||
div {
|
||||
font-size: px2rem(26);
|
||||
white-space: nowrap;
|
||||
width: 1.7rem;
|
||||
.tx {
|
||||
float: right;
|
||||
margin-left: 0.24rem;
|
||||
margin-right: 1.94667rem;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: 1.17333rem;
|
||||
}
|
||||
}
|
||||
}
|
470
view/molistar/modules/newRank/css/monthlyRewards.css
Normal file
@@ -0,0 +1,470 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #1C0E04;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 0.66667rem;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 1.2rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.50667rem;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 0.58667rem;
|
||||
height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.back p {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
top: 0rem;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.newText2 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
transition: all 0.5s;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.newText22 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 10rem;
|
||||
height: 17rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header .tabBox {
|
||||
width: 10rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 2.17333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.14667rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .tabBox div {
|
||||
position: relative;
|
||||
width: 2.13333rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 0.8rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.header .tabBox div span {
|
||||
width: 0.49333rem;
|
||||
height: 0.10667rem;
|
||||
border-radius: 0.10667rem;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: -0.29333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .tabBox .act {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(0deg, #FFDC7D, #FFEEBC);
|
||||
}
|
||||
|
||||
.header .tabBox .act span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header .lastMonthWealthTOP3 {
|
||||
min-width: 5.06667rem;
|
||||
height: 0.77333rem;
|
||||
line-height: 0.77333rem;
|
||||
text-align: center;
|
||||
padding: 0 0.32rem;
|
||||
background: url(../images/lastMonth.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
top: 3.57333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .top {
|
||||
width: 10rem;
|
||||
height: 11.78667rem;
|
||||
position: absolute;
|
||||
top: 4.50667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .top .top1 {
|
||||
position: absolute;
|
||||
width: 10rem;
|
||||
height: 6.66667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .top .top1 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .top .top1 .tx {
|
||||
width: 2.77333rem;
|
||||
height: 2.77333rem;
|
||||
position: absolute;
|
||||
top: 1.89333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top1 .nick {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4.61333rem;
|
||||
z-index: 3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header .top .top1 .fist {
|
||||
width: 1.02667rem;
|
||||
height: 1.24rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4.8rem;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .top .top1 .score {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4.8rem;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .top .top1 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header .top .top1 .score span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header .top .top2 {
|
||||
position: absolute;
|
||||
top: 6.66667rem;
|
||||
width: 5rem;
|
||||
height: 5.12rem;
|
||||
left: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .top .top2 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .top .top2 .tx {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
position: absolute;
|
||||
top: 1.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top2 .nick {
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.01333rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top2 .score {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.38667rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top2 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header .top .top3 {
|
||||
position: absolute;
|
||||
top: 6.66667rem;
|
||||
width: 5rem;
|
||||
height: 5.12rem;
|
||||
right: 0rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .top .top3 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .top .top3 .tx {
|
||||
width: 1.86667rem;
|
||||
height: 1.86667rem;
|
||||
position: absolute;
|
||||
top: 1.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header .top .top3 .nick {
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.01333rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top3 .score {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
color: #FFF8C2;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.38667rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header .top .top3 .score img {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
.header1 {
|
||||
background: url(../images/header11.png) no-repeat;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header2 {
|
||||
background: url(../images/header22.png) no-repeat;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header3 {
|
||||
background: url(../images/header33.png) no-repeat;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header3 .top .top1 .tx,
|
||||
.header3 .top .top2 .tx,
|
||||
.header3 .top .top3 .tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.header4 {
|
||||
background: url(../images/header4.png) no-repeat;
|
||||
background-size: 100% 14.26667rem;
|
||||
}
|
||||
|
||||
.header4 .top .top1 .tx,
|
||||
.header4 .top .top2 .tx,
|
||||
.header4 .top .top3 .tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.rewards {
|
||||
width: 10rem;
|
||||
margin: 0 auto 0.89333rem;
|
||||
}
|
||||
|
||||
.reward1 {
|
||||
height: 48.02667rem;
|
||||
background: url(../images/reward1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward2 {
|
||||
height: 34.56rem;
|
||||
background: url(../images/reward2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward3 {
|
||||
height: 47.68rem;
|
||||
background: url(../images/reward3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.china .reward1 {
|
||||
background: url(../images/reward1-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.china .reward2 {
|
||||
background: url(../images/reward2-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.china .reward3 {
|
||||
background: url(../images/reward3-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Turkiye .reward1 {
|
||||
background: url(../images/reward1-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Turkiye .reward2 {
|
||||
background: url(../images/reward2-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Turkiye .reward3 {
|
||||
background: url(../images/reward3-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.arabic .reward1 {
|
||||
background: url(../images/reward1-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.arabic .reward2 {
|
||||
background: url(../images/reward2-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.arabic .reward3 {
|
||||
background: url(../images/reward3-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
498
view/molistar/modules/newRank/css/monthlyRewards.scss
Normal file
@@ -0,0 +1,498 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #1C0E04;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: px2rem(50);
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: px2rem(90);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
|
||||
img {
|
||||
width: px2rem(44);
|
||||
height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
top: px2rem(0);
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.newText2 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
// background:rgba(0, 0, 0, .65);
|
||||
background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
transition: all 0.5s;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.newText22 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 2rem;
|
||||
// background:rgba(0, 0, 0, .65);
|
||||
// background: #000;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(750);
|
||||
// height: px2rem(1229);
|
||||
height: 17rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
.tabBox {
|
||||
width: px2rem(750);
|
||||
height: px2rem(60);
|
||||
line-height: px2rem(60);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: px2rem(163);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(11);
|
||||
z-index: 2;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
width: px2rem(160);
|
||||
height: px2rem(60);
|
||||
border-radius: px2rem(60);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
|
||||
span {
|
||||
width: px2rem(37);
|
||||
height: px2rem(8);
|
||||
border-radius: px2rem(8);
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: px2rem(-22);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(0deg, #FFDC7D, #FFEEBC);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lastMonthWealthTOP3 {
|
||||
min-width: px2rem(380);
|
||||
height: px2rem(58);
|
||||
line-height: px2rem(58);
|
||||
text-align: center;
|
||||
padding: 0 px2rem(24);
|
||||
background: url(../images/lastMonth.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #000;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
top: px2rem(268);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top {
|
||||
width: px2rem(750);
|
||||
height: px2rem(884);
|
||||
position: absolute;
|
||||
top: px2rem(338);
|
||||
// top: 8.3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.top1 {
|
||||
position: absolute;
|
||||
// top: px2rem(-300);
|
||||
width: px2rem(750);
|
||||
height: px2rem(500);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(208);
|
||||
height: px2rem(208);
|
||||
position: absolute;
|
||||
top: px2rem(142);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(346);
|
||||
z-index: 3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fist {
|
||||
width: px2rem(77);
|
||||
height: px2rem(93);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(360);
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(360);
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top2 {
|
||||
position: absolute;
|
||||
top: px2rem(500);
|
||||
width: px2rem(375);
|
||||
height: px2rem(384);
|
||||
left: px2rem(0);
|
||||
z-index: 2;
|
||||
// display: none;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
position: absolute;
|
||||
top: px2rem(92);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(226);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(254);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top3 {
|
||||
position: absolute;
|
||||
top: px2rem(500);
|
||||
width: px2rem(375);
|
||||
height: px2rem(384);
|
||||
right: px2rem(0);
|
||||
z-index: 2;
|
||||
// display: none;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(140);
|
||||
height: px2rem(140);
|
||||
position: absolute;
|
||||
top: px2rem(92);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 50%;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF8C2;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(226);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
height: px2rem(30);
|
||||
line-height: px2rem(30);
|
||||
color: #FFF8C2;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(254);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header1 {
|
||||
background: url(../images/header11.png) no-repeat;
|
||||
background-size: 100% px2rem(1070);
|
||||
}
|
||||
|
||||
.header2 {
|
||||
background: url(../images/header22.png) no-repeat;
|
||||
background-size: 100% px2rem(1070);
|
||||
}
|
||||
|
||||
.header3 {
|
||||
background: url(../images/header33.png) no-repeat;
|
||||
background-size: 100% px2rem(1070);
|
||||
|
||||
.top {
|
||||
|
||||
.top1,
|
||||
.top2,
|
||||
.top3 {
|
||||
.tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header4 {
|
||||
background: url(../images/header4.png) no-repeat;
|
||||
background-size: 100% px2rem(1070);
|
||||
|
||||
.top {
|
||||
|
||||
.top1,
|
||||
.top2,
|
||||
.top3 {
|
||||
.tx {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewards {
|
||||
width: px2rem(750);
|
||||
margin: 0 auto px2rem(67);
|
||||
}
|
||||
|
||||
.reward1 {
|
||||
height: px2rem(3602);
|
||||
background: url(../images/reward1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward2 {
|
||||
height: px2rem(2592);
|
||||
background: url(../images/reward2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward3 {
|
||||
height: px2rem(3576);
|
||||
background: url(../images/reward3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.china {
|
||||
.reward1 {
|
||||
background: url(../images/reward1-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward2 {
|
||||
background: url(../images/reward2-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward3 {
|
||||
background: url(../images/reward3-zh.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Turkiye {
|
||||
.reward1 {
|
||||
background: url(../images/reward1-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward2 {
|
||||
background: url(../images/reward2-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward3 {
|
||||
background: url(../images/reward3-tr.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.arabic {
|
||||
.reward1 {
|
||||
background: url(../images/reward1-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward2 {
|
||||
background: url(../images/reward2-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.reward3 {
|
||||
background: url(../images/reward3-ar.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
BIN
view/molistar/modules/newRank/images/1.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
view/molistar/modules/newRank/images/2.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
view/molistar/modules/newRank/images/3.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
BIN
view/molistar/modules/newRank/images/4.png
Normal file
After Width: | Height: | Size: 5.0 KiB |
BIN
view/molistar/modules/newRank/images/Rewards_icon.png
Normal file
After Width: | Height: | Size: 393 KiB |
BIN
view/molistar/modules/newRank/images/butAct.png
Normal file
After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 627 KiB After Width: | Height: | Size: 826 KiB |
BIN
view/molistar/modules/newRank/images/header11.png
Normal file
After Width: | Height: | Size: 5.6 MiB |
Before Width: | Height: | Size: 564 KiB After Width: | Height: | Size: 870 KiB |
BIN
view/molistar/modules/newRank/images/header22.png
Normal file
After Width: | Height: | Size: 5.6 MiB |
Before Width: | Height: | Size: 569 KiB After Width: | Height: | Size: 819 KiB |
BIN
view/molistar/modules/newRank/images/header33.png
Normal file
After Width: | Height: | Size: 5.5 MiB |
Before Width: | Height: | Size: 574 KiB After Width: | Height: | Size: 785 KiB |
BIN
view/molistar/modules/newRank/images/lastMonth.png
Normal file
After Width: | Height: | Size: 58 KiB |
BIN
view/molistar/modules/newRank/images/li.png
Normal file
After Width: | Height: | Size: 333 KiB |
BIN
view/molistar/modules/newRank/images/myLi.png
Normal file
After Width: | Height: | Size: 330 KiB |
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 396 KiB |
BIN
view/molistar/modules/newRank/images/no11.png
Normal file
After Width: | Height: | Size: 2.0 MiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 172 KiB |
BIN
view/molistar/modules/newRank/images/no22.png
Normal file
After Width: | Height: | Size: 806 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 167 KiB |
BIN
view/molistar/modules/newRank/images/no33.png
Normal file
After Width: | Height: | Size: 815 KiB |
BIN
view/molistar/modules/newRank/images/num.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
view/molistar/modules/newRank/images/reward1-ar.png
Normal file
After Width: | Height: | Size: 415 KiB |
BIN
view/molistar/modules/newRank/images/reward1-tr.png
Normal file
After Width: | Height: | Size: 425 KiB |
BIN
view/molistar/modules/newRank/images/reward1-zh.png
Normal file
After Width: | Height: | Size: 420 KiB |
BIN
view/molistar/modules/newRank/images/reward1.png
Normal file
After Width: | Height: | Size: 425 KiB |
BIN
view/molistar/modules/newRank/images/reward2-ar.png
Normal file
After Width: | Height: | Size: 192 KiB |
BIN
view/molistar/modules/newRank/images/reward2-tr.png
Normal file
After Width: | Height: | Size: 194 KiB |
BIN
view/molistar/modules/newRank/images/reward2-zh.png
Normal file
After Width: | Height: | Size: 189 KiB |
BIN
view/molistar/modules/newRank/images/reward2.png
Normal file
After Width: | Height: | Size: 194 KiB |
BIN
view/molistar/modules/newRank/images/reward3-ar.png
Normal file
After Width: | Height: | Size: 305 KiB |
BIN
view/molistar/modules/newRank/images/reward3-tr.png
Normal file
After Width: | Height: | Size: 306 KiB |
BIN
view/molistar/modules/newRank/images/reward3-zh.png
Normal file
After Width: | Height: | Size: 299 KiB |
BIN
view/molistar/modules/newRank/images/reward3.png
Normal file
After Width: | Height: | Size: 308 KiB |
BIN
view/molistar/modules/newRank/images/tab.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
view/molistar/modules/newRank/images/tabAct.png
Normal file
After Width: | Height: | Size: 17 KiB |
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MoliStar</title>
|
||||
<title class="newText1">MoliStar</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css?v=1.1">
|
||||
</head>
|
||||
@@ -13,7 +13,10 @@
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/back.png" alt="">
|
||||
<!-- <p class="newText1">Honor Ranking</p> -->
|
||||
</div>
|
||||
<p class="newText1"></p>
|
||||
<p class="newText11"></p>
|
||||
<!-- 头部 -->
|
||||
<div class="header header1">
|
||||
<div class="tabBox">
|
||||
@@ -23,8 +26,14 @@
|
||||
<div class="text4"><span></span></div>
|
||||
</div>
|
||||
<div class="sTab">
|
||||
<div class="act text5"></div>
|
||||
<div class="text6"></div>
|
||||
<div class="act text5" type="1"></div>
|
||||
<div class="text6" type="2"></div>
|
||||
<div class="newText2" type="5"></div>
|
||||
</div>
|
||||
<!-- 奖励 -->
|
||||
<div class="monthlyRewards">
|
||||
<p class="newText4"></p>
|
||||
<b class="newText5"></b>
|
||||
</div>
|
||||
<!-- 前三 -->
|
||||
<div class="top tops1">
|
||||
@@ -32,29 +41,31 @@
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick"></div>
|
||||
<img src="./images/fist.png" alt="" class="fist">
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
|
||||
<!-- <div class="score">
|
||||
<img src="./images/1.png" alt="">
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="top2">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick"></div>
|
||||
<img src="./images/fist.png" alt="" class="fist">
|
||||
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<b class="newText3"></b>
|
||||
<img src="./images/1.png" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top3">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick"></div>
|
||||
<img src="./images/fist.png" alt="" class="fist">
|
||||
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<b class="newText3"></b>
|
||||
<img src="./images/1.png" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +78,7 @@
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick">虚位以待</div>
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<img src="./images/1.png" alt="">
|
||||
<span>0</span>
|
||||
</div>
|
||||
</li> -->
|
||||
@@ -79,7 +90,8 @@
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick"></div>
|
||||
<div class="score">
|
||||
<!-- <img src="./images/gold.png" alt=""> -->
|
||||
<b class="newText3"></b>
|
||||
<img src="./images/1.png" alt="">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,5 +108,6 @@
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./js/index.js?v=1.4"></script>
|
||||
<script src="./local/tr.js"></script>
|
||||
<script src="./js/index.js?v=1.5"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
@@ -27,7 +27,9 @@ const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time
|
||||
})
|
||||
}
|
||||
var listType = 2;//2爱意榜 1魅力榜 3房间榜
|
||||
var timeType = 1;//1日 2周
|
||||
var timeType = 1;//1日 2周 5月
|
||||
var type = 1;
|
||||
var partitionId;
|
||||
// 初始化函數
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
@@ -54,6 +56,7 @@ $(function () {
|
||||
translateFun();
|
||||
showLoading()
|
||||
geth5()
|
||||
userInfo()
|
||||
}, 100)
|
||||
})
|
||||
function translateFun() {
|
||||
@@ -65,9 +68,38 @@ function translateFun() {
|
||||
$('.text4').html(langReplace(localLang.demoModule.text4));
|
||||
$('.text5').html(langReplace(localLang.demoModule.text5));
|
||||
$('.text6').html(langReplace(localLang.demoModule.text6));
|
||||
$('.newText1').html(langReplace(localLang.demoModule.newText1));
|
||||
$('.newText2').html(langReplace(localLang.demoModule.newText2));
|
||||
$('.newText11').html(langReplace(localLang.demoModule.newText11));
|
||||
$('.newText3').html(langReplace(localLang.demoModule.newText3));
|
||||
$('.newText4').html(langReplace(localLang.demoModule.newText4));
|
||||
$('.newText5').html(langReplace(localLang.demoModule.newText5));
|
||||
|
||||
}
|
||||
// 榜单接口
|
||||
function userInfo() {
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/web-user',
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
partitionId = res.data.partitionId;
|
||||
if (partitionId == 4) {
|
||||
$('.header .sTab .newText2').hide();
|
||||
$(`.header .monthlyRewards`).hide();
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 榜单接口
|
||||
function geth5() {
|
||||
$('ul li').remove();
|
||||
$('.header .sTab').show();
|
||||
@@ -83,6 +115,7 @@ function geth5() {
|
||||
data: {
|
||||
type: listType,
|
||||
datetype: timeType,
|
||||
periodType: 1,
|
||||
uid: pubInfo.uid
|
||||
},
|
||||
success(res) {
|
||||
@@ -94,8 +127,8 @@ function geth5() {
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: '',
|
||||
totalNum: "",
|
||||
nick: langReplace(localLang.demoModule.newText7),
|
||||
diffNum: "",
|
||||
uid: "0",
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
@@ -105,7 +138,7 @@ function geth5() {
|
||||
$(`.header .top .top${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.header .top .top${i + 1} .nick`).text(res.nick);
|
||||
// if (i > 0) {
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.totalNum, 1));
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1));
|
||||
// }
|
||||
});
|
||||
// 非前三
|
||||
@@ -117,9 +150,10 @@ function geth5() {
|
||||
<img src="${res.avatar}" uid="${res.uid}" alt="" class="tx">
|
||||
<div class="nick">${res.nick}</div>
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<span>${unitProcessingAr(res.totalNum, 1)}</span>
|
||||
</div>
|
||||
<b>${langReplace(localLang.demoModule.newText3)}</b>
|
||||
<img src="./images/${type}.png" alt="">
|
||||
<span>${unitProcessingAr(res.diffNum, 1)}</span>
|
||||
</div> -->
|
||||
</li>
|
||||
`
|
||||
})
|
||||
@@ -127,7 +161,11 @@ function geth5() {
|
||||
// 处理自己
|
||||
$('.my .box .tx').attr('src', my.avatar);
|
||||
$('.my .box .nick').text(my.nick);
|
||||
$('.my .box .score span').text(my.totalNum <= 0 ? langReplace(localLang.demoModule.text7) : unitProcessingAr(my.totalNum, 1));
|
||||
$('.my .box .seqNo').text(my.seqNo <= 0 ? '-' : my.seqNo);
|
||||
$('.my .box .score span').text(my.diffNum <= 0 ? '-' : unitProcessingAr(my.diffNum, 1));
|
||||
if (my.diffNum <= 0) {
|
||||
$('.my .box .score b').hide();
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
@@ -140,7 +178,7 @@ function geth5() {
|
||||
})
|
||||
}
|
||||
// 公会接口
|
||||
function listRank() {
|
||||
function listRank(type) {
|
||||
$('ul li').remove();
|
||||
$('.header .sTab').hide();
|
||||
$('.my').hide()
|
||||
@@ -151,17 +189,21 @@ function listRank() {
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/clan/listRank',
|
||||
data: {
|
||||
periodType: 1,
|
||||
},
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
var my = res.data.me;
|
||||
var listTo3 = res.data.slice(0, 3);
|
||||
var notListTo3 = res.data.slice(3);
|
||||
notListTo3 = notListTo3.slice(0, 27)
|
||||
// 处理前三
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
name: '',
|
||||
totalNum: "",
|
||||
name: langReplace(localLang.demoModule.newText7),
|
||||
diffNum: "",
|
||||
uid: "0",
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
@@ -171,7 +213,7 @@ function listRank() {
|
||||
$(`.header .top .top${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.header .top .top${i + 1} .nick`).text(res.name);
|
||||
// if (i > 0) {
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.income, 1));
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1));
|
||||
// }
|
||||
});
|
||||
// 非前三
|
||||
@@ -183,9 +225,10 @@ function listRank() {
|
||||
<img src="${res.avatar}" uid="${res.clanElderUid}" alt="" class="tx">
|
||||
<div class="nick">${res.name}</div>
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<span>${unitProcessingAr(res.income, 1)}</span>
|
||||
</div>
|
||||
<b>${langReplace(localLang.demoModule.newText3)}</b>
|
||||
<img src="./images/${type}.png" alt="">
|
||||
<span>${unitProcessingAr(res.diffNum, 1)}</span>
|
||||
</div>-->
|
||||
</li>
|
||||
`
|
||||
})
|
||||
@@ -204,6 +247,7 @@ function listRank() {
|
||||
// 榜单切换tab
|
||||
$('.header .tabBox div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
type = i;
|
||||
$(this).addClass('act').siblings().removeClass('act');
|
||||
$('ul').removeClass('ul1').removeClass('ul2').removeClass('ul3').removeClass('ul4');
|
||||
$(`ul`).addClass(`ul${i}`);
|
||||
@@ -211,9 +255,16 @@ $('.header .tabBox div').click(function () {
|
||||
$(`.header`).addClass(`header${i}`);
|
||||
$('.top').removeClass('tops1').removeClass('tops2').removeClass('tops3').removeClass('tops4');
|
||||
$(`.top`).addClass(`tops${i}`);
|
||||
$('ul li .tx').removeClass('actTx');
|
||||
$('.header .monthlyRewards').hide();
|
||||
$(`.header .top .top1 .ts`).attr('src', './images/no1.png')
|
||||
$(`.header .top .top2 .ts`).attr('src', './images/no2.png')
|
||||
$(`.header .top .top3 .ts`).attr('src', './images/no3.png')
|
||||
timeType = 1;
|
||||
$('.header .sTab div').removeClass('act');
|
||||
$('.header .sTab div').eq(0).addClass('act');
|
||||
$('.header .top .score img').attr('src', `./images/${type}.png`);
|
||||
$('.my .box .score img').attr('src', `./images/${type}.png`);
|
||||
if (i == 1) {
|
||||
listType = 2;
|
||||
geth5();
|
||||
@@ -221,17 +272,40 @@ $('.header .tabBox div').click(function () {
|
||||
listType = 1;
|
||||
geth5();
|
||||
} else if (i == 3) {
|
||||
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
|
||||
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
|
||||
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
|
||||
listType = 3;
|
||||
geth5();
|
||||
$('ul li .tx').addClass('actTx');
|
||||
} else if (i == 4) {
|
||||
listRank();
|
||||
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
|
||||
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
|
||||
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
|
||||
listRank(4);
|
||||
$('ul li .tx').addClass('actTx');
|
||||
$('.header .monthlyRewards').show();
|
||||
}
|
||||
|
||||
if (partitionId == 4) {
|
||||
$('.header .sTab .newText2').hide();
|
||||
$(`.header .monthlyRewards`).hide();
|
||||
}
|
||||
})
|
||||
// 日榜周榜切换tab
|
||||
$('.header .sTab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass('act').siblings().removeClass('act');
|
||||
timeType = i;
|
||||
timeType = $(this).attr('type');
|
||||
if (timeType == 5) {
|
||||
$('.header .monthlyRewards').show();
|
||||
} else {
|
||||
$('.header .monthlyRewards').hide();
|
||||
}
|
||||
|
||||
if (listType == 3) {
|
||||
$('.header .monthlyRewards').hide();
|
||||
}
|
||||
geth5();
|
||||
})
|
||||
// 前三跳转个人页
|
||||
@@ -255,4 +329,21 @@ $('ul').on('click', 'li .tx', function () {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 跳转奖励页面
|
||||
$('.header .monthlyRewards').click(function () {
|
||||
window.location.href = './monthlyRewards.html'
|
||||
})
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
console.log('页面下滑距顶部的距离:', scrollTop);
|
||||
if (scrollTop >= 30) {
|
||||
$('.newText11').hide();
|
||||
$('.newText1').css('height', '2rem')
|
||||
} else if (scrollTop < 30) {
|
||||
$('.newText1').css('height', '0rem')
|
||||
$('.newText11').show();
|
||||
}
|
||||
});
|
237
view/molistar/modules/newRank/js/monthlyRewards.js
Normal file
@@ -0,0 +1,237 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
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 listType = 2;//2爱意榜 1魅力榜 3房间榜
|
||||
var timeType = 1;//1日 2周
|
||||
// 初始化函數
|
||||
$(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();
|
||||
})
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
showLoading()
|
||||
geth5()
|
||||
}, 100)
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.text1').html(langReplace(localLang.demoModule.text1));
|
||||
$('.text2').html(langReplace(localLang.demoModule.text2));
|
||||
$('.text3').html(langReplace(localLang.demoModule.text3));
|
||||
$('.text4').html(langReplace(localLang.demoModule.text4));
|
||||
$('.text5').html(langReplace(localLang.demoModule.text5));
|
||||
$('.text6').html(langReplace(localLang.demoModule.text6));
|
||||
$('.newText1').html(langReplace(localLang.demoModule.newText1));
|
||||
$('.newText2').html(langReplace(localLang.demoModule.newText2));
|
||||
$('.newText22').html(langReplace(localLang.demoModule.newText22));
|
||||
$('.newText3').html(langReplace(localLang.demoModule.newText3));
|
||||
$('.newText4').html(langReplace(localLang.demoModule.newText4));
|
||||
$('.newText5').html(langReplace(localLang.demoModule.newText5));
|
||||
$('.newText6').html(langReplace(localLang.demoModule.newText6));
|
||||
$('.newText7').html(langReplace(localLang.demoModule.newText7));
|
||||
|
||||
}
|
||||
// 榜单接口
|
||||
function geth5() {
|
||||
$('ul li').remove();
|
||||
$('.header .sTab').show();
|
||||
$('.my').show()
|
||||
$('.header .top .top2 .score,.header .top .top3 .score').show();
|
||||
// $('.header .top .top1 .fist').show();
|
||||
$('.header .top .top1 .fist').hide();
|
||||
$('ul li .score').show();
|
||||
// showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/allrank/geth5',
|
||||
data: {
|
||||
type: listType,
|
||||
datetype: timeType,
|
||||
periodType: 2,
|
||||
uid: pubInfo.uid
|
||||
},
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
var my = res.data.me;
|
||||
var listTo3 = res.data.rankVoList.slice(0, 3);
|
||||
var notListTo3 = res.data.rankVoList.slice(3);
|
||||
// 处理前三
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: langReplace(localLang.demoModule.newText7),
|
||||
diffNum: "",
|
||||
uid: "0",
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
}
|
||||
listTo3.forEach((res, i) => {
|
||||
$(`.header .top .top${i + 1} .ts`).attr('uid', res.uid);
|
||||
$(`.header .top .top${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.header .top .top${i + 1} .nick`).text(res.nick);
|
||||
// if (i > 0) {
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1));
|
||||
// }
|
||||
});
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 公会接口
|
||||
function listRank(type) {
|
||||
$('ul li').remove();
|
||||
$('.header .sTab').hide();
|
||||
$('.my').hide()
|
||||
// $('.header .top .top2 .score,.header .top .top3 .score').hide();
|
||||
$('.header .top .top1 .fist').hide();
|
||||
$('ul li .score').hide();
|
||||
// showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/clan/listRank',
|
||||
data: {
|
||||
periodType: 2,
|
||||
},
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
var my = res.data.me;
|
||||
var listTo3 = res.data.slice(0, 3);
|
||||
var notListTo3 = res.data.slice(3);
|
||||
notListTo3 = notListTo3.slice(0, 27)
|
||||
// 处理前三
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
name: langReplace(localLang.demoModule.newText7),
|
||||
diffNum: "",
|
||||
uid: "0",
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
}
|
||||
listTo3.forEach((res, i) => {
|
||||
$(`.header .top .top${i + 1} .ts`).attr('uid', res.clanElderUid);
|
||||
$(`.header .top .top${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.header .top .top${i + 1} .nick`).text(res.name);
|
||||
// if (i > 0) {
|
||||
$(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1));
|
||||
// }
|
||||
});
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 榜单切换tab
|
||||
$('.header .tabBox div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass('act').siblings().removeClass('act');
|
||||
$('ul').removeClass('ul1').removeClass('ul2').removeClass('ul3').removeClass('ul4');
|
||||
$(`ul`).addClass(`ul${i}`);
|
||||
$('.header').removeClass('header1').removeClass('header2').removeClass('header3').removeClass('header4');
|
||||
$(`.header`).addClass(`header${i}`);
|
||||
$('.top').removeClass('tops1').removeClass('tops2').removeClass('tops3').removeClass('tops4');
|
||||
$(`.top`).addClass(`tops${i}`);
|
||||
$('.header .monthlyRewards').hide();
|
||||
$(`.header .top .top1 .ts`).attr('src', './images/no1.png')
|
||||
$(`.header .top .top2 .ts`).attr('src', './images/no2.png')
|
||||
$(`.header .top .top3 .ts`).attr('src', './images/no3.png')
|
||||
timeType = 1;
|
||||
$('.header .sTab div').removeClass('act');
|
||||
$('.header .sTab div').eq(0).addClass('act');
|
||||
$('.header .top .score img').attr('src', `./images/${i}.png`);
|
||||
$('.rewards').removeClass('reward1').removeClass('reward2').removeClass('reward3');
|
||||
$('.rewards').addClass(`reward${i}`);
|
||||
if (i == 1) {
|
||||
listType = 2;
|
||||
geth5();
|
||||
} else if (i == 2) {
|
||||
listType = 1;
|
||||
geth5();
|
||||
} else if (i == 3) {
|
||||
listType = 3;
|
||||
listRank();
|
||||
$('.header .top .score img').attr('src', `./images/${4}.png`);
|
||||
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
|
||||
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
|
||||
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
|
||||
} else if (i == 4) {
|
||||
// listRank();
|
||||
}
|
||||
})
|
||||
// 前三跳转个人页
|
||||
$('.header .top .ts').click(function () {
|
||||
var uid = $(this).attr('uid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === "object") {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
console.log('页面下滑距顶部的距离:', scrollTop);
|
||||
if (scrollTop >= 30) {
|
||||
$('.newText22').hide();
|
||||
$('.newText2').css('height', '2rem')
|
||||
} else if (scrollTop < 30) {
|
||||
$('.newText2').css('height', '0rem')
|
||||
$('.newText22').show();
|
||||
}
|
||||
});
|
@@ -2,15 +2,24 @@
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
layerIndex1: 'جار التحميل...',
|
||||
layerIndex2: 'تمت العملية',
|
||||
layerIndex1: 'جارٍ التحميل...',
|
||||
layerIndex2: 'تمت العملية بنجاح',
|
||||
layerIndex3: 'خطأ في الشبكة، يرجى الخروج وإعادة الدخول',
|
||||
text1: "قائمة الأغنياء<span></span>",
|
||||
text2: "قائمة الجاذبية<span></span>",
|
||||
text3: "قائمة الغرف<span></span>",
|
||||
text4: "قائمة الوكالات<span></span>",
|
||||
text5: "قائمة اليومية",
|
||||
text6: "قائمة الأسبوعية",
|
||||
text7: "غير مدرج",
|
||||
text1: 'ثروة ',
|
||||
text2: 'جاذبية ',
|
||||
text3: 'غرفة',
|
||||
text4: 'عائلة',
|
||||
text5: 'يومي ',
|
||||
text6: 'أسبوعي ',
|
||||
text7: 'غير مدرج',
|
||||
newText1: 'تصنيف الشرف',
|
||||
newText11: 'تصنيف الشرف',
|
||||
newText2: 'شهري المكافآت',
|
||||
newText22: 'شهري المكافآت',
|
||||
newText3: 'خلف',
|
||||
newText4: 'شهري',
|
||||
newText5: 'المكافآت',
|
||||
newText6: 'أفضل 3 في الشهر الماضي',
|
||||
newText7: 'شاغر',
|
||||
}
|
||||
}
|
@@ -5,12 +5,21 @@ langEn = {
|
||||
layerIndex1: 'Loading...',
|
||||
layerIndex2: 'Operation completed',
|
||||
layerIndex3: 'Network error, please exit and re-enter',
|
||||
text1: "Wealth List<span></span>",
|
||||
text2: "Charm List<span></span>",
|
||||
text3: "Room List<span></span>",
|
||||
text4: "Family List<span></span>",
|
||||
text5: "Daily List",
|
||||
text6: "Weekly List",
|
||||
text1: "Wealth ",
|
||||
text2: "Charm ",
|
||||
text3: "Room",
|
||||
text4: "Family",
|
||||
text5: "Daily ",
|
||||
text6: "Weekly ",
|
||||
text7: "Not Listed",
|
||||
newText1:`Honor Ranking`,
|
||||
newText11:`Honor Ranking`,
|
||||
newText2:`Monthly Rewards`,
|
||||
newText22:`Monthly Rewards`,
|
||||
newText3:`Behind`,
|
||||
newText4:`Monthly`,
|
||||
newText5:`Rewards`,
|
||||
newText6:`Last Month TOP3`,
|
||||
newText7: 'Vacant',
|
||||
}
|
||||
}
|
25
view/molistar/modules/newRank/local/tr.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// 土耳其
|
||||
langTr = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
layerIndex1: 'Yükleniyor...',
|
||||
layerIndex2: 'İşlem tamamlandı',
|
||||
layerIndex3: 'Ağ hatası, lütfen çıkış yapıp tekrar girin',
|
||||
text1: 'Servet ',
|
||||
text2: 'Çekicilik ',
|
||||
text3: 'Oda',
|
||||
text4: 'Aile',
|
||||
text5: 'Günlük ',
|
||||
text6: 'Haftalık ',
|
||||
text7: 'Listeye Girmedi',
|
||||
newText1: 'Onur Sıralaması',
|
||||
newText11: 'Onur Sıralaması',
|
||||
newText2: 'Aylık Ödüller',
|
||||
newText22: 'Aylık Ödüller',
|
||||
newText3: 'Geride',
|
||||
newText4: 'Aylık',
|
||||
newText5: 'Ödüller',
|
||||
newText6: 'Geçen Ay İlk 3',
|
||||
newText7: 'Boş',
|
||||
}
|
||||
}
|
@@ -4,13 +4,22 @@ langZh = {
|
||||
demoModule: {
|
||||
layerIndex1: '加載中...',
|
||||
layerIndex2: '操作完成',
|
||||
layerIndex3: '網絡錯誤,請退出重進',
|
||||
text1: '愛意榜<span></span>',
|
||||
text2: '魅力榜<span></span>',
|
||||
text3: '房間榜<span></span>',
|
||||
text4: '公會榜<span></span>',
|
||||
text5: '日榜',
|
||||
text6: '周榜',
|
||||
layerIndex3: '網絡錯誤,請退出後重新進入',
|
||||
text1: '財富 ',
|
||||
text2: '魅力 ',
|
||||
text3: '房間',
|
||||
text4: '家族',
|
||||
text5: '每日 ',
|
||||
text6: '每週 ',
|
||||
text7: '未上榜',
|
||||
newText1: '榮譽排行',
|
||||
newText11: '榮譽排行',
|
||||
newText2: '每月獎勵',
|
||||
newText22: '每月獎勵',
|
||||
newText3: '落後',
|
||||
newText4: '每月',
|
||||
newText5: '獎勵',
|
||||
newText6: '上月前三名',
|
||||
newText7: '虛位以待',
|
||||
}
|
||||
}
|
79
view/molistar/modules/newRank/monthlyRewards.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title class="newText1">MoliStar</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/monthlyRewards.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/back.png" alt="">
|
||||
<!-- -->
|
||||
</div>
|
||||
<p class="newText2"></p>
|
||||
<p class="newText22"></p>
|
||||
<!-- 头部 -->
|
||||
<div class="header header1">
|
||||
<div class="tabBox">
|
||||
<div class="act text1"><span></span></div>
|
||||
<div class="text2"><span></span></div>
|
||||
<div class="text4"><span></span></div>
|
||||
</div>
|
||||
<div class="lastMonthWealthTOP3 newText6"></div>
|
||||
<!-- 前三 -->
|
||||
<div class="top tops1">
|
||||
<div class="top1">
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick newText7"></div>
|
||||
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
|
||||
<!-- <div class="score">
|
||||
<img src="./images/1.png" alt="">
|
||||
<span>0</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="top2">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick newText7"></div>
|
||||
<img src="./images/fist.png" alt="" class="fist">
|
||||
<div class="score">
|
||||
<b class="newText3"></b>
|
||||
<img src="./images/1.png" alt="">
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top3">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick newText7"></div>
|
||||
<img src="./images/fist.png" alt="" class="fist">
|
||||
<div class="score">
|
||||
<b class="newText3"></b>
|
||||
<img src="./images/1.png" alt="">
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rewards reward1"></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="./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/monthlyRewards.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 58 KiB |
@@ -47,7 +47,7 @@
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">0</div>
|
||||
<!-- <div class="score">0</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
@@ -62,7 +62,7 @@
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
<!-- <div class="score"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
@@ -77,7 +77,7 @@
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
<!-- <div class="score"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,5 +111,5 @@
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./js/index.js?v=1.1"></script>
|
||||
<script src="./js/index.js?v=1.2"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
@@ -206,7 +206,7 @@ function listDomFun(res, num) {
|
||||
<img src="${res.experUrl}" alt="" class="icon1">
|
||||
<img src="${res.charmUrl}" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">
|
||||
<div class="score" style="display:none;">
|
||||
<p>${unitProcessingAr(res.goldAmount,1)}</p>
|
||||
<span>${num == 1 ? langReplace(localLang.demoModule.room_text1) : langReplace(localLang.demoModule.room_text2)}</span>
|
||||
</div>
|
||||
|
@@ -366,11 +366,13 @@ export default {
|
||||
return Array.from(resultMap.values());
|
||||
},
|
||||
handleScroll(event) {
|
||||
const container = event.target; // 获取滚动容器
|
||||
if (
|
||||
container.scrollHeight - container.scrollTop ===
|
||||
container.clientHeight
|
||||
) {
|
||||
// const container = event.target; // 获取滚动容器
|
||||
const { scrollTop, clientHeight, scrollHeight } = event.target;
|
||||
console.log(scrollTop);
|
||||
console.log(clientHeight);
|
||||
console.log(scrollHeight);
|
||||
console.log("--------------");
|
||||
if (scrollTop + clientHeight + 50 >= scrollHeight) {
|
||||
// 滚动到底部
|
||||
console.log("已经到底部");
|
||||
if (this.lock) {
|
||||
|
@@ -300,11 +300,12 @@ export default {
|
||||
return Array.from(resultMap.values());
|
||||
},
|
||||
handleScroll(event) {
|
||||
const container = event.target; // 获取滚动容器
|
||||
if (
|
||||
container.scrollHeight - container.scrollTop ===
|
||||
container.clientHeight
|
||||
) {
|
||||
// const container = event.target; // 获取滚动容器
|
||||
// container.scrollHeight - container.scrollTop ===
|
||||
// container.clientHeight
|
||||
|
||||
const { scrollTop, clientHeight, scrollHeight } = event.target;
|
||||
if (scrollTop + clientHeight + 50 >= scrollHeight) {
|
||||
// 滚动到底部
|
||||
console.log("已经到底部");
|
||||
if (this.lock) {
|
||||
|