更新游戏排行榜
302
view/molistar/modules/gameRank/css/index.css
Normal file
@@ -0,0 +1,302 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0.93333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.42667rem;
|
||||
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: 10.90667rem;
|
||||
position: relative;
|
||||
margin: 0 auto 0;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.header .tab {
|
||||
position: absolute;
|
||||
top: 1.90667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
height: 0.74667rem;
|
||||
line-height: 0.74667rem;
|
||||
border-radius: 0.74667rem;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header .tab div {
|
||||
padding: 0rem 0.58667rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0.74667rem;
|
||||
}
|
||||
|
||||
.header .tab .act {
|
||||
background: #fff;
|
||||
color: #83C2D2;
|
||||
}
|
||||
|
||||
.header .no1 {
|
||||
width: 7.14667rem;
|
||||
height: 3.89333rem;
|
||||
position: absolute;
|
||||
top: 2.73333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .no1 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.header .no1 .tx {
|
||||
width: 1.84rem;
|
||||
height: 1.84rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 1.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .no1 .nick {
|
||||
width: 53%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: 0.4rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.66667rem;
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.header .no2 {
|
||||
width: 3.54667rem;
|
||||
height: 2.98667rem;
|
||||
position: absolute;
|
||||
top: 6.14667rem;
|
||||
left: 0.09333rem;
|
||||
}
|
||||
|
||||
.header .no2 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.header .no2 .tx {
|
||||
width: 1.84rem;
|
||||
height: 1.84rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.70667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .no2 .nick {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: 0.4rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.06667rem;
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.header .no3 {
|
||||
width: 3.54667rem;
|
||||
height: 2.98667rem;
|
||||
position: absolute;
|
||||
top: 6.14667rem;
|
||||
right: 0.09333rem;
|
||||
}
|
||||
|
||||
.header .no3 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.header .no3 .tx {
|
||||
width: 1.84rem;
|
||||
height: 1.84rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.70667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header .no3 .nick {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: 0.4rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 3.06667rem;
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 10rem;
|
||||
max-height: 11.3rem;
|
||||
min-height: 6.66667rem;
|
||||
background: linear-gradient(0deg, #FFFFFF 85%, #D2FEFF 100%);
|
||||
position: relative;
|
||||
margin: -0.66667rem auto 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.4rem 0;
|
||||
border-radius: 0.77333rem 0.77333rem 0px 0px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul .top {
|
||||
width: 100%;
|
||||
height: 2.13333rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #D2FEFF 100%);
|
||||
}
|
||||
|
||||
ul li {
|
||||
width: 100%;
|
||||
height: 1.12rem;
|
||||
margin-bottom: 0.8rem;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.88rem 0 0.61333rem;
|
||||
}
|
||||
|
||||
ul li .num {
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: 0.37333rem;
|
||||
margin-right: 0.32rem;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
width: 0.8rem;
|
||||
height: 100%;
|
||||
line-height: 1.12rem;
|
||||
}
|
||||
|
||||
ul li .tx {
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin-right: 0.44rem;
|
||||
}
|
||||
|
||||
ul li .nick {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
line-height: 1.12rem;
|
||||
color: #000;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul li .score {
|
||||
float: right;
|
||||
line-height: 1.12rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul li .score img {
|
||||
display: inline-block;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul li .score b {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul li:nth-child(1) .num {
|
||||
width: 0.8rem;
|
||||
height: 0.74667rem;
|
||||
background: url(../images/num1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 0.17333rem;
|
||||
}
|
||||
|
||||
ul li:nth-child(2) .num {
|
||||
width: 0.8rem;
|
||||
height: 0.74667rem;
|
||||
background: url(../images/num2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 0.17333rem;
|
||||
}
|
||||
|
||||
ul li:nth-child(3) .num {
|
||||
width: 0.8rem;
|
||||
height: 0.74667rem;
|
||||
background: url(../images/num3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 0.17333rem;
|
||||
}
|
315
view/molistar/modules/gameRank/css/index.scss
Normal file
@@ -0,0 +1,315 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: px2rem(70);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(32);
|
||||
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(818);
|
||||
position: relative;
|
||||
margin: 0 auto 0;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.tab {
|
||||
position: absolute;
|
||||
top: px2rem(143);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(255, 255, 255, .2);
|
||||
height: px2rem(56);
|
||||
line-height: px2rem(56);
|
||||
border-radius: px2rem(56);
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
padding: px2rem(0) px2rem(44);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: px2rem(56);
|
||||
}
|
||||
|
||||
.act {
|
||||
background: #fff;
|
||||
color: #83C2D2;
|
||||
}
|
||||
}
|
||||
|
||||
.no1 {
|
||||
width: px2rem(536);
|
||||
height: px2rem(292);
|
||||
position: absolute;
|
||||
top: px2rem(205);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(138);
|
||||
height: px2rem(138);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(92);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 53%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: px2rem(30);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(275);
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.no2 {
|
||||
width: px2rem(266);
|
||||
height: px2rem(224);
|
||||
position: absolute;
|
||||
top: px2rem(461);
|
||||
left: px2rem(7);
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(138);
|
||||
height: px2rem(138);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(53);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: px2rem(30);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(230);
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
width: px2rem(266);
|
||||
height: px2rem(224);
|
||||
position: absolute;
|
||||
top: px2rem(461);
|
||||
right: px2rem(7);
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(138);
|
||||
height: px2rem(138);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(53);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #B1784D;
|
||||
font-size: px2rem(30);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(230);
|
||||
font-weight: 500;
|
||||
padding-top: 0.1rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(750);
|
||||
max-height: 11.3rem;
|
||||
min-height: px2rem(500);
|
||||
background: linear-gradient(0deg, #FFFFFF 85%, #D2FEFF 100%);
|
||||
position: relative;
|
||||
margin: px2rem(-50) auto 0;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(30) 0;
|
||||
border-radius: px2rem(58) px2rem(58) 0px 0px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: px2rem(160);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #D2FEFF 100%);
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(84);
|
||||
margin-bottom: px2rem(60);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(66) 0 px2rem(46);
|
||||
|
||||
.num {
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-size: px2rem(28);
|
||||
margin-right: px2rem(24);
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
width: px2rem(60);
|
||||
height: 100%;
|
||||
line-height: px2rem(84);
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(84);
|
||||
height: px2rem(84);
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin-right: px2rem(33);
|
||||
}
|
||||
|
||||
.nick {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
line-height: px2rem(84);
|
||||
color: #000;
|
||||
font-size: px2rem(28);
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
line-height: px2rem(84);
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.num {
|
||||
width: px2rem(60);
|
||||
height: px2rem(56);
|
||||
background: url(../images/num1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: px2rem(13);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.num {
|
||||
width: px2rem(60);
|
||||
height: px2rem(56);
|
||||
background: url(../images/num2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: px2rem(13);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
.num {
|
||||
width: px2rem(60);
|
||||
height: px2rem(56);
|
||||
background: url(../images/num3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: px2rem(13);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
26
view/molistar/modules/gameRank/css/rule.css
Normal file
@@ -0,0 +1,26 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #E7FEFF;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 10rem;
|
||||
margin: 0 auto 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.4rem 0.4rem;
|
||||
}
|
||||
|
||||
ul h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.4rem;
|
||||
color: #47AEB3;
|
||||
margin-bottom: 0.26667rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
ul p {
|
||||
color: #6E8485;
|
||||
font-size: 0.32rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
30
view/molistar/modules/gameRank/css/rule.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #E7FEFF;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(750);
|
||||
margin: 0 auto 0;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(30) px2rem(30);
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: px2rem(30);
|
||||
color: #47AEB3;
|
||||
margin-bottom: px2rem(20);
|
||||
margin-top: px2rem(30);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #6E8485;
|
||||
font-size: px2rem(24);
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
}
|
BIN
view/molistar/modules/gameRank/images/gold.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
view/molistar/modules/gameRank/images/header.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
view/molistar/modules/gameRank/images/logo.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/modules/gameRank/images/no1.png
Normal file
After Width: | Height: | Size: 542 KiB |
BIN
view/molistar/modules/gameRank/images/no2.png
Normal file
After Width: | Height: | Size: 219 KiB |
BIN
view/molistar/modules/gameRank/images/no3.png
Normal file
After Width: | Height: | Size: 191 KiB |
BIN
view/molistar/modules/gameRank/images/num1.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
view/molistar/modules/gameRank/images/num2.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
view/molistar/modules/gameRank/images/num3.png
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
view/molistar/modules/gameRank/images/travel/back.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
view/molistar/modules/gameRank/images/travel/backB.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
67
view/molistar/modules/gameRank/index.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title class="titles"></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="">
|
||||
<b class="titles"></b>
|
||||
</div>
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<!-- 日榜&周榜 -->
|
||||
<div class="tab">
|
||||
<div class="text1 act"></div>
|
||||
<div class="text2"></div>
|
||||
</div>
|
||||
<!-- 前三 -->
|
||||
<div class="no no1">
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick text3"></div>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick text3"></div>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick text3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 非前三 -->
|
||||
<ul>
|
||||
<!-- <li class="other">
|
||||
<div class="num"></div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick">虚位以待</div>
|
||||
<div class="score">
|
||||
<img src="./images/gold.png" alt="">
|
||||
<b>0</b>
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</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/ar.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
177
view/molistar/modules/gameRank/js/index.js
Normal file
@@ -0,0 +1,177 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封裝layer消息提醒框
|
||||
var langReplace;
|
||||
var localLang;
|
||||
let layerIndex;
|
||||
const showLoading = (content = langReplace(localLang.demoModule.text5)) => {
|
||||
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.text6), time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
var num = 1;
|
||||
var datetype = 1;
|
||||
var isLock = true;
|
||||
// 初始化函數
|
||||
$(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();
|
||||
get()
|
||||
}, 100)
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.titles').text(langReplace(localLang.demoModule.titles));
|
||||
$('.text1').text(langReplace(localLang.demoModule.text1));
|
||||
$('.text2').text(langReplace(localLang.demoModule.text2));
|
||||
$('.text3').text(langReplace(localLang.demoModule.text3));
|
||||
}
|
||||
// 配置接口
|
||||
function get(pageNum) {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/allrank/geth5',
|
||||
data: {
|
||||
type: 4,
|
||||
datetype,
|
||||
uid: pubInfo.uid,
|
||||
pageNum,
|
||||
pageSize: 10,
|
||||
},
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
var str = '';
|
||||
if (res.data.rankVoList.length == 0) {
|
||||
isLock = false;
|
||||
}
|
||||
var listTo3 = res.data.rankVoList.slice(0, 3);
|
||||
var notListTo3 = res.data.rankVoList;
|
||||
if (listTo3.length < 3) {
|
||||
let arr = new Array(3 - listTo3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: langReplace(localLang.demoModule.text3),
|
||||
uid: null,
|
||||
})
|
||||
listTo3.push(...arr)
|
||||
}
|
||||
listTo3.forEach((res, i) => {
|
||||
$(`.header .no${i + 1} .ts`).attr("uid", res.uid);
|
||||
$(`.header .no${i + 1} .tx`).attr("src", res.avatar);
|
||||
$(`.header .no${i + 1} .nick`).text(res.nick);
|
||||
})
|
||||
notListTo3.forEach((res, i) => {
|
||||
str += `
|
||||
<li class="other">
|
||||
<div class="num">${i > 2 ? i + 1 : ''}</div>
|
||||
<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="">
|
||||
<b>${unitProcessingAr(res.totalNum, 1)}</b>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('ul').append(str);
|
||||
} else {
|
||||
isLock = true;
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error(err) {
|
||||
isLock = true;
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(langReplace(localLang.demoModule.text4))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 切換日榜周榜
|
||||
$('.header .tab div').click(function () {
|
||||
$(this).addClass('act').siblings().removeClass('act');
|
||||
var i = $(this).index() + 1;
|
||||
datetype = i;
|
||||
pageNum = 1;
|
||||
get(pageNum);
|
||||
$('ul li').remove();
|
||||
})
|
||||
// 監聽滑動分頁
|
||||
$('ul').scroll(function () {
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
||||
if (isLock) {
|
||||
// 請求下一頁
|
||||
page = page + 1;
|
||||
get(pageNum);
|
||||
isLock = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击非前三跳转主页
|
||||
$('ul').on('click', 'li .tx', function () {
|
||||
var uid = $(this).attr("uid");
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
setTimeout(function () { lock = true; }, 200)
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击前三跳转主页
|
||||
$('.header .no .ts').click(function () {
|
||||
var uid = $(this).attr("uid");
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
setTimeout(function () { lock = true; }, 200)
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
52
view/molistar/modules/gameRank/js/rule.js
Normal file
@@ -0,0 +1,52 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let ruleMode = getQueryString().ruleMode;
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封裝layer消息提醒框
|
||||
var langReplace;
|
||||
var localLang;
|
||||
let layerIndex;
|
||||
const showLoading = (content = langReplace(localLang.demoModule.text5)) => {
|
||||
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.text6), time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
setTimeout(function () {
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
}, 100)
|
||||
})
|
||||
function translateFun() {
|
||||
var langReplace = window.lang.replace;
|
||||
var localLang = window.lang;
|
||||
$('.titleRule').html(langReplace(localLang.demoModule.titleRule));
|
||||
if (ruleMode == 1) {
|
||||
$('ul').html(langReplace(localLang.demoModule.ruleText1));
|
||||
} else if (ruleMode == 2) {
|
||||
$('ul').html(langReplace(localLang.demoModule.ruleText2));
|
||||
}
|
||||
}
|
43
view/molistar/modules/gameRank/local/ar.js
Normal file
@@ -0,0 +1,43 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
titles: `ترتيب LUDO`,
|
||||
text1: `ترتيب اليومي`,
|
||||
text2: `ترتيب الأسبوعي`,
|
||||
text3: `شاغر`,
|
||||
text4: `خطأ في الشبكة`,
|
||||
text5: `جار التحميل...`,
|
||||
text6: `تم العملية`, titleRule: `قواعد اللعبة`,
|
||||
ruleText1: `
|
||||
<li>
|
||||
<h3>الإقلاع من القاعدة</h3>
|
||||
<p>رمي النرد للبدء باللعبة، والحصول على رمي إضافي؛ إذا حصلت على 6 ثلاث مرات متتالية، ينتهي الجولة.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>الفوز باللعبة</h3>
|
||||
<p>يتطلب الوضع الكلاسيكي وصول 4 قطع إلى النهاية للفوز.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>العناصر المساعدة في اللعبة</h3>
|
||||
<p>1. اللاعبون الذين يحصلون على "النرد الذهبي" يجب أن يرموا 6.</p>
|
||||
<p>2. اللاعبون الذين يحصلون على "المغناطيس" يمكنهم التقدم 8 خطوات حتى يعوقهم الآخرون.</p>
|
||||
<p>3. اللاعبون الذين يحصلون على "القنبلة" يمكنهم تفجير 8 خطوات، مما يؤدي إلى إزالة الخصم إلى القاعدة.</p>
|
||||
</li>
|
||||
`,
|
||||
ruleText2: `
|
||||
<li>
|
||||
<h3>فتح المسار النهائي</h3>
|
||||
<p>1. يمكنك دخول المسار النهائي فقط بعد قتل قطعة واحدة من أي لاعب آخر.</p>
|
||||
<p>2. يتطلب الوضع السريع فقط وصول قطعة واحدة إلى النهاية للفوز.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>مكان آمن</h3>
|
||||
<p>ستحمى قطعك من القتل عندما تكون على المربع البداية والمربع النجمي.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>سرعة اللعبة أسرع</h3>
|
||||
<p>عند بدء اللعبة، هناك قطعة في نقطة البداية.</p>
|
||||
</li>`
|
||||
}
|
||||
}
|
44
view/molistar/modules/gameRank/local/en.js
Normal file
@@ -0,0 +1,44 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
titles: `LUDO Leaderboard`,
|
||||
text1: `Daily Leaderboard`,
|
||||
text2: `Weekly Leaderboard`,
|
||||
text3: `Vacancy`,
|
||||
text4: `Network Error`,
|
||||
text5: `Loading...`,
|
||||
text6: `Operation Completed`,
|
||||
titleRule: `Game Rules`,
|
||||
ruleText1: `
|
||||
<li>
|
||||
<h3>Take off from the base</h3>
|
||||
<p>Throw 6 to start, and get 1 extra throw; if you throw 6 three times in a row, the round ends.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Win the game</h3>
|
||||
<p>Classic mode requires 4 pieces to reach the end to win.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Game props</h3>
|
||||
<p>1. Players who earn 'gold dice' must throw 6.</p>
|
||||
<p>2. Players who earn the 'magnet' can advance 8 steps until blocked by others.</p>
|
||||
<p>3. Players who earn the 'bomb' can bomb 8 steps, eliminating the opponent back to the base.</p>
|
||||
</li>
|
||||
`,
|
||||
ruleText2: `
|
||||
<li>
|
||||
<h3>Unlock finish track</h3>
|
||||
<p>1. You can enter the finish track only after killing 1 piece of any other player.</p>
|
||||
<p>2. Quick Mode only requires one piece to reach the end to win.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Safe place</h3>
|
||||
<p>Your pieces will be protected from being killed on the starting square and the star square.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Faster game pace</h3>
|
||||
<p>When the game starts, there is a piece at the starting point.</p>
|
||||
</li>`
|
||||
}
|
||||
}
|
45
view/molistar/modules/gameRank/local/zh.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// 中文
|
||||
langZh = {
|
||||
// 模塊
|
||||
demoModule: {
|
||||
titles: `LUDO排行榜`,
|
||||
text1: `日榜`,
|
||||
text2: `周榜`,
|
||||
text3: `虛位以待`,
|
||||
text4: `網絡錯誤`,
|
||||
text5: `加載中...`,
|
||||
text6: `操作完成`,
|
||||
titleRule: `遊戲規則`,
|
||||
ruleText1: `
|
||||
<li>
|
||||
<h3>從基地出發</h3>
|
||||
<p>投擲6開始出發,併獎勵1次額外的投擲,如果連續3次投擲6,則本輪結束</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>贏得比賽</h3>
|
||||
<p>經典模式需要4枚棋子達到終點才能獲勝</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>遊戲道具</h3>
|
||||
<p>1.贏得“金色骰子”的玩家必須投擲6。</p>
|
||||
<p>2.贏得“磁鐵”的玩家可以嚮前進8步,直到被其他玩家阻擋。</p>
|
||||
<p>3.贏得“炸彈”的玩家可以炸掉8步,將對手消滅併送回基地。</p>
|
||||
</li>
|
||||
`,
|
||||
ruleText2: `
|
||||
<li>
|
||||
<h3>解鎖終點通道</h3>
|
||||
<p>1.只有在消滅其他任何一位玩家的一枚棋子後,您才能進入終點通道。</p>
|
||||
<p>2.快速模式只需要一枚棋子達到終點即可獲勝。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>安全區域</h3>
|
||||
<p>在起點和星星方格上,您的棋子將受到保護,不會被消滅。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>遊戲節奏更快</h3>
|
||||
<p>遊戲開始時,起點上有一枚棋子。</p>
|
||||
</li>
|
||||
`,
|
||||
}
|
||||
}
|
30
view/molistar/modules/gameRank/rule.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title class="titleRule"></title>
|
||||
<!-- 游戏规则 -->
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/rule.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</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/ar.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./js/rule.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|