图片压缩，清除遗漏文字

view/peko/modules/act-treasureSnatching/index.html

@@ -19,16 +19,16 @@
     <!-- 自己 -->
     <div class="my">
         <img src="" alt="" class="tx">
-        <div class="name">用户昵称用户昵称</div>
-        <div id="recharge" class="but">充值</div>
-        <div class="num2">100000</div>
+        <div class="name"></div>
+        <div id="recharge" class="but"></div>
+        <div class="num2"></div>
         <img src="./images/zs.png" alt="" class="icon2">
-        <div class="num1">10000</div>
+        <div class="num1"></div>
         <img id="dbqImg" src="./images/dbq.png" alt="" class="icon1">
     </div>
     <!-- 内容 -->
     <ul>
-        <li>
+        <!-- <li>
             <div class="title">赠送夺宝券1张</div>
             <img src="" alt="" class="giftImg">
             <div class="name">我的可爱头饰(1天)</div>
@@ -37,7 +37,7 @@
                 <b>10</b>
             </div>
             <div class="but" packId='1' day=1 diamonds=10 name='圣光迪迦'>购买</div>
-        </li>
+        </li> -->
     </ul>
     <!-- 购买弹窗 -->
     <div class="buy">

view/peko/modules/act-treasureSnatching/rule.html

@@ -23,7 +23,7 @@
     </div>
     <!-- 内容 -->
     <ul class="tab1">
-        <li>
+        <!-- <li>
             <div class="txBox">
                 <img src="" alt="">
             </div>
@@ -31,7 +31,7 @@
             <img src="" alt="" class="icon">
             <div class="score">202.5W</div>
             <div class="probability">0%</div>
-        </li>
+        </li> -->
     </ul>
     <div class="tab2">
         <img id="ruleImg" src="./images/rule_rule.png" alt="">

view/peko/modules/room_rank/css/hourRank.css

