From 00f31ed8de2851076e63b9083432bd048a789671 Mon Sep 17 00:00:00 2001
From: qf <tanqiaofei@xuanyinyy.com>
Date: Sat, 27 May 2023 00:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E6=97=B6=E6=A6=9C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/peko/modules/room_rank/css/hourRank.css  |   4 +
 view/peko/modules/room_rank/css/hourRank.scss | 371 ++++++++++--------
 view/peko/modules/room_rank/css/hourRank1.css |   4 +
 .../peko/modules/room_rank/css/hourRank1.scss |   4 +
 view/peko/modules/room_rank/hourRank.html     |  13 +-
 view/peko/modules/room_rank/js/hourRank.js    |   5 +-
 6 files changed, 232 insertions(+), 169 deletions(-)

diff --git a/view/peko/modules/room_rank/css/hourRank.css b/view/peko/modules/room_rank/css/hourRank.css
index eb1fa7a..0e277ce 100644
--- a/view/peko/modules/room_rank/css/hourRank.css
+++ b/view/peko/modules/room_rank/css/hourRank.css
@@ -182,6 +182,10 @@ body {
   height: 0.9066666667rem;
   margin-top: 0.2666666667rem;
 }
+.wrap .rank_wrap .top_three_wrap .item2 {
+  left: 50%;
+  transform: translateX(-50%);
+}
 .wrap .rank_wrap .desc {
   display: flex;
   margin-top: 0.5333333333rem;
diff --git a/view/peko/modules/room_rank/css/hourRank.scss b/view/peko/modules/room_rank/css/hourRank.scss
index c37fe14..6e51941 100644
--- a/view/peko/modules/room_rank/css/hourRank.scss
+++ b/view/peko/modules/room_rank/css/hourRank.scss
@@ -1,24 +1,24 @@
-@function px2rem($px, $rem:75) {
+@function px2rem($px, $rem: 75) {
   @return $px / $rem+rem;
 }
 
-@font-face{
+@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');
+    url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
+    url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
 }
 
-@font-face{
+@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');
+    url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'),
+    url('../../../common/fonts/PingFang\ Medium.ttf') format('svg');
 }
 
-@font-face{
+@font-face {
   font-family: 'din';
   src: url('../../../common/fonts/DINCond-Medium.ttf');
   src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
@@ -26,14 +26,14 @@
     url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
 }
 
-body{
+body {
   width: 100%;
   // font-family: 'pingfang-bold';
   // background-color: #fff;
 }
 
-.wrap{
-  .tab_wrap{
+.wrap {
+  .tab_wrap {
     position: fixed;
     top: 0;
     left: 0;
@@ -41,7 +41,8 @@ body{
     width: 100%;
     height: px2rem(106, );
     background: url('../images/single/top.png') no-repeat 0 0/100% 100%;
-    .tab_contain{
+
+    .tab_contain {
       position: relative;
       display: flex;
       justify-content: center;
@@ -51,7 +52,8 @@ body{
       padding-top: px2rem(16, );
       // box-sizing: border-box;
       margin-bottom: px2rem(8, );
-      p{
+
+      p {
         position: relative;
         height: px2rem(50, );
         line-height: px2rem(50, );
@@ -61,9 +63,11 @@ body{
         font-weight: bold;
         color: #fff;
         text-align: center;
-        &.active{
+
+        &.active {
           font-size: px2rem(36, );
-          &::after{
+
+          &::after {
             content: '';
             position: absolute;
             left: 50%;
@@ -76,7 +80,8 @@ body{
           }
         }
       }
-      .rule_icon{
+
+      .rule_icon {
         position: absolute;
         right: px2rem(30, );
         width: px2rem(40, );
@@ -84,11 +89,13 @@ body{
       }
     }
   }
-  .rank_wrap{
+
+  .rank_wrap {
     position: relative;
     overflow: auto;
     margin-top: px2rem(106, );
-    .time_wrap{
+
+    .time_wrap {
       position: absolute;
       top: px2rem(440, );
       left: px2rem(0, );
@@ -97,185 +104,223 @@ body{
       width: 100%;
       padding: 0 px2rem(30, );
       box-sizing: border-box;
-      p{
+
+      p {
         font-size: px2rem(20, );
         font-weight: bold;
         color: #B95CFF;
         height: px2rem(28, );
         line-height: px2rem(28, );
-        span{
+
+        span {
           font-weight: bold;
         }
       }
     }
 
-    .top_three_wrap{
+    .top_three_wrap {
       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, );
       box-sizing: border-box;
-      .top_three_item{
-          position: absolute;
-          width: px2rem(216, );
-          text-align: center;
-          color: #fff;
-          &:first-child{
-            left: 50%;
-            transform: translateX(-50%);
-          }
-          &:nth-child(2){
-            left: px2rem(40, );
-          }
-          &:nth-child(2), &:nth-child(3){
-            .avatar{
-                width: px2rem(176, );
-                height: px2rem(168, );
-                margin-top: px2rem(92, );
-                p{
-                  background-image: url('../images/single/second.png');
-                }
-                img{
-                  top: px2rem(-160, );
-                  width: px2rem(132, );
-                  height: px2rem(132, );
-                }
-            }
-          }
-          &:nth-child(3){
-            right: px2rem(40, );
-            .avatar{
-              width: px2rem(160, );
-                p{
-                  background-image: url('../images/single/third.png');
-                }
-            }
-          }
-          .avatar{
-              width: px2rem(216, );
-              height: px2rem(210, );
-              margin: px2rem(0, ) auto px2rem(8, );
-              p{
-                  position: relative;
-                  z-index: 99;
-                  width: 100%;
-                  height: 100%;
-                  background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
-              }
-              img{
-                  position: relative;
-                  top: px2rem(-188, );
-                  width: px2rem(160, );
-                  height: px2rem(160, );
-                  border-radius: 50%;
-              }
-          }
-          .nick{
-            height: px2rem(40, );
-            line-height: px2rem(40, );
-            font-size: px2rem(28, );
-            font-weight: bold;
-            color: #333;
-          }
-          .num{
-            font-size: px2rem(20, );
-            color: #ccc;
-            span{
-              display: inline-block;
-              font-family: 'din';
-              font-size: px2rem(24, );
-              font-weight: bold;
-              color: #B95CFF;
-              margin-top: px2rem(2, );
-              margin-bottom: px2rem(6, );
-            }
-            img{
-              width: px2rem(56, );
-              height: px2rem(68, );
-              margin-top: px2rem(20, );
-            }
+
+      .top_three_item {
+        position: absolute;
+        width: px2rem(216, );
+        text-align: center;
+        color: #fff;
+
+        &:first-child {
+          left: 50%;
+          transform: translateX(-50%);
         }
+
+        &:nth-child(2) {
+          left: px2rem(40, );
+        }
+
+        &:nth-child(2),
+        &:nth-child(3) {
+          .avatar {
+            width: px2rem(176, );
+            height: px2rem(168, );
+            margin-top: px2rem(92, );
+
+            p {
+              background-image: url('../images/single/second.png');
+            }
+
+            img {
+              top: px2rem(-160, );
+              width: px2rem(132, );
+              height: px2rem(132, );
+            }
+          }
+        }
+
+        &:nth-child(3) {
+          right: px2rem(40, );
+
+          .avatar {
+            width: px2rem(160, );
+
+            p {
+              background-image: url('../images/single/third.png');
+            }
+          }
+        }
+
+        .avatar {
+          width: px2rem(216, );
+          height: px2rem(210, );
+          margin: px2rem(0, ) auto px2rem(8, );
+
+          p {
+            position: relative;
+            z-index: 99;
+            width: 100%;
+            height: 100%;
+            background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
+          }
+
+          img {
+            position: relative;
+            top: px2rem(-188, );
+            width: px2rem(160, );
+            height: px2rem(160, );
+            border-radius: 50%;
+          }
+        }
+
+        .nick {
+          height: px2rem(40, );
+          line-height: px2rem(40, );
+          font-size: px2rem(28, );
+          font-weight: bold;
+          color: #333;
+        }
+
+        .num {
+          font-size: px2rem(20, );
+          color: #ccc;
+
+          span {
+            display: inline-block;
+            font-family: 'din';
+            font-size: px2rem(24, );
+            font-weight: bold;
+            color: #B95CFF;
+            margin-top: px2rem(2, );
+            margin-bottom: px2rem(6, );
+          }
+
+          img {
+            width: px2rem(56, );
+            height: px2rem(68, );
+            margin-top: px2rem(20, );
+          }
+        }
+      }
+
+      .item2 {
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
 
-    .desc{
+    .desc {
       display: flex;
       margin-top: px2rem(40, );
       margin-bottom: px2rem(24, );
-      p{
+
+      p {
         font-size: px2rem(20, );
         font-weight: bold;
         color: #999;
-        &:first-child{
+
+        &:first-child {
           margin-left: px2rem(30, );
         }
-        &:nth-child(2){
+
+        &:nth-child(2) {
           flex: 1;
           margin-left: px2rem(70, );
         }
-        &:last-child{
+
+        &:last-child {
           margin-right: px2rem(40, );
         }
       }
     }
-    
-    ul{
-        // height: px2rem(280, );
-        // overflow: auto;
-        // margin-top: px2rem(34, );
-        margin-bottom: px2rem(150, );
-        li{
-            display: flex;
-            align-items: center;
-            margin-bottom: px2rem(32, );
-            .index{
-              width: px2rem(20, );
-              text-align: center;
-              font-size: px2rem(32, );
-              font-weight: bold;
-              color: #999;
-              margin-left: px2rem(40, );
-              margin-right: px2rem(56, );
-            }
-            .others_avatar{
-              width: px2rem(88, );
-              height: px2rem(88, );
-              margin-right: px2rem(24, );
-              img{
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-              }
-            }
-            .others_nick{
-              flex: 1;
-              font-size: px2rem(28, );
-              font-weight: bold;
-              color: #333;
-            }
-            .others_num{
-              font-size: px2rem(24, );
-              color: #CCCCCC;
-              text-align: right;
-              margin-right: px2rem(40, );
-              span{
-                font-family: 'din';
-                font-size: px2rem(32, );
-                font-weight: bold;
-                color: #B95CFF;
-              }
-            }
+
+    ul {
+      // height: px2rem(280, );
+      // overflow: auto;
+      // margin-top: px2rem(34, );
+      margin-bottom: px2rem(150, );
+
+      li {
+        display: flex;
+        align-items: center;
+        margin-bottom: px2rem(32, );
+
+        .index {
+          width: px2rem(20, );
+          text-align: center;
+          font-size: px2rem(32, );
+          font-weight: bold;
+          color: #999;
+          margin-left: px2rem(40, );
+          margin-right: px2rem(56, );
         }
+
+        .others_avatar {
+          width: px2rem(88, );
+          height: px2rem(88, );
+          margin-right: px2rem(24, );
+
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
+        }
+
+        .others_nick {
+          flex: 1;
+          font-size: px2rem(28, );
+          font-weight: bold;
+          color: #333;
+        }
+
+        .others_num {
+          font-size: px2rem(24, );
+          color: #CCCCCC;
+          text-align: right;
+          margin-right: px2rem(40, );
+
+          span {
+            font-family: 'din';
+            font-size: px2rem(32, );
+            font-weight: bold;
+            color: #B95CFF;
+          }
+        }
+      }
     }
   }
-  .mine{
+
+  .mine {
     position: fixed;
     left: 0;
     bottom: 0;
@@ -286,7 +331,8 @@ body{
     height: px2rem(128, );
     background-color: #fff;
     box-shadow: 0 px2rem(-2, ) px2rem(8, ) #F4F4F4;
-    .mine_index{
+
+    .mine_index {
       width: px2rem(72, );
       text-align: center;
       font-size: px2rem(24, );
@@ -294,24 +340,28 @@ body{
       color: #999;
       margin-left: px2rem(20, );
     }
-    .mine_avatar{
+
+    .mine_avatar {
       width: px2rem(88, );
       height: px2rem(88, );
       border-radius: 50%;
       margin: 0 px2rem(24, );
     }
-    .mine_nick{
+
+    .mine_nick {
       flex: 1;
       font-size: px2rem(28, );
       font-weight: bold;
       color: #333;
     }
-    .mine_num{
+
+    .mine_num {
       text-align: right;
       font-size: px2rem(24, );
       color: #ccc;
       margin-right: px2rem(40, );
-      p{
+
+      p {
         font-family: 'din';
         font-size: px2rem(32, );
         font-weight: bold;
@@ -322,7 +372,6 @@ body{
   }
 }
 
-::-webkit-scrollbar{
+::-webkit-scrollbar {
   display: none;
-}
-
+}
\ No newline at end of file
diff --git a/view/peko/modules/room_rank/css/hourRank1.css b/view/peko/modules/room_rank/css/hourRank1.css
index a89a6b7..f632772 100644
--- a/view/peko/modules/room_rank/css/hourRank1.css
+++ b/view/peko/modules/room_rank/css/hourRank1.css
@@ -182,6 +182,10 @@ body {
   height: 0.9066666667rem;
   margin-top: 0.2666666667rem;
 }
+.wrap .rank_wrap .top_three_wrap .item2 {
+  left: 50%;
+  transform: translateX(-50%);
+}
 .wrap .rank_wrap .desc {
   display: flex;
   margin-top: 0.5333333333rem;
diff --git a/view/peko/modules/room_rank/css/hourRank1.scss b/view/peko/modules/room_rank/css/hourRank1.scss
index 78c078f..94d59db 100644
--- a/view/peko/modules/room_rank/css/hourRank1.scss
+++ b/view/peko/modules/room_rank/css/hourRank1.scss
@@ -203,6 +203,10 @@ body{
             }
         }
       }
+      .item2 {
+        left: 50%;
+        transform: translateX(-50%);
+      }
     }
 
     .desc{
diff --git a/view/peko/modules/room_rank/hourRank.html b/view/peko/modules/room_rank/hourRank.html
index 33909f1..0d35cdd 100644
--- a/view/peko/modules/room_rank/hourRank.html
+++ b/view/peko/modules/room_rank/hourRank.html
@@ -20,7 +20,7 @@
         <img src="./images/single/rule-icon.png" alt="" class="rule_icon">
       </div>
     </div>
-    
+
     <div class="rank_wrap">
       <div class="time_wrap">
         <!-- <p id="time_wrap_p1"><span class="h"></span>点小时榜</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@@ -31,6 +31,7 @@
 
       <div class="top_three_wrap">
         <img id="hour_top_bg" src="" alt="">
+
       </div>
 
       <div class="desc">
@@ -60,11 +61,11 @@
   <script src="../../common/js/layer.js"></script>
   <script src="../../common/js/vconsole.min.js"></script>
   <script src="./local/zh.js"></script>
-	<script src="./local/en.js"></script>
-	<script src="./local/ar.js"></script>
-	<script src="./local/id.js"></script>
-	<script src="./local/tr.js"></script>
-	<script src="../../common/local/langHandler.js"></script>
+  <script src="./local/en.js"></script>
+  <script src="./local/ar.js"></script>
+  <script src="./local/id.js"></script>
+  <script src="./local/tr.js"></script>
+  <script src="../../common/local/langHandler.js"></script>
   <script src="./js/hourRank.js"></script>
 </body>
 
diff --git a/view/peko/modules/room_rank/js/hourRank.js b/view/peko/modules/room_rank/js/hourRank.js
index 44be9d9..401f5b0 100644
--- a/view/peko/modules/room_rank/js/hourRank.js
+++ b/view/peko/modules/room_rank/js/hourRank.js
@@ -95,10 +95,10 @@ const renderLastHourThree = () => {
     const langReplace = window.lang.replace;
     const localLang = window.lang;
     let noAvatar1 = langReplace(localLang.demoModule.noAvatar1)
-    let noAvatar2 = langReplace(localLang.demoModule.noAvatar2)
+    let hour_top_bg = langReplace(localLang.demoModule.hour_top_bg)
     let noAvatar3 = langReplace(localLang.demoModule.noAvatar3)
     str += `
-      <div class="top_three_item">
+      <div class="top_three_item item${index}">
         <div class="avatar" data-uid=${item.uid}>
           <p></p>
           <img src="${item.avatar ? item.avatar : noAvatar1}" alt="">
@@ -229,6 +229,7 @@ $(function () {
     initLocalLang();
     translateFun();
     getHourList()
+    renderLastHourThree()
 
   }, 50)