diff --git a/view/molistar/common/js/common2.js b/view/molistar/common/js/common2.js
index 2cd239c..122d6aa 100644
--- a/view/molistar/common/js/common2.js
+++ b/view/molistar/common/js/common2.js
@@ -1010,12 +1010,16 @@ function unitProcessing(val, num, toFixeds, text) { //值 以什么为单位 保
 }
 // 阿拉伯专用
 function unitProcessingAr(val, toFixeds) { //值 保留几位小数
-    if (val < 1000) {
-        return val;
-    } else if (val >= 1000 && val < 1000000) {
-        return (val / 1000).toFixed(toFixeds) + 'K'
-    } else if (val >= 1000000) {
-        return (val / 1000000).toFixed(toFixeds) + 'M'
+    if (getQueryString().lang && getQueryString().lang == 'zh') {
+        return val >= 10000 ? (Math.floor(val / 1000) / 10).toFixed(toFixeds) + 'w' : val;
+    } else {
+        if (val < 1000) {
+            return val;
+        } else if (val >= 1000 && val < 1000000) {
+            return (val / 1000).toFixed(toFixeds) + 'K'
+        } else if (val >= 1000000) {
+            return (val / 1000000).toFixed(toFixeds) + 'M'
+        }
     }
 }
 // 封装 在ios环境中 配置公共参数的回调函数
diff --git a/view/molistar/modules/newRank/css/index.css b/view/molistar/modules/newRank/css/index.css
new file mode 100644
index 0000000..a7698b1
--- /dev/null
+++ b/view/molistar/modules/newRank/css/index.css
@@ -0,0 +1,512 @@
+html,
+body {
+  width: 100%;
+  background: #fff;
+}
+
+.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: 11.70667rem;
+  position: relative;
+  margin: 0 auto;
+}
+
+.header .tabBox {
+  width: 7.6rem;
+  height: 0.46667rem;
+  line-height: 0.46667rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 1.52rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.header .tabBox div {
+  position: relative;
+  width: 1.32rem;
+  color: #C3BEBA;
+  font-size: 0.42667rem;
+  font-weight: 400;
+}
+
+.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: #fff;
+  font-weight: bold;
+}
+
+.header .tabBox .act span {
+  display: block;
+}
+
+.header .sTab {
+  position: absolute;
+  width: 6.13333rem;
+  height: 0.74667rem;
+  top: 2.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 0.74667rem;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.header .sTab div {
+  width: 3.06667rem;
+  height: 0.74667rem;
+  line-height: 0.74667rem;
+  border-radius: 0.74667rem;
+  color: #DBD6CF;
+  font-size: 0.4rem;
+  font-weight: 400;
+  text-align: center;
+}
+
+.header .sTab .act {
+  color: #6D6D6D;
+  background: #fff;
+}
+
+.header .top {
+  width: 9.61333rem;
+  height: 4.02667rem;
+  position: absolute;
+  top: 7.86667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.header .top .top1 {
+  position: absolute;
+  top: -4rem;
+  width: 7.4rem;
+  height: 4.01333rem;
+  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.34667rem;
+  height: 2.58667rem;
+  position: absolute;
+  top: 0.93333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top1 .nick {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1.46667rem;
+}
+
+.header .top .top1 .fist {
+  width: 1.02667rem;
+  height: 1.24rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -2.88rem;
+}
+
+.header .top .top2 {
+  position: absolute;
+  top: -1.52rem;
+  width: 2.82667rem;
+  height: 3.04rem;
+  left: 0.44rem;
+  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.78667rem;
+  height: 1.78667rem;
+  position: absolute;
+  top: 0.88rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top2 .nick {
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -0.68rem;
+}
+
+.header .top .top2 .score {
+  width: 100%;
+  height: 0.42667rem;
+  line-height: 0.42667rem;
+  color: #fff;
+  font-size: 0.34667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1.33333rem;
+  text-align: center;
+}
+
+.header .top .top2 .score img {
+  display: inline-block;
+  width: 0.45333rem;
+  height: 0.45333rem;
+  margin-top: -0.04rem;
+}
+
+.header .top .top3 {
+  position: absolute;
+  top: -1.52rem;
+  width: 2.82667rem;
+  height: 3.04rem;
+  right: 0.44rem;
+  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.78667rem;
+  height: 1.78667rem;
+  position: absolute;
+  top: 0.88rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top3 .nick {
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -0.68rem;
+}
+
+.header .top .top3 .score {
+  width: 100%;
+  height: 0.42667rem;
+  line-height: 0.42667rem;
+  color: #fff;
+  font-size: 0.34667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -1.33333rem;
+  text-align: center;
+}
+
+.header .top .top3 .score img {
+  display: inline-block;
+  width: 0.45333rem;
+  height: 0.45333rem;
+  margin-top: -0.04rem;
+}
+
+.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%;
+}
+
+.header1 {
+  background: url(../images/header1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header2 {
+  background: url(../images/header2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header3 {
+  background: url(../images/header3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header4 {
+  background: url(../images/header4.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+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;
+  box-sizing: border-box;
+  padding-top: 0.50667rem;
+  padding: 0.50667rem 0.45333rem 0 0.45333rem;
+  overflow-y: scroll;
+}
+
+ul::-webkit-scrollbar {
+  display: none;
+}
+
+ul li {
+  width: 100%;
+  height: 1.33333rem;
+  margin-bottom: 0.74667rem;
+}
+
+ul li .seqNo {
+  width: 0.66667rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  text-align: center;
+  color: #15132B;
+  margin-right: 0.49333rem;
+  font-weight: 500;
+  float: left;
+}
+
+ul li .tx {
+  display: block;
+  float: left;
+  width: 1.33333rem;
+  height: 1.33333rem;
+  border-radius: 50%;
+  margin-right: 0.28rem;
+}
+
+ul li .nick {
+  width: 2.5rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  float: left;
+}
+
+ul li .score {
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  float: right;
+  color: #333333;
+  font-size: 0.34667rem;
+  font-weight: 500;
+}
+
+ul li .score img {
+  display: inline-block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+  vertical-align: middle;
+  margin-top: -0.1rem;
+}
+
+ul li .score span {
+  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;
+}
+
+.my {
+  width: 10rem;
+  height: 2.04rem;
+  position: fixed;
+  z-index: 9;
+  background: url(../images/myBg.png) no-repeat;
+  background-size: 100% 100%;
+  left: 0;
+  bottom: 0;
+}
+
+.my .box {
+  width: 100%;
+  height: 1.33333rem;
+  margin-top: 0.46667rem;
+  box-sizing: border-box;
+  padding: 0 0.4rem;
+}
+
+.my .box .seqNo {
+  width: 0.66667rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  text-align: center;
+  color: #15132B;
+  margin-right: 0.49333rem;
+  font-weight: 500;
+  float: left;
+}
+
+.my .box .tx {
+  display: block;
+  float: left;
+  width: 1.33333rem;
+  height: 1.33333rem;
+  border-radius: 50%;
+  margin-right: 0.28rem;
+}
+
+.my .box .nick {
+  width: 2.5rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  float: left;
+}
+
+.my .box .score {
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  float: right;
+  color: #333333;
+  font-size: 0.34667rem;
+  font-weight: 500;
+}
+
+.my .box .score img {
+  display: inline-block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+  vertical-align: middle;
+  margin-top: -0.1rem;
+}
+
+.my .box .score span {
+  vertical-align: middle;
+}
+
+.arabic .header .tabBox {
+  width: 90%;
+}
+
+.arabic .header .tabBox div {
+  width: 1.9rem;
+  font-size: 0.33333rem;
+  white-space: nowrap;
+}
+
+.english .header .tabBox {
+  width: 90%;
+}
+
+.english .header .tabBox div {
+  font-size: 0.34667rem;
+  white-space: nowrap;
+  width: 1.7rem;
+}
diff --git a/view/molistar/modules/newRank/css/index.scss b/view/molistar/modules/newRank/css/index.scss
new file mode 100644
index 0000000..6dd4f1c
--- /dev/null
+++ b/view/molistar/modules/newRank/css/index.scss
@@ -0,0 +1,520 @@
+@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(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(878);
+    position: relative;
+    margin: 0 auto;
+
+    .tabBox {
+        width: px2rem(570);
+        height: px2rem(35);
+        line-height: px2rem(35);
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: px2rem(114);
+        left: 50%;
+        transform: translateX(-50%);
+
+        div {
+            position: relative;
+            width: px2rem(99);
+            color: #C3BEBA;
+            font-size: px2rem(32);
+            font-weight: 400;
+
+            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: #fff;
+            font-weight: bold;
+
+            span {
+                display: block;
+            }
+        }
+    }
+
+    .sTab {
+        position: absolute;
+        width: px2rem(460);
+        height: px2rem(56);
+        top: px2rem(208);
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(255, 255, 255, .4);
+        border-radius: px2rem(56);
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+
+        div {
+            width: px2rem(230);
+            height: px2rem(56);
+            line-height: px2rem(56);
+            border-radius: px2rem(56);
+            color: #DBD6CF;
+            font-size: px2rem(30);
+            font-weight: 400;
+            text-align: center;
+        }
+
+        .act {
+            color: #6D6D6D;
+            background: #fff;
+        }
+    }
+
+    .top {
+        width: px2rem(721);
+        height: px2rem(302);
+        position: absolute;
+        top: px2rem(590);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .top1 {
+            position: absolute;
+            top: px2rem(-300);
+            width: px2rem(555);
+            height: px2rem(301);
+            left: 50%;
+            transform: translateX(-50%);
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(176);
+                height: px2rem(194);
+                position: absolute;
+                top: px2rem(70);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-110);
+            }
+
+            .fist {
+                width: px2rem(77);
+                height: px2rem(93);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-216);
+            }
+        }
+
+        .top2 {
+            position: absolute;
+            top: px2rem(-114);
+            width: px2rem(212);
+            height: px2rem(228);
+            left: px2rem(33);
+            z-index: 2;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(134);
+                height: px2rem(134);
+                position: absolute;
+                top: px2rem(66);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 100%;
+                height: 0.5rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-51);
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(32);
+                line-height: px2rem(32);
+                color: #fff;
+                font-size: px2rem(26);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-100);
+                text-align: center;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(34);
+                    height: px2rem(34);
+                    margin-top: -0.04rem;
+                }
+            }
+        }
+
+        .top3 {
+            position: absolute;
+            top: px2rem(-114);
+            width: px2rem(212);
+            height: px2rem(228);
+            right: px2rem(33);
+            z-index: 2;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(134);
+                height: px2rem(134);
+                position: absolute;
+                top: px2rem(66);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 100%;
+                height: 0.5rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-51);
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(32);
+                line-height: px2rem(32);
+                color: #fff;
+                font-size: px2rem(26);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-100);
+                text-align: center;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(34);
+                    height: px2rem(34);
+                    margin-top: -0.04rem;
+                }
+            }
+        }
+    }
+
+    .tops1 {
+        background: url(../images/bg1.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%;
+    }
+
+    .tops4 {
+        background: url(../images/bg4.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.header1 {
+    background: url(../images/header1.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.header2 {
+    background: url(../images/header2.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.header3 {
+    background: url(../images/header3.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.header4 {
+    background: url(../images/header4.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+ul {
+    width: px2rem(750);
+    height: px2rem(912);
+    position: relative;
+    z-index: 2;
+    margin: px2rem(-45) auto px2rem(153);
+    border-radius: px2rem(54) px2rem(54) 0px 0px;
+    box-sizing: border-box;
+    padding-top: px2rem(38);
+    padding: px2rem(38) px2rem(34) 0 px2rem(34);
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    li {
+        width: 100%;
+        height: px2rem(100);
+        margin-bottom: px2rem(56);
+
+        .seqNo {
+            width: px2rem(50);
+            height: px2rem(100);
+            line-height: px2rem(100);
+            text-align: center;
+            color: #15132B;
+            margin-right: px2rem(37);
+            font-weight: 500;
+            float: left;
+        }
+
+        .tx {
+            display: block;
+            float: left;
+            width: px2rem(100);
+            height: px2rem(100);
+            border-radius: 50%;
+            margin-right: px2rem(21);
+        }
+
+        .nick {
+            width: 2.5rem;
+            height: px2rem(100);
+            line-height: px2rem(100);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            float: left;
+        }
+
+        .score {
+            height: px2rem(100);
+            line-height: px2rem(100);
+            float: right;
+            color: #333333;
+            font-size: px2rem(26);
+            font-weight: 500;
+
+            img {
+                display: inline-block;
+                width: px2rem(32);
+                height: px2rem(32);
+                vertical-align: middle;
+                margin-top: -0.1rem;
+            }
+
+            span {
+                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;
+}
+
+.my {
+    width: px2rem(750);
+    height: px2rem(153);
+    position: fixed;
+    z-index: 9;
+    background: url(../images/myBg.png) no-repeat;
+    background-size: 100% 100%;
+    left: 0;
+    bottom: 0;
+
+    .box {
+        width: 100%;
+        height: px2rem(100);
+        margin-top: px2rem(35);
+        box-sizing: border-box;
+        padding: 0 px2rem(30);
+
+        .seqNo {
+            width: px2rem(50);
+            height: px2rem(100);
+            line-height: px2rem(100);
+            text-align: center;
+            color: #15132B;
+            margin-right: px2rem(37);
+            font-weight: 500;
+            float: left;
+        }
+
+        .tx {
+            display: block;
+            float: left;
+            width: px2rem(100);
+            height: px2rem(100);
+            border-radius: 50%;
+            margin-right: px2rem(21);
+        }
+
+        .nick {
+            width: 2.5rem;
+            height: px2rem(100);
+            line-height: px2rem(100);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            float: left;
+        }
+
+        .score {
+            height: px2rem(100);
+            line-height: px2rem(100);
+            float: right;
+            color: #333333;
+            font-size: px2rem(26);
+            font-weight: 500;
+
+            img {
+                display: inline-block;
+                width: px2rem(32);
+                height: px2rem(32);
+                vertical-align: middle;
+                margin-top: -0.1rem;
+            }
+
+            span {
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
+.arabic {
+    .header .tabBox {
+        width: 90%;
+
+        div {
+            width: 1.9rem;
+            font-size: px2rem(25);
+            white-space: nowrap;
+        }
+    }
+}
+
+.english {
+
+    .header .tabBox {
+        width: 90%;
+        div {
+            font-size: px2rem(26);
+            white-space: nowrap;
+            width: 1.7rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/modules/newRank/images/bg1.png b/view/molistar/modules/newRank/images/bg1.png
new file mode 100644
index 0000000..7b5679c
Binary files /dev/null and b/view/molistar/modules/newRank/images/bg1.png differ
diff --git a/view/molistar/modules/newRank/images/bg2.png b/view/molistar/modules/newRank/images/bg2.png
new file mode 100644
index 0000000..65af50d
Binary files /dev/null and b/view/molistar/modules/newRank/images/bg2.png differ
diff --git a/view/molistar/modules/newRank/images/bg3.png b/view/molistar/modules/newRank/images/bg3.png
new file mode 100644
index 0000000..b6e7330
Binary files /dev/null and b/view/molistar/modules/newRank/images/bg3.png differ
diff --git a/view/molistar/modules/newRank/images/bg4.png b/view/molistar/modules/newRank/images/bg4.png
new file mode 100644
index 0000000..9ec5ed9
Binary files /dev/null and b/view/molistar/modules/newRank/images/bg4.png differ
diff --git a/view/molistar/modules/newRank/images/fist.png b/view/molistar/modules/newRank/images/fist.png
new file mode 100644
index 0000000..982182b
Binary files /dev/null and b/view/molistar/modules/newRank/images/fist.png differ
diff --git a/view/molistar/modules/newRank/images/gold.png b/view/molistar/modules/newRank/images/gold.png
new file mode 100644
index 0000000..3420e90
Binary files /dev/null and b/view/molistar/modules/newRank/images/gold.png differ
diff --git a/view/molistar/modules/newRank/images/header1.png b/view/molistar/modules/newRank/images/header1.png
new file mode 100644
index 0000000..61e21b6
Binary files /dev/null and b/view/molistar/modules/newRank/images/header1.png differ
diff --git a/view/molistar/modules/newRank/images/header2.png b/view/molistar/modules/newRank/images/header2.png
new file mode 100644
index 0000000..c7f0dd4
Binary files /dev/null and b/view/molistar/modules/newRank/images/header2.png differ
diff --git a/view/molistar/modules/newRank/images/header3.png b/view/molistar/modules/newRank/images/header3.png
new file mode 100644
index 0000000..d5e45c0
Binary files /dev/null and b/view/molistar/modules/newRank/images/header3.png differ
diff --git a/view/molistar/modules/newRank/images/header4.png b/view/molistar/modules/newRank/images/header4.png
new file mode 100644
index 0000000..935cc14
Binary files /dev/null and b/view/molistar/modules/newRank/images/header4.png differ
diff --git a/view/molistar/modules/newRank/images/logo.png b/view/molistar/modules/newRank/images/logo.png
new file mode 100644
index 0000000..c2e895f
Binary files /dev/null and b/view/molistar/modules/newRank/images/logo.png differ
diff --git a/view/molistar/modules/newRank/images/myBg.png b/view/molistar/modules/newRank/images/myBg.png
new file mode 100644
index 0000000..95dffa8
Binary files /dev/null and b/view/molistar/modules/newRank/images/myBg.png differ
diff --git a/view/molistar/modules/newRank/images/no1.png b/view/molistar/modules/newRank/images/no1.png
new file mode 100644
index 0000000..aa05540
Binary files /dev/null and b/view/molistar/modules/newRank/images/no1.png differ
diff --git a/view/molistar/modules/newRank/images/no2.png b/view/molistar/modules/newRank/images/no2.png
new file mode 100644
index 0000000..1be2d1e
Binary files /dev/null and b/view/molistar/modules/newRank/images/no2.png differ
diff --git a/view/molistar/modules/newRank/images/no3.png b/view/molistar/modules/newRank/images/no3.png
new file mode 100644
index 0000000..a710fe4
Binary files /dev/null and b/view/molistar/modules/newRank/images/no3.png differ
diff --git a/view/molistar/modules/newRank/images/travel/back.png b/view/molistar/modules/newRank/images/travel/back.png
new file mode 100644
index 0000000..2b3812d
Binary files /dev/null and b/view/molistar/modules/newRank/images/travel/back.png differ
diff --git a/view/molistar/modules/newRank/images/travel/backB.png b/view/molistar/modules/newRank/images/travel/backB.png
new file mode 100644
index 0000000..92e190c
Binary files /dev/null and b/view/molistar/modules/newRank/images/travel/backB.png differ
diff --git a/view/molistar/modules/newRank/index.html b/view/molistar/modules/newRank/index.html
new file mode 100644
index 0000000..ad043a4
--- /dev/null
+++ b/view/molistar/modules/newRank/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MoliStar</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 header1">
+        <div class="tabBox">
+            <div class="act text1"><span></span></div>
+            <div class="text2"><span></span></div>
+            <div class="text3"><span></span></div>
+            <div class="text4"><span></span></div>
+        </div>
+        <div class="sTab">
+            <div class="act text5"></div>
+            <div class="text6"></div>
+        </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"></div>
+                <img src="./images/fist.png" alt="" class="fist">
+                <!-- <div class="score">
+                    <img src="./images/gold.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"></div>
+                <img src="./images/fist.png" alt="" class="fist">
+                <div class="score">
+                    <img src="./images/gold.png" alt="">
+                    <span></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"></div>
+                <img src="./images/fist.png" alt="" class="fist">
+                <div class="score">
+                    <img src="./images/gold.png" alt="">
+                    <span></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 非前三列表 -->
+    <ul class="ul1">
+        <!-- <li>
+            <div class="seqNo">4</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick">虚位以待</div>
+            <div class="score">
+                <img src="./images/gold.png" alt="">
+                <span>0</span>
+            </div>
+        </li> -->
+    </ul>
+    <!-- 自己排名 -->
+    <div class="my">
+        <div class="box">
+            <div class="seqNo"></div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+            <div class="score">
+                <!-- <img src="./images/gold.png" alt=""> -->
+                <span></span>
+            </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="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>
\ No newline at end of file
diff --git a/view/molistar/modules/newRank/js/index.js b/view/molistar/modules/newRank/js/index.js
new file mode 100644
index 0000000..7506ce1
--- /dev/null
+++ b/view/molistar/modules/newRank/js/index.js
@@ -0,0 +1,253 @@
+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(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        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));
+
+}
+// 榜单接口
+function geth5() {
+    $('ul li').remove();
+    $('.header .sTab').show();
+    $('.my').show()
+    $('.header .top .top2 .score,.header .top .top3 .score').show();
+    $('.header .top .top1 .fist').show();
+    $('ul li .score').show();
+    // showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/allrank/geth5',
+        data: {
+            type: listType,
+            datetype: timeType,
+            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: '',
+                        totalNum: "",
+                        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.totalNum, 1));
+                    }
+                });
+                // 非前三
+                var str = '';
+                notListTo3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="seqNo">${res.seqNo}</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="">
+                                <span>${unitProcessingAr(res.totalNum, 1)}</span>
+                            </div>
+                        </li>
+                    `
+                })
+                $('ul').append(str);
+                // 处理自己
+                $('.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));
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 公会接口
+function listRank() {
+    $('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',
+        success(res) {
+            if (res.code === 200) {
+                var my = res.data.me;
+                var listTo3 = res.data.slice(0, 3);
+                var notListTo3 = res.data.slice(3);
+                // 处理前三
+                if (listTo3.length < 3) {
+                    let arr = new Array(3 - listTo3.length).fill({
+                        avatar: './images/logo.png',
+                        name: '',
+                        totalNum: "",
+                        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.totalNum, 1));
+                    }
+                });
+                // 非前三
+                var str = '';
+                notListTo3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="seqNo">${i + 1}</div>
+                            <img src="${res.avatar}" uid="${res.clanElderUid}" alt="" class="tx">
+                            <div class="nick">${res.name}</div>
+                        </li>
+                    `
+                })
+                $('ul').append(str);
+            } 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}`);
+    timeType = 1;
+    $('.header .sTab div').removeClass('act');
+    $('.header .sTab div').eq(0).addClass('act');
+    if (i == 1) {
+        listType = 2;
+        geth5();
+    } else if (i == 2) {
+        listType = 1;
+        geth5();
+    } else if (i == 3) {
+        listType = 3;
+        geth5();
+    } else if (i == 4) {
+        listRank();
+    }
+})
+// 日榜周榜切换tab
+$('.header .sTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    timeType = i;
+    geth5();
+})
+// 前三跳转个人页
+$('.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);
+        }
+    }
+})
+// 非前三跳转个人页
+$('ul').on('click', 'li .tx', 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);
+        }
+    }
+})
\ No newline at end of file
diff --git a/view/molistar/modules/newRank/local/ar.js b/view/molistar/modules/newRank/local/ar.js
new file mode 100644
index 0000000..c643a2b
--- /dev/null
+++ b/view/molistar/modules/newRank/local/ar.js
@@ -0,0 +1,16 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: 'جار التحميل...',
+        layerIndex2: 'تمت العملية',
+        layerIndex3: 'خطأ في الشبكة، يرجى الخروج وإعادة الدخول',
+        text1: "قائمة الأغنياء<span></span>",
+        text2: "قائمة الجاذبية<span></span>",
+        text3: "قائمة الغرف<span></span>",
+        text4: "قائمة الوكالات<span></span>",
+        text5: "قائمة اليومية",
+        text6: "قائمة الأسبوعية",
+        text7: "غير مدرج",
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/modules/newRank/local/en.js b/view/molistar/modules/newRank/local/en.js
new file mode 100644
index 0000000..c3881f6
--- /dev/null
+++ b/view/molistar/modules/newRank/local/en.js
@@ -0,0 +1,16 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: 'Loading...',
+        layerIndex2: 'Operation completed',
+        layerIndex3: 'Network error, please exit and re-enter',
+        text1: "Love List<span></span>",
+        text2: "Charm List<span></span>",
+        text3: "Room List<span></span>",
+        text4: "Guild List<span></span>",
+        text5: "Daily List",
+        text6: "Weekly List",
+        text7: "Not Listed",
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/modules/newRank/local/zh.js b/view/molistar/modules/newRank/local/zh.js
new file mode 100644
index 0000000..214ebb7
--- /dev/null
+++ b/view/molistar/modules/newRank/local/zh.js
@@ -0,0 +1,16 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: '加載中...',
+        layerIndex2: '操作完成',
+        layerIndex3: '網絡錯誤，請退出重進',
+        text1: '愛意榜<span></span>',
+        text2: '魅力榜<span></span>',
+        text3: '房間榜<span></span>',
+        text4: '公會榜<span></span>',
+        text5: '日榜',
+        text6: '周榜',
+        text7: '未上榜',
+    }
+}
\ No newline at end of file