moliparty/molistar-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增周星

Browse Source
This commit is contained in:
dragon
2024-08-30 11:19:53 +08:00
parent 5d1a2aa96d
commit 321736d1ab
48 changed files with 2375 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

883
view/molistar/modules/weekStarPlus/css/index.css Normal file
View File

@@ -0,0 +1,883 @@
html,
body {
width: 100%;
background: #00002A;
}
.back {
width: 100%;
height: 0.58667rem;
line-height: 0.58667rem;
position: fixed;
left: 0;
top: 0.86667rem;
text-align: center;
color: #FFFFFF;
font-size: 0.50667rem;
font-weight: bold;
z-index: 10;
}
.back img {
width: 0.58667rem;
height: 0.58667rem;
position: absolute;
left: 0.24rem;
top: 0rem;
}
.header {
width: 10rem;
height: 14.4rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.header .rule_icon {
width: 1.65333rem;
height: 0.69333rem;
line-height: 0.69333rem;
text-align: center;
color: #FFEFC3;
font-size: 0.37333rem;
font-weight: 500;
position: absolute;
right: 0;
top: 5.14667rem;
background: url(../images/rule_icon.png) no-repeat;
background-size: 100% 100%;
text-indent: 6px;
}
.header .timeBox {
width: 78%;
height: 1.62667rem;
box-sizing: border-box;
padding: 0 0.66667rem;
margin: 11.06667rem auto 0;
}
.header .timeBox div {
float: left;
width: 1.62667rem;
height: 1.62667rem;
background: url(../images/tomeBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
line-height: 1.62667rem;
}
.header .timeBox div b {
color: #FFEFC3;
font-size: 0.58667rem;
font-weight: 600;
font-family: PingFang SC;
}
.header .timeBox div span {
width: 100%;
position: absolute;
left: 0;
bottom: -1.13333rem;
text-align: center;
color: #FFEFC3;
font-size: 0.37333rem;
font-weight: 400;
font-family: PingFang SC;
}
.header .timeBox .day {
margin-right: 0.78667rem;
}
.header .timeBox .colon {
width: 0.21333rem;
height: 0.53333rem;
background: url(../images/colon.png) no-repeat;
background-size: 100% 100%;
margin: 0 0.22667rem;
margin-top: 0.54667rem;
}
.header .timeText {
width: 100%;
color: #FFEFC3;
margin: 0 auto 0;
text-align: center;
font-size: 0.29333rem;
opacity: .8;
margin-top: 0.84rem;
}
.lastTop {
width: 10rem;
height: 8rem;
background: url(../images/lastTopBox.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0.29333rem auto 0.94667rem;
box-sizing: border-box;
padding-top: 2.1rem;
}
.lastTop .title {
width: 10rem;
height: 1.86667rem;
line-height: 2.13333rem;
text-align: center;
color: #FFEFC3;
font-size: 0.37333rem;
font-weight: 600;
position: absolute;
top: -0.93333rem;
left: 50%;
transform: translateX(-50%);
background: url(../images/titleLast.png) no-repeat;
background-size: 100% 100%;
}
.lastTop .topBox {
width: 89%;
height: 4.64rem;
margin: 0rem auto 0;
position: relative;
}
.lastTop .topBox .top {
width: 3.2rem;
height: 4.64rem;
position: absolute;
top: 0;
}
.lastTop .topBox .top .ts {
width: 2.13333rem;
height: 2.13333rem;
position: absolute;
top: 0.85333rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.lastTop .topBox .top .tx {
width: 1.57333rem;
height: 1.6rem;
position: absolute;
top: 1.12rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.lastTop .topBox .top .score {
width: 2rem;
height: 0.42667rem;
border-radius: 0.42667rem;
text-align: center;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 2.94667rem;
left: 50%;
transform: translateX(-50%);
}
.lastTop .topBox .top .score img {
width: 0.42667rem;
height: 0.42667rem;
display: inline-block;
vertical-align: middle;
}
.lastTop .topBox .top .score b {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
}
.lastTop .topBox .top .name {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 0.34667rem;
font-weight: 500;
position: absolute;
top: 3.50667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.lastTop .topBox .top .id {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
top: 3.93333rem;
left: 50%;
transform: translateX(-50%);
}
.lastTop .topBox .top1 {
background: url(../images/lastTop1.png) no-repeat;
background-size: 100% 100%;
left: 50%;
transform: translateX(-50%);
top: -1.14667rem;
}
.lastTop .topBox .top2 {
background: url(../images/lastTop2.png) no-repeat;
background-size: 100% 100%;
left: 0;
}
.lastTop .topBox .top3 {
background: url(../images/lastTop3.png) no-repeat;
background-size: 100% 100%;
right: 0;
}
.weeekListTop {
width: 10rem;
height: 12.66667rem;
margin: 0 auto 0;
background: url(../images/top.png) no-repeat;
background-size: 100% 100%;
position: relative;
box-sizing: border-box;
padding-top: 1.32rem;
}
.weeekListTop .title {
width: 7.6rem;
height: 1.86667rem;
line-height: 2.13333rem;
text-align: center;
color: #FFEFC3;
font-size: 0.37333rem;
font-weight: 600;
background: url(../images/titleLast.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -0.93333rem;
}
.weeekListTop .text {
width: 66%;
height: 0.48rem;
line-height: 0.48rem;
margin: 0rem auto 0.44rem;
display: flex;
justify-content: space-between;
text-align: center;
}
.weeekListTop .text img {
width: 2.10667rem;
height: 0.48rem;
display: inline-block;
}
.weeekListTop .text b {
color: #FFEFC3;
font-size: 0.37333rem;
font-weight: 500;
}
.weeekListTop .weekStarGift {
width: 80%;
height: 2.26667rem;
display: flex;
justify-content: space-between;
margin: 0 auto 2.26667rem;
}
.weeekListTop .weekStarGift div {
position: relative;
width: 2.26667rem;
height: 2.26667rem;
background: url(../images/giftBox.png) no-repeat;
background-size: 100% 100%;
}
.weeekListTop .weekStarGift div img {
width: 1.6rem;
height: 1.6rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.weeekListTop .weekStarGift div span {
width: 100%;
text-align: center;
color: #FFF0C7;
font-size: 0.34667rem;
font-weight: 400;
position: absolute;
left: 0;
bottom: -0.53333rem;
}
.weeekListTop .thisTop {
width: 10rem;
height: 8rem;
position: relative;
margin: 0.29333rem auto 0.94667rem;
box-sizing: border-box;
}
.weeekListTop .thisTop .topBox {
width: 89%;
height: 4.64rem;
margin: 0rem auto 0;
position: relative;
}
.weeekListTop .thisTop .topBox .top {
width: 3.2rem;
height: 4.64rem;
position: absolute;
top: 0;
}
.weeekListTop .thisTop .topBox .top .ts {
width: 2.13333rem;
height: 2.13333rem;
position: absolute;
top: 0.85333rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.weeekListTop .thisTop .topBox .top .tx {
width: 1.57333rem;
height: 1.6rem;
position: absolute;
top: 1.12rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.weeekListTop .thisTop .topBox .top .score {
width: 2rem;
height: 0.42667rem;
border-radius: 0.42667rem;
text-align: center;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 2.94667rem;
left: 50%;
transform: translateX(-50%);
}
.weeekListTop .thisTop .topBox .top .score img {
width: 0.42667rem;
height: 0.42667rem;
display: inline-block;
vertical-align: middle;
}
.weeekListTop .thisTop .topBox .top .score b {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
}
.weeekListTop .thisTop .topBox .top .name {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 0.34667rem;
font-weight: 500;
position: absolute;
top: 3.50667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.weeekListTop .thisTop .topBox .top .id {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
top: 3.93333rem;
left: 50%;
transform: translateX(-50%);
}
.weeekListTop .thisTop .topBox .top1 {
background: url(../images/lastTop1.png) no-repeat;
background-size: 100% 100%;
left: 50%;
transform: translateX(-50%);
top: -1.14667rem;
}
.weeekListTop .thisTop .topBox .top2 {
background: url(../images/lastTop2.png) no-repeat;
background-size: 100% 100%;
left: 0;
}
.weeekListTop .thisTop .topBox .top3 {
background: url(../images/lastTop3.png) no-repeat;
background-size: 100% 100%;
right: 0;
}
.list {
width: 10rem;
background: url(../images/middle.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.list ul {
width: 8.93333rem;
margin: 0 auto 0;
}
.list ul li {
width: 100%;
height: 2rem;
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0 0.41333rem;
margin-bottom: 0.26667rem;
}
.list ul li:last-child {
margin-bottom: 0;
}
.list ul li .num {
width: 0.8rem;
height: 100%;
line-height: 2rem;
margin: 0 0.18667rem 0 0;
float: left;
color: #FFEFC3;
font-size: 0.42667rem;
font-weight: 600;
}
.list ul li .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #FFD976;
float: left;
margin-top: 0.46667rem;
margin-right: 0.24rem;
}
.list ul li .user {
float: left;
width: 3rem;
}
.list ul li .user p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 0.64rem;
margin-bottom: 0.22667rem;
color: #FFEFC3;
font-size: 0.34667rem;
font-weight: 500;
}
.list ul li .user b {
color: #FFEFC3;
font-size: 0.29333rem;
opacity: .6;
}
.list ul li .score {
min-width: 1.77333rem;
height: 0.42667rem;
line-height: 0.42667rem;
border-radius: 0.42667rem;
background: rgba(255, 255, 255, 0.1);
margin-top: 0.78667rem;
float: right;
text-align: center;
}
.list ul li .score img {
width: 0.42667rem;
height: 0.42667rem;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
.list ul li .score b {
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
.list .more {
width: 1.97333rem;
height: 0.61333rem;
line-height: 0.61333rem;
margin: 0.26667rem auto 0;
text-align: center;
color: #FFF0C7;
font-size: 0.32rem;
background: url(../images/more.png) no-repeat;
background-size: 100% 100%;
}
.bottom {
width: 10rem;
height: 2rem;
background: url(../images/bottom.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 2.2rem;
overflow: hidden;
}
.bottom p {
width: 100%;
text-align: center;
color: #FFEFC3;
font-size: 0.29333rem;
font-weight: 400;
margin-top: 0.42667rem;
}
.my {
width: 10rem;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: -0.26667rem;
z-index: 10;
box-sizing: border-box;
}
.my .myInfo {
width: 100%;
height: 2rem;
background: url(../images/myBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0 0.41333rem;
margin-bottom: 0.26667rem;
}
.my .myInfo .num {
width: 0.8rem;
height: 100%;
line-height: 2rem;
margin: 0 0.18667rem 0 0;
float: left;
color: #FFEFC3;
font-size: 0.42667rem;
font-weight: 600;
}
.my .myInfo .tx {
width: 1.06667rem;
height: 1.06667rem;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #FFD976;
float: left;
margin-top: 0.46667rem;
margin-right: 0.24rem;
}
.my .myInfo .user {
float: left;
width: 3rem;
}
.my .myInfo .user p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 0.64rem;
margin-bottom: 0.22667rem;
color: #FFEFC3;
font-size: 0.34667rem;
font-weight: 500;
}
.my .myInfo .user b {
color: #FFEFC3;
font-size: 0.29333rem;
opacity: .6;
}
.my .myInfo .score {
min-width: 1.77333rem;
height: 0.42667rem;
line-height: 0.42667rem;
border-radius: 0.42667rem;
background: rgba(255, 255, 255, 0.1);
margin-top: 0.78667rem;
float: right;
text-align: center;
}
.my .myInfo .score img {
width: 0.42667rem;
height: 0.42667rem;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
.my .myInfo .score b {
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.pub .pub_in {
width: 9.6rem;
height: 10.90667rem;
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pub .pub_in .title {
width: 7.6rem;
height: 1.86667rem;
line-height: 2.13333rem;
text-align: center;
color: #FFEFC3;
font-size: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -0.93333rem;
background: url(../images/rule_title.png) no-repeat;
background-size: 100% 100%;
}
.pub .pub_in .rule_close {
width: 0.88rem;
height: 0.88rem;
position: absolute;
right: 0.16rem;
top: -0.90667rem;
}
.pub .pub_in .box {
width: 8rem;
height: 8rem;
position: absolute;
top: 1.53333rem;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll;
}
.pub .pub_in .box::-webkit-scrollbar {
display: none;
}
.pub .pub_in .box .centent {
width: 100%;
height: 33.89333rem;
background: url(../images/rule.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.pub .pub_in .box .centent .xz {
width: 1.9rem;
height: 1.9rem;
position: absolute;
right: 0.36rem;
overflow: hidden;
}
.pub .pub_in .box .centent .xz canvas {
position: absolute;
left: 0;
top: 0;
}
.pub .pub_in .box .centent .xz1 {
top: 6.9rem;
}
.pub .pub_in .box .centent .xz2 {
top: 17.5rem;
}
.pub .pub_in .box .centent .ts {
width: 1.9rem;
height: 1.9rem;
position: absolute;
right: 0.36rem;
overflow: hidden;
}
.pub .pub_in .box .centent .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.pub .pub_in .box .centent .ts1 {
top: 10.05rem;
}
.pub .pub_in .box .centent .ts2 {
top: 20.5rem;
}
.pub .pub_in .box .centent .zj {
width: 4.55rem;
height: 7.5rem;
position: absolute;
left: 0.35rem;
overflow: hidden;
}
.pub .pub_in .box .centent .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.pub .pub_in .box .centent .lsls {
top: 4.1rem;
}
.pub .pub_in .box .centent .kt {
top: 13.4rem;
}
.pub .pub_in .box .centent .kt2 {
top: 23.5rem;
}
.pub .pub_in .box .rule_pub_title {
width: 7.62667rem;
margin: 0.36rem auto 0.33333rem;
color: #FFF0C7;
font-size: 0.4rem;
font-weight: 400;
}
.pub .pub_in .box p {
width: 7.62667rem;
margin: 0 auto 0;
color: #FFF0C7;
font-size: 0.37333rem;
font-weight: 400;
opacity: .5;
line-height: 0.55rem;
}
.arabic .back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.arabic .header {
background: url(../images/header-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .header .rule_icon {
text-indent: -6px;
}
.arabic .list ul li .num {
float: right;
}
.arabic .list ul li .tx {
float: right;
margin-right: 0;
margin-left: 0.24rem;
}
.arabic .list ul li .user {
float: right;
}
.arabic .list ul li .score {
float: left;
}
.arabic .my .myInfo .num {
float: right;
}
.arabic .my .myInfo .tx {
float: right;
margin-right: 0;
margin-left: 0.24rem;
}
.arabic .my .myInfo .user {
float: right;
}
.arabic .my .myInfo .score {
float: left;
}
.arabic .pub .pub_in .box .centent {
background: url(../images/rule-ar.png) no-repeat;
background-size: 100% 100%;
}

894
view/molistar/modules/weekStarPlus/css/index.scss Normal file
View File

@@ -0,0 +1,894 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #00002A;
}
.back {
width: 100%;
height: px2rem(44);
line-height: px2rem(44);
position: fixed;
left: 0;
top: px2rem(65);
text-align: center;
color: #FFFFFF;
font-size: px2rem(38);
font-weight: bold;
z-index: 10;
img {
width: px2rem(44);
height: px2rem(44);
position: absolute;
left: px2rem(18);
top: px2rem(0);
}
}
.header {
width: px2rem(750);
height: px2rem(1080);
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
.rule_icon {
width: px2rem(124);
height: px2rem(52);
line-height: px2rem(52);
text-align: center;
color: #FFEFC3;
font-size: px2rem(28);
font-weight: 500;
position: absolute;
right: 0;
top: px2rem(386);
background: url(../images/rule_icon.png) no-repeat;
background-size: 100% 100%;
text-indent: 6px;
}
.timeBox {
width: 78%;
height: px2rem(122);
box-sizing: border-box;
padding: 0 px2rem(50);
margin: px2rem(830) auto 0;
div {
float: left;
width: px2rem(122);
height: px2rem(122);
background: url(../images/tomeBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
line-height: px2rem(122);
b {
color: #FFEFC3;
font-size: px2rem(44);
font-weight: 600;
font-family: PingFang SC;
}
span {
width: 100%;
position: absolute;
left: 0;
bottom: px2rem(-85);
text-align: center;
color: #FFEFC3;
font-size: px2rem(28);
font-weight: 400;
font-family: PingFang SC;
}
}
.day {
margin-right: px2rem(59);
}
.colon {
width: px2rem(16);
height: px2rem(40);
background: url(../images/colon.png) no-repeat;
background-size: 100% 100%;
margin: 0 px2rem(17);
margin-top: px2rem(41);
}
}
.timeText {
width: 100%;
color: #FFEFC3;
margin: 0 auto 0;
text-align: center;
font-size: px2rem(22);
opacity: .8;
margin-top: px2rem(63);
}
}
.lastTop {
width: px2rem(750);
height: px2rem(600);
background: url(../images/lastTopBox.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: px2rem(22) auto px2rem(71);
// overflow: hidden;
box-sizing: border-box;
padding-top: 2.1rem;
.title {
width: px2rem(750);
height: px2rem(140);
line-height: px2rem(160);
text-align: center;
color: #FFEFC3;
font-size: px2rem(28);
font-weight: 600;
position: absolute;
top: px2rem(-70);
left: 50%;
transform: translateX(-50%);
background: url(../images/titleLast.png) no-repeat;
background-size: 100% 100%;
}
.topBox {
width: 89%;
height: px2rem(348);
margin: px2rem(0) auto 0;
position: relative;
.top {
width: px2rem(240);
height: px2rem(348);
position: absolute;
top: 0;
.ts {
width: px2rem(160);
height: px2rem(160);
position: absolute;
top: px2rem(64);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.tx {
width: px2rem(118);
height: px2rem(120);
position: absolute;
top: px2rem(84);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.score {
width: px2rem(150);
height: px2rem(32);
border-radius: px2rem(32);
text-align: center;
background: rgba(0, 0, 0, .3);
position: absolute;
top: px2rem(221);
left: 50%;
transform: translateX(-50%);
img {
width: px2rem(32);
height: px2rem(32);
display: inline-block;
vertical-align: middle;
}
b {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
}
}
.name {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: px2rem(26);
font-weight: 500;
position: absolute;
top: px2rem(263);
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.id {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
top: px2rem(295);
left: 50%;
transform: translateX(-50%);
}
}
.top1 {
background: url(../images/lastTop1.png) no-repeat;
background-size: 100% 100%;
left: 50%;
transform: translateX(-50%);
top: px2rem(-86);
}
.top2 {
background: url(../images/lastTop2.png) no-repeat;
background-size: 100% 100%;
left: 0;
}
.top3 {
background: url(../images/lastTop3.png) no-repeat;
background-size: 100% 100%;
right: 0;
}
}
}
.weeekListTop {
width: px2rem(750);
height: px2rem(950);
margin: 0 auto 0;
background: url(../images/top.png) no-repeat;
background-size: 100% 100%;
position: relative;
// overflow: hidden;
box-sizing: border-box;
padding-top: px2rem(99);
.title {
width: px2rem(570);
height: px2rem(140);
line-height: px2rem(160);
text-align: center;
color: #FFEFC3;
font-size: px2rem(28);
font-weight: 600;
background: url(../images/titleLast.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-70);
}
.text {
width: 66%;
height: px2rem(36);
line-height: px2rem(36);
margin: px2rem(0) auto px2rem(33);
display: flex;
justify-content: space-between;
text-align: center;
img {
width: px2rem(158);
height: px2rem(36);
display: inline-block;
}
b {
color: #FFEFC3;
font-size: px2rem(28);
font-weight: 500;
}
}
.weekStarGift {
width: 80%;
height: px2rem(170);
display: flex;
justify-content: space-between;
margin: 0 auto px2rem(170);
div {
position: relative;
width: px2rem(170);
height: px2rem(170);
background: url(../images/giftBox.png) no-repeat;
background-size: 100% 100%;
img {
width: px2rem(120);
height: px2rem(120);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
width: 100%;
text-align: center;
color: #FFF0C7;
font-size: px2rem(26);
font-weight: 400;
position: absolute;
left: 0;
bottom: px2rem(-40);
}
}
}
.thisTop {
width: px2rem(750);
height: px2rem(600);
position: relative;
margin: px2rem(22) auto px2rem(71);
// overflow: hidden;
box-sizing: border-box;
.topBox {
width: 89%;
height: px2rem(348);
margin: px2rem(0) auto 0;
position: relative;
.top {
width: px2rem(240);
height: px2rem(348);
position: absolute;
top: 0;
.ts {
width: px2rem(160);
height: px2rem(160);
position: absolute;
top: px2rem(64);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.tx {
width: px2rem(118);
height: px2rem(120);
position: absolute;
top: px2rem(84);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.score {
width: px2rem(150);
height: px2rem(32);
border-radius: px2rem(32);
text-align: center;
background: rgba(0, 0, 0, .3);
position: absolute;
top: px2rem(221);
left: 50%;
transform: translateX(-50%);
img {
width: px2rem(32);
height: px2rem(32);
display: inline-block;
vertical-align: middle;
}
b {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
}
}
.name {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: px2rem(26);
font-weight: 500;
position: absolute;
top: px2rem(263);
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.id {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
top: px2rem(295);
left: 50%;
transform: translateX(-50%);
}
}
.top1 {
background: url(../images/lastTop1.png) no-repeat;
background-size: 100% 100%;
left: 50%;
transform: translateX(-50%);
top: px2rem(-86);
}
.top2 {
background: url(../images/lastTop2.png) no-repeat;
background-size: 100% 100%;
left: 0;
}
.top3 {
background: url(../images/lastTop3.png) no-repeat;
background-size: 100% 100%;
right: 0;
}
}
}
}
.list {
width: px2rem(750);
background: url(../images/middle.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
ul {
width: px2rem(670);
margin: 0 auto 0;
li {
width: 100%;
height: px2rem(150);
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0 px2rem(31);
margin-bottom: px2rem(20);
&:last-child{
margin-bottom: 0;
}
.num {
width: px2rem(60);
height: 100%;
line-height: px2rem(150);
margin: 0 px2rem(14) 0 0;
float: left;
color: #FFEFC3;
font-size: px2rem(32);
font-weight: 600;
}
.tx {
width: px2rem(80);
height: px2rem(80);
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #FFD976;
float: left;
margin-top: px2rem(35);
margin-right: px2rem(18);
}
.user {
float: left;
width: 3rem;
p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: px2rem(48);
margin-bottom: px2rem(17);
color: #FFEFC3;
font-size: px2rem(26);
font-weight: 500;
}
b {
color: #FFEFC3;
font-size: px2rem(22);
opacity: .6;
}
}
.score {
min-width: px2rem(133);
height: px2rem(32);
line-height: px2rem(32);
border-radius: px2rem(32);
background: rgba(255, 255, 255, .1);
margin-top: px2rem(59);
float: right;
text-align: center;
img {
width: px2rem(32);
height: px2rem(32);
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
b {
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
}
}
}
.more {
width: px2rem(148);
height: px2rem(46);
line-height: px2rem(46);
margin: 0.26667rem auto 0;
text-align: center;
color: #FFF0C7;
font-size: px2rem(24);
background: url(../images/more.png) no-repeat;
background-size: 100% 100%;
}
}
.bottom {
width: px2rem(750);
height: px2rem(150);
background: url(../images/bottom.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(165);
overflow: hidden;
p {
width: 100%;
text-align: center;
color: #FFEFC3;
font-size: px2rem(22);
font-weight: 400;
margin-top: px2rem(32);
}
}
.my {
width: px2rem(750);
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(-20);
z-index: 10;
box-sizing: border-box;
.myInfo {
width: 100%;
height: px2rem(150);
background: url(../images/myBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0 px2rem(31);
margin-bottom: px2rem(20);
.num {
width: px2rem(60);
height: 100%;
line-height: px2rem(150);
margin: 0 px2rem(14) 0 0;
float: left;
color: #FFEFC3;
font-size: px2rem(32);
font-weight: 600;
}
.tx {
width: px2rem(80);
height: px2rem(80);
border-radius: 50%;
box-sizing: border-box;
border: 1px solid #FFD976;
float: left;
margin-top: px2rem(35);
margin-right: px2rem(18);
}
.user {
float: left;
width: 3rem;
p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: px2rem(48);
margin-bottom: px2rem(17);
color: #FFEFC3;
font-size: px2rem(26);
font-weight: 500;
}
b {
color: #FFEFC3;
font-size: px2rem(22);
opacity: .6;
}
}
.score {
min-width: px2rem(133);
height: px2rem(32);
line-height: px2rem(32);
border-radius: px2rem(32);
background: rgba(255, 255, 255, .1);
margin-top: px2rem(59);
float: right;
text-align: center;
img {
width: px2rem(32);
height: px2rem(32);
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
b {
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
}
}
}
.pub {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
background: rgba(0, 0, 0, .5);
display: none;
.pub_in {
width: px2rem(720);
height: px2rem(818);
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.title {
width: px2rem(570);
height: px2rem(140);
line-height: px2rem(160);
text-align: center;
color: #FFEFC3;
font-size: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-70);
background: url(../images/rule_title.png) no-repeat;
background-size: 100% 100%;
}
.rule_close {
width: px2rem(66);
height: px2rem(66);
position: absolute;
right: px2rem(12);
top: px2rem(-68);
}
.box {
width: px2rem(600);
height: 8rem;
position: absolute;
top: px2rem(115);
left: 50%;
transform: translateX(-50%);
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.centent {
width: 100%;
height: px2rem(2542);
background: url(../images/rule.png) no-repeat;
background-size: 100% 100%;
position: relative;
.xz {
width: 1.9rem;
height: 1.9rem;
position: absolute;
right: 0.36rem;
overflow: hidden;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.xz1 {
top: 6.9rem;
}
.xz2 {
top: 17.5rem;
}
.ts {
width: 1.9rem;
height: 1.9rem;
position: absolute;
right: 0.36rem;
overflow: hidden;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.ts1 {
top: 10.05rem;
}
.ts2 {
top: 20.5rem;
}
.zj {
width: 4.55rem;
height: 7.5rem;
position: absolute;
left: 0.35rem;
overflow: hidden;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.lsls {
top: 4.1rem;
}
.kt {
top: 13.4rem;
}
.kt2 {
top: 23.5rem;
}
}
.rule_pub_title {
width: px2rem(572);
margin: px2rem(27) auto px2rem(25);
color: #FFF0C7;
font-size: px2rem(30);
font-weight: 400;
}
p {
width: px2rem(572);
margin: 0 auto 0;
color: #FFF0C7;
font-size: px2rem(28);
font-weight: 400;
opacity: .5;
line-height: 0.55rem;
}
}
}
}
.arabic {
.back img {
left: auto;
right: 0.24rem;
transform: rotate(180deg);
}
.header {
background: url(../images/header-ar.png) no-repeat;
background-size: 100% 100%;
}
.header .rule_icon {
text-indent: -6px;
}
.list ul li {
.num {
float: right;
}
.tx {
float: right;
margin-right: 0;
margin-left: 0.24rem;
}
.user {
float: right;
}
.score {
float: left;
}
}
.my .myInfo {
.num {
float: right;
}
.tx {
float: right;
margin-right: 0;
margin-left: 0.24rem;
}
.user {
float: right;
}
.score {
float: left;
}
}
.pub .pub_in .box .centent {
background: url(../images/rule-ar.png) no-repeat;
background-size: 100% 100%;
}
}

BIN
view/molistar/modules/weekStarPlus/images/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
view/molistar/modules/weekStarPlus/images/23.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
view/molistar/modules/weekStarPlus/images/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
view/molistar/modules/weekStarPlus/images/colon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 B

BIN
view/molistar/modules/weekStarPlus/images/gift.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
view/molistar/modules/weekStarPlus/images/giftBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
view/molistar/modules/weekStarPlus/images/gold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
view/molistar/modules/weekStarPlus/images/header-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
view/molistar/modules/weekStarPlus/images/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
view/molistar/modules/weekStarPlus/images/lastTop1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
view/molistar/modules/weekStarPlus/images/lastTop2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
view/molistar/modules/weekStarPlus/images/lastTop3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
view/molistar/modules/weekStarPlus/images/lastTopBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 612 KiB

BIN
view/molistar/modules/weekStarPlus/images/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
view/molistar/modules/weekStarPlus/images/liBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
view/molistar/modules/weekStarPlus/images/middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
view/molistar/modules/weekStarPlus/images/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 984 B

BIN
view/molistar/modules/weekStarPlus/images/myBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
view/molistar/modules/weekStarPlus/images/null.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
view/molistar/modules/weekStarPlus/images/right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule-en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
view/molistar/modules/weekStarPlus/images/ruleBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule_close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
view/molistar/modules/weekStarPlus/images/rule_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
view/molistar/modules/weekStarPlus/images/titleLast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
view/molistar/modules/weekStarPlus/images/tomeBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
view/molistar/modules/weekStarPlus/images/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 KiB

BIN
view/molistar/modules/weekStarPlus/images/travel/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
view/molistar/modules/weekStarPlus/images/travel/backB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
view/molistar/modules/weekStarPlus/images/ts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
view/molistar/modules/weekStarPlus/images/xz1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
view/molistar/modules/weekStarPlus/images/xz2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

210
view/molistar/modules/weekStarPlus/index.html Normal file
View File

@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="text1"></title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 头部 -->
<div class="header">
<!-- 活动规则 -->
<div class="rule_icon text2"></div>
<!-- 倒计时 -->
<div class="timeBox">
<div class="day">
<b>00</b>
<span class="text10"></span>
</div>
<div class="hour">
<b>00</b>
<span class="text11"></span>
</div>
<div class="colon"></div>
<div class="min">
<b>00</b>
<span class="text12"></span>
</div>
</div>
<!-- 倒计时文案 -->
<div class="timeText text3"></div>
</div>
<!-- 上周榜TOP3 -->
<div class="lastTop">
<div class="title text4"></div>
<div class="topBox">
<div class="top top2">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b></b>
</div>
<div class="name"></div>
<div class="id"></div>
</div>
<div class="top top1">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b></b>
</div>
<div class="name"></div>
<div class="id"></div>
</div>
<div class="top top3">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b></b>
</div>
<div class="name"></div>
<div class="id"></div>
</div>
</div>
</div>
<!-- 本周榜单 -->
<div class="weeekListTop">
<!-- 标题 -->
<div class="title text6"></div>
<!-- 周星礼物 -->
<div class="text">
<img src="./images/left.png" alt="" class="left">
<b class="text7"></b>
<img src="./images/right.png" alt="" class="right">
</div>
<div class="weekStarGift">
<div class="box1">
<img src="./images/gift.png" alt="">
<span>礼物昵称</span>
</div>
<div class="box2">
<img src="./images/gift.png" alt="">
<span>礼物昵称</span>
</div>
<div class="box3">
<img src="./images/gift.png" alt="">
<span>礼物昵称</span>
</div>
</div>
<!-- 本周TOP3 -->
<div class="thisTop">
<div class="topBox">
<div class="top top2">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b>0.00</b>
</div>
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
</div>
<div class="top top1">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b>0.00</b>
</div>
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
</div>
<div class="top top3">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="score">
<img src="./images/gold.png" alt="" class="gold">
<b>0.00</b>
</div>
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
</div>
</div>
</div>
</div>
<!-- 非前三榜单 -->
<div class="list">
<ul>
<li>
<div class="num">04</div>
<img src="./images/null.png" alt="" class="tx">
<div class="user">
<p>虚位以待</p>
<b>ID:0</b>
</div>
<div class="score">
<img src="./images/gold.png" alt="">
<b>0.00</b>
</div>
</li>
</ul>
<div class="more text8"></div>
</div>
<!-- 底部 -->
<div class="bottom">
<p class="text9"></p>
</div>
<!-- 自己 -->
<div class="my">
<div class="myInfo">
<div class="num">04</div>
<img src="./images/null.png" alt="" class="tx">
<div class="user">
<p>虚位以待</p>
<b>ID:0</b>
</div>
<div class="score">
<img src="./images/gold.png" alt="">
<b>0.00</b>
</div>
</div>
</div>
<!-- 规则弹窗 -->
<div class="pub">
<div class="pub_in">
<div class="title text2">Rule</div>
<img src="./images/rule_close.png" alt="" class="rule_close">
<div class="box">
<!-- 奖励 -->
<div class="centent">
<div class="xz xz1" id="xz1"></div>
<div class="xz xz2" id="xz2"></div>
<div class="ts ts1" id="ts1"></div>
<div class="ts ts2" id="ts2"></div>
<div class="zj lsls" id="lsls"></div>
<div class="zj kt" id="kt"></div>
<div class="zj kt2" id="kt2"></div>
<!-- <div class="zj kt"></div> -->
</div>
<!-- 规则 -->
<div class="rule_pub_title text13"></div>
<div class="rule_pub_text text14"></div>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js"></script>
<script src="../../common/local/langHandler.js"></script>

302
view/molistar/modules/weekStarPlus/js/index.js Normal file
View File

@@ -0,0 +1,302 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
var langReplace;
var localLang;
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
layer.open({
type: 2,
shadeClose: false,
content,
success(e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
var countupTime;//倒计时容器
var page = 0;
var maxPage = 0;
var arr = [];
// 初始化函數
$(function () {
getInfoFromClient();
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
setTimeout(function () {
// 頁面全屏
if (browser.app) {
if (browser.android) {
window.androidJsObj.initShowNav(false)
} else {
window.webkit.messageHandlers.initShowNav.postMessage(0)
}
};
// 頂部返回事件
$('.back img').click(() => {
if (browser.android) {
window.androidJsObj.closeWebView()
} else {
window.webkit.messageHandlers.closeWebView.postMessage(null)
}
})
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
getConfig();
}, 100)
})
// 处理SVGA
document.addEventListener('DOMContentLoaded', function () {
function loadSVGA(containerId, svgaPath) {
var container = document.getElementById(containerId);
var player = new SVGA.Player(container);
var parser = new SVGA.Parser();
parser.load(svgaPath, function (videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
});
}
loadSVGA('xz1', './svga/xz1.svga');
loadSVGA('xz2', './svga/xz2.svga');
loadSVGA('ts1', './svga/1.svga');
loadSVGA('ts2', './svga/23.svga');
loadSVGA('lsls', './svga/lsls.svga');
loadSVGA('kt', './svga/kt.svga');
loadSVGA('kt2', './svga/kt.svga');
});
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
// $('.pub .pub_in .box img').attr('src', langReplace(localLang.demoModule.img1))
if (getQueryString().lang == "ar") {
$('.pub .pub_in .box .centent .xz').attr('dir', 'let')
$('.pub .pub_in .box .centent .zj').attr('dir', 'let')
}
$('.text1').text(langReplace(localLang.demoModule.text1));
$('.text2').text(langReplace(localLang.demoModule.text2));
$('.text3').text(langReplace(localLang.demoModule.text3));
$('.text4').text(langReplace(localLang.demoModule.text4));
$('.text5').text(langReplace(localLang.demoModule.text5));
$('.text6').text(langReplace(localLang.demoModule.text6));
$('.text7').text(langReplace(localLang.demoModule.text7));
$('.text8').text(langReplace(localLang.demoModule.text8));
$('.text9').text(langReplace(localLang.demoModule.text9));
$('.text10').text(langReplace(localLang.demoModule.text10));
$('.text11').text(langReplace(localLang.demoModule.text11));
$('.text12').text(langReplace(localLang.demoModule.text12));
$('.text13').text(langReplace(localLang.demoModule.text13));
$('.text14').html(langReplace(localLang.demoModule.text14));
}
// 配置接口
function getConfig() {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/weekStar/getWeekStarList',
success(res) {
if (res.code === 200) {
// 渲染倒计时
countup(res.data.endTime - res.timestamp);
// 处理上周榜单前三
if (res.data.lastWeekStar.weekStarRankList) {
lastWeekList(res);
} else {
res.data.lastWeekStar.weekStarRankList = [];
lastWeekList(res);
}
// 处理本周礼物渲染
res.data.weekStarRank.giftList.forEach((res, i) => {
$(`.weeekListTop .weekStarGift .box${i + 1} img`).attr('src', res.picUrl);
$(`.weeekListTop .weekStarGift .box${i + 1} span`).text(res.giftName);
})
// 处理本周榜单
if (res.data.weekStarRank.weekStarRankList) {
thisWeekList(res);
} else {
res.data.weekStarRank.weekStarRankList = [];
thisWeekList(res);
}
// 处理自己
var me = res.data.weekStarRank.mineRank;
$('.my .myInfo .num').text(me.rank <= 0 ? '30+' : me.rank);
$('.my .myInfo .tx').attr('src', me.avatar);
$('.my .myInfo .user p').text(me.nick);
$('.my .myInfo .user b').text(me.erbanNo);
$('.my .myInfo .score b').text(unitProcessingAr(me.amount), 2);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 上周
function lastWeekList(res) {
var listTo3 = res.data.lastWeekStar.weekStarRankList.slice(0, 3);
if (listTo3.length < 3) {
let arr = new Array(3 - listTo3.length).fill({
avatar: './images/null.png',
nick: langReplace(localLang.demoModule.text15),
amount: "",
erbanNo: "0"
})
listTo3.push(...arr)
}
listTo3.forEach((val, i) => {
$(`.lastTop .topBox .top${i + 1} .tx`).attr('src', val.avatar);
$(`.lastTop .topBox .top${i + 1} .score b`).text(unitProcessingAr(val.amount, 2));
$(`.lastTop .topBox .top${i + 1} .name`).text(val.nick);
$(`.lastTop .topBox .top${i + 1} .id`).text(`ID:${val.erbanNo}`);
})
}
// 这周
function thisWeekList(res) {
var listTo3 = res.data.weekStarRank.weekStarRankList.slice(0, 3);
var notListTo3 = res.data.weekStarRank.weekStarRankList.slice(3);
if (notListTo3.length == 0) { $('.list .more').hide(); }
arr = paginateArray(notListTo3, 10);
if (arr.length == 1) { $('.list .more').hide(); }
maxPage = paginateArray(notListTo3, 10).length - 1;
// var newArr = notListTo3(0, 10);
//处理前三
if (listTo3.length < 3) {
let arr = new Array(3 - listTo3.length).fill({
avatar: './images/null.png',
nick: langReplace(localLang.demoModule.text15),
amount: "",
erbanNo: "0"
})
listTo3.push(...arr)
}
listTo3.forEach((val, i) => {
$(`.thisTop .topBox .top${i + 1} .tx`).attr('src', val.avatar);
$(`.thisTop .topBox .top${i + 1} .score b`).text(unitProcessingAr(val.amount, 2));
$(`.thisTop .topBox .top${i + 1} .name`).text(val.nick);
$(`.thisTop .topBox .top${i + 1} .id`).text(`ID:${val.erbanNo}`);
})
//处理非前三
$('.list ul li').remove();
var str = '';
arr[page].forEach((res, i) => {
str += `
<li>
<div class="num">${(res.rank)}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="user">
<p>${res.nick}</p>
<b>ID:${res.erbanNo}</b>
</div>
<div class="score">
<img src="./images/gold.png" alt="">
<b>${unitProcessingAr(res.amount, 2)}</b>
</div>
</li>
`})
$('.list ul').append(str);
}
// 点击加载更多
$('.list .more').click(function () {
console.log(page);
page = page + 1;
console.log(page, maxPage);
console.log(arr);
var str = '';
arr[page].forEach((res, i) => {
str += `
<li>
<div class="num">${(res.rank)}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="user">
<p>${res.nick}</p>
<b>ID:${res.erbanNo}</b>
</div>
<div class="score">
<img src="./images/gold.png" alt="">
<b>${unitProcessingAr(res.amount, 2)}</b>
</div>
</li>
`})
$('.list ul').append(str);
if (page >= maxPage) {
$('.list .more').hide();
return
}
})
function paginateArray(arr, itemsPerPage) {
const result = [];
for (let i = 0; i < arr.length; i += itemsPerPage) {
const page = arr.slice(i, i + itemsPerPage);
result.push(page);
}
return result;
}
// 倒計時
function countup(leftTime) {
clearTimeout(countupTime)
//獲取當前時間
// var now = nowTime;
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定義變數 d,h,m,s保存倒計時的時間
var d, h, m, s;
//遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果
if (leftTime > 0) {
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
s = getzf(Math.floor(leftTime / 1000 % 60));
//將倒計時賦值到div中
$('.timeBox .day b').text(d);
$('.timeBox .hour b').text(h);
$('.timeBox .min b').text(m);
} else {
getConfig();
}
if (leftTime > 0) {
leftTime = leftTime - 1000;
}
countupTime = setTimeout(function () {
countup(leftTime);
}, 1000);
}
//补0操作
function getzf(num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}
// 打开规则
$('.header .rule_icon').click(function () {
$('.pub').show();
bodyScroolFun(true);
})
// 关闭规则
$('.pub .pub_in .rule_close').click(function () {
$('.pub').hide();
bodyScroolFun(false);
})

29
view/molistar/modules/weekStarPlus/local/ar.js Normal file
View File

@@ -0,0 +1,29 @@
// 阿拉伯
langAr = {
// 模块
demoModule: {
layerIndex1: `جاري التحميل...`,
layerIndex2: `نجاح`,
layerIndex3: `خطأ في الشبكة`,
img1: `./images/rule-ar.png`,
text1: 'ساحة النجوم',
text2: 'القاعدة',
text3: 'من الاثنين 00:00 إلى الأحد 23:59 GMT+3',
text4: 'أفضل هذا الأسبوع',
text5: 'قريباً',
text6: 'هذا الأسبوع',
text7: 'هدية النجوم',
text8: 'المزيد',
text9: 'يتم تحديث البيانات كل 5 دقائق.',
text10: 'يوم',
text11: 'ساعة',
text12: 'دقيقة',
text15: 'المكان متاح',
text13: 'القواعد:',
text14: `<p>1. سيكون هناك 3 هدايا نجمية أسبوعية تُحدَّث كل أسبوع، وسيتلقى أعلى 3 أشخاص في القائمة مكافآت، وسيتم الإعلان عنها في التطبيق بالكامل.</p>
<p>2. وقت النشاط: كل يوم إثنين من الساعة 00:00:00 إلى الأحد 23:59:59 بتوقيت غرينتش +3.</p>
<p>3. يمكنك الحصول على مكان في القائمة عن طريق إرسال هدايا نجمية أسبوعية. هدية أسبوعية 1 عملة = 1 نقطة.</p>
<p>4. تمتلك دردشة Taala التفسير النهائي لهذا النشاط.</p>
<p>5. هذا النشاط لا علاقة له بشركة أبل أو جوجل.</p>`,
}
}

28
view/molistar/modules/weekStarPlus/local/en.js Normal file
View File

@@ -0,0 +1,28 @@
langEn = {
demoModule: {
layerIndex1: `Loading...`,
layerIndex2: `Success`,
layerIndex3: `Network error`,
img1: `./images/rule-en.png`,
text1: 'Star Plaza',
text2: 'Rule',
text3: 'Every Monday 00:00 to Sunday 23:59 GMT+3',
text4: 'Last Week TOP',
text5: 'Available Soon',
text6: 'This Week',
text7: 'Star Gift',
text8: 'More',
text9: 'Data is updated every 5 minutes.',
text10: 'Day',
text11: 'Hour',
text12: 'Min',
text15: 'Vacant',
text13: 'Rule:',
text14: `<p>1.There will be 3 weekly star gifts updated everyweek, and the corresponding top 3 on the list
will receive rewards, and will beannounced on the whole app.</p>
<p>2.Activty time: Every Monday 00:00:00 to Sunday 23:59:59 GMT +3.</p>
<p>3.You can get on the list by sending weekly star gifts. Weekly gift 1 coin = 1 point.</p>
<p>4.Taala chat owns the final interpretation to thisactivity.</p>
<p>5.This activity has nothing to do with apple& google.</p>`,
}
}

29
view/molistar/modules/weekStarPlus/local/zh.js Normal file
View File

@@ -0,0 +1,29 @@
// 中文
langZh = {
// 模塊
demoModule: {
layerIndex1: `加载中...`,
layerIndex2: `成功`,
layerIndex3: `网络错误`,
img1: `./images/rule.png`,
text1: '星辉广场',
text2: '规则',
text3: '每周一 00:00 到 每周日 23:59 GMT+3',
text4: '上周排名',
text5: '即将推出',
text6: '本周',
text7: '星级礼物',
text8: '更多',
text9: '数据每5分钟更新一次。',
text10: '天',
text11: '时',
text12: '分',
text15: '虚位以待',
text13: '规则:',
text14: `<p>1. 每周会更新3个周星礼物，排行榜前3名将获得奖励，并将在整个应用内公布。</p>
<p>2. 活动时间：每周一 00:00:00 到 周日 23:59:59 GMT +3。</p>
<p>3. 通过发送周星礼物可以上榜。每周礼物 1 硬币 = 1 分。</p>
<p>4. Taala 聊天拥有此活动的最终解释权。</p>
<p>5. 此活动与苹果和谷歌无关。</p>`,
}
}

BIN
view/molistar/modules/weekStarPlus/svga/1.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/modules/weekStarPlus/svga/23.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/modules/weekStarPlus/svga/kt.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/modules/weekStarPlus/svga/lsls.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/modules/weekStarPlus/svga/xz1.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/modules/weekStarPlus/svga/xz2.svga Normal file
View File

Binary file not shown.