diff --git a/view/molistar/modules/pkRank/css/index.css b/view/molistar/modules/pkRank/css/index.css
new file mode 100644
index 0000000..483981d
--- /dev/null
+++ b/view/molistar/modules/pkRank/css/index.css
@@ -0,0 +1,674 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #121F75 0%, #4D202B 82%, #08053C 99%);
+}
+
+.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.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: 10.4rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.tab {
+  position: relative;
+  width: 10rem;
+  height: 1.52rem;
+  margin: -0.3rem auto 0;
+  background: url(../images/tabBg.png) no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 33.33%;
+  text-align: center;
+  height: 1.52rem;
+  line-height: 1.52rem;
+  color: #9995FF;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.tab .act {
+  width: 3.98667rem;
+  height: 1.29333rem;
+  line-height: 1rem;
+  color: #FFDC78;
+  font-weight: bold;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+  margin-top: 0.26667rem;
+}
+
+.page1 .box1 {
+  width: 9.28rem;
+  height: 2.70667rem;
+  line-height: 2.70667rem;
+  background: url(../images/page1Box1.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0.92rem auto 1.05333rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0 0.41333rem;
+  box-sizing: border-box;
+}
+
+.page1 .box1 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box1 b {
+  color: #FAE68B;
+}
+
+.page1 .box2 {
+  width: 9.28rem;
+  height: 2.70667rem;
+  background: url(../images/page1Box1.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.10667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box2 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box2 b {
+  color: #FAE68B;
+}
+
+.page1 .box2 .content {
+  height: 1.8rem;
+  overflow-y: scroll;
+  margin-top: -0.25rem;
+}
+
+.page1 .box2 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page1 .box3 {
+  width: 9.28rem;
+  height: 3.37333rem;
+  background: url(../images/page1Box3.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box3 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box3 b {
+  color: #FAE68B;
+}
+
+.page1 .box3 .content {
+  height: 2.2rem;
+  overflow-y: scroll;
+}
+
+.page1 .box3 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page1 .box4 {
+  width: 9.28rem;
+  height: 22.17333rem;
+  background: url(../images/page1Box4.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box4 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box4 b {
+  color: #FAE68B;
+}
+
+.page1 .box4_en {
+  background: url(../images/page1Box4_en.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box4_ar {
+  background: url(../images/page1Box4_ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box5 {
+  width: 9.28rem;
+  height: 9.17333rem;
+  background: url(../images/page1Box5.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.64rem;
+}
+
+.page1 .box5 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box5 b {
+  color: #FAE68B;
+}
+
+.page1 .box5 .content {
+  height: 8rem;
+  overflow-y: scroll;
+}
+
+.page1 .box5 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 {
+  width: 9.28rem;
+  height: 21.76rem;
+  margin: 0 auto 0.38667rem;
+  background: url(../images/page2.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  display: none;
+}
+
+.page2 .no1 {
+  width: 8.50667rem;
+  height: 4.50667rem;
+  position: absolute;
+  top: 1.89333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .no1 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no1 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.61333rem;
+}
+
+.page2 .no1 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.58667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .no2 {
+  width: 4.53333rem;
+  height: 4.53333rem;
+  position: absolute;
+  top: 6.65333rem;
+  left: 0.13333rem;
+}
+
+.page2 .no2 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no2 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.52rem;
+}
+
+.page2 .no2 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.44rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .no3 {
+  width: 4.53333rem;
+  height: 4.53333rem;
+  position: absolute;
+  top: 6.65333rem;
+  right: 0.13333rem;
+}
+
+.page2 .no3 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no3 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.52rem;
+}
+
+.page2 .no3 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.44rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .titleBox {
+  width: 7.7rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 11.53333rem;
+  display: flex;
+  justify-content: space-between;
+  color: #FFFFFF;
+  font-size: 0.24rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page2 ul {
+  width: 8.26667rem;
+  height: 8.9rem;
+  position: absolute;
+  top: 12.50667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 ul li {
+  background: url(../images/page2Li.png) no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 1.92rem;
+}
+
+.page2 ul li .num {
+  width: 0.92rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  float: left;
+  margin-right: 0.2rem;
+  margin-left: 0.14667rem;
+  text-align: center;
+}
+
+.page2 ul li .tx {
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  margin-top: 0.34667rem;
+  margin-right: 0.14667rem;
+  float: left;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page2 ul li .user {
+  width: 1.7rem;
+  float: left;
+}
+
+.page2 ul li .user p {
+  margin-top: 0.6rem;
+  margin-right: 0.06667rem;
+  margin-bottom: 0.14667rem;
+  color: #FFFFFF;
+  font-size: 0.34667rem;
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 ul li .user b {
+  display: block;
+  color: #fff;
+  font-size: 0.32rem;
+  font-weight: 500;
+  opacity: .6;
+}
+
+.page2 ul li .all {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: left;
+}
+
+.page2 ul li .win {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: left;
+}
+
+.page2 ul li .winPercent {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: right;
+}
+
+.page2 ul .li1 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 ul .li2 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 ul .li3 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page3 {
+  display: none;
+  width: 9.28rem;
+  height: 11.30667rem;
+  margin: 0 auto 0.36rem;
+  background: url(../images/page3.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.page3 ul {
+  width: 9.08rem;
+  height: 9.5rem;
+  margin-top: 1.4rem;
+  overflow-y: scroll;
+  margin: 1.4rem auto 0;
+}
+
+.page3 ul::-webkit-scrollbar {
+  display: none;
+}
+
+.page3 ul li {
+  width: 9.08rem;
+  height: 5.54667rem;
+  background: url(../images/page3Li.png) no-repeat;
+  background-size: 100% 100%;
+  margin-top: -1rem;
+  margin-bottom: -2.5rem;
+  position: relative;
+  transform: translateX(-1.2%);
+}
+
+.page3 ul li .icon_l {
+  width: 1.02667rem;
+  height: 0.61333rem;
+  position: absolute;
+  left: 0.72rem;
+  z-index: 2;
+  top: 2.13333rem;
+}
+
+.page3 ul li .icon_r {
+  width: 1.02667rem;
+  height: 0.61333rem;
+  position: absolute;
+  right: 0.72rem;
+  z-index: 2;
+  top: 2.13333rem;
+}
+
+.page3 ul li .tx_l {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  position: absolute;
+  left: 0.65333rem;
+  top: 2.38667rem;
+  border-radius: 50%;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page3 ul li .tx_r {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  position: absolute;
+  right: 0.53333rem;
+  top: 2.38667rem;
+  border-radius: 50%;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page3 ul li .nick_l {
+  width: 1.6rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.33333rem;
+  font-weight: bold;
+  position: absolute;
+  left: 1.96rem;
+  top: 2.66667rem;
+}
+
+.page3 ul li .nick_r {
+  width: 1.6rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.33333rem;
+  font-weight: bold;
+  position: absolute;
+  left: 5.6rem;
+  top: 2.66667rem;
+}
+
+.page3 ul li .id_l {
+  width: 1.6rem;
+  color: #fff;
+  font-weight: 500;
+  font-size: 0.30667rem;
+  opacity: .6;
+  position: absolute;
+  left: 1.96rem;
+  top: 3.16rem;
+}
+
+.page3 ul li .id_r {
+  width: 1.6rem;
+  color: #fff;
+  font-weight: 500;
+  font-size: 0.30667rem;
+  opacity: .6;
+  position: absolute;
+  left: 5.6rem;
+  top: 3.16rem;
+}
+
+.arabic .page2 .titleBox {
+  width: 8.53333rem;
+}
diff --git a/view/molistar/modules/pkRank/css/index.scss b/view/molistar/modules/pkRank/css/index.scss
new file mode 100644
index 0000000..9689bc6
--- /dev/null
+++ b/view/molistar/modules/pkRank/css/index.scss
@@ -0,0 +1,693 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #121F75 0%, #4D202B 82%, #08053C 99%);
+}
+
+.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(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(780);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+}
+
+.tab {
+    position: relative;
+    width: px2rem(750);
+    height: px2rem(114);
+    margin: -0.3rem auto 0;
+    background: url(../images/tabBg.png) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: 33.33%;
+        text-align: center;
+        height: px2rem(114);
+        line-height: px2rem(114);
+        color: #9995FF;
+        font-size: px2rem(30);
+        font-weight: 500;
+    }
+
+    .act {
+        width: px2rem(299);
+        height: px2rem(97);
+        line-height: px2rem(75);
+        color: #FFDC78;
+        font-weight: bold;
+        background: url(../images/tabAct.png) no-repeat;
+        background-size: 100% 100%;
+        margin-top: px2rem(20);
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .box1 {
+        width: px2rem(696);
+        height: px2rem(203);
+        line-height: px2rem(203);
+        background: url(../images/page1Box1.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: px2rem(69) auto px2rem(79);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: 0 px2rem(31);
+        box-sizing: border-box;
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+    }
+
+    .box2 {
+        width: px2rem(696);
+        height: px2rem(203);
+        background: url(../images/page1Box1.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(83);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 1.8rem;
+            overflow-y: scroll;
+            margin-top: -0.25rem;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .box3 {
+        width: px2rem(696);
+        height: px2rem(253);
+        background: url(../images/page1Box3.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 2.2rem;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .box4 {
+        width: px2rem(696);
+        height: px2rem(1663);
+        background: url(../images/page1Box4.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+    }
+
+    .box4_en {
+        background: url(../images/page1Box4_en.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .box4_ar {
+        background: url(../images/page1Box4_ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .box5 {
+        width: px2rem(696);
+        height: px2rem(688);
+        background: url(../images/page1Box5.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(48);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 8rem;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+}
+
+.page2 {
+    width: px2rem(696);
+    height: px2rem(1632);
+    margin: 0 auto px2rem(29);
+    background: url(../images/page2.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: none;
+
+    .no1 {
+        width: px2rem(638);
+        height: px2rem(338);
+        position: absolute;
+        top: px2rem(142);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(46);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(269);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .no2 {
+        width: px2rem(340);
+        height: px2rem(340);
+        position: absolute;
+        top: px2rem(499);
+        left: px2rem(10);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(39);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(258);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .no3 {
+        width: px2rem(340);
+        height: px2rem(340);
+        position: absolute;
+        top: px2rem(499);
+        right: px2rem(10);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(39);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(258);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .titleBox {
+        width: 7.7rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(865);
+        display: flex;
+        justify-content: space-between;
+        color: #FFFFFF;
+        font-size: px2rem(18);
+        font-weight: 500;
+        text-align: center;
+    }
+
+    ul {
+        width: px2rem(620);
+        height: 8.9rem;
+        position: absolute;
+        top: px2rem(938);
+        left: 50%;
+        transform: translateX(-50%);
+
+        li {
+            background: url(../images/page2Li.png) no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            height: px2rem(144);
+
+            .num {
+                width: px2rem(69);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #fff;
+                font-size: px2rem(26);
+                font-weight: 500;
+                float: left;
+                margin-right: px2rem(15);
+                margin-left: px2rem(11);
+                text-align: center;
+            }
+
+            .tx {
+                width: px2rem(90);
+                height: px2rem(90);
+                border-radius: 50%;
+                margin-top: px2rem(26);
+                margin-right: px2rem(11);
+                float: left;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .user {
+                width: 1.7rem;
+                float: left;
+
+                p {
+                    margin-top: px2rem(45);
+                    margin-right: px2rem(5);
+                    margin-bottom: px2rem(11);
+                    color: #FFFFFF;
+                    font-size: px2rem(26);
+                    font-weight: bold;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                b {
+                    display: block;
+                    color: #fff;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    opacity: .6;
+                }
+            }
+
+            .all {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: left;
+            }
+
+            .win {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: left;
+            }
+
+            .winPercent {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: right;
+            }
+        }
+
+        .li1 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .li2 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .li3 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no3.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+}
+
+.page3 {
+    display: none;
+    width: px2rem(696);
+    height: px2rem(848);
+    margin: 0 auto px2rem(27);
+    background: url(../images/page3.png) no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    ul {
+        width: px2rem(681);
+        height: 9.5rem;
+        margin-top: 1.4rem;
+        overflow-y: scroll;
+        margin: 1.4rem auto 0;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            width: px2rem(681);
+            height: px2rem(416);
+            background: url(../images/page3Li.png) no-repeat;
+            background-size: 100% 100%;
+            margin-top: -1rem;
+            margin-bottom: -2.5rem;
+            position: relative;
+            transform: translateX(-1.2%);
+
+            .icon_l {
+                width: px2rem(77);
+                height: px2rem(46);
+                position: absolute;
+                left: px2rem(54);
+                z-index: 2;
+                top: px2rem(160);
+            }
+
+            .icon_r {
+                width: px2rem(77);
+                height: px2rem(46);
+                position: absolute;
+                right: px2rem(54);
+                z-index: 2;
+                top: px2rem(160);
+            }
+
+            .tx_l {
+                width: px2rem(88);
+                height: px2rem(88);
+                position: absolute;
+                left: px2rem(49);
+                top: px2rem(179);
+                border-radius: 50%;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .tx_r {
+                width: px2rem(88);
+                height: px2rem(88);
+                position: absolute;
+                right: px2rem(40);
+                top: px2rem(179);
+                border-radius: 50%;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .nick_l {
+                width: 1.6rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(25);
+                font-weight: bold;
+                position: absolute;
+                left: px2rem(147);
+                top: px2rem(200);
+            }
+
+            .nick_r {
+                width: 1.6rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(25);
+                font-weight: bold;
+                position: absolute;
+                left: px2rem(420);
+                top: px2rem(200);
+            }
+
+            .id_l {
+                width: 1.6rem;
+                color: #fff;
+                font-weight: 500;
+                font-size: px2rem(23);
+                opacity: .6;
+                position: absolute;
+                left: px2rem(147);
+                top: px2rem(237);
+            }
+
+            .id_r {
+                width: 1.6rem;
+                color: #fff;
+                font-weight: 500;
+                font-size: px2rem(23);
+                opacity: .6;
+                position: absolute;
+                left: px2rem(420);
+                top: px2rem(237);
+            }
+        }
+    }
+}
+
+.arabic{
+    .page2 .titleBox{
+        width: px2rem(640);
+    }
+}
\ No newline at end of file
diff --git a/view/molistar/modules/pkRank/images/balance-ar.png b/view/molistar/modules/pkRank/images/balance-ar.png
new file mode 100644
index 0000000..4cf963e
Binary files /dev/null and b/view/molistar/modules/pkRank/images/balance-ar.png differ
diff --git a/view/molistar/modules/pkRank/images/balance-en.png b/view/molistar/modules/pkRank/images/balance-en.png
new file mode 100644
index 0000000..49fa7d9
Binary files /dev/null and b/view/molistar/modules/pkRank/images/balance-en.png differ
diff --git a/view/molistar/modules/pkRank/images/balance-zh.png b/view/molistar/modules/pkRank/images/balance-zh.png
new file mode 100644
index 0000000..e6cbf0b
Binary files /dev/null and b/view/molistar/modules/pkRank/images/balance-zh.png differ
diff --git a/view/molistar/modules/pkRank/images/header.png b/view/molistar/modules/pkRank/images/header.png
new file mode 100644
index 0000000..c793fd3
Binary files /dev/null and b/view/molistar/modules/pkRank/images/header.png differ
diff --git a/view/molistar/modules/pkRank/images/logo.png b/view/molistar/modules/pkRank/images/logo.png
new file mode 100644
index 0000000..cbdc951
Binary files /dev/null and b/view/molistar/modules/pkRank/images/logo.png differ
diff --git a/view/molistar/modules/pkRank/images/lose-ar.png b/view/molistar/modules/pkRank/images/lose-ar.png
new file mode 100644
index 0000000..7f35331
Binary files /dev/null and b/view/molistar/modules/pkRank/images/lose-ar.png differ
diff --git a/view/molistar/modules/pkRank/images/lose-en.png b/view/molistar/modules/pkRank/images/lose-en.png
new file mode 100644
index 0000000..85ac975
Binary files /dev/null and b/view/molistar/modules/pkRank/images/lose-en.png differ
diff --git a/view/molistar/modules/pkRank/images/lose-zh.png b/view/molistar/modules/pkRank/images/lose-zh.png
new file mode 100644
index 0000000..ed4ab4a
Binary files /dev/null and b/view/molistar/modules/pkRank/images/lose-zh.png differ
diff --git a/view/molistar/modules/pkRank/images/no1.png b/view/molistar/modules/pkRank/images/no1.png
new file mode 100644
index 0000000..4e37ce8
Binary files /dev/null and b/view/molistar/modules/pkRank/images/no1.png differ
diff --git a/view/molistar/modules/pkRank/images/no2.png b/view/molistar/modules/pkRank/images/no2.png
new file mode 100644
index 0000000..ad5414c
Binary files /dev/null and b/view/molistar/modules/pkRank/images/no2.png differ
diff --git a/view/molistar/modules/pkRank/images/no3.png b/view/molistar/modules/pkRank/images/no3.png
new file mode 100644
index 0000000..16946b7
Binary files /dev/null and b/view/molistar/modules/pkRank/images/no3.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box1.png b/view/molistar/modules/pkRank/images/page1Box1.png
new file mode 100644
index 0000000..ebba99a
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box1.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box3.png b/view/molistar/modules/pkRank/images/page1Box3.png
new file mode 100644
index 0000000..56aa222
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box3.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box4.png b/view/molistar/modules/pkRank/images/page1Box4.png
new file mode 100644
index 0000000..398a973
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box4.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box4_ar.png b/view/molistar/modules/pkRank/images/page1Box4_ar.png
new file mode 100644
index 0000000..4e901ea
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box4_ar.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box4_en.png b/view/molistar/modules/pkRank/images/page1Box4_en.png
new file mode 100644
index 0000000..d480c0f
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box4_en.png differ
diff --git a/view/molistar/modules/pkRank/images/page1Box5.png b/view/molistar/modules/pkRank/images/page1Box5.png
new file mode 100644
index 0000000..156870c
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1Box5.png differ
diff --git a/view/molistar/modules/pkRank/images/page1TitleBg.png b/view/molistar/modules/pkRank/images/page1TitleBg.png
new file mode 100644
index 0000000..c4438f2
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page1TitleBg.png differ
diff --git a/view/molistar/modules/pkRank/images/page2.png b/view/molistar/modules/pkRank/images/page2.png
new file mode 100644
index 0000000..7920cf2
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page2.png differ
diff --git a/view/molistar/modules/pkRank/images/page2Li.png b/view/molistar/modules/pkRank/images/page2Li.png
new file mode 100644
index 0000000..57b5c75
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page2Li.png differ
diff --git a/view/molistar/modules/pkRank/images/page2Top1.png b/view/molistar/modules/pkRank/images/page2Top1.png
new file mode 100644
index 0000000..7db5ead
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page2Top1.png differ
diff --git a/view/molistar/modules/pkRank/images/page2Top2.png b/view/molistar/modules/pkRank/images/page2Top2.png
new file mode 100644
index 0000000..8c05d6d
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page2Top2.png differ
diff --git a/view/molistar/modules/pkRank/images/page2Top3.png b/view/molistar/modules/pkRank/images/page2Top3.png
new file mode 100644
index 0000000..69809eb
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page2Top3.png differ
diff --git a/view/molistar/modules/pkRank/images/page3.png b/view/molistar/modules/pkRank/images/page3.png
new file mode 100644
index 0000000..c9ae004
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page3.png differ
diff --git a/view/molistar/modules/pkRank/images/page3Li.png b/view/molistar/modules/pkRank/images/page3Li.png
new file mode 100644
index 0000000..cf8fc8c
Binary files /dev/null and b/view/molistar/modules/pkRank/images/page3Li.png differ
diff --git a/view/molistar/modules/pkRank/images/tabAct.png b/view/molistar/modules/pkRank/images/tabAct.png
new file mode 100644
index 0000000..e9d852e
Binary files /dev/null and b/view/molistar/modules/pkRank/images/tabAct.png differ
diff --git a/view/molistar/modules/pkRank/images/tabBg.png b/view/molistar/modules/pkRank/images/tabBg.png
new file mode 100644
index 0000000..48b87fd
Binary files /dev/null and b/view/molistar/modules/pkRank/images/tabBg.png differ
diff --git a/view/molistar/modules/pkRank/images/travel/back.png b/view/molistar/modules/pkRank/images/travel/back.png
new file mode 100644
index 0000000..2b3812d
Binary files /dev/null and b/view/molistar/modules/pkRank/images/travel/back.png differ
diff --git a/view/molistar/modules/pkRank/images/win-ar.png b/view/molistar/modules/pkRank/images/win-ar.png
new file mode 100644
index 0000000..a3283b5
Binary files /dev/null and b/view/molistar/modules/pkRank/images/win-ar.png differ
diff --git a/view/molistar/modules/pkRank/images/win-en.png b/view/molistar/modules/pkRank/images/win-en.png
new file mode 100644
index 0000000..f9c4fda
Binary files /dev/null and b/view/molistar/modules/pkRank/images/win-en.png differ
diff --git a/view/molistar/modules/pkRank/images/win-zh.png b/view/molistar/modules/pkRank/images/win-zh.png
new file mode 100644
index 0000000..0a7f458
Binary files /dev/null and b/view/molistar/modules/pkRank/images/win-zh.png differ
diff --git a/view/molistar/modules/pkRank/index.html b/view/molistar/modules/pkRank/index.html
new file mode 100644
index 0000000..be86f85
--- /dev/null
+++ b/view/molistar/modules/pkRank/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title_t"></title>
+    <!-- PK排行榜 -->
+    <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>
+    <!-- tab切换 -->
+    <div class="tab">
+        <div class="act text1"></div>
+        <div class="text2"></div>
+        <div class="text3"></div>
+    </div>
+    <!-- 页面1 -->
+    <div class="page1 text4">
+        <!-- <div class="box1">
+            <div class="title">活动时间</div>
+            <div class="content">活动每周四晚上 <b>10:00</b> 开放，周日晚上 <b>10:00</b> 结束。</div>
+        </div>
+        <div class="box2">
+            <div class="title">报名方式</div>
+            <div class="content">主播在房间内搜索其他主播的ID并发起PK，即代表参加活动（仅限个播参与）。</div>
+        </div>
+        <div class="box3">
+            <div class="title">获胜条件</div>
+            <div class="content">PK双方流水总和 <b>≧5000</b>，则代表有效数据，胜利方胜利场数<b>+1</b>，失败方胜利场数<b>+0</b>，获胜率=胜利场数/总参加场数</div>
+        </div>
+        <div class="box4">
+            <div class="title">活动奖励</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">活动规则</div>
+            <div class="content">
+                1、若用在比赛期间参加比赛选手出现辱骂他人等违反平台规则行为者按照平台规则处罚用户后，将参与者取消活动资格;<br>
+                2、总胜利场数>=20且排名前五的主播有额外奖励，铭牌&座驾奖励在活动结束后1h内自动发放，钻石在三个工作日之内下发;<br>
+                3、胜利场数&获胜率相同，按照最后一场结束时间排名，晚结束排名靠前;<br>
+                4、有任何疑問請聯繫客服（app內搜索ID：10001、WeChat:sd245376）;<br>
+                5、本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關。
+            </div>
+        </div> -->
+    </div>
+    <!-- 页面2 -->
+    <div class="page2">
+        <!-- 前三 -->
+        <div class="no1">
+            <img src="./images/page2Top1.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <div class="no2">
+            <img src="./images/page2Top2.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <div class="no3">
+            <img src="./images/page2Top3.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <!-- 表头 -->
+        <div class="titleBox">
+            <div class="text5"></div>
+            <div class="text6"></div>
+            <div class="text7"></div>
+            <div class="text8"></div>
+            <div class="text9"></div>
+        </div>
+        <!-- 列表 -->
+        <ul>
+            <!-- <li class="li1">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li class="li2">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li class="li3">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li>
+                <div class="num">4</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li> -->
+        </ul>
+    </div>
+    <!-- 页面3 -->
+    <div class="page3">
+        <ul>
+            <!-- <li>
+                <img src="./images/win.png" alt="" class="icon_l">
+                <img src="./images/logo.png" alt="" class="tx_l">
+                <div class="nick_l">虚位以待</div>
+                <div class="id_l">ID:0</div>
+                <img src="./images/win.png" alt="" class="icon_r">
+                <img src="./images/logo.png" alt="" class="tx_r">
+                <div class="nick_r">虚位以待</div>
+                <div class="id_r">ID:0</div>
+            </li> -->
+        </ul>
+    </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/pkRank/js/index.js b/view/molistar/modules/pkRank/js/index.js
new file mode 100644
index 0000000..7605a08
--- /dev/null
+++ b/view/molistar/modules/pkRank/js/index.js
@@ -0,0 +1,226 @@
+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 pageNum = 1;
+var lock = true;
+var pageNumPk = 1;
+var lockPk = true;
+// 初始化函數
+$(function () {
+    getInfoFromClient()
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        translateFun();
+    }, 100)
+})
+
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.title_t').html(langReplace(localLang.demoModule.title_t));
+    $('.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));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+}
+// tab切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    $('.page1,.page2,.page3').hide();
+    $(`.page${i}`).show();
+    if (i == 3) {
+        $('.page3 ul li').remove();
+        pageNumPk = 1;
+        getRecord()
+    } else if (i == 2) {
+        $('.page2 ul li').remove();
+        pageNum = 1;
+        getRank();
+    }
+})
+// 排行榜接口
+function getRank() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/singleCrossRoomPk/getRank',
+        data: { pageNum: pageNum, pageSize: 10 },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                if (pageNum == 1) {
+                    var first = res.data.slice(0, 3);
+                    // 处理前第3名
+                    if (first.length < 3) {
+                        let arr = new Array(3 - first.length).fill({
+                            avatar: './images/logo.png',
+                            nick: langReplace(localLang.demoModule.text10),
+                        })
+                        first.push(...arr)
+                    }
+                    first.forEach((res, i) => {
+                        $(`.page2 .no${i + 1} .tx`).attr('src', res.avatar);
+                        $(`.page2 .no${i + 1} .nick`).text(res.nick);
+                    })
+                }
+                // 非榜首展示处理
+                if (res.data.length == 0 && pageNum == 1) {
+                    lock = false;
+                }
+                else {
+                    res.data.forEach((res, i) => {
+                        str += `
+                            <li class="li${i < 3 ? i + 1 : ''}">
+                                <div class="num">${i + 1}</div>
+                                <img src="${res.avatar}" alt="" class="tx">
+                                <div class="user">
+                                    <p>${res.nick}</p>
+                                    <b>ID:${res.erBanNo}</b>
+                                </div>
+                                <div class="all">${res.totalNum}</div>
+                                <div class="win">${res.winNum}</div>
+                                <div class="winPercent">${(res.winRate * 100).toFixed(0)}%</div>
+                            </li>
+                        `
+                    })
+                    $('.page2 ul').append(str);
+                    lock = true;
+                }
+                $('.page3 ul').append(str);
+            } else {
+                lock = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            lock = true;
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 排行榜滚动监听
+$('.page2 ul').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.page2 ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (lock) {
+            // 請求下一頁
+            pageNum = pageNum + 1;
+            getRank(pageNum)
+            lock = false;
+        }
+    }
+})
+
+// pk场次接口
+function getRecord() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/singleCrossRoomPk/getRecord',
+        data: { pageNum: pageNumPk, pageSize: 10 },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                if (res.data.length == 0 && pageNumPk == 1) {
+                    lockPk = false;
+                } else {
+                    res.data.forEach((res, i) => {
+                        str += `
+                        <li>
+                            <img src="${res.leftPkStatus == 2 ? `./images/win-${getQueryString().lang}.png` : res.leftPkStatus == 3 ? `./images/lose-${getQueryString().lang}.png` : res.leftPkStatus == 4 ? `./images/balance-${getQueryString().lang}.png` : ''}" alt="" class="icon_l">
+                            <img src="${res.leftAvatar}" alt="" class="tx_l">
+                            <div class="nick_l">${res.leftNick}</div>
+                            <div class="id_l">ID:${res.leftErBanNo}</div>
+                            <img src="${res.rightPkStatus == 2 ? `./images/win-${getQueryString().lang}.png` : res.rightPkStatus == 3 ? `./images/lose-${getQueryString().lang}.png` : res.rightPkStatus == 4 ? `./images/balance-${getQueryString().lang}.png` : ''}" alt="" class="icon_r">
+                            <img src="${res.rightAvatar}" alt="" class="tx_r">
+                            <div class="nick_r">${res.rightNick}</div>
+                            <div class="id_r">ID:${res.rightErBanNo}</div>
+                        </li>
+                    `
+                    })
+                    lockPk = true;
+                }
+                $('.page3 ul').append(str);
+            } else {
+                lockPk = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            lockPk = true;
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// pk滚动监听
+$('.page3 ul').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.page3 ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (lockPk) {
+            // 請求下一頁
+            pageNumPk = pageNumPk + 1;
+            getRecord(pageNumPk)
+            lockPk = false;
+        }
+    }
+})
\ No newline at end of file
diff --git a/view/molistar/modules/pkRank/local/ar.js b/view/molistar/modules/pkRank/local/ar.js
new file mode 100644
index 0000000..f3f4c28
--- /dev/null
+++ b/view/molistar/modules/pkRank/local/ar.js
@@ -0,0 +1,47 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جار التحميل...`, // Arabic
+        layerIndex2: `تم العملية`, // Arabic
+        layerIndex3: `خطأ في الشبكة`, // Arabic
+        title_t: `جدول الرتب PK`, // Arabic
+        text1: `معلومات الجدول`, // Arabic
+        text2: `لوحة الرتب`, // Arabic
+        text3: `جلسات PK`, // Arabic
+        text4: `
+        <div class="box1">
+            <div class="title">وقت الحدث</div>
+            <div class="content">يفتح الحدث كل ليلة خميس في <b>10:00</b> وينتهي كل ليلة أحد في <b>10:00</b>.</div>
+        </div>
+        <div class="box2">
+            <div class="title">طريقة التسجيل</div>
+            <div class="content">يبحث المضيف عن معرفات مضيفين آخرين في الغرفة ويبدأ PK للمشاركة في الحدث (محدود للمذيعين الفرديين فقط).</div>
+        </div>
+        <div class="box3">
+            <div class="title">شروط الفوز</div>
+            <div class="content">إذا كان إجمالي دوران كل جانبي PK <b>≧5000</b>، فإن البيانات صالحة. يزيد الجانب الفائز من عدد الانتصارات بـ <b>+1</b>، ويزيد الجانب الخاسر من عدد الانتصارات بـ <b>+0</b>. معدل الفوز = عدد الانتصارات / إجمالي مرات المشاركة.</div>
+        </div>
+        <div class="box4 box4_ar">
+            <div class="title">مكافآت الحدث</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">قواعد الحدث</div>
+            <div class="content">
+                1. إذا كانت هناك مشاركين يقومون بسلوكيات مثل الإساءة للآخرين خلال فترة المسابقة، فسيتم إلغاء أهليتهم للحدث وفقًا لقواعد المنصة؛<br>
+                2. يتلقى المشاركون الذين يحققون عدد انتصارات إجمالي ≥20 ومصنفون ضمن أول خمسة مقدمي برامج مكافآت إضافية. يتم إصدار شارة & سيارة تلقائيًا خلال ساعة واحدة بعد انتهاء الحدث، ويتم إصدار الماسات خلال ثلاثة أيام عمل؛<br>
+                3. في حالة تساوي عدد الانتصارات ومعدل الفوز، يتم الترتيب استنادًا إلى وقت انتهاء اللعبة الأخيرة، مع الترتيب الأعلى في وقت انتهاء لعبة أحدث؛<br>
+                4. لأي استفسار، يرجى الاتصال بخدمة العملاء (البحث عن المعرف: 10001 في التطبيق، WeChat: sd245376)؛<br>
+                5. التفسير النهائي لهذا الحدث ينتمي إلى الرسمي، ولا يتعلق بشركة Apple Inc/Google Inc.
+            </div>
+        </div>`, // Arabic
+        text5: `الرقم التسلسلي`, // Arabic
+        text6: `معلومات المضيف`, // Arabic
+        text7: `إجمالي مرات المشاركة`, // Arabic
+        text8: `مرات الفوز`, // Arabic
+        text9: `معدل الفوز`, // Arabic
+        text10: `شاغر`, // Arabic
+    }
+
+}
\ No newline at end of file
diff --git a/view/molistar/modules/pkRank/local/en.js b/view/molistar/modules/pkRank/local/en.js
new file mode 100644
index 0000000..7cf8fcb
--- /dev/null
+++ b/view/molistar/modules/pkRank/local/en.js
@@ -0,0 +1,47 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: `Loading...`, // English
+        layerIndex2: `Operation completed`, // English
+        layerIndex3: `Network error`, // English
+        title_t: `PK Leaderboard`, // English
+        text1: `Schedule`, // English
+        text2: `Leaderboard`, // English
+        text3: `PK Sessions`, // English
+        text4: `
+    <div class="box1">
+        <div class="title">Event Time</div>
+        <div class="content">The event opens every Thursday night at <b>10:00</b> and ends every Sunday night at <b>10:00</b>.</div>
+    </div>
+    <div class="box2">
+        <div class="title">Registration Method</div>
+        <div class="content">The anchor searches for the ID of other anchors in the room and initiates a PK to participate in the event (limited to individual broadcasters).</div>
+    </div>
+    <div class="box3">
+        <div class="title">Winning Conditions</div>
+        <div class="content">If the total turnover of both sides of the PK is <b>≧5000</b>, the data is valid. The winning side increases the number of victories by <b>+1</b>, and the losing side increases the number of victories by <b>+0</b>. Winning rate = Number of victories / Total participation times.</div>
+    </div>
+    <div class="box4 box4_en">
+        <div class="title">Event Rewards</div>
+        <div class="content"></div>
+    </div>
+    <div class="box5">
+        <div class="title">Event Rules</div>
+        <div class="content">
+            1. If during the competition period, participants who engage in behaviors such as insulting others in the game will have their qualifications for the event revoked in accordance with platform rules;<br>
+            2. Participants with a total victory count ≥20 and ranked in the top five anchors will receive additional rewards. The badge & car rewards will be automatically issued within 1 hour after the event ends, and diamonds will be issued within three working days;<br>
+            3. In case of the same number of victories & winning rate, ranking will be based on the end time of the last game, with the later ending time ranked higher;<br>
+            4. For any questions, please contact customer service (search ID: 10001 in the app, WeChat: sd245376);<br>
+            5. The final interpretation of this event belongs to the official, and it has nothing to do with Apple Inc/Google Inc.
+        </div>
+    </div>`, // English
+        text5: `Serial Number`, // English
+        text6: `Anchor Information`, // English
+        text7: `Total Participation Times`, // English
+        text8: `Victory Times`, // English
+        text9: `Winning Rate`, // English
+        text10: `Vacant`, // English
+    }
+
+}
\ No newline at end of file
diff --git a/view/molistar/modules/pkRank/local/zh.js b/view/molistar/modules/pkRank/local/zh.js
new file mode 100644
index 0000000..bb20e8c
--- /dev/null
+++ b/view/molistar/modules/pkRank/local/zh.js
@@ -0,0 +1,46 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加載中...`,
+        layerIndex2: `操作完成`,
+        layerIndex3: `網路錯誤`,
+        title_t: `PK排行榜`,
+        text1: `賽程信息`,
+        text2: `排行榜`,
+        text3: `PK場次`,
+        text4: `
+        <div class="box1">
+            <div class="title">活動時間</div>
+            <div class="content">活動每周四晚上 <b>10:00</b> 開放，周日晚上 <b>10:00</b> 結束。</div>
+        </div>
+        <div class="box2">
+            <div class="title">報名方式</div>
+            <div class="content">主播在房間內搜索其他主播的ID併發起PK，即代錶參加活動（僅限個播參與）。</div>
+        </div>
+        <div class="box3">
+            <div class="title">獲勝條件</div>
+            <div class="content">PK雙方流水總和 <b>≧5000</b>，則代錶有效數據，勝利方勝利場數<b>+1</b>，失敗方勝利場數<b>+0</b>，獲勝率=勝利場數/總參加場數</div>
+        </div>
+        <div class="box4">
+            <div class="title">活動獎勵</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">活動規則</div>
+            <div class="content">
+                1、若用在比賽期間參加比賽選手出現辱罵他人等違反平臺規則行為者按照平臺規則處罰用戶後，將參與者取消活動資格;<br>
+                2、總勝利場數>=20且排名前五的主播有額外獎勵，銘牌&座駕獎勵在活動結束後1h內自動發放，鉆石在三個工作日之內下發;<br>
+                3、勝利場數&獲勝率相同，按照最後一場結束時間排名，晚結束排名靠前;<br>
+                4、有任何疑問請聯繫客服（app內搜索ID：10001、WeChat:sd245376）;<br>
+                5、本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關。
+            </div>
+        </div>`,
+        text5: `序號`,
+        text6: `主播信息`,
+        text7: `總參加場次`,
+        text8: `勝利場次`,
+        text9: `勝率`,
+        text10: `虛位以待`,
+    }
+}
\ No newline at end of file