diff --git a/view/yinmeng/modules/hourRank/css/index.css b/view/yinmeng/modules/hourRank/css/index.css
new file mode 100644
index 0000000..336d6c5
--- /dev/null
+++ b/view/yinmeng/modules/hourRank/css/index.css
@@ -0,0 +1,550 @@
+html,
+body {
+  width: 100%;
+  background: #0B1836;
+  overflow: hidden;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
+.layui-m-layershade {
+  background-color: transparent !important;
+}
+
+.layui-m-layer2 .layui-m-layerchild {
+  width: 3rem !important;
+  height: 3rem !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: #fff !important;
+  background: rgba(0, 0, 0, 0.6) !important;
+}
+
+.layui-m-layer2 .layui-m-layercont {
+  text-align: center !important;
+  padding: 0 !important;
+  line-height: 0 !important;
+  margin-top: 0.8rem !important;
+}
+
+.back {
+  position: fixed;
+  top: 0.26667rem;
+  left: 0.32rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.largestBox {
+  width: 10rem;
+  min-height: 15.38667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 10rem 15.38667rem;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1.17333rem 0 0 0;
+}
+
+.largestBox .title {
+  width: 7.06667rem;
+  height: 1.14667rem;
+  position: absolute;
+  top: -0.12rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.largestBox .lastHour {
+  width: 9.14667rem;
+  margin: 0rem auto 0.42667rem;
+}
+
+.largestBox .lastHour .text {
+  width: 100%;
+  color: #FFDA24;
+  font-size: 0.37333rem;
+  margin-bottom: 0.24rem;
+  font-weight: 600;
+}
+
+.largestBox .box {
+  width: 9.14667rem;
+  height: 2.34667rem;
+  background: url(../images/lastHour.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+}
+
+.largestBox .box .txbox {
+  width: 2.02667rem;
+  height: 2.45333rem;
+  background: url(../images/hourTs.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin-right: 0.24rem;
+  float: left;
+}
+
+.largestBox .box .txbox .hourTs {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.largestBox .box .txbox .tx {
+  width: 1.44rem;
+  height: 1.44rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.4rem;
+}
+
+.largestBox .box .userInfo {
+  float: left;
+  width: 3.73333rem;
+  position: relative;
+  height: 100%;
+}
+
+.largestBox .box .userInfo p {
+  width: 100%;
+  margin-top: 0.37333rem;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.largestBox .box .userInfo .mvp {
+  width: 0.74667rem;
+  height: 0.74667rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #FFDA24;
+  position: absolute;
+  top: 1.06667rem;
+}
+
+.largestBox .box .userInfo .mvp .mvpTx {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+}
+
+.largestBox .box .userInfo .mvp span {
+  width: 0.90667rem;
+  height: 0.29333rem;
+  line-height: 0.29333rem;
+  border-radius: 0.29333rem;
+  position: absolute;
+  top: 0.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.18667rem;
+  background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
+  padding: 0 0.02667rem;
+}
+
+.largestBox .box .userInfo .member {
+  width: 2.29333rem;
+  height: 0.69333rem;
+  border-radius: 0.69333rem;
+  position: absolute;
+  left: 1.2rem;
+  top: 1.17333rem;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.largestBox .box .userInfo .member img {
+  position: absolute;
+  width: 0.48rem;
+  height: 0.48rem;
+  border: 0.02667rem solid #FFDA24;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.largestBox .box .userInfo .member .memberTx1 {
+  left: 0.16rem;
+}
+
+.largestBox .box .userInfo .member .memberTx2 {
+  left: 0.53333rem;
+  z-index: 2;
+}
+
+.largestBox .box .userInfo .member .memberTx3 {
+  left: 0.90667rem;
+  z-index: 3;
+}
+
+.largestBox .box .userInfo .member .memberTx4 {
+  left: 1.28rem;
+  z-index: 4;
+}
+
+.largestBox .box .userInfo .member .memberTx5 {
+  left: 1.65333rem;
+  z-index: 5;
+}
+
+.largestBox .box .score {
+  float: right;
+  height: 100%;
+  line-height: 2.34667rem;
+}
+
+.largestBox .box .score img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  vertical-align: middle;
+}
+
+.largestBox .box .score span {
+  color: #FFDA24;
+  font-weight: 600;
+  font-size: 0.42667rem;
+  vertical-align: middle;
+}
+
+.largestBox .hourList {
+  width: 100%;
+}
+
+.largestBox .hourList .top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+  margin-bottom: 0.26667rem;
+}
+
+.largestBox .hourList .top .sp {
+  color: #FFDA24;
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
+.largestBox .hourList .top span {
+  color: #B1B5BD;
+  font-size: 0.32rem;
+  font-weight: 600;
+}
+
+.largestBox .hourList .top span b {
+  color: #FFDA24;
+}
+
+.largestBox .hourList ul {
+  width: 100%;
+  height: 7rem;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  padding-bottom: 0.66667rem;
+}
+
+.largestBox .hourList ul::-webkit-scrollbar {
+  display: none;
+}
+
+.largestBox .hourList ul li {
+  width: 100%;
+  height: 2.13333rem;
+  backdrop-filter: blur(0px);
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+  background: RGBA(11, 24, 57, 1);
+}
+
+.largestBox .hourList ul li .num {
+  width: 0.64rem;
+  height: 0.64rem;
+  text-align: center;
+  color: #E6ECF5;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  float: left;
+  margin-top: 0.74667rem;
+  margin-right: 0.42667rem;
+  float: left;
+}
+
+.largestBox .hourList ul li .num1 {
+  background: url(../images/no1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.largestBox .hourList ul li .num2 {
+  background: url(../images/no2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.largestBox .hourList ul li .num3 {
+  background: url(../images/no3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.largestBox .hourList ul li .tx {
+  width: 1.28rem;
+  height: 1.28rem;
+  border-radius: 50%;
+  margin-top: 0.42667rem;
+  margin-right: 0.32rem;
+  display: block;
+  float: left;
+}
+
+.largestBox .hourList ul li .userInfo {
+  float: left;
+  width: 3.73333rem;
+  position: relative;
+  height: 100%;
+}
+
+.largestBox .hourList ul li .userInfo p {
+  width: 100%;
+  margin-top: 0.26667rem;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.largestBox .hourList ul li .userInfo .mvp {
+  width: 0.74667rem;
+  height: 0.74667rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #FFDA24;
+  position: absolute;
+  top: 0.96rem;
+}
+
+.largestBox .hourList ul li .userInfo .mvp .mvpTx {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+}
+
+.largestBox .hourList ul li .userInfo .mvp span {
+  width: 0.90667rem;
+  height: 0.29333rem;
+  line-height: 0.29333rem;
+  border-radius: 0.29333rem;
+  position: absolute;
+  top: 0.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.18667rem;
+  background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
+  padding: 0 0.02667rem;
+}
+
+.largestBox .hourList ul li .userInfo .member {
+  width: 2.29333rem;
+  height: 0.69333rem;
+  border-radius: 0.69333rem;
+  position: absolute;
+  left: 1.2rem;
+  top: 1.06667rem;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.largestBox .hourList ul li .userInfo .member img {
+  position: absolute;
+  width: 0.48rem;
+  height: 0.48rem;
+  border: 0.02667rem solid #FFDA24;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.largestBox .hourList ul li .userInfo .member .memberTx1 {
+  left: 0.16rem;
+}
+
+.largestBox .hourList ul li .userInfo .member .memberTx2 {
+  left: 0.53333rem;
+  z-index: 2;
+}
+
+.largestBox .hourList ul li .userInfo .member .memberTx3 {
+  left: 0.90667rem;
+  z-index: 3;
+}
+
+.largestBox .hourList ul li .userInfo .member .memberTx4 {
+  left: 1.28rem;
+  z-index: 4;
+}
+
+.largestBox .hourList ul li .userInfo .member .memberTx5 {
+  left: 1.65333rem;
+  z-index: 5;
+}
+
+.largestBox .hourList ul li .score {
+  float: right;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  margin-top: 0.58667rem;
+  text-align: right;
+}
+
+.largestBox .hourList ul li .score p {
+  margin-bottom: 0.13333rem;
+}
+
+.largestBox .hourList ul li .score span {
+  color: #B1B5BD;
+  font-size: 0.29333rem;
+  font-weight: 400;
+  display: block;
+}
+
+.largestBox .hourList ul li .first {
+  position: absolute;
+  width: 0.85333rem;
+  height: 0.37333rem;
+  right: 0.53333rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.largestBox .hourList ul .li1 {
+  background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
+}
+
+.largestBox .hourList ul .li2 {
+  background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
+}
+
+.largestBox .hourList ul .li3 {
+  background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
+}
+
+.my {
+  width: 100%;
+  height: 2.05333rem;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background: url(../images/my.png) no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 2.13333rem;
+  box-sizing: border-box;
+  padding: 0 0.53333rem;
+}
+
+.my .num {
+  height: 0.64rem;
+  text-align: center;
+  color: #E6ECF5;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  float: left;
+  margin-top: 0.74667rem;
+  margin-right: 0.42667rem;
+  float: left;
+}
+
+.my .tx {
+  width: 1.28rem;
+  height: 1.28rem;
+  border-radius: 50%;
+  margin-top: 0.42667rem;
+  margin-right: 0.32rem;
+  display: block;
+  float: left;
+}
+
+.my .score {
+  float: left;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  margin-top: 0.58667rem;
+  width: 3.73333rem;
+}
+
+.my .score p {
+  width: 100%;
+  margin-bottom: 0.13333rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.my .score span {
+  color: #B1B5BD;
+  font-size: 0.29333rem;
+  font-weight: 400;
+  display: block;
+}
+
+.my .score span b {
+  color: #E6ECF5;
+}
+
+.my .but {
+  width: 1.76rem;
+  height: 0.74667rem;
+  line-height: 0.74667rem;
+  margin-top: 0.56rem;
+  text-align: center;
+  color: #FFDA24;
+  font-size: 0.32rem;
+  font-weight: 500;
+  background: url(../images/myBut.png) no-repeat;
+  background-size: 100% 100%;
+  float: right;
+}
diff --git a/view/yinmeng/modules/hourRank/css/index.scss b/view/yinmeng/modules/hourRank/css/index.scss
new file mode 100644
index 0000000..4edd0f8
--- /dev/null
+++ b/view/yinmeng/modules/hourRank/css/index.scss
@@ -0,0 +1,560 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // background: linear-gradient(0deg, #0F2E69 0%, #0B1836 99%);
+    background: #0B1836;
+    overflow: hidden;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .0) !important;
+}
+
+.layui-m-layer2 .layui-m-layerchild {
+    width: 3rem !important;
+    height: 3rem !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #fff !important;
+    background: rgba(0, 0, 0, .6) !important;
+}
+
+.layui-m-layer2 .layui-m-layercont {
+    text-align: center !important;
+    padding: 0 !important;
+    line-height: 0 !important;
+    margin-top: 0.8rem !important;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(20);
+    left: px2rem(24);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.largestBox {
+    width: px2rem(750);
+    min-height: px2rem(1154);
+    background: url(../images/bg.png) no-repeat;
+    background-size: px2rem(750) px2rem(1154);
+    margin: 0 auto;
+    position: relative;
+    box-sizing: border-box;
+    padding: px2rem(88) 0 0 0;
+
+    .title {
+        width: px2rem(530);
+        height: px2rem(86);
+        position: absolute;
+        top: px2rem(-9);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .lastHour {
+        width: px2rem(686);
+        margin: px2rem(0) auto px2rem(32);
+
+        .text {
+            width: 100%;
+            color: #FFDA24;
+            font-size: px2rem(28);
+            margin-bottom: px2rem(18);
+            font-weight: 600;
+        }
+    }
+
+    .box {
+        width: px2rem(686);
+        height: px2rem(176);
+        background: url(../images/lastHour.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+
+        .txbox {
+            width: px2rem(152);
+            height: px2rem(184);
+            background: url(../images/hourTs.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            margin-right: px2rem(18);
+            float: left;
+
+            .hourTs {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(108);
+                height: px2rem(108);
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(30);
+            }
+        }
+
+        .userInfo {
+            float: left;
+            width: px2rem(280);
+            position: relative;
+            height: 100%;
+
+            p {
+                width: 100%;
+                margin-top: px2rem(28);
+                color: #E6ECF5;
+                font-size: px2rem(28);
+                font-weight: 500;
+                // 超出省略号
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .mvp {
+                width: px2rem(56);
+                height: px2rem(56);
+                border-radius: 50%;
+                border: px2rem(2) solid #FFDA24;
+                position: absolute;
+                top: px2rem(80);
+
+                .mvpTx {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    border-radius: 50%;
+                }
+
+                span {
+                    width: px2rem(68);
+                    height: px2rem(22);
+                    line-height: px2rem(22);
+                    border-radius: px2rem(22);
+                    position: absolute;
+                    top: px2rem(46);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(14);
+                    background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
+                    padding: 0 px2rem(2);
+                }
+            }
+
+            .member {
+                width: px2rem(172);
+                height: px2rem(52);
+                border-radius: px2rem(52);
+                position: absolute;
+                left: px2rem(90);
+                top: px2rem(88);
+                background: rgba(255, 255, 255, 0.4);
+
+                img {
+                    position: absolute;
+                    width: px2rem(36);
+                    height: px2rem(36);
+                    border: px2rem(2) solid #FFDA24;
+                    border-radius: 50%;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                .memberTx1 {
+                    left: px2rem(12);
+                }
+
+                .memberTx2 {
+                    left: px2rem(40);
+                    z-index: 2;
+                }
+
+                .memberTx3 {
+                    left: px2rem(68);
+                    z-index: 3;
+                }
+
+                .memberTx4 {
+                    left: px2rem(96);
+                    z-index: 4;
+                }
+
+                .memberTx5 {
+                    left: px2rem(124);
+                    z-index: 5;
+                }
+            }
+
+
+        }
+
+        .score {
+            float: right;
+            height: 100%;
+            line-height: px2rem(176);
+
+            img {
+                display: inline-block;
+                width: px2rem(28);
+                height: px2rem(28);
+                vertical-align: middle;
+            }
+
+            span {
+                color: #FFDA24;
+                font-weight: 600;
+                font-size: px2rem(32);
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .hourList {
+        width: 100%;
+
+        .top {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            box-sizing: border-box;
+            padding: 0 px2rem(40);
+            margin-bottom: px2rem(20);
+
+            .sp {
+                color: #FFDA24;
+                font-size: px2rem(28);
+                font-weight: 600;
+            }
+
+            span {
+                color: #B1B5BD;
+                font-size: px2rem(24);
+                font-weight: 600;
+
+                b {
+                    color: #FFDA24;
+                }
+            }
+        }
+
+        ul {
+            width: 100%;
+            height: 7rem;
+            overflow-y: scroll;
+            box-sizing: border-box;
+            padding-bottom: px2rem(50);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            li {
+                width: 100%;
+                height: px2rem(160);
+                backdrop-filter: blur(0px);
+                box-sizing: border-box;
+                padding: 0 px2rem(40);
+                background: RGBA(11, 24, 57, 1);
+
+                .num {
+                    width: px2rem(48);
+                    height: px2rem(48);
+                    text-align: center;
+                    color: #E6ECF5;
+                    font-size: px2rem(32);
+                    font-weight: 500;
+                    float: left;
+                    margin-top: px2rem(56);
+                    margin-right: px2rem(32);
+                    float: left;
+                }
+
+                .num1 {
+                    background: url(../images/no1.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .num2 {
+                    background: url(../images/no2.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .num3 {
+                    background: url(../images/no3.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .tx {
+                    width: px2rem(96);
+                    height: px2rem(96);
+                    border-radius: 50%;
+                    margin-top: px2rem(32);
+                    margin-right: px2rem(24);
+                    display: block;
+                    float: left;
+                }
+
+                .userInfo {
+                    float: left;
+                    width: px2rem(280);
+                    position: relative;
+                    height: 100%;
+
+                    p {
+                        width: 100%;
+                        margin-top: px2rem(20);
+                        color: #E6ECF5;
+                        font-size: px2rem(28);
+                        font-weight: 500;
+                        // 超出省略号
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+
+                    .mvp {
+                        width: px2rem(56);
+                        height: px2rem(56);
+                        border-radius: 50%;
+                        border: px2rem(2) solid #FFDA24;
+                        position: absolute;
+                        top: px2rem(72);
+
+                        .mvpTx {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            left: 0;
+                            top: 0;
+                            border-radius: 50%;
+                        }
+
+                        span {
+                            width: px2rem(68);
+                            height: px2rem(22);
+                            line-height: px2rem(22);
+                            border-radius: px2rem(22);
+                            position: absolute;
+                            top: px2rem(46);
+                            left: 50%;
+                            transform: translateX(-50%);
+                            text-align: center;
+                            color: #FFFFFF;
+                            font-size: px2rem(14);
+                            background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
+                            padding: 0 px2rem(2);
+                        }
+                    }
+
+                    .member {
+                        width: px2rem(172);
+                        height: px2rem(52);
+                        border-radius: px2rem(52);
+                        position: absolute;
+                        left: px2rem(90);
+                        top: px2rem(80);
+                        background: rgba(255, 255, 255, 0.4);
+
+                        img {
+                            position: absolute;
+                            width: px2rem(36);
+                            height: px2rem(36);
+                            border: px2rem(2) solid #FFDA24;
+                            border-radius: 50%;
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                        }
+
+                        .memberTx1 {
+                            left: px2rem(12);
+                        }
+
+                        .memberTx2 {
+                            left: px2rem(40);
+                            z-index: 2;
+                        }
+
+                        .memberTx3 {
+                            left: px2rem(68);
+                            z-index: 3;
+                        }
+
+                        .memberTx4 {
+                            left: px2rem(96);
+                            z-index: 4;
+                        }
+
+                        .memberTx5 {
+                            left: px2rem(124);
+                            z-index: 5;
+                        }
+                    }
+                }
+
+                .score {
+                    float: right;
+                    color: #E6ECF5;
+                    font-size: px2rem(28);
+                    font-weight: 600;
+                    margin-top: px2rem(44);
+                    text-align: right;
+
+                    p {
+                        margin-bottom: px2rem(10);
+                    }
+
+                    span {
+                        color: #B1B5BD;
+                        font-size: px2rem(22);
+                        font-weight: 400;
+                        display: block;
+                    }
+                }
+
+                .first {
+                    position: absolute;
+                    width: px2rem(64);
+                    height: px2rem(28);
+                    right: px2rem(40);
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+
+            .li1 {
+                background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
+            }
+
+            .li2 {
+                background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
+            }
+
+            .li3 {
+                background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
+            }
+        }
+    }
+}
+
+.my {
+    width: 100%;
+    height: px2rem(154);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: url(../images/my.png) no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: px2rem(160);
+    box-sizing: border-box;
+    padding: 0 px2rem(40);
+
+    .num {
+        // width: px2rem(48);
+        height: px2rem(48);
+        text-align: center;
+        color: #E6ECF5;
+        font-size: px2rem(32);
+        font-weight: 500;
+        float: left;
+        margin-top: px2rem(56);
+        margin-right: px2rem(32);
+        float: left;
+    }
+
+    .tx {
+        width: px2rem(96);
+        height: px2rem(96);
+        border-radius: 50%;
+        margin-top: px2rem(32);
+        margin-right: px2rem(24);
+        display: block;
+        float: left;
+    }
+
+    .score {
+        float: left;
+        color: #E6ECF5;
+        font-size: px2rem(28);
+        font-weight: 600;
+        margin-top: px2rem(44);
+        width: px2rem(280);
+
+        p {
+            width: 100%;
+            margin-bottom: px2rem(10);
+            // 超出省略号
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        span {
+            color: #B1B5BD;
+            font-size: px2rem(22);
+            font-weight: 400;
+            display: block;
+
+            b {
+                color: #E6ECF5;
+            }
+        }
+    }
+
+    .but {
+        width: px2rem(132);
+        height: px2rem(56);
+        line-height: px2rem(56);
+        margin-top: px2rem(42);
+        text-align: center;
+        color: #FFDA24;
+        font-size: px2rem(24);
+        font-weight: 500;
+        background: url(../images/myBut.png) no-repeat;
+        background-size: 100% 100%;
+        float: right;
+    }
+}
\ No newline at end of file
diff --git a/view/yinmeng/modules/hourRank/images/bg.png b/view/yinmeng/modules/hourRank/images/bg.png
new file mode 100644
index 0000000..f8afc86
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/bg.png differ
diff --git a/view/yinmeng/modules/hourRank/images/first.png b/view/yinmeng/modules/hourRank/images/first.png
new file mode 100644
index 0000000..efd43cb
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/first.png differ
diff --git a/view/yinmeng/modules/hourRank/images/hot.png b/view/yinmeng/modules/hourRank/images/hot.png
new file mode 100644
index 0000000..3b08c52
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/hot.png differ
diff --git a/view/yinmeng/modules/hourRank/images/hourTs.png b/view/yinmeng/modules/hourRank/images/hourTs.png
new file mode 100644
index 0000000..2a0a426
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/hourTs.png differ
diff --git a/view/yinmeng/modules/hourRank/images/lastHour.png b/view/yinmeng/modules/hourRank/images/lastHour.png
new file mode 100644
index 0000000..68f9e9b
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/lastHour.png differ
diff --git a/view/yinmeng/modules/hourRank/images/logo.png b/view/yinmeng/modules/hourRank/images/logo.png
new file mode 100644
index 0000000..4c661e5
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/logo.png differ
diff --git a/view/yinmeng/modules/hourRank/images/my.png b/view/yinmeng/modules/hourRank/images/my.png
new file mode 100644
index 0000000..f6631ef
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/my.png differ
diff --git a/view/yinmeng/modules/hourRank/images/myBut.png b/view/yinmeng/modules/hourRank/images/myBut.png
new file mode 100644
index 0000000..5afd716
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/myBut.png differ
diff --git a/view/yinmeng/modules/hourRank/images/no1.png b/view/yinmeng/modules/hourRank/images/no1.png
new file mode 100644
index 0000000..72c6b2b
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/no1.png differ
diff --git a/view/yinmeng/modules/hourRank/images/no2.png b/view/yinmeng/modules/hourRank/images/no2.png
new file mode 100644
index 0000000..d2925cc
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/no2.png differ
diff --git a/view/yinmeng/modules/hourRank/images/no3.png b/view/yinmeng/modules/hourRank/images/no3.png
new file mode 100644
index 0000000..f1c8501
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/no3.png differ
diff --git a/view/yinmeng/modules/hourRank/images/title.png b/view/yinmeng/modules/hourRank/images/title.png
new file mode 100644
index 0000000..6966222
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/title.png differ
diff --git a/view/yinmeng/modules/hourRank/images/travel/back.png b/view/yinmeng/modules/hourRank/images/travel/back.png
new file mode 100644
index 0000000..7b81adb
Binary files /dev/null and b/view/yinmeng/modules/hourRank/images/travel/back.png differ
diff --git a/view/yinmeng/modules/hourRank/index.html b/view/yinmeng/modules/hourRank/index.html
new file mode 100644
index 0000000..ea46343
--- /dev/null
+++ b/view/yinmeng/modules/hourRank/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>小时榜</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 顶部返回 -->
+    <!-- <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div> -->
+    <!-- 最外层容器 -->
+    <div class="largestBox">
+        <!-- 标题 -->
+        <img src="./images/title.png" alt="" class="title">
+        <!-- 上期小时榜 -->
+        <div class="lastHour">
+            <div class="text">上小时 top1</div>
+            <div class="box">
+                <div class="txbox">
+                    <img src="./images/hourTs.png" alt="" class="hourTs">
+                    <img src="./images/logo.png" alt="" class="tx">
+                </div>
+                <div class="userInfo">
+                    <p></p>
+                    <div class="mvp">
+                        <img src="./images/logo.png" alt="" class="mvpTx">
+                        <span>最佳助力</span>
+                    </div>
+                    <div class="member">
+                        <img src="./images/logo.png" alt="" class="memberTx memberTx1">
+                        <img src="./images/logo.png" alt="" class="memberTx memberTx2">
+                        <img src="./images/logo.png" alt="" class="memberTx memberTx3">
+                        <img src="./images/logo.png" alt="" class="memberTx memberTx4">
+                        <img src="./images/logo.png" alt="" class="memberTx memberTx5">
+                    </div>
+                </div>
+
+                <div class="score">
+                    <img src="./images/hot.png" alt="" class="hot">
+                    <span></span>
+                </div>
+            </div>
+        </div>
+        <!-- 小时榜 -->
+        <div class="hourList">
+            <div class="top">
+                <span class="sp">
+                    <!-- 20点 小时榜 -->
+                </span>
+                <span class="sp2">
+                    <!-- 剩余<b>10</b>分<b>10</b>秒 -->
+                </span>
+            </div>
+            <ul>
+                <!-- <li class="li1">
+                    <div class="num num1"></div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="userInfo">
+                        <p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
+                        <div class="mvp">
+                            <img src="./images/logo.png" alt="" class="mvpTx">
+                            <span>最佳助力</span>
+                        </div>
+                        <div class="member">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx1">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx2">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx3">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx4">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx5">
+                        </div>
+                    </div>
+                    <div class="score">
+                        <p>1000</p>
+                        <span>距上一名</span>
+                    </div>
+                    <img src="./images/first.png" alt="" class="first">
+                </li>
+                <li class="li2">
+                    <div class="num num2"></div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="userInfo">
+                        <p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
+                        <div class="mvp">
+                            <img src="./images/logo.png" alt="" class="mvpTx">
+                            <span>最佳助力</span>
+                        </div>
+                        <div class="member">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx1">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx2">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx3">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx4">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx5">
+                        </div>
+                    </div>
+                    <div class="score">
+                        <p>1000</p>
+                        <span>距上一名</span>
+                    </div>
+                </li>
+                <li class="li3">
+                    <div class="num num3"></div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="userInfo">
+                        <p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
+                        <div class="mvp">
+                            <img src="./images/logo.png" alt="" class="mvpTx">
+                            <span>最佳助力</span>
+                        </div>
+                        <div class="member">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx1">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx2">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx3">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx4">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx5">
+                        </div>
+                    </div>
+                    <div class="score">
+                        <p>1000</p>
+                        <span>距上一名</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="num">4</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="userInfo">
+                        <p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
+                        <div class="mvp">
+                            <img src="./images/logo.png" alt="" class="mvpTx">
+                            <span>最佳助力</span>
+                        </div>
+                        <div class="member">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx1">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx2">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx3">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx4">
+                            <img src="./images/logo.png" alt="" class="memberTx memberTx5">
+                        </div>
+                    </div>
+                    <div class="score">
+                        <p>1000</p>
+                        <span>距上一名</span>
+                    </div>
+                </li> -->
+            </ul>
+        </div>
+    </div>
+    <!-- 自己榜单 -->
+    <div class="my">
+        <div class="num">未上榜</div>
+        <img src="./images/logo.png" alt="" class="tx">
+        <div class="score">
+            <p></p>
+            <span>距上一名还差 <b>0</b></span>
+        </div>
+        <div class="but">打榜助力</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="../../common/js/svga.js"></script>
+<script src="./js/index.js"></script>
\ No newline at end of file
diff --git a/view/yinmeng/modules/hourRank/js/index.js b/view/yinmeng/modules/hourRank/js/index.js
new file mode 100644
index 0000000..6e5cd0a
--- /dev/null
+++ b/view/yinmeng/modules/hourRank/js/index.js
@@ -0,0 +1,188 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+var urlData = getQueryString();
+if (env == 'test') {
+    new VConsole();
+}
+// 封装layer消息提醒框
+let layerIndex
+const showLoading = (content = '加载中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var timeOut2;
+var leftTime;
+// 初始化函数
+$(function () {
+    getInfoFromClient()
+    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)
+            }
+        })
+        getHourRank();
+    }, 100)
+})
+// 小时榜接口
+function getHourRank () {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/room/permitRoom/hourRank',
+        data: { roomUid: urlData.roomUid },
+        success (res) {
+            if (res.code === 200) {
+                // ==================================设置倒计时===========================
+                nowTime = res.timestamp;
+                $('.largestBox .hourList .top .sp').text(`${dateFormat(nowTime, 'hh')}点 小时榜`)
+                // 获取当前时间
+                now = new Date(nowTime);
+                // 计算距离下一个小时的分钟数
+                var minutesToNextHour = (59 - now.getMinutes()) % 60;
+                // 计算距离下一个小时的秒数
+                var secondsToNextHour = 59 - now.getSeconds();
+                // 计算距离下一个小时的总时间（以毫秒为单位）
+                var timeToNextHour = (minutesToNextHour * 60 * 1000) + (secondsToNextHour * 1000);
+                leftTime = timeToNextHour;
+                countup();
+                // =================================上期前三===========================
+                lastHourRank = res.data.lastHourRank[0];
+                if (lastHourRank) {
+                    $('.largestBox .box .txbox .tx').attr("src", lastHourRank.avatar);
+                    $('.largestBox .box .userInfo p').text(lastHourRank.nick);
+                    $('.largestBox .box .userInfo .mvp .mvpTx').attr("src", lastHourRank.assist.avatar);
+                    lastHourRank.micUsers.forEach((res, i) => {
+                        $(`.largestBox .hourList ul li .userInfo .member .memberTx${i + 1}`).attr("src", res.avatar);
+                    });
+                    $('.largestBox .box .score span').text(res.score);
+                } else {
+                    $('.largestBox .box .txbox .tx').attr("src", './images/logo.png');
+                    $('.largestBox .box .userInfo p').text('虚位以待');
+                    $('.largestBox .box .userInfo .mvp .mvpTx').attr("src", './images/logo.png');
+                    $('.largestBox .box .score span').text(0);
+                }
+                //================================= 当前小时榜===========================
+                $('.largestBox .hourList ul li').remove();
+                var str = '';
+                res.data.currHourRank.forEach((res, i) => {
+                    str += `
+                    <li class="li${i + 1}">
+                        <div class="num num${i + 1}">${i > 2 ? i : ''}</div>
+                        <img src="${res.avatar}" alt="" class="tx">
+                        <div class="userInfo">
+                            <p>${res.nick}</p>
+                            <div class="mvp">
+                                <img src="${res.assist.avatar}" alt="" class="mvpTx">
+                                <span>最佳助力</span>
+                            </div>
+                            <div class="member">
+                                <img src="${res.micUsers[0].avatar}" alt="" class="memberTx memberTx1">
+                                <img src="${res.micUsers[1].avatar}" alt="" class="memberTx memberTx2">
+                                <img src="${res.micUsers[2].avatar}" alt="" class="memberTx memberTx3">
+                                <img src="${res.micUsers[3].avatar}" alt="" class="memberTx memberTx4">
+                                <img src="${res.micUsers[4].avatar}" alt="" class="memberTx memberTx5">
+                            </div>
+                        </div>
+                        <div class="score">
+                            <p>${i == 0 ? res.score : res.data.currHourRank[i - 1].score - res.score}</p>
+                            <span>距上一名</span>
+                        </div>
+                        <img style="display:${i == 0 ? 'block' : 'none'}" src="./images/first.png" alt="" class="first">
+                    </li>
+                    `
+                })
+                $('.largestBox .hourList ul').append(str);
+                // ====================================处理自己===========================
+                $('.my .tx').attr('src', res.data.currRoomInfo.avatar);
+                $('.my .tx').attr('uid', res.data.currRoomInfo.uid);
+                $('.my .score p').text(res.data.currRoomInfo.nick);
+                var uid = res.data.currRoomInfo.uid;
+                if (res.data.currHourRank.find(obj => obj.uid == res.data.currRoomInfo.uid)) {
+                    res.data.currHourRank.forEach((val, i) => {
+                        if (uid == val.uid) {
+                            $('.my .score span').show();
+                            $('.my .score span b').text(i == 0 ? 0 : res.data.currHourRank[i - 1].score - val.score);
+                            $(`.my .num`).text(i + 1);
+                            $(`.my .score p`).css('margin-top', '0rem')
+                        }
+                    })
+                } else {
+                    $('.my .score span').hide();
+                    $(`.my .num`).text('未上榜');
+                    $(`.my .score p`).css('margin-top', '0.3rem')
+                }
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('网络错误，请退出重进')
+        }
+    })
+}
+// 倒计时
+function countup () {
+    clearTimeout(timeOut2)
+    //获取当前时间
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定义变量 d,h,m,s保存倒计时的时间
+    var d, h, m, s;
+    //递归每秒调⽤countTime⽅法，显⽰动态时间效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //将倒计时赋值到div中
+        // console.log("最终: " + dateFormat(leftTime, '00:mm:ss'));
+        $('.largestBox .hourList .top .sp2').html(`<span>剩余<b>${dateFormat(leftTime, 'mm')}</b>分<b>${dateFormat(leftTime, 'ss')}</b>秒</span>`)
+    } else {
+        getHourRank();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    timeOut2 = setTimeout(countup, 1000);
+}
+//补0操作  
+function getzf (num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
\ No newline at end of file
diff --git a/view/yinmeng/modules/roomRank/css/index.css b/view/yinmeng/modules/roomRank/css/index.css
new file mode 100644
index 0000000..aaed3fe
--- /dev/null
+++ b/view/yinmeng/modules/roomRank/css/index.css
@@ -0,0 +1,544 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #020B27 0%, #1D181B 99%);
+  backdrop-filter: blur(0px);
+  overflow: hidden;
+}
+
+.back {
+  position: fixed;
+  top: 0.26667rem;
+  left: 0.32rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.largestBox {
+  width: 10rem;
+  min-height: 15.38667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 10rem 15.38667rem;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1.2rem 0 0 0;
+}
+
+.largestBox .title {
+  width: 7.06667rem;
+  height: 1.14667rem;
+  position: absolute;
+  top: -0.14667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.largestBox .tab {
+  width: 3.65333rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0;
+}
+
+.largestBox .tab div {
+  position: relative;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
+.largestBox .tab div span {
+  background: none;
+  width: 0.32rem;
+  height: 0.08rem;
+  border-radius: 0.08rem;
+  position: absolute;
+  bottom: -0.10667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.largestBox .tab .tabColor1 {
+  color: #fff;
+  font-size: 0.37333rem;
+}
+
+.largestBox .tab .tabColor1 span {
+  background: #FA7814;
+}
+
+.largestBox .tab .tabColor2 {
+  color: #fff;
+}
+
+.largestBox .tab .tabColor2 span {
+  background: #A34DFF;
+}
+
+.largestBox .dayTab {
+  width: 5.33333rem;
+  height: 0.61333rem;
+  margin: 0.34667rem auto 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.largestBox .dayTab div {
+  width: 1.33333rem;
+  height: 0.61333rem;
+  line-height: 0.61333rem;
+  border-radius: 0.61333rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(210, 172, 252, 0.4);
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+.largestBox .dayTab .dayTabColor1 {
+  background: #fff;
+  color: #FA7814;
+}
+
+.largestBox .dayTab .dayTabColor2 {
+  background: #fff;
+  color: #A34DFF;
+}
+
+.largestBox .top3 {
+  width: 8.8rem;
+  height: 0.01333rem;
+  margin: 3.04rem auto 0;
+  position: relative;
+}
+
+.largestBox .top3 .no1 {
+  width: 3.17333rem;
+  height: 2.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -2.88rem;
+}
+
+.largestBox .top3 .no1 .box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.largestBox .top3 .no1 .box .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.largestBox .top3 .no1 .box .tx {
+  width: 2.08rem;
+  height: 2.08rem;
+  position: absolute;
+  left: 50%;
+  top: 0.58667rem;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.largestBox .top3 .no1 .box p {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -0.56rem;
+  text-align: center;
+}
+
+.largestBox .top3 .no1 .box p span {
+  vertical-align: middle;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+}
+
+.largestBox .top3 .no1 .box p .sp {
+  width: 0.37333rem;
+  height: 0.37333rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.largestBox .top3 .no1 .box p .sp img {
+  display: inline-block;
+  width: 0.21333rem;
+  height: 0.21333rem;
+  border-radius: 50%;
+  margin: 0.06667rem auto 0;
+}
+
+.largestBox .top3 .no1 .box p .boy {
+  background: #6BB3FF;
+}
+
+.largestBox .top3 .no1 .box p .woman {
+  background: #FF80CC;
+}
+
+.largestBox .top3 .no1 .box .icon {
+  width: 100%;
+  height: 0.48rem;
+  position: absolute;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  bottom: -1.12rem;
+  padding: 0 0.6rem;
+}
+
+.largestBox .top3 .no1 .box .icon img {
+  display: block;
+  width: 0.96rem;
+  height: 0.48rem;
+}
+
+.largestBox .top3 .no1 .box .score {
+  width: 100%;
+  text-align: center;
+  color: #FFDA24;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  bottom: -1.53333rem;
+}
+
+.largestBox .top3 .no2 {
+  width: 2.66667rem;
+  height: 2.37333rem;
+  position: absolute;
+  left: 0;
+  top: -2.4rem;
+}
+
+.largestBox .top3 .no2 .box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.largestBox .top3 .no2 .box .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.largestBox .top3 .no2 .box .tx {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  top: 0.45333rem;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.largestBox .top3 .no2 .box p {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -0.56rem;
+  text-align: center;
+}
+
+.largestBox .top3 .no2 .box p span {
+  vertical-align: middle;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+}
+
+.largestBox .top3 .no2 .box p .sp {
+  width: 0.37333rem;
+  height: 0.37333rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.largestBox .top3 .no2 .box p .sp img {
+  display: inline-block;
+  width: 0.21333rem;
+  height: 0.21333rem;
+  border-radius: 50%;
+  margin: 0.06667rem auto 0;
+}
+
+.largestBox .top3 .no2 .box p .boy {
+  background: #6BB3FF;
+}
+
+.largestBox .top3 .no2 .box p .woman {
+  background: #FF80CC;
+}
+
+.largestBox .top3 .no2 .box .icon {
+  width: 100%;
+  height: 0.48rem;
+  position: absolute;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  bottom: -1.12rem;
+  padding: 0 0.33333rem;
+}
+
+.largestBox .top3 .no2 .box .icon img {
+  display: block;
+  width: 0.96rem;
+  height: 0.48rem;
+}
+
+.largestBox .top3 .no2 .box .score {
+  width: 100%;
+  text-align: center;
+  color: #FFDA24;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  bottom: -1.53333rem;
+}
+
+.largestBox .top3 .no3 {
+  width: 2.66667rem;
+  height: 2.37333rem;
+  position: absolute;
+  right: 0;
+  top: -2.4rem;
+}
+
+.largestBox .top3 .no3 .box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.largestBox .top3 .no3 .box .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.largestBox .top3 .no3 .box .tx {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  top: 0.45333rem;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.largestBox .top3 .no3 .box p {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -0.56rem;
+  text-align: center;
+}
+
+.largestBox .top3 .no3 .box p span {
+  vertical-align: middle;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+}
+
+.largestBox .top3 .no3 .box p .sp {
+  width: 0.37333rem;
+  height: 0.37333rem;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.largestBox .top3 .no3 .box p .sp img {
+  display: inline-block;
+  width: 0.21333rem;
+  height: 0.21333rem;
+  border-radius: 50%;
+  margin: 0.06667rem auto 0;
+}
+
+.largestBox .top3 .no3 .box p .boy {
+  background: #6BB3FF;
+}
+
+.largestBox .top3 .no3 .box p .woman {
+  background: #FF80CC;
+}
+
+.largestBox .top3 .no3 .box .icon {
+  width: 100%;
+  height: 0.48rem;
+  position: absolute;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  bottom: -1.12rem;
+  padding: 0 0.33333rem;
+}
+
+.largestBox .top3 .no3 .box .icon img {
+  display: block;
+  width: 0.96rem;
+  height: 0.48rem;
+}
+
+.largestBox .top3 .no3 .box .score {
+  width: 100%;
+  text-align: center;
+  color: #FFDA24;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  bottom: -1.53333rem;
+}
+
+.largestBox ul {
+  width: 9.57333rem;
+  height: 7.70667rem;
+  margin: 1.81333rem auto 0;
+  background: rgba(255, 167, 141, 0.16);
+  border-radius: 0.42667rem 0.42667rem 0px 0px;
+  border: 0.02667rem solid rgba(255, 217, 115, 0.5);
+  backdrop-filter: blur(7px);
+  border-bottom: none;
+  box-sizing: border-box;
+  padding: 0.21333rem 0 1.86667rem;
+  overflow-y: scroll;
+}
+
+.largestBox ul::-webkit-scrollbar {
+  display: none;
+}
+
+.largestBox ul li {
+  width: 100%;
+  height: 1.92rem;
+  box-sizing: border-box;
+  padding: 0 0.33333rem;
+  overflow: hidden;
+}
+
+.largestBox ul li .num {
+  width: 0.53333rem;
+  height: 100%;
+  line-height: 1.92rem;
+  text-align: center;
+  color: #E6ECF5;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  float: left;
+  margin-right: 0.16rem;
+}
+
+.largestBox ul li .tx {
+  display: block;
+  float: left;
+  width: 1.28rem;
+  height: 1.28rem;
+  border-radius: 1.28rem;
+  margin-top: 0.32rem;
+  margin-right: 0.21333rem;
+}
+
+.largestBox ul li .userInfo {
+  width: 2.8rem;
+  float: left;
+}
+
+.largestBox ul li .userInfo p {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.4rem;
+  margin-bottom: 0.10667rem;
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 500;
+}
+
+.largestBox ul li .userInfo img {
+  display: inline-block;
+  width: 0.96rem;
+  height: 0.48rem;
+  margin-right: 0.10667rem;
+}
+
+.largestBox ul li .score {
+  float: right;
+  text-align: right;
+}
+
+.largestBox ul li .score p {
+  color: #E6ECF5;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  margin-top: 0.48rem;
+  margin-bottom: 0.06667rem;
+}
+
+.largestBox ul li .score span {
+  color: #B1B5BD;
+  font-size: 0.29333rem;
+  font-weight: 400;
+  display: block;
+}
+
+.layui-m-layershade {
+  background-color: transparent !important;
+}
+
+.layui-m-layer2 .layui-m-layerchild {
+  width: 3rem !important;
+  height: 3rem !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: #fff !important;
+  background: rgba(0, 0, 0, 0.6) !important;
+}
+
+.layui-m-layer2 .layui-m-layercont {
+  text-align: center !important;
+  padding: 0 !important;
+  line-height: 0 !important;
+  margin-top: 0.8rem !important;
+}
diff --git a/view/yinmeng/modules/roomRank/css/index.scss b/view/yinmeng/modules/roomRank/css/index.scss
new file mode 100644
index 0000000..8700765
--- /dev/null
+++ b/view/yinmeng/modules/roomRank/css/index.scss
@@ -0,0 +1,552 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #020B27 0%, #1D181B 99%);
+    backdrop-filter: blur(0px);
+    // background: #0B1836;
+    overflow: hidden;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(20);
+    left: px2rem(24);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.largestBox {
+    width: px2rem(750);
+    min-height: px2rem(1154);
+    background: url(../images/bg.png) no-repeat;
+    background-size: px2rem(750) px2rem(1154);
+    margin: 0 auto;
+    position: relative;
+    box-sizing: border-box;
+    padding: px2rem(90) 0 0 0;
+
+    .title {
+        width: px2rem(530);
+        height: px2rem(86);
+        position: absolute;
+        top: px2rem(-11);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .tab {
+        width: px2rem(274);
+        height: px2rem(40);
+        line-height: px2rem(40);
+        display: flex;
+        justify-content: space-between;
+        margin: 0 auto 0;
+
+        div {
+            position: relative;
+            color: rgba(255, 255, 255, .7);
+            font-size: px2rem(28);
+            font-weight: 600;
+
+            span {
+                background: none;
+                width: px2rem(24);
+                height: px2rem(6);
+                border-radius: px2rem(6);
+                position: absolute;
+                bottom: px2rem(-8);
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+
+        .tabColor1 {
+            color: #fff;
+            font-size: px2rem(28);
+
+            span {
+                background: #FA7814;
+            }
+        }
+
+        .tabColor2 {
+            color: #fff;
+
+            span {
+                background: #A34DFF;
+            }
+        }
+    }
+
+    .dayTab {
+        width: px2rem(400);
+        height: px2rem(46);
+        margin: px2rem(26) auto 0;
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(100);
+            height: px2rem(46);
+            line-height: px2rem(46);
+            border-radius: px2rem(46);
+            text-align: center;
+            color: rgba(255, 255, 255, .7);
+            background: rgba(210, 172, 252, .4);
+            font-size: px2rem(24);
+            font-weight: 500;
+        }
+
+        .dayTabColor1 {
+            background: #fff;
+            color: #FA7814;
+        }
+
+        .dayTabColor2 {
+            background: #fff;
+            color: #A34DFF;
+        }
+    }
+
+    .top3 {
+        width: px2rem(660);
+        height: px2rem(1);
+        margin: px2rem(228) auto 0;
+        position: relative;
+
+        .no1 {
+            width: px2rem(238);
+            height: px2rem(216);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-216);
+
+            .box {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+
+                .ts {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(156);
+                    height: px2rem(156);
+                    position: absolute;
+                    left: 50%;
+                    top: px2rem(44);
+                    // top: px2rem(34);
+                    transform: translateX(-50%);
+                    border-radius: 50%;
+                }
+
+                p {
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-42);
+                    text-align: center;
+
+                    span {
+                        vertical-align: middle;
+                        color: #E6ECF5;
+                        font-size: px2rem(28);
+                    }
+
+                    .sp {
+                        width: px2rem(28);
+                        height: px2rem(28);
+                        border-radius: 50%;
+                        display: inline-block;
+
+                        img {
+                            display: inline-block;
+                            width: px2rem(16);
+                            height: px2rem(16);
+                            border-radius: 50%;
+                            margin: px2rem(5) auto 0;
+                        }
+                    }
+
+                    .boy {
+                        background: #6BB3FF;
+                    }
+
+                    .woman {
+                        background: #FF80CC;
+                    }
+
+                }
+
+                .icon {
+                    width: 100%;
+                    height: px2rem(36);
+                    position: absolute;
+                    left: 0;
+                    display: flex;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                    bottom: px2rem(-84);
+                    padding: 0 px2rem(45);
+
+                    img {
+                        display: block;
+                        width: px2rem(72);
+                        height: px2rem(36);
+                    }
+                }
+
+                .score {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFDA24;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-115);
+                }
+            }
+        }
+
+        .no2 {
+            width: px2rem(200);
+            height: px2rem(178);
+            position: absolute;
+            left: 0;
+            top: px2rem(-180);
+
+            .box {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+
+                .ts {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(128);
+                    height: px2rem(128);
+                    position: absolute;
+                    left: 50%;
+                    top: px2rem(34);
+                    transform: translateX(-50%);
+                    border-radius: 50%;
+                }
+
+                p {
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-42);
+                    text-align: center;
+
+                    span {
+                        vertical-align: middle;
+                        color: #E6ECF5;
+                        font-size: px2rem(28);
+                    }
+
+                    .sp {
+                        width: px2rem(28);
+                        height: px2rem(28);
+                        border-radius: 50%;
+                        display: inline-block;
+
+                        img {
+                            display: inline-block;
+                            width: px2rem(16);
+                            height: px2rem(16);
+                            border-radius: 50%;
+                            margin: px2rem(5) auto 0;
+                        }
+                    }
+
+                    .boy {
+                        background: #6BB3FF;
+                    }
+
+                    .woman {
+                        background: #FF80CC;
+                    }
+
+                }
+
+                .icon {
+                    width: 100%;
+                    height: px2rem(36);
+                    position: absolute;
+                    left: 0;
+                    display: flex;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                    bottom: px2rem(-84);
+                    padding: 0 px2rem(25);
+
+                    img {
+                        display: block;
+                        width: px2rem(72);
+                        height: px2rem(36);
+                    }
+                }
+
+                .score {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFDA24;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-115);
+                }
+            }
+        }
+
+        .no3 {
+            width: px2rem(200);
+            height: px2rem(178);
+            position: absolute;
+            right: 0;
+            top: px2rem(-180);
+
+            .box {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+
+                .ts {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(128);
+                    height: px2rem(128);
+                    position: absolute;
+                    left: 50%;
+                    top: px2rem(34);
+                    transform: translateX(-50%);
+                    border-radius: 50%;
+                }
+
+                p {
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-42);
+                    text-align: center;
+
+                    span {
+                        vertical-align: middle;
+                        color: #E6ECF5;
+                        font-size: px2rem(28);
+                    }
+
+                    .sp {
+                        width: px2rem(28);
+                        height: px2rem(28);
+                        border-radius: 50%;
+                        display: inline-block;
+
+                        img {
+                            display: inline-block;
+                            width: px2rem(16);
+                            height: px2rem(16);
+                            border-radius: 50%;
+                            margin: px2rem(5) auto 0;
+                        }
+                    }
+
+                    .boy {
+                        background: #6BB3FF;
+                    }
+
+                    .woman {
+                        background: #FF80CC;
+                    }
+
+                }
+
+                .icon {
+                    width: 100%;
+                    height: px2rem(36);
+                    position: absolute;
+                    left: 0;
+                    display: flex;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                    bottom: px2rem(-84);
+                    padding: 0 px2rem(25);
+
+                    img {
+                        display: block;
+                        width: px2rem(72);
+                        height: px2rem(36);
+                    }
+                }
+
+                .score {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFDA24;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-115);
+                }
+            }
+        }
+    }
+
+    ul {
+        width: px2rem(718);
+        height: px2rem(578);
+        margin: px2rem(136) auto 0;
+        background: rgba(255, 167, 141, 0.16);
+        border-radius: px2rem(32) px2rem(32) 0px 0px;
+        border: px2rem(2) solid rgba(255, 217, 115, 0.5);
+        backdrop-filter: blur(7px);
+        border-bottom: none;
+        box-sizing: border-box;
+        padding: px2rem(16) 0 px2rem(140);
+        overflow-y: scroll;
+        &::-webkit-scrollbar{
+            display: none;
+        }
+
+        li {
+            width: 100%;
+            height: px2rem(144);
+            box-sizing: border-box;
+            padding: 0 px2rem(25);
+            overflow: hidden;
+
+            .num {
+                width: px2rem(40);
+                height: 100%;
+                line-height: px2rem(144);
+                text-align: center;
+                color: #E6ECF5;
+                font-size: px2rem(32);
+                font-weight: 500;
+                float: left;
+                margin-right: px2rem(12);
+            }
+
+            .tx {
+                display: block;
+                float: left;
+                width: px2rem(96);
+                height: px2rem(96);
+                border-radius: px2rem(96);
+                margin-top: px2rem(24);
+                margin-right: px2rem(16);
+            }
+
+            .userInfo {
+                width: px2rem(210);
+                float: left;
+
+                p {
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    margin-top: px2rem(30);
+                    margin-bottom: px2rem(8);
+                    color: #E6ECF5;
+                    font-size: px2rem(28);
+                    font-weight: 500;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(72);
+                    height: px2rem(36);
+                    margin-right: px2rem(8);
+                }
+            }
+
+            .score {
+                float: right;
+                text-align: right;
+
+                p {
+                    color: #E6ECF5;
+                    font-size: px2rem(28);
+                    font-weight: 600;
+                    margin-top: px2rem(36);
+                    margin-bottom: px2rem(5);
+                }
+
+                span {
+                    color: #B1B5BD;
+                    font-size: px2rem(22);
+                    font-weight: 400;
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .0) !important;
+}
+
+.layui-m-layer2 .layui-m-layerchild {
+    width: 3rem !important;
+    height: 3rem !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #fff !important;
+    background: rgba(0, 0, 0, .6) !important;
+}
+
+.layui-m-layer2 .layui-m-layercont {
+    text-align: center !important;
+    padding: 0 !important;
+    line-height: 0 !important;
+    margin-top: 0.8rem !important;
+}
\ No newline at end of file
diff --git a/view/yinmeng/modules/roomRank/images/bg.png b/view/yinmeng/modules/roomRank/images/bg.png
new file mode 100644
index 0000000..956bac8
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/bg.png differ
diff --git a/view/yinmeng/modules/roomRank/images/boy.png b/view/yinmeng/modules/roomRank/images/boy.png
new file mode 100644
index 0000000..290a144
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/boy.png differ
diff --git a/view/yinmeng/modules/roomRank/images/icon1.png b/view/yinmeng/modules/roomRank/images/icon1.png
new file mode 100644
index 0000000..b02ae52
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/icon1.png differ
diff --git a/view/yinmeng/modules/roomRank/images/icon2.png b/view/yinmeng/modules/roomRank/images/icon2.png
new file mode 100644
index 0000000..79f2ac8
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/icon2.png differ
diff --git a/view/yinmeng/modules/roomRank/images/logo.png b/view/yinmeng/modules/roomRank/images/logo.png
new file mode 100644
index 0000000..4c661e5
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/logo.png differ
diff --git a/view/yinmeng/modules/roomRank/images/no1.png b/view/yinmeng/modules/roomRank/images/no1.png
new file mode 100644
index 0000000..c537076
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/no1.png differ
diff --git a/view/yinmeng/modules/roomRank/images/no2.png b/view/yinmeng/modules/roomRank/images/no2.png
new file mode 100644
index 0000000..03173ba
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/no2.png differ
diff --git a/view/yinmeng/modules/roomRank/images/no3.png b/view/yinmeng/modules/roomRank/images/no3.png
new file mode 100644
index 0000000..550c860
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/no3.png differ
diff --git a/view/yinmeng/modules/roomRank/images/title.png b/view/yinmeng/modules/roomRank/images/title.png
new file mode 100644
index 0000000..d4c308c
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/title.png differ
diff --git a/view/yinmeng/modules/roomRank/images/woman.png b/view/yinmeng/modules/roomRank/images/woman.png
new file mode 100644
index 0000000..a913018
Binary files /dev/null and b/view/yinmeng/modules/roomRank/images/woman.png differ
diff --git a/view/yinmeng/modules/roomRank/index.html b/view/yinmeng/modules/roomRank/index.html
new file mode 100644
index 0000000..e821520
--- /dev/null
+++ b/view/yinmeng/modules/roomRank/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>房间榜</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+
+    <!-- 最外层容器 -->
+    <div class="largestBox">
+        <!-- 标题 -->
+        <img src="./images/title.png" alt="" class="title">
+        <!-- 财富榜&魅力榜 -->
+        <div class="tab">
+            <div class="tabColor1">
+                财富榜
+                <span></span>
+            </div>
+            <div class="">
+                魅力榜
+                <span></span>
+            </div>
+        </div>
+        <!-- 日榜&周榜&月榜 -->
+        <div class="dayTab">
+            <div class="dayTabColor1">日榜</div>
+            <div>周榜</div>
+            <div>月榜</div>
+        </div>
+        <!-- 前三 -->
+        <div class="top3">
+            <div class="no no1">
+                <div class="box">
+                    <img src="./images/no1.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <p>
+                        <span>我是很长的...</span>
+                        <span class="sp boy"><img src="./images/boy.png" alt=""></span>
+                    </p>
+                    <div class="icon">
+                        <img src="./images/icon1.png" alt="" class="icon1">
+                        <img src="./images/icon2.png" alt="" class="icon1">
+                    </div>
+                    <div class="score">10000</div>
+                </div>
+            </div>
+            <div class="no no2">
+                <div class="box">
+                    <img src="./images/no2.png" alt="" class="ts">
+                    <img src="" alt="" class="tx">
+                    <p>
+                        <span></span>
+                        <span class="sp woman"><img src="" alt=""></span>
+                    </p>
+                    <div class="icon">
+                        <img src="" alt="" class="icon1">
+                        <img src="" alt="" class="icon1">
+                    </div>
+                    <div class="score"></div>
+                </div>
+            </div>
+            <div class="no no3">
+                <div class="box">
+                    <img src="./images/no3.png" alt="" class="ts">
+                    <img src="" alt="" class="tx">
+                    <p>
+                        <span></span>
+                        <span class="sp boy"><img src="" alt=""></span>
+                    </p>
+                    <div class="icon">
+                        <img src="" alt="" class="icon1">
+                        <img src="" alt="" class="icon1">
+                    </div>
+                    <div class="score"></div>
+                </div>
+            </div>
+        </div>
+        <!-- 非前三 -->
+        <ul>
+            <li>
+                <div class="num">4</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="userInfo">
+                    <p>我是名字名字名字名字名字</p>
+                    <img src="./images/icon1.png" alt="" class="icon1">
+                    <img src="./images/icon2.png" alt="" class="icon2">
+                </div>
+                <div class="score">
+                    <p>1000</p>
+                    <span>魅力值</span>
+                </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="../../common/js/svga.js"></script>
+<script src="./js/index.js"></script>
\ No newline at end of file
diff --git a/view/yinmeng/modules/roomRank/js/index.js b/view/yinmeng/modules/roomRank/js/index.js
new file mode 100644
index 0000000..2ed0421
--- /dev/null
+++ b/view/yinmeng/modules/roomRank/js/index.js
@@ -0,0 +1,73 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+var urlData = getQueryString();
+if (env == 'test') {
+    new VConsole();
+}
+// 封装layer消息提醒框
+let layerIndex
+const showLoading = (content = '加载中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+// 初始化函数
+$(function () {
+    getInfoFromClient()
+    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)
+            }
+        })
+
+    }, 100)
+})
+// 接口
+function get () {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '',
+        data: { roomUid: urlData.roomUid },
+        success (res) {
+            if (res.code === 200) {
+              
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('网络错误，请退出重进')
+        }
+    })
+}
\ No newline at end of file