@@ -1,244 +1,300 @@
-@font-face {
-  font-family: 'pingfang-bold';
-  src: url("../../../common/fonts/PingFang Bold.ttf");
-  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg"); }
-@font-face {
-  font-family: 'pingfang-medium';
-  src: url("../../../common/fonts/PingFang Medium.ttf");
-  src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg"); }
-@font-face {
-  font-family: 'din';
-  src: url("../../../common/fonts/DINCond-Medium.ttf");
-  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg"); }
-body {
-  width: 100%; }
-
-.wrap .tab_wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  width: 100%;
-  height: 1.4133333333rem;
-  background: url("../images/single/top.png") no-repeat 0 0/100% 100%; }
-  .wrap .tab_wrap .tab_contain {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 1.1733333333rem;
-    padding-top: 0.2133333333rem;
-    margin-bottom: 0.1066666667rem; }
-    .wrap .tab_wrap .tab_contain p {
-      position: relative;
-      height: 0.6666666667rem;
-      line-height: 0.6666666667rem;
-      padding: 0 0.7466666667rem;
-      box-sizing: border-box;
-      font-size: 0.48rem;
-      font-weight: bold;
-      color: #fff;
-      text-align: center; }
-      .wrap .tab_wrap .tab_contain p.active {
-        font-size: 0.48rem; }
-        .wrap .tab_wrap .tab_contain p.active::after {
-          content: '';
-          position: absolute;
-          left: 50%;
-          bottom: -0.16rem;
-          transform: translateX(-50%);
-          width: 0.4266666667rem;
-          height: 0.1066666667rem;
-          border-radius: 0.1066666667rem;
-          background-color: #fff; }
-    .wrap .tab_wrap .tab_contain .rule_icon {
-      position: absolute;
-      right: 0.4rem;
-      width: 0.5333333333rem;
-      height: 0.5333333333rem; }
-.wrap .rank_wrap {
-  position: relative;
-  overflow: auto;
-  margin-top: 1.4133333333rem; }
-  .wrap .rank_wrap .time_wrap {
-    position: absolute;
-    top: 5.8666666667rem;
-    left: 0rem;
-    z-index: 1;
-    display: flex;
-    width: 100%;
-    padding: 0 0.4rem;
-    box-sizing: border-box; }
-    .wrap .rank_wrap .time_wrap p {
-      font-size: 0.2666666667rem;
-      font-weight: bold;
-      color: #B95CFF;
-      height: 0.3733333333rem;
-      line-height: 0.3733333333rem; }
-      .wrap .rank_wrap .time_wrap p span {
-        font-weight: bold; }
-  .wrap .rank_wrap .top_three_wrap {
-    position: relative;
-    width: 100%;
-    height: 5.7866666667rem;
-    box-sizing: border-box; }
-    .wrap .rank_wrap .top_three_wrap .top_three_item {
-      position: absolute;
-      width: 2.88rem;
-      text-align: center;
-      color: #fff; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
-        left: 50%;
-        transform: translateX(-50%); }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
-        left: 0.5333333333rem; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
-        width: 2.3466666667rem;
-        height: 2.24rem;
-        margin-top: 1.2266666667rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
-          background-image: url("../images/single/second.png"); }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
-          top: -2.1333333333rem;
-          width: 1.76rem;
-          height: 1.76rem; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
-        right: 0.5333333333rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
-          width: 2.1333333333rem; }
-          .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
-            background-image: url("../images/single/third.png"); }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
-        width: 2.88rem;
-        height: 2.8rem;
-        margin: 0rem auto 0.1066666667rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
-          position: relative;
-          z-index: 99;
-          width: 100%;
-          height: 100%;
-          background: url("../images/single/first.png") no-repeat 0 0/100% 100%; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
-          position: relative;
-          top: -2.5066666667rem;
-          width: 2.1333333333rem;
-          height: 2.1333333333rem;
-          border-radius: 50%; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .nick {
-        height: 0.5333333333rem;
-        line-height: 0.5333333333rem;
-        font-size: 0.3733333333rem;
-        font-weight: bold;
-        color: #333; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .num {
-        font-size: 0.2666666667rem;
-        color: #ccc; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .num span {
-          display: inline-block;
-          font-family: 'din';
-          font-size: 0.32rem;
-          font-weight: bold;
-          color: #B95CFF;
-          margin-top: 0.0266666667rem;
-          margin-bottom: 0.08rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .num img {
-          width: 0.7466666667rem;
-          height: 0.9066666667rem;
-          margin-top: 0.2666666667rem; }
-  .wrap .rank_wrap .desc {
-    display: flex;
-    margin-top: 0.5333333333rem;
-    margin-bottom: 0.32rem; }
-    .wrap .rank_wrap .desc p {
-      font-size: 0.2666666667rem;
-      font-weight: bold;
-      color: #999; }
-      .wrap .rank_wrap .desc p:first-child {
-        margin-left: 0.4rem; }
-      .wrap .rank_wrap .desc p:nth-child(2) {
-        flex: 1;
-        margin-left: 0.9333333333rem; }
-      .wrap .rank_wrap .desc p:last-child {
-        margin-right: 0.5333333333rem; }
-  .wrap .rank_wrap ul {
-    margin-bottom: 2rem; }
-    .wrap .rank_wrap ul li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0.4266666667rem; }
-      .wrap .rank_wrap ul li .index {
-        width: 0.2666666667rem;
-        text-align: center;
-        font-size: 0.4266666667rem;
-        font-weight: bold;
-        color: #999;
-        margin-left: 0.5333333333rem;
-        margin-right: 0.7466666667rem; }
-      .wrap .rank_wrap ul li .others_avatar {
-        width: 1.1733333333rem;
-        height: 1.1733333333rem;
-        margin-right: 0.32rem; }
-        .wrap .rank_wrap ul li .others_avatar img {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%; }
-      .wrap .rank_wrap ul li .others_nick {
-        flex: 1;
-        font-size: 0.3733333333rem;
-        font-weight: bold;
-        color: #333; }
-      .wrap .rank_wrap ul li .others_num {
-        font-size: 0.32rem;
-        color: #CCCCCC;
-        text-align: right;
-        margin-right: 0.5333333333rem; }
-        .wrap .rank_wrap ul li .others_num span {
-          font-family: 'din';
-          font-size: 0.4266666667rem;
-          font-weight: bold;
-          color: #B95CFF; }
-.wrap .mine {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 1.7066666667rem;
-  background-color: #fff;
-  box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4; }
-  .wrap .mine .mine_index {
-    width: 0.96rem;
-    text-align: center;
-    font-size: 0.32rem;
-    font-weight: bold;
-    color: #999;
-    margin-left: 0.2666666667rem; }
-  .wrap .mine .mine_avatar {
-    width: 1.1733333333rem;
-    height: 1.1733333333rem;
-    border-radius: 50%;
-    margin: 0 0.32rem; }
-  .wrap .mine .mine_nick {
-    flex: 1;
-    font-size: 0.3733333333rem;
-    font-weight: bold;
-    color: #333; }
-  .wrap .mine .mine_num {
-    text-align: right;
-    font-size: 0.32rem;
-    color: #ccc;
-    margin-right: 0.5333333333rem; }
-    .wrap .mine .mine_num p {
-      font-family: 'din';
-      font-size: 0.4266666667rem;
-      font-weight: bold;
-      color: #B95CFF;
-      margin-top: 0.0533333333rem; }
-
-::-webkit-scrollbar {
-  display: none; }
-
-/*# sourceMappingURL=hourRank.css.map */
+@font-face {
+  font-family: "pingfang-bold";
+  src: url("../../../common/fonts/PingFang Bold.ttf");
+  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
+}
+@font-face {
+  font-family: "pingfang-medium";
+  src: url("../../../common/fonts/PingFang Medium.ttf");
+  src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg");
+}
+@font-face {
+  font-family: "din";
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
+}
+body {
+  width: 100%;
+}
+
+.wrap .tab_wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 1.4133333333rem;
+  background: url("../images/single/top.png") no-repeat 0 0/100% 100%;
+}
+.wrap .tab_wrap .tab_contain {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 1.1733333333rem;
+  padding-top: 0.2133333333rem;
+  margin-bottom: 0.1066666667rem;
+}
+.wrap .tab_wrap .tab_contain p {
+  position: relative;
+  height: 0.6666666667rem;
+  line-height: 0.6666666667rem;
+  padding: 0 0.7466666667rem;
+  box-sizing: border-box;
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+}
+.wrap .tab_wrap .tab_contain p.active {
+  font-size: 0.48rem;
+}
+.wrap .tab_wrap .tab_contain p.active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -0.16rem;
+  transform: translateX(-50%);
+  width: 0.4266666667rem;
+  height: 0.1066666667rem;
+  border-radius: 0.1066666667rem;
+  background-color: #fff;
+}
+.wrap .tab_wrap .tab_contain .rule_icon {
+  position: absolute;
+  right: 0.4rem;
+  width: 0.5333333333rem;
+  height: 0.5333333333rem;
+}
+.wrap .rank_wrap {
+  position: relative;
+  overflow: auto;
+  margin-top: 1.4133333333rem;
+}
+.wrap .rank_wrap .time_wrap {
+  position: absolute;
+  top: 5.8666666667rem;
+  left: 0rem;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  padding: 0 0.4rem;
+  box-sizing: border-box;
+}
+.wrap .rank_wrap .time_wrap p {
+  font-size: 0.2666666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+  height: 0.3733333333rem;
+  line-height: 0.3733333333rem;
+}
+.wrap .rank_wrap .time_wrap p span {
+  font-weight: bold;
+}
+.wrap .rank_wrap .top_three_wrap {
+  position: relative;
+  width: 100%;
+  height: 5.7866666667rem;
+  box-sizing: border-box;
+}
+.wrap .rank_wrap .top_three_wrap #hour_top_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item {
+  position: absolute;
+  width: 2.88rem;
+  text-align: center;
+  color: #fff;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
+  left: 0.5333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
+  width: 2.3466666667rem;
+  height: 2.24rem;
+  margin-top: 1.2266666667rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
+  background-image: url("../images/single/second.png");
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
+  top: -2.1333333333rem;
+  width: 1.76rem;
+  height: 1.76rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
+  right: 0.5333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
+  width: 2.1333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
+  background-image: url("../images/single/third.png");
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
+  width: 2.88rem;
+  height: 2.8rem;
+  margin: 0rem auto 0.1066666667rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
+  position: relative;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  background: url("../images/single/first.png") no-repeat 0 0/100% 100%;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
+  position: relative;
+  top: -2.5066666667rem;
+  width: 2.1333333333rem;
+  height: 2.1333333333rem;
+  border-radius: 50%;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
+  height: 0.5333333333rem;
+  line-height: 0.5333333333rem;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num {
+  font-size: 0.2666666667rem;
+  color: #ccc;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num span {
+  display: inline-block;
+  font-family: "din";
+  font-size: 0.32rem;
+  font-weight: bold;
+  color: #B95CFF;
+  margin-top: 0.0266666667rem;
+  margin-bottom: 0.08rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num img {
+  width: 0.7466666667rem;
+  height: 0.9066666667rem;
+  margin-top: 0.2666666667rem;
+}
+.wrap .rank_wrap .desc {
+  display: flex;
+  margin-top: 0.5333333333rem;
+  margin-bottom: 0.32rem;
+}
+.wrap .rank_wrap .desc p {
+  font-size: 0.2666666667rem;
+  font-weight: bold;
+  color: #999;
+}
+.wrap .rank_wrap .desc p:first-child {
+  margin-left: 0.4rem;
+}
+.wrap .rank_wrap .desc p:nth-child(2) {
+  flex: 1;
+  margin-left: 0.9333333333rem;
+}
+.wrap .rank_wrap .desc p:last-child {
+  margin-right: 0.5333333333rem;
+}
+.wrap .rank_wrap ul {
+  margin-bottom: 2rem;
+}
+.wrap .rank_wrap ul li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4266666667rem;
+}
+.wrap .rank_wrap ul li .index {
+  width: 0.2666666667rem;
+  text-align: center;
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #999;
+  margin-left: 0.5333333333rem;
+  margin-right: 0.7466666667rem;
+}
+.wrap .rank_wrap ul li .others_avatar {
+  width: 1.1733333333rem;
+  height: 1.1733333333rem;
+  margin-right: 0.32rem;
+}
+.wrap .rank_wrap ul li .others_avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.wrap .rank_wrap ul li .others_nick {
+  flex: 1;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .rank_wrap ul li .others_num {
+  font-size: 0.32rem;
+  color: #CCCCCC;
+  text-align: right;
+  margin-right: 0.5333333333rem;
+}
+.wrap .rank_wrap ul li .others_num span {
+  font-family: "din";
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+}
+.wrap .mine {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 1.7066666667rem;
+  background-color: #fff;
+  box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4;
+}
+.wrap .mine .mine_index {
+  width: 0.96rem;
+  text-align: center;
+  font-size: 0.32rem;
+  font-weight: bold;
+  color: #999;
+  margin-left: 0.2666666667rem;
+}
+.wrap .mine .mine_avatar {
+  width: 1.1733333333rem;
+  height: 1.1733333333rem;
+  border-radius: 50%;
+  margin: 0 0.32rem;
+}
+.wrap .mine .mine_nick {
+  flex: 1;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .mine .mine_num {
+  text-align: right;
+  font-size: 0.32rem;
+  color: #ccc;
+  margin-right: 0.5333333333rem;
+}
+.wrap .mine .mine_num p {
+  font-family: "din";
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+  margin-top: 0.0533333333rem;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+/*# sourceMappingURL=hourRank.css.map */

view/peko/modules/room_rank/css/hourRank.scss

@@ -113,6 +113,11 @@ body{
       position: relative;
       width: 100%;
       height: px2rem(434, );
+      #hour_top_bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
       // background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
       // margin-top: px2rem(160, );
       // padding-top: px2rem(54, );

view/peko/modules/room_rank/css/hourRank1.css

@@ -1,244 +1,300 @@
-@font-face {
-  font-family: 'pingfang-bold';
-  src: url("../../../common/fonts/PingFang Bold.ttf");
-  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg"); }
-@font-face {
-  font-family: 'pingfang-medium';
-  src: url("../../../common/fonts/PingFang Medium.ttf");
-  src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg"); }
-@font-face {
-  font-family: 'din';
-  src: url("../../../common/fonts/DINCond-Medium.ttf");
-  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg"); }
-body {
-  width: 100%; }
-
-.wrap .tab_wrap {
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  width: 100%;
-  height: 1.4133333333rem;
-  background: url("../images/single/top.png") no-repeat 0 0/100% 100%; }
-  .wrap .tab_wrap .tab_contain {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 1.1733333333rem;
-    padding-top: 0.2133333333rem;
-    box-sizing: border-box;
-    margin-bottom: -0.1066666667rem; }
-    .wrap .tab_wrap .tab_contain p {
-      position: relative;
-      height: 0.6666666667rem;
-      line-height: 0.6666666667rem;
-      padding: 0 0.7466666667rem;
-      box-sizing: border-box;
-      font-size: 0.48rem;
-      font-weight: bold;
-      color: #fff;
-      text-align: center; }
-      .wrap .tab_wrap .tab_contain p.active {
-        font-size: 0.48rem; }
-        .wrap .tab_wrap .tab_contain p.active::after {
-          content: '';
-          position: absolute;
-          left: 50%;
-          bottom: -0.16rem;
-          transform: translateX(-50%);
-          width: 0.4266666667rem;
-          height: 0.1066666667rem;
-          border-radius: 0.1066666667rem;
-          background-color: #fff; }
-    .wrap .tab_wrap .tab_contain .rule_icon {
-      position: absolute;
-      right: 0.4rem;
-      width: 0.5333333333rem;
-      height: 0.5333333333rem; }
-.wrap .rank_wrap {
-  position: relative;
-  overflow: auto; }
-  .wrap .rank_wrap .time_wrap {
-    position: absolute;
-    top: 5.8666666667rem;
-    left: 0rem;
-    z-index: 1;
-    display: flex;
-    width: 100%;
-    padding: 0 0.4rem;
-    box-sizing: border-box; }
-    .wrap .rank_wrap .time_wrap p {
-      font-size: 0.2666666667rem;
-      font-weight: bold;
-      color: #B95CFF;
-      height: 0.3733333333rem;
-      line-height: 0.3733333333rem; }
-      .wrap .rank_wrap .time_wrap p span {
-        font-weight: bold; }
-  .wrap .rank_wrap .top_three_wrap {
-    position: relative;
-    width: 100%;
-    height: 5.7866666667rem;
-    box-sizing: border-box; }
-    .wrap .rank_wrap .top_three_wrap .top_three_item {
-      position: absolute;
-      width: 2.88rem;
-      text-align: center;
-      color: #fff; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
-        left: 50%;
-        transform: translateX(-50%); }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
-        left: 0.5333333333rem; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
-        width: 2.3466666667rem;
-        height: 2.24rem;
-        margin-top: 1.2266666667rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
-          background-image: url("../images/single/second.png"); }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
-          top: -2.1333333333rem;
-          width: 1.76rem;
-          height: 1.76rem; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
-        right: 0.5333333333rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
-          width: 2.1333333333rem; }
-          .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
-            background-image: url("../images/single/third.png"); }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
-        width: 2.88rem;
-        height: 2.8rem;
-        margin: 0rem auto 0.1066666667rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
-          position: relative;
-          z-index: 99;
-          width: 100%;
-          height: 100%;
-          background: url("../images/single/first.png") no-repeat 0 0/100% 100%; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
-          position: relative;
-          top: -2.5066666667rem;
-          width: 2.1333333333rem;
-          height: 2.1333333333rem;
-          border-radius: 50%; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .nick {
-        height: 0.5333333333rem;
-        line-height: 0.5333333333rem;
-        font-size: 0.3733333333rem;
-        font-weight: bold;
-        color: #333; }
-      .wrap .rank_wrap .top_three_wrap .top_three_item .num {
-        font-size: 0.2666666667rem;
-        color: #ccc; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .num span {
-          display: inline-block;
-          font-family: 'din';
-          font-size: 0.32rem;
-          font-weight: bold;
-          color: #B95CFF;
-          margin-top: 0.0266666667rem;
-          margin-bottom: 0.08rem; }
-        .wrap .rank_wrap .top_three_wrap .top_three_item .num img {
-          width: 0.7466666667rem;
-          height: 0.9066666667rem;
-          margin-top: 0.2666666667rem; }
-  .wrap .rank_wrap .desc {
-    display: flex;
-    margin-top: 0.5333333333rem;
-    margin-bottom: 0.32rem; }
-    .wrap .rank_wrap .desc p {
-      font-size: 0.2666666667rem;
-      font-weight: bold;
-      color: #999; }
-      .wrap .rank_wrap .desc p:first-child {
-        margin-left: 0.4rem; }
-      .wrap .rank_wrap .desc p:nth-child(2) {
-        flex: 1;
-        margin-left: 0.9333333333rem; }
-      .wrap .rank_wrap .desc p:last-child {
-        margin-right: 0.5333333333rem; }
-  .wrap .rank_wrap ul {
-    margin-bottom: 2rem; }
-    .wrap .rank_wrap ul li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0.4266666667rem; }
-      .wrap .rank_wrap ul li .index {
-        width: 0.2666666667rem;
-        text-align: center;
-        font-size: 0.4266666667rem;
-        font-weight: bold;
-        color: #999;
-        margin-left: 0.5333333333rem;
-        margin-right: 0.7466666667rem; }
-      .wrap .rank_wrap ul li .others_avatar {
-        width: 1.1733333333rem;
-        height: 1.1733333333rem;
-        margin-right: 0.32rem; }
-        .wrap .rank_wrap ul li .others_avatar img {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%; }
-      .wrap .rank_wrap ul li .others_nick {
-        flex: 1;
-        font-size: 0.3733333333rem;
-        font-weight: bold;
-        color: #333; }
-      .wrap .rank_wrap ul li .others_num {
-        font-size: 0.32rem;
-        color: #CCCCCC;
-        text-align: right;
-        margin-right: 0.5333333333rem; }
-        .wrap .rank_wrap ul li .others_num span {
-          font-family: 'din';
-          font-size: 0.4266666667rem;
-          font-weight: bold;
-          color: #B95CFF; }
-.wrap .mine {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 1.7066666667rem;
-  background-color: #fff;
-  box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4; }
-  .wrap .mine .mine_index {
-    width: 0.96rem;
-    text-align: center;
-    font-size: 0.32rem;
-    font-weight: bold;
-    color: #999;
-    margin-left: 0.2666666667rem; }
-  .wrap .mine .mine_avatar {
-    width: 1.1733333333rem;
-    height: 1.1733333333rem;
-    border-radius: 50%;
-    margin: 0 0.32rem; }
-  .wrap .mine .mine_nick {
-    flex: 1;
-    font-size: 0.3733333333rem;
-    font-weight: bold;
-    color: #333; }
-  .wrap .mine .mine_num {
-    text-align: right;
-    font-size: 0.32rem;
-    color: #ccc;
-    margin-right: 0.5333333333rem; }
-    .wrap .mine .mine_num p {
-      font-family: 'din';
-      font-size: 0.4266666667rem;
-      font-weight: bold;
-      color: #B95CFF;
-      margin-top: 0.0533333333rem; }
-
-::-webkit-scrollbar {
-  display: none; }
-
-/*# sourceMappingURL=hourRank1.css.map */
+@font-face {
+  font-family: "pingfang-bold";
+  src: url("../../../common/fonts/PingFang Bold.ttf");
+  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
+}
+@font-face {
+  font-family: "pingfang-medium";
+  src: url("../../../common/fonts/PingFang Medium.ttf");
+  src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg");
+}
+@font-face {
+  font-family: "din";
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
+}
+body {
+  width: 100%;
+}
+
+.wrap .tab_wrap {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 1.4133333333rem;
+  background: url("../images/single/top.png") no-repeat 0 0/100% 100%;
+}
+.wrap .tab_wrap .tab_contain {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 1.1733333333rem;
+  padding-top: 0.2133333333rem;
+  box-sizing: border-box;
+  margin-bottom: -0.1066666667rem;
+}
+.wrap .tab_wrap .tab_contain p {
+  position: relative;
+  height: 0.6666666667rem;
+  line-height: 0.6666666667rem;
+  padding: 0 0.7466666667rem;
+  box-sizing: border-box;
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+}
+.wrap .tab_wrap .tab_contain p.active {
+  font-size: 0.48rem;
+}
+.wrap .tab_wrap .tab_contain p.active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -0.16rem;
+  transform: translateX(-50%);
+  width: 0.4266666667rem;
+  height: 0.1066666667rem;
+  border-radius: 0.1066666667rem;
+  background-color: #fff;
+}
+.wrap .tab_wrap .tab_contain .rule_icon {
+  position: absolute;
+  right: 0.4rem;
+  width: 0.5333333333rem;
+  height: 0.5333333333rem;
+}
+.wrap .rank_wrap {
+  position: relative;
+  overflow: auto;
+}
+.wrap .rank_wrap .time_wrap {
+  position: absolute;
+  top: 5.8666666667rem;
+  left: 0rem;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  padding: 0 0.4rem;
+  box-sizing: border-box;
+}
+.wrap .rank_wrap .time_wrap p {
+  font-size: 0.2666666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+  height: 0.3733333333rem;
+  line-height: 0.3733333333rem;
+}
+.wrap .rank_wrap .time_wrap p span {
+  font-weight: bold;
+}
+.wrap .rank_wrap .top_three_wrap {
+  position: relative;
+  width: 100%;
+  height: 5.7866666667rem;
+  box-sizing: border-box;
+}
+.wrap .rank_wrap .top_three_wrap #hour_top_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item {
+  position: absolute;
+  width: 2.88rem;
+  text-align: center;
+  color: #fff;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
+  left: 0.5333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
+  width: 2.3466666667rem;
+  height: 2.24rem;
+  margin-top: 1.2266666667rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
+  background-image: url("../images/single/second.png");
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
+  top: -2.1333333333rem;
+  width: 1.76rem;
+  height: 1.76rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
+  right: 0.5333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
+  width: 2.1333333333rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
+  background-image: url("../images/single/third.png");
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
+  width: 2.88rem;
+  height: 2.8rem;
+  margin: 0rem auto 0.1066666667rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
+  position: relative;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  background: url("../images/single/first.png") no-repeat 0 0/100% 100%;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
+  position: relative;
+  top: -2.5066666667rem;
+  width: 2.1333333333rem;
+  height: 2.1333333333rem;
+  border-radius: 50%;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
+  height: 0.5333333333rem;
+  line-height: 0.5333333333rem;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num {
+  font-size: 0.2666666667rem;
+  color: #ccc;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num span {
+  display: inline-block;
+  font-family: "din";
+  font-size: 0.32rem;
+  font-weight: bold;
+  color: #B95CFF;
+  margin-top: 0.0266666667rem;
+  margin-bottom: 0.08rem;
+}
+.wrap .rank_wrap .top_three_wrap .top_three_item .num img {
+  width: 0.7466666667rem;
+  height: 0.9066666667rem;
+  margin-top: 0.2666666667rem;
+}
+.wrap .rank_wrap .desc {
+  display: flex;
+  margin-top: 0.5333333333rem;
+  margin-bottom: 0.32rem;
+}
+.wrap .rank_wrap .desc p {
+  font-size: 0.2666666667rem;
+  font-weight: bold;
+  color: #999;
+}
+.wrap .rank_wrap .desc p:first-child {
+  margin-left: 0.4rem;
+}
+.wrap .rank_wrap .desc p:nth-child(2) {
+  flex: 1;
+  margin-left: 0.9333333333rem;
+}
+.wrap .rank_wrap .desc p:last-child {
+  margin-right: 0.5333333333rem;
+}
+.wrap .rank_wrap ul {
+  margin-bottom: 2rem;
+}
+.wrap .rank_wrap ul li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4266666667rem;
+}
+.wrap .rank_wrap ul li .index {
+  width: 0.2666666667rem;
+  text-align: center;
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #999;
+  margin-left: 0.5333333333rem;
+  margin-right: 0.7466666667rem;
+}
+.wrap .rank_wrap ul li .others_avatar {
+  width: 1.1733333333rem;
+  height: 1.1733333333rem;
+  margin-right: 0.32rem;
+}
+.wrap .rank_wrap ul li .others_avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.wrap .rank_wrap ul li .others_nick {
+  flex: 1;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .rank_wrap ul li .others_num {
+  font-size: 0.32rem;
+  color: #CCCCCC;
+  text-align: right;
+  margin-right: 0.5333333333rem;
+}
+.wrap .rank_wrap ul li .others_num span {
+  font-family: "din";
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+}
+.wrap .mine {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 1.7066666667rem;
+  background-color: #fff;
+  box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4;
+}
+.wrap .mine .mine_index {
+  width: 0.96rem;
+  text-align: center;
+  font-size: 0.32rem;
+  font-weight: bold;
+  color: #999;
+  margin-left: 0.2666666667rem;
+}
+.wrap .mine .mine_avatar {
+  width: 1.1733333333rem;
+  height: 1.1733333333rem;
+  border-radius: 50%;
+  margin: 0 0.32rem;
+}
+.wrap .mine .mine_nick {
+  flex: 1;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  color: #333;
+}
+.wrap .mine .mine_num {
+  text-align: right;
+  font-size: 0.32rem;
+  color: #ccc;
+  margin-right: 0.5333333333rem;
+}
+.wrap .mine .mine_num p {
+  font-family: "din";
+  font-size: 0.4266666667rem;
+  font-weight: bold;
+  color: #B95CFF;
+  margin-top: 0.0533333333rem;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+/*# sourceMappingURL=hourRank1.css.map */

view/peko/modules/room_rank/css/hourRank1.scss

@@ -113,6 +113,11 @@ body{
       position: relative;
       width: 100%;
       height: px2rem(434, );
+      #hour_top_bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
       // background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
       // margin-top: px2rem(160, );
       // padding-top: px2rem(54, );

view/peko/modules/room_rank/hourRank.html

@@ -34,9 +34,12 @@
       </div>
 
       <div class="desc">
-        <p id="desc_p1">排名</p>
+        <!-- <p id="desc_p1">排名</p>
         <p id="desc_p2">主播</p>
-        <p id="desc_p3">礼物值</p>
+        <p id="desc_p3">礼物值</p> -->
+        <p id="desc_p1"></p>
+        <p id="desc_p2"></p>
+        <p id="desc_p3"></p>
       </div>
 
       <ul></ul>

view/peko/modules/room_rank/hourRankLicense.html

@@ -33,9 +33,12 @@
       </div>
 
       <div class="desc">
-        <p id="desc_p1">排名</p>
+        <p id="desc_p1"></p>
+        <p id="desc_p4"></p>
+        <p id="desc_p3"></p>
+        <!-- <p id="desc_p1">排名</p>
         <p id="desc_p4">房间</p>
-        <p id="desc_p3">礼物值</p>
+        <p id="desc_p3">礼物值</p> -->
       </div>
 
       <ul></ul>

view/peko/modules/spirit/main.html

@@ -89,16 +89,16 @@
     </div>
     <div class="tabBox">
         <div class="active">
-            <p id="tab_p1">初級探訪</p>
-            <span><b class="tabNum">0</b><b class="tab_unit">鉆/个</b></span>
+            <p id="tab_p1"></p>
+            <span><b class="tabNum">0</b><b class="tab_unit"></b></span>
         </div>
         <div>
-            <p id="tab_p2">中級探訪</p>
-            <span><b class="tabNum">0</b><b class="tab_unit">鉆/个</b></span>
+            <p id="tab_p2"></p>
+            <span><b class="tabNum">0</b><b class="tab_unit"></b></span>
         </div>
         <div>
-            <p id="tab_p3">高級探訪</p>
-            <span><b class="tabNum">0</b><b+ class="tab_unit">鉆/个</b></span>
+            <p id="tab_p3"></p>
+            <span><b class="tabNum">0</b><b+ class="tab_unit"></b></span>
         </div>
     </div>
     <div class="explore">
@@ -110,7 +110,7 @@
         <div class="nick"></div>
         <div class="diamond-num">
             <img src="./image/diamond-icon.png" alt="">
-            <p id="my_diamond">我的鉆石 <span>0</span></p>
+            <p id="my_diamond"><span>0</span></p>
         </div>
         <div class="recharge-icon"><img src="./image/recharge-icon.png" alt=""></div>
     </div>